Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Articles
The Anatomy of a Website
Introduction
One of the key things when attempting a website is to understand the various elements that go to make up a fully-functioning website. In this article I will guide you through a well-organised website structure, some of the files you would expect to see and then into a web page itself. I will re-direct you to various tutorials and articles I have written previously, to help to build your knowledge base.
A Website 'Address'
A website address is called a URL or 'Uniform Resource Locator' and is the unique name that will lead visitors straight to a website. You have probably seen that a URL for every page you visit on the web appears in the 'address bar' on your browser.
A URL usually consists of a website name followed by a TLD (Top Level Domain) such as '.com', '.co.uk', '.biz', '.net' and so on. Next comes a specific page name, such as, 'index.html' or 'contact.html'. This whole string of information tells your browser where the page you want to look at is located.
There are quite a few extra principles to understand when you get into it but this is the basic idea and all you should need for the purpose of this article.
Folder Structure or Contents of the Public Folder
The first thing to cover is that your website server space will usually have what is called a 'public' folder. This is the folder that contains the files that you want to be viewed by the public as your website. This folder can be named differently depending on which hosts you use but some common names are 'root', 'htdocs' and 'public'. When you first open up your website folder structure on the server you may notice that there are some 'private' folders as well. You can use these but bear in mind that your public website will need to be in your 'public' folder.
It is wise, when planning a website, to think carefully about your folder structure within the 'public' folder. It makes no sense to have files spread out across all of your folders because, when your website gets bigger, you will start to struggle to find stuff again. I know what elements I am likely to have in my website before I start so will tend to lay my folder structure out before I start. An example of a folder structure might look something like this;
As you can see from the example I have divided my site elements into descriptive folders. 'images', flash', 'js (short for javascript) and so on. My main html pages, however, are not in a folder. They are 'loose' in the 'root' or 'public' folder. There is a good reason for this. You will notice from surfing the web that all websites will have a 'home' or 'index' page. This is the page that the URL of your website points to when it is typed in to a browser address bar. For example;
http://www.yoursite.com
Will take you straight to the same page as;
http://www.yoursite.com/index.html
But it needs to be in your 'public' folder for it to work. So, to my mind, it makes sense to keep all of your html pages in the same place.
Background Files
These are the files that make your website 'tick'. I would include any CSS stylesheets, javascript, flash movies, PHP files and so on. More often than not, these are 'linked' into a website page using either a root relative or full URL. You can easily tell the difference. A relative URL references the root folder of the website (as explained earlier in this article). Here is an example;
<link href="css/main.css" rel="stylesheet" type="text/css">
On the other hand, a full URL will contain the entire website address of the file and will look something like;
<link href="http://www.corrosiveonline.co.uk/css/main.css" rel="stylesheet" type="text/css">
Web Pages
So, what about web pages themselves? Web pages are the network of pages that knit together using 'hyperlinks' to make up a website. You may think I am teaching you to suck eggs here but it may be useful for others to understand what a website consists of. The pages of a website are written mainly in a language called 'HTML' or 'Hypertext Mark-up Language'. This language provides the structure of a website page. For example, having two columns, a header title and three paragraphs on a web page will make use of a variety of HTML Tags to tell the browser that is what the structure is.
The masses of code on some pages can be quite daunting when you first look at it but I will try explaining what each part does. An HTML page can be split down into a few levels and these are laid out here. It is worth remembering that none of the contents of a page will be displayed in the visitor's browser until they get to the 'Body' Tags. This means that everything above the opening 'Body' Tag is hidden from view, but it is still very important.
Doctype
The doctype tells the viewer's browser how to 'parse' or 'render' your page. There is not just one type of HTML, there are actually many: HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict, and many more. Here is an example of an XHTML doctype;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
All these types of HTML are defined in their respective W3C specifications, but they are also defined in a machine-readable language specifying the legal structure, elements and attributes of a type of HTML. The main problem with using an incorrect doctype or no doctype at all is that with most families of browsers, a doctype declaration will make a lot of guessing unnecessary, and will thus trigger a "standard" parsing mode, where the understanding (and, as a result, the display) of the document is not only faster, it is also consistent and free of any bad surprise that documents without doctype will create.
Head Tags
The Head Tags contain the links to other files used to make the website work and all the 'page specific' scripts and styles you may want to use. Anything in between the 'Head Tags' is not visible to the visitor when they open up the page in their browser.
If we look at the example above it is possible to pick out the files and other items that make this website tick.
You should notice that the title of the page is enclosed in 'Title Tags'. This should be fairly self-explanatory but it is useful to know that this title is what will be displayed in the Tabs on your browser. The first linked item is the main CSS stylesheet that contains all of the styles for Corrosive Online. Next there is a 'Meta Tag'. These tags contain all kinds of information but this one is specifically the 'description' Meta Tag and it tells Search Engines what the page is about.
The last few items you can see linked in to the page are the CSS stylesheet and the javascript links that power the 'Lightbox2' image viewer that I use on this site. This is by no means an exhaustive list of what you will find between the 'Head Tags' of a website but it should give you a good idea of the kind of things you would expect to see there. Take a look at my article on SEO (Search Engine Optimisation) basics to try and understand a little more.
Body Tags
The 'Body Tags' are the 'business end' of a web page. These are the parts that are displayed in the visitors browser when they land on your page. Websites come in all shapes and sizes nowadays but you will usually find some consistencies between most of the sites on the web. Navigation (as you can see by the buttons at the top and side of this website page)
These links or 'buttons', if that is easier to understand, are called 'hyperlinks' and they are what you use to get around the website, i.e. from page to page. Again, navigation comes in all shapes and sizes and can comprise of HTML, Flash and Javascript elements.
Most websites are also split into columns and will have some kind of 'footer' information as well as you can see on the page you are reading right now. This is called the 'structure' of a page. In my opinion the best websites keep navigation and page structure consistent throughout the site. This makes it easy for a visitor to get around the website and easily find the information they want.
Lastly you will find the text, images, links and other content, such as movie clips, all within the website structure between the 'Body Tags'.
Conclusion
Listing and describing all of the possible elements that go to make up a website and how it is all pieced together would take me about a year and would make for an impossible to follow article. What I have covered here is the very basic anatomy of a website and what you would expect to find but it should be enough to get you kick-started on your website build.
