Course: Year 9 Website design

(last 5 minutes)

None

Enrol me in this course

A short course in web usability and design which builds on the topics covered in Year 8. In Year 9 we improve upon our simple html pages by incorporating css design sheets and hopefully some Javascript.

If you are new to html or remember nothing - start at topic 1
If you remember the basics of first page - start at topic 2
If you are already an html whizz - go to topic 3
If you are already a CSS master - go to topic 4

Introducing HTML and 1st Page (A review)

In this unit we get a quick introduction to the 1st Page HTML Editor. HTML is the "language" of the web; most of what you see on a web page is derived from HTML "tags".

In this introductory week, we aim to become familiar with basic html editing processes. Points to remember about 1st Page:

Keep all your files in one folder (eg ICT | FirstPage). This should include any image files.
Navigate to this folder when you start 1st Page
Save often, it can be a bit flaky sometimes
It's free, you can download it to your home computer if you want to
There is loads of help in 1st Page and on the web for learning HTML

Introducing 1st Page & HTML (new window) file
Where to get the 1st Page editor file
Link to Joe Burn's HTML Goodies site - good place to learn about HTML
Image tags - Mini Tutorial file
Homework for this week

My first HTML page - assignment. Don't freak out I know it's only the first week so this should not be too tough:

Create a basic html page
Include a quick bio and a picture of you
Include a link to your favourite website

Write the name of the folder where you saved your work into the assignment
Where is your html page? (ASSIGNMENT)
Example files you can modify for this homework:

example.txt
Cut and paste text to 1st Page, save as example.html
Flower
You will need to save this image to your web folder in your Z drive
newpage.txt
Cut and paste this, save as newPage.html
Already an html whizz? test yourself here file
Probably the most comprehensive site for learning html, css and javascript file

A little more HTML for you

OK, we have the basics, lets discover for ourselves how to do these things:

Make different-sized headings
Add colours and different fonts
Make a table that illustrates different horizontal and vertical alignments

Introducing CSS

This is pretty cool, oh yes. Although we can put tags in the html page to change the style and colour of headings this is not the best way to do it. This is because, if we change our mind about our chosen colour we have to go and edit every heading.

With CSS we can change the colour of all H1 headings in a document at the same time.

The HTML file contains the content and the CSS contains the style information. In order for this to work properly you must link the stylesheet to the html document as shown in the <head> of the example HTML file.

Simple CSS (part 1) Resource
More CSS re-defining more tags. Resource
CSS tags for the more adventurous - defining where content appears on the page, without using a table.
Using divs to define page layout Resource
An example css file (not so simple) text file
Example html file using CSS text file
The following links take you to resources for learning CSS:
http://www.htmldog.com - cssbeginner file
Interactive CSS tutorials file
Another CSS reference site file
Example of changing line height with css:
Example css class:

.brandnewstyle {
line-height: 150%;
}

Used in html page:

<div class="brandnewstyle">Let's have some text<br>
This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height. This is a paragraph with a bigger line-height.
</div>

Note brandnewstyle can be used with a paragraph as well: <p class = "brandnewstyle">