01_firstweb

8/2/2019 01_firstweb

1/3

Tutorial 1 - Your first webpage

BB115004S Web Designfor Business

Tutorial 1:Understanding your environment and building a first website

Learningactivities

PreparationFirst ensure you have a working university computer account i.e. you can log on anywheresuccessfully with your own username and password. Make sure you can access yourpersonal network drive space, this is shown as drive H (your H ome drive).

Now open My Computer

Step 1 Create your folderOpen My Computer, and create a new folder. Call the folder webdesign1 and place it atthe top level of the H:/drive or onto your memory stick.

First Golden Rule:ONE SEPARATE FOLDER PER INDIVIDUAL WEB PROJECT DO NOT HAVEUNRELATED DOCUMENTS IN THE SAME PLACE! THIS IS REQUIRED LATER ON ASNOT HAVING ALL THE FILES IN A DIRECTORY TOGETHER WILL CAUSE YOU MANY PROBLEMS WHEN UPLOADING TO A SERVER LATER ON! REFERENCES TO MyDocuments WILL NOT WORK. SO, KEEP YOUR WEBSITE TOGETHER IN ONEFOLDER (YOU CAN CREATE SUB-FOLDERS TO ORGANISE FILES).

You should get something roughly like the above a brand new folder with absolutelynothing in it.

Step 2 Create your first web page (and save it into the new folder)

Open up Notepad and type in the following text

Welcome to my website!This is truly awesome!

Now click Save As, and make very sure you save the file into the new folder webdesign1.

Give it the file name index.htm ALL your web page documents should have the .htm

extension. Index.htm tells the user that this is the first page.

You have to type the entire file name otherwise Notepad will just add .txt as normal.

Page 1 of 3


2/3



Second Golden Rule:USE LOWER CASE THROUGHOUT

Make a point of typing EVERYTHING in lower case: filenames, HTML code etc. The onlyexception should be in pure text for display like the T in This above. Professional tips likethis save you much pain later.

Why index.htm?

Home pages (start points) are by convention called index.htm use the conventions theymake sense.

Third Golden Rule:AVOID SPACES IN FILE NAMES STICK TO SINGLE WORDS OR USE UNDERSCORES

Note that you do not need to close NotePad each time you save as long as you have savedthe index.htm file in the right folder correctly. It is normally a smart move to keep Notepadopen. Note that it will not save the file automatically if you make any changes then youneed to save the file manually again.

Step 3 Review the result

This is the easy bit. Open Internet Explorer or Firefox.

If it tries to connect to an internet connection, decline it. We are developing completely off-line here: no need at all for a live internet connection.

Type H:\webdesign1\index.htm into the Address box, where you would generally type inthe required web site address of interest.

You should get something like:

When you have achieved the above well done! Now proceed to amend the web page byadding the line:

A 50,000 salary and company Lexus will be mine before long

underneath the first sentence.

You should be able to appreciate that it should be pretty easy to go back into NotePad, editthe original index.htm file and save it again.

HINT: Inserting the tag
into your HTML will force a line break at the point where itis inserted.

The new version can now be viewed simply by pressing the Refresh option in IE .

This is the basis of a cyclical development approach which in simple terms just meansdeveloping some code, saving your changes to the file, checking it works OK and so onuntil a complex bug-free end product is achieved.

Next Step:

Page 2 of 3


3/3



When all the above is mastered work through the HTML tutorials at:

http://www.w3schools.com/html/

Do use the feature which will show you the notepad

programming view and what it will look like in the browser next to each other.

For your reference, here is a list of Hexadecimal colour codes:

http://www.w3schools.com/html/html_colors.asp

Next Activity

Create a new web page of your own that appears exactly as follows:

Ashcroft International Business School Anglia Ruskin University

East RoadCambridge

CB1 1PT

Or

Ashcroft International Business School Anglia Ruskin University

Bishop Hall LaneChelmsfordCM1 1SQ

Oh and by the way, the page background should be light grey and the words AshcroftInternational Business School should be dark blue.

And if you find the time Read carefully through the web design assignment brief andstart thinking about the concept design for your assignment. If you are unsure aboutanything at all, ask the tutor for clarification.

Page 3 of 3

01_firstweb

Documents

Transcript of 01_firstweb