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.