This site provides information and resources for the web design training provided by B2B Web Consultants.
How web pages are made
A web page consists of HTML code and images. What you see in your browser window us not the HTML code but the readable web page. The code is read by your web browser - it is a series of instruction to the browser telling it what to put into the browser window.
Information about HTML
HTML stands for "Hypertext Markup Language" - its the special kind of code that web pages are written in. Check out the definition given in Wedopedia.
Much of what you might need to know about html will be found in the HTML Help Site.
The position of text and images on the page is controlled by layout tables. These are made up of rows and columns and the text and images appear in cells.
One other way of placing an object on a web page is to use a layer. The position of the layer is achieved by co-ordinates - so many pixels across by so many pixels down.
An old fashioned method of controlling the appearance of web pages was to use FRAMES. This allowed one part of the web page to remain static (usually the bit showing the table of contents) while another window showed the individual pages of content.
In our view FRAMES is no longer necessary in modern web design.
Formatting text and pages
The format of text on a web page should be govern by STYLE SHEETS. We will be adding a page to WWK soon which is all about styles sheets (sometimes called Cascading style sheets.)
Interactive elements
The great thing about web pages is that they can interact with the user. A common interactive element is the form. You type information info the various boxes on the form and click on the submit button. Your words are then sent in the form of an email.
Navigation
The list of links that you see on pages is the NAVIGATION for a web site. These linsk allow the viewer to move from one page to another as they read their way around the web site.
Planning web sites
Paper based planning is important. If you dive
straight into the keyboard without proper preparation you do not
always save time - you end up wasting lots of it. Un-planned web
authoring leads to mistakes, false starts and much wasted effort
Favicons
A favicon is a small graphic that appears in the
address bar of most browsers (but not all). It can also appear on
link bars and in some favourite or book mark lists.
It is not necessary but most browsers will look
for it when they visit a web page. If the browser cannot find a
favicon an error will be entered into the logs kept by the server.
Error logs can fill up with lines saying "favicon not found"
and hence it is useful to include a favicon in order to stop from
happening.
How to make a favicon
The first thing that you need to do is to create
the image for the favicon. A favicon is just 16 by 16 pixels in
size so it needs to be very simple.
I would suggest that you create the image larger
then this; I start with a size of 64 by 64 pixels. I then shrink
the image down to 16 by 16 pixels and see how it looks. If may take
a while to get an image that works at such a small size so keep
the design simple. The colours must be kept to a total of 16. Use
your graphics software to reduce the number of colours in the image.
Save the image as a .gif
Upload the gif to the root of your website (make
sure it is transferred as a binary file). After it has been uploaded,
change its name to favicon.ico.
You will need to be able to use an FTP client
to select the file and then rename it from .gif to .ico
Each page of your web should have the following
code in its header tags
