Web design tutorial Archives

HTML Tutorial 02 – code made simple

November 22, 2009 by Roy Johnson

1. You can produce web pages using a simple word processor such as Windows NotePad or WordPad. The files you produce should be saved with an .htm extension.

2. The files can contain text, colour, and pictures [even sounds] – but they also contains HTML code.

3. HyperText Markup Language (HTML) uses ‘tags’ to send instructions to a web browser that will ‘read’ the web page. The browser then arranges the appearance of the text on screen.

4. The tags are a code which is placed between angled brackets – <H1> Here is a level one Heading </H1>.

5. Note that the tags are placed around any text you wish to affect. They commonly begin with one tag <H1>, and then they are switched off with another, </H1>, which contains an olbique stroke.

6. <H1>Heading</H1> – shows headings raging from big and bold at size 1 – to 6 – which is quite small.

7. You can also change the size of text on the page from 1 to 6 by enclosing the text between FONT SIZE tags

<FONT SIZE=”4″>produce text size four</FONT>

8. Notice that in this case the numbers 1 to 6 range from small to large.

9. Browsers show text at SIZE=”3″ unless told to do otherwise.

10. You can also change the colour of the text on the page – but note that the tag requires the US spelling of COLOR.

11. The text between the tags will appear in colour:

12. The <P> tag inserts a double space to start a new paragraph.

<P>
Here is the text of one paragraph, which is shown to illustrate the use of the paragraph tag.
</P>
<P>
And this is the start of the following paragraph, which as you can see has been separated from the first with a space.
</P>

13. The <BR> tag forces text to start on the next line down.

Here is a short statement.<BR>
The tag has been used to force the next sentence to begin on a new line.

14. The <HR SIZE=1> tag inserts a Horizontal Rule. The size of the line goes from 1 (most narrow) upwards, with 3 as the default.

15. There are two types of list – ordered and unordered. These are created by using the tags <OL> and <UL>. The first automatically numbers the points in the list, the second creates bulleted points.

16. The items in the list are created by using the <LI> tag. Notice that each point is automatically indented.

17. This is an example of coding for an ordered list:

<OL>

<LI>List item number one</LI>

<LI>List item number two</LI>

<LI>List item number three</LI>

</OL>

This will be show on the screen as follows:

List item number one
List item number two
List item number three

18. This is the coding for an unordered list:

<UL>

<LI>List item number one</LI>

<LI>List item number two</LI>

</UL>

This will be shown on the screen as follows:

List item number one
List item number two

19. Emphasis is added to text using the BOLD and ITALIC tags, which are shown as <B></B> and <I></I> respectively.

20. Here is some text which is shown in bold and then in italics.

21. You can combine tags – by making text both bold and italic for instance. Here is bold italics.

22. The tags must be correctly nested. That is, they must be added and removed in the correct sequence (or syntax).

<B><I>bold italics</I></B>

23. You can also insert an extra space by using the non-breaking space tag –   (which does not come in angled brackets).

no spaces	abcdefgh
extra spaces	a b c d e f g h

24. That’s a quick run through some commonly used tags. Here are some general tips on writing the code.

General points

You can type tags in upper case <FONT SIZE=4> or lower case <font size=4>.
Do not miss out any angled brackets <these> or quote marks “these” – or the code will not work.
Do not insert any spaces, as in <FONT C OLOR=RED> or the code will not work.
You can combine tags, but they must be correctly nested, as in <B><I>EXAMPLE</I></B>.

NB! This is an extremely simplified account of HTML coding. The appearance of most web pages these days is controlled by style sheets. But the principles shown here are still working underneath.

HTML Tutorial 03 – page template

November 22, 2009 by Roy Johnson

1. A basic web page is fairly simple. You should COPY then SAVE the template shown below.

2. Copy the template into a word-processor, then save the file as template.htm.

3. Use a very simple word-processor, such as Windows NotePad or WordPad. Others, such as Microsoft Word, will try to add its own HTM code – and that will be confusing.

4. Then open the file template.htm, add your own text to the page, and SAVE AS filename.htm, where ‘filename’ is a word of your choice.

5. Give it a name, don’t leave any spaces, and use all lowercase letters. That is, avoid using capital letters in web page filenames.

6. You can view the results by opening the page in your web browser.

7. To do this, go to FILE then OPEN PAGE, and type the pathname into the dialogue box. Alternatively, use the Browse feature to locate your file – filename.htm.

8. Don’t type the statements between the square brackets.

<HTML>

<HEAD>

<TITLE>

[ Insert the title of your page here ]

</TITLE>

</HEAD>

<BODY>

<H1>

[ Insert the main heading of your page here ]

</H1>

<P>
[ Start the text of your page here ]

</P>

<P>
[ Insert more writing here ]
</P>

</BODY>

</HTML>

HTML Tutorial 04 – common tags

November 22, 2009 by Roy Johnson

Tag(s)	Function/Name
<P></P>	paragraph
<BR>	break [new line]
<B></B>	bold
<I></I>	italics
<H1></H1>	heading
<A HREF=”name.htm”></A>	hypertext link
<IMG SRC=”name.gif”>	link to image source
<HR SIZE=1>	horizontal rule
<CENTER></CENTER>	centre
<FONT></FONT>	font size/colour
<OL></OL>	ordered list
<UL></UL>	unordered list
<LI></LI>	list item
<TABLE></TABLE>	table
<TR></TR>	table row
<TD></TD>	table data

Tag(s)

Function/Name

<P></P>

paragraph

<BR>

break [new line]

<B></B>

bold

<I></I>

italics

<H1></H1>

heading

<A HREF=”name.htm”></A>

hypertext link

<IMG SRC=”name.gif”>

link to image source

<HR SIZE=1>

horizontal rule

<CENTER></CENTER>

centre

<FONT></FONT>

font size/colour

<OL></OL>

ordered list

<UL></UL>

unordered list

<LI></LI>

list item

<TABLE></TABLE>

table

<TR></TR>

table row

<TD></TD>

table data

HTML Tutorial 05 – common problems

November 22, 2009 by Roy Johnson

1. Everybody runs into technical problems when they first create Web pages. Don’t feel bad about it. Just learn from your mistakes.

2. The most common problems are caused by small details and the need for complete accuracy.

3. Filenames must be spelled accurately. They should not contain any spaces, and some keyboard characters – such as /, &, and @ – are not allowed. [These are reserved for transmitting data over the Web.]

4. It is safest to use all lower-case letters. Some computers will treat filename.htm and Filename.htm as different files.

5. Tags must be opened and closed rigorously. If you type the following, it will not work:

<B>Put this in bold<B>

This is because the tag has not been properly closed with </B>.

6. The same would happen if you were to miss one of the angled brackets – <B>Put this in bold /B>.

7. HTML code must be completely accurate. The following examples all contain mistakes:

<A HREF=”filename.htm>filename</A>

<BODY BGCOLOUR=”AQUA”>

<FONT SIZE =”5″>some text here</FONT>

8. In the first example, one double quote mark is missing; in the second the spelling is incorrect; and in the third, there is a space. The correct codes are:

<A HREF=”filename.htm”>filename</A>

<BODY BGCOLOR=”AQUA”>

<FONT SIZE=”5″>some text here</FONT>

9. Missing items. It is very easy to omit a small element of code – especially if you are keying it in manually. For instance if you typed –

<A HREF=”filename.htm”filename</A>

– this would not show up on the screen. In fact nothing you typed after it would appear. That’s because the angled bracket is missing after the file name.

10. Bad syntax. Tags must be opened and closed in the correct sequence. The following is an example of incorrect ‘nesting’ of tags.

<FONT SIZE=5><B>big and bold</FONT></B>

This is the correct sequence:

<FONT SIZE=5><B>big and bold</B></FONT>

HTML Tutorial 06 – adding colour

November 22, 2009 by Roy Johnson

1. The default background colour of a web page is grey – which is not very exciting.

2. That is, grey is the colour which will show in a browser window unless you tell it to do otherwise. Web design guru David Siegel says that web pages such as this are – “like slide presentations shown on a cement wall”.

3. There are three easy ways to add colour to your pages:

use FONT COLOR for text
use BACKGROUND COLOR for the page
use a graphic for a ‘background wallpaper’ effect

4. Let’s look at each of these options in turn.

The font colour tag

5. When you specify the FACE or SIZE of your FONT, you can also say what COLOR you want it to be.

<FONT=”Arial COLOR=”RED”>my web pages</FONT>

This would produce the following effect.

The words ‘my web pages‘ are coloured red.

6. Other common colours are as follows.

Aqua – Fuchsia – Olive – Green – Lime
Blue – Maroon – Teal – Navy – Purple

Background colour

7. Background colour can be used to give colour to a page.

8. The code is inserted into the <BODY> tag at the top of your page. Notice that the term ‘background’ is abbreviated to BG.

<BODY BGCOLOR=”AQUA”>

9. The problem with most of the standard colours is that they are rather strong. They are too demanding, not quiet enough.

10. It is better to choose something more quiet and restrained.

BGCOLOR=”WHITE” is always safe.

BGCOLOR=”#FFFFEF” is more subtle.

[Don’t ask! Just use “#FFFFEF”.]

11. Note that the tag must be given its American spelling of COLOR. This is a very common technical problem.

Tiled graphic file

12. You can also create a coloured background for your page by using a graphic image. This will be ’tiled’ [repeated to fill the space] by
your web browser.

14. The code goes into the BODY tag at the head of your page. Notice that in this case the full term BACKGROUND is used.

<BODY BACKGROUND=”stripe.gif”>

15. You would save the graphic file ‘stripe.gif’ in the same folder as your .htm page.

16. But a tiled graphic makes reading more difficult. It almost always results in a visually disruptive page.

17. It’s usually much better to use a single colour – one which is muted and subtle. Choose something against which black text will stand out clearly.

18. Here are a good example and a ridiculously bad example.

HTML Tutorial 07 – page anatomy

November 23, 2009 by Roy Johnson

1. Let’s look at each section of a typical HTML page. We’ll see what the code means and what it does.

2. Much of this might seem pretty boring at first – but you will realise later why it can be important.

3. First of all, here is the absolute basic minimum HTML page.

<HTML>

<HEAD>

<TITLE>

Page title

</TITLE>

</HEAD>

<BODY>

Here is the page content

</BODY>

</HTML>

4. You can see that the structure of the page is a HEAD section, which contains the TITLE, and a BODY section, which contains the contents of what will appear on the page.

5. The first item is actually the <HTML>. This tells the browser “What follows is going to be an HTML page”. Like all the other tags, it is enclosed in angled brackets.

6. The next item is the <HEAD>. This section of the page can contain all sorts of technical data – which we’ll come to in a moment. For now, we’ll notice that it contains the TITLE of the page.

7. The <TITLE> does not appear on the page – so don’t look for it there. It appears at the top of your browser window – saying something like “Page title – Mozilla Firefox” or “Page title – Windows Internet Explorer”.

8. Next comes the <BODY> section. This contains the information you wish to appear in your page. It could be text, graphics, audio files, or even movie clips.

9. Note that each one of these tags must be opened – then closed. Otherwise, the page will not show up in your browser.

10. And that’s it! Those are the basic elements of a web page. But now let’s look at some of the additional features which might appear. For this we go back to the top of the page.

11. The other item which commonly appears in the HEAD section of the page is META data. That is, information about the content of the page. This is usually a DESCRIPTION of the page, and KEYWORDS which summarise its most important topics.

12. This information does not appear in your browser window. It is intended for search engines. They visit your pages [maybe] and want to know how to categorise them and what they contain.

13. Another thing you might see at any point in a web page is COMMENTS.

<!– these are comments –>

14. Anything which appears between <! and > will not show up when you view the page in a browser.

15. What use are these? Many designers use comments to mark special sections of their pages – as in the following example. They make editing easier at a later date.

<!– ######## START OF MAIN TOPIC ######## –>

16. There are many other elements you might find in a typical HTML page – but these are the most basic. Just remember that unless you open and close all your tags correctly, the page may not show up in your browser.

See the page of common problems for examples.

HTML Tutorial 08 – questions of taste

November 23, 2009 by Roy Johnson

1. Too much text
Some people put far too much text into their pages, and often don’t have margins or breaks between paragraphs. The result is a screen full of text – which is difficult to read. Use plenty of space around your text. It will look more attractive and be easier on the eye.

2. Bad colours
Combining coloured backgrounds with coloured text is dangerous. It can work if it is done with restraint – but many people are attracted to colours which clash and vibrate. For good results – ‘less is more’ is often the case so far as color is concerned.

3. Tiled backgrounds
Background graphics can often make text difficult to read. When a .gif file is tiled across a page, the resulting pattern often creates an effect which is visually disruptive. Use only very pale graphics.

4. Large graphics
These take up a lot of space, and can take a long time to download. People viewing your pages will switch off and go elsewhere. Shrink your pictures in a graphics editing package.

5. Long pages
Most people dislike scrolling through very long pages. They will often not read beyond 2-3 screens of text. The solution is to create separate pages, and put links between them.

6. Hit counters
These make any web site look very amateurish. If your web site is a hobby, you don’t need them. If it is commercial, you will not want to reveal this information. If you are determined to have one, it’s possible to make it invisible. You can record the ‘hits’ – but other people don’t see the results.

7. Animated graphics
These usually distract attention from what you have to say, and they generally look tacky. Unless they are very small, very subtle, and in non-conspicuous positions – leave them off your pages.

8. Garish colours
Your site will look cheap, amateurish, and vulgar if you use too many bright colours. The same is true of bad clip art and animated graphics. Yellow and blue starbursts against a speckly purple background will look naff. Leave those for the funfair.

9. To see a very funny and truly awful collection of bad taste designs, visit the following web site:

Budugllydesign.com

10. Well-designed web sites are often based on one of the most memorable slogans to come from the design profession – “Less is more”.

HTML Tutorial 09 – text and graphics

November 23, 2009 by Roy Johnson

1. Once you have managed to produce a web page full of text, the next thing you usually want to do is add some graphics.

2. You add the graphics using the simple tag –

<IMG SRC=”filename.gif”>

This is inserted into the page at the place where you want the graphic to appear. And the graphic file would need to be saved into the same folder as your filename.htm page.

3. But the graphic will simply appear on the page with text before it and after it. You would probably prefer the text to wrap round the graphic, in the same way that the text is doing here – wouldn’t you? This makes for a neater and more interesting page. Incidentally, your graphic can also be a link. If you click the book cover here, you will be taken to Amazon, where you can order the book. Here’s how to wrap the text around the graphic.

4. Add the following INSIDE the tag

align=”left” [or right]

hspace=”x” [where x=number of pixels]

vspace=”x” [where x=number of pixels]

So the tag should look like this:

<IMG SRC=”filename.gif”align=”left” hspace=”10″ vspace=”5″>

5. This creates a 10 and 5 pixel gap around the side and the bottom of the graphic – to stop your text bumping into the picture.

6. Experiment with the x=number to see the effect.

7. If you want to add another refinement, you can add a border.

border=”x” [where x=number of pixels]

8. And you should set x=0 for no border.

9. You can also add a title:

alt=”Picture courtesy of Media-Pics plc”

10. This will show up on screen when you move your cursor over the graphic. It is NOT a caption to the picture.

11. And you might wish to add the size of your graphic file.

width=”x” [where x=number of pixels]

height=”x” [where x=number of pixels]

12. You find these dimensions by opening the graphic file in your graphics editor and looking at the size or dimensions.

13. Adding the dimensions will help your page download faster – because the browser knows how big a space to leave for the picture before it starts loading.

14. So – here’s an example of all these features in one tag. The items are on separate lines to make them easier to read.

<IMG SRC=”../graphics/hafner.gif”

align=”left” hspace=”7″ vspace=”5″ border=”0″

alt=”The Origins of the Internet”

width=”90″ height=”140″>

Get in touch