Web Page Design - Continuing Education at Hornby High School
Objective: Introduce website design principles, make a website and publish it on the internet.
Dates: Feb 11 – March 4 (four weeks)
Software: Notepad ++ (hopefully!?)
Instructor: Lee Cunliffe
Course Goals / Outline:
- Create, edit and save web pages
- Perform text formatting
- Insert still images and introduce basic image principles
- Create and edit hyperlinks and anchors
- Create and edit tables
- Employ the principles of efficient page design, including clear navigation controls
- File management: organise material in a hypertext medium
- Divs and Style Sheets for layout
- Sharing content between websites – Google, YouTube, flickr
- Website and image download time
- Upload your files to the internet
General web design resourses:
- www.htmldog.com - rough language, but very good
- www.w3schools.com/html/ - clear and professional
- webmonkey.com/webmonkey/design/site_building/ - good tutorials, includes advanced topics
Week 1
Introduction to HTML: Learn basic markup. Tags, attributes and elements. We'll build a simple web page.
Basic HTML tutorial
Week 2
Introduction to CSS.
Basic CSS tutorial
NB: To make your CSS file:
- In the same folder as your index.html file, navigate File > New > Text Document.
- If you can't see the extension ".txt" at the end of the file name, you need to navigate Tools > Folder Options > View and uncheck the "Hide extensions for known file types" box, then click OK.
- Rename the "New Text Document.txt" to "web.css"
- Open the same as your html file: Right Click > Open With > Word Pad.
Week 3
Expanding on CSS: CSS for page layout.
Page Layout Tutorial
Week 4
Finishing off last week, upload your site to a live web-server, Install, use and customise a web application. Whew!
Week 4 Tutorial
Week 5,6,7...
This course is just the beginning and hopefully has given you the confidence and basics to go further on your own. The internet is completely self aware and contains the entire instructions for it's creation!
HTML Dog - more good tutorials.
Zymic.com - HTML and CSS templates