HTML for Beginners

1
HTML for Beginners

• S2 Computing

2
Part 1

• The Basics

3
What is HTML ?

• It is a code or language which is used for
  designing WEB pages.
• In this course, you will begin by learning the
  basics of HTML.
• You will then use what you have learned to design
  your own RHS WEB pages !

4
HTML Tags

• Each command or instruction in HTML is known as a
  tag.
• Tags are always written inside angle brackets.
  Its also a good idea to use upper case letters
  to make them easy to identify, as in this example
  ltHEADgt
• Tags are generally used in pairs one to open
  an instruction and one to close it again. The
  closing tag begins with a forward slash, as in
  this example lt/HEADgt

5
Writing a Program

• The opening tag must always be ltHTMLgt. This
  tells the computer that you are constructing a
  WEB page.
• The rest of your program falls into two parts
  the head and the body.
• The head is very short and contains only one tag
  ltTITLEgt. This is rather like a filename, as it
  appears in the browser bar at the top of the
  window and not on your actual WEB page. You
  should keep this title simple, eg My Homepage.
• The body will be much longer, as it contains all
  the instructions to produce your actual WEB page
  as you want it to appear on screen.

6
A Simple Program

• ltHTMLgt
• ltHEADgt
• ltTITLEgt My First Program lt/TITLEgt
• lt/HEADgt
• ltBODYgtThis is a very simple program which
  displays black text on a silver background. It
  contains no fancy styles, fonts or sizes !
  lt/BODYgt
• lt/HTMLgt

• In the example opposite, you can see how a
  program is put together. Study it carefully !
• Notice that HTML must be opened at the start of
  the program and closed at the end.
• Notice also how tags are always closed in reverse
  order once they have been completed.

7
Saving Your Work

• It is always very important to save your work,
  but with HTML you need to save it twice, in two
  different ways as follows -
• First of all you must save your ClarisWorks file
  in the usual way to your home directory. This
  means that you will be able to open that file and
  edit your program if necessary at any time.
  
• Secondly, you must save the same file again to
  your home directory as a text file, adding .htm
  to its file name. This means that you will be
  able to view it as a WEB page, using an Internet
  browser such as Internet Explorer or Netscape
  Navigator.

8
Exercise 1

• Open a new Word Processing page in ClarisWorks.
• Key in the program displayed opposite.
• Select Save As from the File menu and save the
  program to your home directory in the usual way,
  giving it the file name Task1.
• Select Save As again, but this time change the
  type of file to Textfile. Now add .htm to the
  file name. (ie Task1.htm)
• You are now ready to view the page using
  Netscape.

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Task 1 lt/TITLEgt
• lt/HEADgt
• ltBODYgt This is my very first HTML program to
  display text on a WEB page! It is very simple
  and contains no exciting colours, styles or
  fonts.lt/BODYgt
• lt/HTMLgt

9
Viewing your WEB Page

• Open your Internet browser - we shall be using
  Netscape Navigator.
• Select Open Page from the File menu.
• Click on the Choose File button.
• Move to your home directory and select the file
  you wish to open - eg Task1.
• Open the file.
• Your WEB page will now be displayed on screen.

10
Exercise 1

• This is what Task 1 should look like when you
  view it -

11
Using Colour

• The first program was rather boring - it would be
  much more eye-catching if it contained colour.
  There are two tags which allow you to do this
  one changes the background colour, the other
  changes the colour of the pen. Look at the
  following examples -
• ltBODY BGCOLOR limegt This will change the
  colour of the background to lime green.
• ltFONT COLOR orangegt This will change the
  colour of the writing to orange.
• Notice that both these tags use the American
  spelling of the word colour ! They wont work
  if you spell them wrongly !
• There are lots of different colours to choose
  from - try experimenting with different
  combinations !

12
Exercise 2

• Open your Task1 file in ClarisWorks.
• You are now going to alter it slightly to add
  colour.
• First of all, change the TITLE to Task 2.
• Now insert the background colour tag immediately
  after ltBODYgt, choosing any colour from the list
  except silver.
• Immediately after this tag, insert the pen colour
  tag, again choosing any colour from the list
  except black.
• Remember to close these tags by inserting lt/FONTgt
  just before closing the body tag.
• If in doubt, use the example opposite to help
  you. Save your work as Task 2.

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Task 2 lt/TITLEgt
• lt/HEADgt
• ltBODYgtltBODY BGCOLOR bluegtltFONT COLOR redgt
  This program will display red text on a blue
  background, but it is still not very interesting
  !! lt/FONTgtlt/BODYgt
• lt/HTMLgt

13
Exercise 2

• This is what Task 2 should look like when you
  view it -

14
Using Different Styles Sizes

• Another way in which you can make text more
  interesting is to vary the styles and sizes which
  you use there are tags for bold, italics and
  underlining, as well as six different sizes of
  font. Look at the examples below -
• ltBgt This makes your writing bold.
• ltUgt This underlines whatever words you choose
• ltIgt This gives you italics.
• ltH1gt This is used for the biggest size of
  writing.
• ltH3gt This is for an average size.
• ltH6gt This is the smallest size.
• (NB You can choose any number between H1 and H6)

15
Exercise 3

• Open your Task2 file in ClarisWorks.
• You are now going to change the style and size of
  the text as follows -.
• First of all, change the TITLE to Task 3.
• Now insert the tags for large size, bold and
  underline after the colour tags. Add the words
  Using Styles and Sizes and then close the
  underline and size tags.
• Next, open a smaller size of text and add the
  italics tag. Complete the text as shown in the
  example opposite.
• Remember to close all the tags in reverse order.
• Finally, save your work both ways as Task3, then
  view it in Netscape.

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Task 3 lt/TITLEgt
• lt/HEADgt
• ltBODYgtltBODY BGCOLOR bluegtltFONT COLOR redgt
  ltH1gtltBgtltUgt Using Styles Sizes lt/Ugtlt/H1gtltH2gtltIgt
  This program uses the same colours as Task 2, but
  it also has a large heading, underlined and bold.
  The rest of the words are smaller and written in
  italics. lt/Igt lt/H2gt lt/Bgt lt/FONTgtlt/BODYgt
• lt/HTMLgt

16
Exercise 3

• This is what Task 3 should look like when you
  view it -

17
Changing the Layout

• Even if you add colour to your page and vary the
  styles and sizes as you have learned, it still
  may not be laid out in the way you want. So far,
  all the text is at the left hand side of the page
  and there are no blank lines to space things out
  ! Try using some of the following tags to
  improve the layout -
• ltCENTERgt This moves either text or graphics to
  the middle of the line.
• ltP ALIGN RIGHT) This moves text or graphics to
  the right hand side of the page.
• ltPgt This allows you to take a new paragraph or
  line.
• ltBRgt This forces a line break. You can repeat
  it if you wish to leave more than one blank
  line.

18
Exercise 4

• Open your Task3 file in ClarisWorks.
• You are now going to alter the layout of the page
  as follows -.
• First of all, change the TITLE to Task 4.
• Now insert the tag for centre alignment after the
  style tags and change the heading to Page
  Layout. Close the centre tag and then add the
  tags for two blank lines before the next words.
  Amend the text as shown opposite. Place the last
  sentence on the right hand side of the page,
  again following the example.
• Finally, save your work both ways as Task4, then
  view it in Netscape.

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Task 4 lt/TITLEgtlt/HEADgt
• ltBODYgtltBODY BGCOLOR bluegtltFONT COLOR redgt
  ltH1gt ltBgtltUgtltCENTERgt Page Layout
  lt/CENTERgtlt/Ugtlt/H1gtltPgtltBRgtltBRgt ltH2gtltIgt This page
  looks much more interesting because the heading
  is in the middle of the line and the text is
  spaced out more. ltPgtltP ALIGN RIGHTgt Words can
  even be placed ltP ALIGN RIGHTgt on the right
  hand side of the page.lt/Igt lt/H2gt lt/Bgt
  lt/FONTgtlt/BODYgt
• lt/HTMLgt

19
Exercise 4

• This is what Task 4 should look like when you
  view it -

20
Revision Exercises

• The following tasks will help you to revise the
  work which we have covered in Part 1. Try to
  complete as many of them as you can. You should
  use your TAG sheet to help you write the code
  before going to a computer
  
• 1. Display your name in large italics a) in
  the middle of the top line b) in the middle of
  the page.
• 2. Using a coloured pen on a coloured background,
  display your name and address on separate lines.
  Your name should be bold and underlined.
• 3. Display your three favourite TV programmes
  with two blank lines between each as follows
  first choice at left hand side second choice in
  the middle third choice at right hand side.
  Make appropriate use of colour, size and style.