Building your Website

This is a coding activity and the outcome will be by the end of term a basic understanding of the HTML coding.

This term you are going to build a website consisting initially of four pages, complete with text content and images.

The software you will be using is Notepad, which is a basic text editor and well suited to HTML hard coding (manual coding).

In Years 9 and 10 you will have the opportunity to learn web design, using Dreamweaver, the industry standard software, which does (most of) the coding for you.


You will need to first plan out your website build and how it will look. 

You will have four webpages, within the website. 

Each page will consist of images and text (to describe what your images are about). 
The four pages are:

Index 
Interests 
Fav_Foods
Places 

1/. To start it all off, you need to create a folder on your login-drive called Website. This folder will house the pages and the images.

(In "real time" web design the images would be placed in a separate folder. But in this exercise they are all together because of the really long filename location/s that would be necessary to link the images with the pages).

2/. Next you need to create a project design research document in Word.

This is your project research setup table and will contain the image names and descriptions.

The images will be saved in your website folder. Copy/paste of he images will not work, as you will lose the images.

3/. Then you need to research the images needed for your webpages. Images must be 480px or wider and you will need to have a description of what the image is about (see the project design research link).

That is: 17 images, as follows:

Index Page = 3

Fav_foods = 3

Interests = 3

Places = 8

Images need to be a least 480px wide and you will need to have a description of what the image is about. This is really important, as smaller images will wreck your page design.

4/. The Page Building for the website build.

The first page you build will be the Index Page, at first without the images in place. This is so that you can use this page as a template for all the other pages. Otherwise you would need to type in the same basic code for all the other pages.

Once this is built and working correctly, you can save it, as the other three page names. (See the page build link).

Then with the other three pages, you only need to make a number of code changes to make these individual pages work.

When completed you will have four webpages, in your website build.

Each page will consist of images and text (to describe what your images are about).

 

5/. Image resizing.

All images must be at least 480px wide and Landscape orientation.

The code automatically re-sets the larger images to 480px wide and 360px high.

If you need to adjust the image size further in Photoshop, follow this link.

Link here to the page code, for the index page.
6/. The final website build will look a lot like this.
Creating a simple website.
This will be done using the HTML code and the text based software Notepad.
The first page you build will be the Index Page, will be the only full working page to code. The other three pages are copied from the Index Page, then you will customise each page, making several changes.
The final website build will look a lot like this.
1/. To start it all off, you need to create a folder on your U-Drive called Website.

2/. Then you need to find 17 images. With each image you also need to have some words to describe the image. Save this information in a Word document called website_text.The image sizes must be greater than 480pm wide, otherwise you will have image quality issues. Images must also be in landscape format.

For the Index Page - three images. They can be on things that look good for you (excluding Food, Interests and Places.

For the Fav_Foods Page - three images.

For the Interests Page - three images. (Interests, hobbies fun things you want to do/you do).

For the Places Page - eight images. (About places you have been to or want to go to).

3/. You will then need to build your Index Page in code (using Notepad) from the Instructions for Building Pages link.

The Index Page is also, the page template for the other pages. You will eventually have four webpages, within the website. 

When built and tested and it works, you can save the page again as: Interests.html, then Fav_Foods.html, then Places.html. There will be a few coding changes for these pages, with the Places Page requiring additional coding.

Examples of the four pages are linked below:

Index 
Interests 
Fav_foods 
Places 


Index Page (Home Page)

Instructions for Building the Pages

Image Resizing