Web Design

When it comes to designing your own Websites, you really can teach yourself everything you need to know. This article will introduce some of the fundamental technologies and principles, and hopefully give you a foundation to build your knowledge on as you move forwards.

The difference between Web Design and Development is not a clear one, as they don't really refer to separate disciplines, but rather have an overlap.

In general Web Development covers the full range of technologies that go into the building of Websites and applications running over the Web, which includes programming and scripting of various kinds, as well as database development. Web Design on the other hand, generally refers more to the structure and style of webpages themselves, and is mostly concerned with what happens in the visitor's browser (at the client side).

Web Design then is about the structure of a webpage, and how it appears to the visitor. A page will typically comprise HTML formatted to present your site content in a set way. The discipline of Web Design therefore includes knowledge of how HTML structures work, together with design skills (which will often mean graphic/ visual design working in conjunction Web technologies such as CSS (Cascading Style Sheets), to turn designs into webpages).

HTML is a Markup Language, which means that it 'marks' the parts of a document with tags. If you browse to any webpage and view the page source, using the menu options on your browser toolbar, you'll see the HTML that the page is made up of - don't be alarmed if it looks hugely complicated, as your own pages will initially be a lot simpler.

The HTML is made up of a series of tagged sections, such as 'head' and <body> - these are called elements. Each element will usually contain an opening and closing tag between which a particular part of the document sits: <body>This is the body content <body>

Elements can also contain other elements embedded within them, and basically divide the content of your page into sections. The <head> section holds general information about the page, such as links to external scripts and style sheets, the title of the page etc. The body contains the main content of the page, and features such elements as <div> for a basic division,

for a paragraph, and many other element types to hold the text, images etc that your page contains.

A basic page, saved on the server as mypage.html for example, might have the following overall structure:

There are rules that dictate whether or not an HTML page is 'well-formed', which your pages need to be for the browser to be able to display them properly. Basically a page is well-formed if there are no errors in the syntax (e.g. missing tags, typos etc). As well as this basic measure of how well structured your pages are, there are also a number of standards that you can optionally conform to. The standards are laid out by the World Wide Web Consortium (W3C) and are partly intended to make webpages accessible to as many different visitors as possible - hence the term 'accessibility', which is used regularly with reference to Web Design.

By Robin Fowler

The main thing to bear in mind when you start designing and constructing webpages is to separate content from formatting. The content of your site is the data, text, images, video and whatever else you plan on having on there. A basic HTML page should present this content in a set structure, but the HTML itself should not necessarily dictate how the page should be formatted.

The formatting of your page should be laid out in 'style rules' - these most commonly will be set out in the form of a Cascading Style Sheet (a .css file on the server). The style rules can actually be contained within the HTML page (either in the <head> section or 'inline' within the content of the page) but it is generally recommended to keep your style rules separate from the HTML itself, in which case your <head> section will contain a link to the style sheet:

for example, where you have the file mystyle.css sitting on the server in the same directory as the page.

The style rules contained within a .css style sheet basically give instructions for how each of the elements and sections within the page should be formatted, for example in terms of the fonts used, colours and dimensions. An example style rule might be:

div
{width:500px;}

which states that all <div> elements in the page should be 500 pixels wide. There are a number of options when it comes to CSS rules, and you can tailor different parts of your sites using them. For example, if you have certain <div> elements that you want to display differently, you can assign them a class attribute:

<div class="narrow">this is the content of the narrow div</div>
<div class="wide">this is the content of the wide div</div>

and in the style sheet:

div.narrow
{width:200px; background:blue;}
div.wide
{width:600px; background:green;}
so that the two types of <div> elements will be displayed differently.

You can define your formatting with 'fixed' references as above where we used specific widths in pixels, or you can use 'relative' values, which is more flexible:

div.narrow
{width:20%;}

meaning that the <div> should occupy 20% of the width of the element which contains it.

When you design a webpage, it's worth bearing in mind that it will look slightly (and often very) different in other Web browsers. The browser and operating system that a visitor is using will affect how your page is displayed, which is why Web Designers test their pages for 'cross browser compatibility'.

If your pages don't look the way you want in different browsers, you can opt, for example, to use different style sheets for different browsers, detecting which browser a visitor has using script such as Javascript. However, one of the advantages to conforming to the various standards is that often this makes your sites automatically more cross browser friendly.

As well as the HTML and CSS, a typical webpage might also use client side scripting such as Javascript, which can be used to tailor the style and appearance of the page, and to bring in interactivity such as effects when the visitor rolls their mouse over the page. However, this is an optional measure and will not be necessary for your initial webpages.