Contents |
This page is the first in a series on the basics of web design. On this page you will get a quick website behind the scenes explanation. The aim is to give you a basic understanding of what a website is in the eyes of a web builder to provide a foundation for understanding the basics of HTML, CSS and Javascript.
To a web user a website is what is displayed in your web browser. Whereas to a web builder a website is a collection of interlinked files. These files contain code that is translated by your web browser into what you see in your browser. In general the code in which a website is written is separated into different files depending on its function. For now we will focus on a basic website with interaction. In this case the files of our website have three different functions:
Our website will therefore contain three different file types, one for each function. Each file type contains its own type of code, called a web language. The code used for structuring the content of a web page is called HTML (HyperText Markup Language). How the content will be displayed in your browser is defined in CSS (Cascading Style Sheets). Finally (user) interaction can be added by using Javascript (or JS in short). The following scheme illustrates this setup:
See Live view and click on the 'black title bars' to see the added interaction.
In short a website is a collection of interlinked files:
Each of the languages HTML, CSS and Javascript will be explained further on their own page. As stated the files are interlinked as is explained under website structures.
You do not have the Flash plugin installed, which means you are missing out on great interactive content. Download Flash.
source: WhatBrowser.org
Web browsers translate the files of your website into what you see on your screen as illustrated in the scheme above and clearly explained in the video on the right. The most used web browsers today are Mozilla Firefox (FF), Microsoft Internet Explorer (IE), Opera, Apple's Safari and Google Chrome. And of these different browsers also a lot of different versions are being used by different web users. This is important to know because different browsers and versions will display the same files of your website differently. When not explicitly defined how for instance a heading should look it might have a different font, size or weight in IE than in FF. As a web builder you need to learn how to build your website in a way that it can adapt to these differences.
