Folder structure, Images-Copy this folder into your own area.  Save all pages to this folder and all images to your image folder.

Demonstration webpage

Helpful Materials

Below are documents explaining HTML Tags and links.  If you feel confident using HTML you may wish to read them to further improve your knowledge.

HTML

HTML Links


Section 1-Introduction to HTML

Basic HTML. Type the code from the left of the sheet into Microsoft Front Page.  Keep previewing your page to see how it has changed.


You are now going to create a splash page using HTML for your given scenario.  

Links and Pictures.  Creating a splash page.  Use the sheet to create a splash page for your site.  Only use the sheet as a guide.  You must add your own Titles, Images etc.


Section 2-Style Sheets-What is CSS?

HTML/CSS          

You are going to create a fairly plain webpage using HTML.  The style will be added later                                                                                                      

Most pupils are to Click on the code document and copy the code into Frontpage.  You must then alter the code to make the webpage appear as you would like.    
Code

More able pupils are to-Create your own webpage using HTML.  Click on the link below to help you.

Creating your page using HTML

Preview your document to see what you have created

You will now use CSS to create a Style for your WebPages.  Copy the code into note pad

Change the colours and styles so your webpage appears the way you want it to.

Section 3-Creating your style sheet


Section 4-Consistent Style

You now need to create the rest of your WebPages.  You must ensure your pages have a consistent style.

Linking to your style sheet and creating the rest of your pages Only use the sheet as a guide.  You must set your own style for your webpage.


Section 5-Hyperlinks

You now need to create all the hyperlinks for your WebPages.  Click on the link below to find out how to do this.

Creating Links


If you create any other heading sizes on your webpage, ensure you set the style on your CSS sheet and not your webpage. 

For Example


Section 6-Accessibility

Websites now have to cater for people with disabilities.  It is therefore important that your webpage can be easily enlarged to cater for visually impaired users.  Click on the link below to see how to do this.

Visually Impaired


ICT Challenge

If you wish to find try out some more HTMl activities click on the link below.  This will allow you to add features to your webpage which are shown on the example:-Example Webpage

HTML Activities                                                    


Section 7-Classes and CSS

Classes and Visited State


Section 8-Classes and Floats

Floats


Section 9-Float Tables


Section 10-Further CSS activities


ICT Challenge

Below is a document explaining some different CSS Styles and contains some brief tutorials from the internet. If you feel confident using Style sheets you may wish to read them to further improve your knowledge.

CSS Styles