2 Looking inside websites

Learning Objectives

In part 2 you will:

Add hyperlinks to HTML web pages.

Add background colours to HTML web pages.

Add foreground colours to HTML web pages.

Add images to HTML web pages.

Learning Outcomes

Must have completed the basic HTML web page from part 1 and coded some hyperlinks. (Level 5/Developing)

Should add more advanced HTML features such as background/foreground colours and images. (Level 6/ Meeting)

Could do all of the above and complete the extra HTML exercises independently. (Level 7/Exceeding)

Keywords

Words to learn:

  • hexadecimal
  • body bgcolor

Starter

Activity

  • Open web page you created last lesson.
  • Access HTML source code (Right Click then View Source).
  • Add Foreground and Background colour.
  • Insert some images onto the web page.
  • Save file with correct extension.

Web Colours

Web colours are changed using a hexadecimal code.

  • Each colour has 6 characters 1st two characters determine the level of RED 2nd two characters determine the level of GREEN 3rd two characters determine the level of BLUE.
  • Red, Green, Blue characters mix to make other colours.
  • Characters have a # in front of them.
  • Values of each character are scaled 0 – FF (FF = Full).

<body bgcolor=“#FF0000”> = Background Colour Red

Hexadecimal colour codes can be found by clicking the link below.  You will need to ‘keep’ and then ‘open’ the file – it is a bit tricky to open:

Colour picker.

Main

Changing the background colour

Use tags:

<body bgcolor =“ ”>

  • To make the background colour Red:

<body bgcolor=“#FF0000”>

  • Background will appear Red.
  • Add the RED HTML code as you see it in the image below.
  • Save file.
  • Refresh the Browser to view your updated Web Page.

Changing the foreground (text) colour

  • Use tags: <font color =“ ”> </font>
  • To make the foreground colour Green: <font color=“#00FF00”> Text Here </font>
  • Foreground will appear Green.
  • Add the RED HTML code as you see it in the image below.
  • Save file.
  • Refresh the Browser to view your updated Web Page.

Colour contrast

Try out a combination of Background/Foreground colours.  Try to get the Contrast of colours at a good level.  Colours should not clash Text should be easy to read against the background.

Hexadecimal colour codes can be found at:

Colour picker.

Inserting Images into HTML

  • Find a suitable image of the Google logo from the web.
  • Save the file into your Web Design Folder.
  • You will need to save the image as google.gif.
  • Add the RED HTML code as you see it on the image below.

  • Save your file
  • Refresh your browser to show the image

If you finish try adding an image for yahoo  and excite.

Use the w3schools HTML5 tutorials to help you improve your webpage to include the following:

  • Images
  • Bold and italic text
  • Line breaks
  • Paragraphs
  • Sections
  • Hyperlinks to another website
  • A bullet pointed list
  • A numbered list
  • A table