Project 4: Website Development Using HTML and CSS Project Instructions
This project assignment will be marked based on a number of requirements that your website meets. Specifically, this project involves 18 tasks. Each task has some instructions and a checklist of requirements. You may also want to check marking scheme that posted in Assignment 4 forum.
Task #1: Choose a Text Editor
Instructions
In order to make changes to template.html and mystyle.css you’ll need a basic text editor which have syntax highlighting. On Windows, download Atom. On a Mac, download BBEdit.
Do NOT use Microsoft Word or any other text editor that you might write an essay or formal paper in.
How to Install Atom for Windows?
1. Download the Atom installer (remember where you saved it).
2. Find the Atom Setup file.
3. Open the Atom Setup file and wait for the setup screen to disappear.
4. You’re done! Atom will automatically open for the first time to get you started. An icon should now be on your desktop to run Atom again in the future (You can also access Atom by searching for it from your startmenu).
1

If you are having any issues on installing Atom, you can check out an official tutorial on installing Atom on any platform.
How to install TextWrangler (BBEdit) – Macs Only
1. Follow the video tutorial to download and install theTextWrangler (BBEdit).
2. Download BBEdit from the following links:
http://www.barebones.com/products/textwrangler/download.html
3. You may also find in your App Store
Checklist
1. You’ve downloaded Atom for Windows and TextWrangler for Mac.
2

Task #2: Create the Required .html Files
Instructions
It is recommended that you make a special folder on your Desktop called Website or Project 4 and put all of your assignment related files in this folder.
Go to the Assignments page on CourseLink, click on Project 4.
1. Locate the Project_4.zip, downloadlink
2. Click the link or right-click and select Save Link as…
3. Save the file to your Website folder
4. Unzip Project_4.zip
i. On Windows: right-click -> Extractall…
ii. On Mac: double click
5. Copy and paste template.html so that you have four (4) copies of it.
6. Rename them: index.html, naturaldisasters.html, technologicalinnovations.html and otherapplications.html for the option A; index.html, hotels.html, restaurants.html, venues.html for optionB.
7. You don’t need a file called template.html any more. Make sure that filenames are lowercase and that the extensions are .html.
Checklist
Option A
Option B
1. index.html exists
1. index.html exists
2. naturaldisasters.html exists
2. hotels.html exists
3. technologicalinnovations.html exists
3. restaurants.html exists
4. otherapplications.html exists
4. venues.html exists
All files in the same folder
3

Task #3: Investigate Host HTML Works
Instructions
You have investigated how HTML works in your Lab 4 activities. If you need to refresh your memory you can check out other HTML tutorials. It is a bit overwhelming at first, but just take it slowly. You can open up a blank file to start testing this out.
Follow along in your basic text editor to start understanding the basic of HTML. It is very important that you understand these basics before you proceed, so go test it out now.
You can view your file as a website by right-clicking it and selecting “open with” (you can select the web browser of your choice). This only works for .html files. Note that before any changes will appear, you must save the file, and then reload your browser.
Checklist
1. Youunderstandthataddingtexttoyour.htmlfilescausesthetexttoappearonyour website when viewed in abrowser.
2. You understand that tags (like
) have special effects on the content of your webpage.
3. Youunderstandthatyoumustsaveyourfileandrefreshyourbrowserbefore changes willoccur.
4

Task #4: Use Horizontal Rules, Paragraph Tags, and Line Breaks
Instructions
Now that you know some of the basics of HTML, it is time to start creating your webpage. Open up a file like index.html in Atom or TextWrangler (BBEdit), or another basic text editor. Use your knowledge of HTML to start adding some text to the page. Add some tags to format the text how you wish.
To change the layout of your text, you can use horizontal rules, paragraph tags, and line breaks.
Paragraphs of text can be enclosed by

tags. Paragraph tags add spacing before and after each paragraph. Note that this won’t indent the paragraph.
Line break tags
basically put an ‘enter’ or new line into your text. HTML ignores ‘whitespace’ – so it doesn’t matter how you space things in your HTML code, it won’t affect how it displays in a web browser.
Horizontal rules

place a horizontal line across the page. Their appearance can be modified using CSS. They are usually used to separate sections. You are expected to have at least one

somewhere on your webpage.
Checklist
1. You have at least 1

tag on your website.
2. You are aware of how to use

tags.
3. You are aware of how to use
tags.
5

Task #5: Investigate How HTML Works Part 2 Instructions
It is very important that you know how HTML works before going any further in the assignment. Re-read some of the HTML tutorials. https://www.w3schools.com/html/
Keep practicing, and then practice a little more. It may take some time getting used to this. Try to do the following things in some of your .html files, and make sure that they work:
• bold
• italicize
• underline some text
• add a line break
• add a horizontal rule

• add a link
• add a heading like

• write a paragraph

• make some lists
• insert an image
• insert a table
You may delete the elements after you are satisfied you know how they work, the point of this task is just for you to make sure you know how to use HTML.
Checklist
1. You have read the HTMLtutorials.
2. Youhavefollowedalongwithsomeofthesetutorials.
3. You have experimented in your .html files by adding some elements.
6

Task #6: Investigate How CSS Works
Instructions
Like HTML, CSS is going to be difficult to learn. You have worked through the Lab 4 to help you grasp CSS and can review these additional CSS tutorials.
In mystyle.css, there is a section of code with the following structure:
In your .html files, there are 3 main sections:
Everything between the

and

tags represents the main section of your webpage. In your CSS file, everything between .maintext {and} effects the appearance of your main section.
Let’s look at an example. Say we wanted all of the text in the main part of our webpage to be blue. We could through each of us .html file and add the line , but that is a lot of repetitive work. Instead, we can just alter the CSS file and the line color: blue.
If you save your CSS file and reload your browser, all of the text in your main section should be blue.
7

In a similar fashion, there are also sections in your mystyle.css that correspond with your links and header sections. Note that all of the CSS code for all there has:
This means that it is a class – and therefore you can put

and all of the code in that CSS sections will apply to this

.
One thing you shouldn’t do in CSS is nest burly braces: {{}}. If you do, it may completely break your CSS.
One more example before you are going to investigate CSS on your own. Remember the HTML tags that you experimented with earlier:

,

---

,

,

, and? We can change the default behavior of these tags by alter the CSS file a bit. For instance, the

usually produces larger than normal text, and is usually bolded. But, say that we want all of our

tags to produce a red, italicized font.
First, go to the bottom of the CSS file and put the name of the HTML tag that you want to alter, in this case h1. Then write the codes for the changes that you want to apply:
Now all of your

tags should appear red and italicized.
Make sure to read the CSS tutorials to understand how to use it with your HTML. Checklist
1. You understand that changes to your CSS code within curly braces affects the associate element(s) in your HTML files.
2. You understand that changing your CSS code affects all of your HTML files.
3. You understand what classesare.
4. You understand that you can affect the behavior of HTML tags using CSS.
8

Task #7: Create a Link Bar
Instructions
In the

sections of your HTML pages, you will add links to other pages. On each page, you need to have a link to every other page on your website (for consistency, you should have a link to the current page as well). Try to make sure that the order of the links is the same on each page, as it is makes your website easier to navigate.
In addition to your internal links (same website, different page) you should have 2 external links (different website). They can be to any websites you like so long as they are appropriate. The easiest options would be google.ca and the university website.
You can add a link using LINK TEXTwhere URL is the page you want the link to go to, and LINK TEXT is what you want the link to say.
For links to your own pages, so long as the HTML file is in the same folder, you only need the name of the file, for example: Venues
For links to external pages, you’ll need a full URL, for example: Google
Checklist
1. Every page on your website has a link to every other page on your website.
2. Every page on your website has a link to itself. Every page on your website has at least 2 externallinks.
3. Every page has at least 6 links in its link bar.
4. All links work when your HTML files are in the same folder.
9

Task #8: Set a Title to Appears in the Title Bar for Each Page
Instructions
At the top of each of your HTML files, inside the section, there is a is the title of that webpage. For each page, add an appropriate title, it will appear at the top of the browser window, usually on a tab.
Checklist
1. Each page on your website has a title.
10

Task #9: Create and use a Background Picture for Your Header Division
Instructions
Using GIMP or a similar image editing program, modify a picture such that it is suitable as a background for your header division. If you don’t have an image editing program yet, you can Download GIMP which is available for both Windows and Mac (keep in mind that it isn’t a very fast program). For Mac user, you may want to use iPhoto which is installed in every Mac.
You may want to take this time to edit the other 2 images you’ll need for the venues or technological innovations page of your website.
Once you’re happy with your image, you can add it into the background by going into your CSS and adding, in the header section:
Make sure that the filenames match exactly and the extension is the same. Also make sure that you page header is still readable on each page.
The width of the header division is 855px, keep that in mind.
Checklist
1. Every page has a background image in its header division.
2. The background image is placed using CSS.
3. The header is stillreadable.
11

Task #10: Add Background to Your Links and Main Text Divisions
Instructions
You can add a simple color background to a section of your website by adding this line to the corresponding section in your CSS:
This will set the background of that section to a harsh red color. This works for most basic colors, and you can also use light colors, like lightblue and lightgreen, which aren’t as harsh (light red is pink).
To set more custom colors, you can use RGB codes like #0080FF (which is a shade of blue).
You can also use an image for these sections as well.
The sections must have different backgrounds, but can have the same color scheme on each page.
Checklist
1. Thelinksectiononeachpagehasabackground.
2. The maintext section on each page has abackground.
12

Task #11: Make Use of Different Heading Levels
Instructions
When you were investigating HTML, you should have stumbled across the different levels of headings:

,

,

. Each level of heading should be slightly smaller than the previous level. Heading 1 is usually used to introduce articles or large sections of text. Heading 2 and lower would be used for subdivisions of articles or sections. You should make use of at least 2 levels of heading on your website.
The reason the headings are so important is that search engines like Google use headings to judge the content of your website. Google still looks at all of the content on the page, but considers text in tags to be more relevant than other text, progressively less relevant as the heading gets smaller.
You should also use CSS to customize the appearance of each level of heading.
Checklist
1. At least 2 levels of headings are used on your website.
2. You have used CSS to customize the appearance of your headings.
13

Task #12: Make Use of Lists
Instructions
There are two basic type of list in HTML – ordered lists and unordered lists. Ordered lists are numbered, and unordered lists have bullets. You are expected to have at least one ordered list and one unordered list on your website (each list must contain at least 3 elements).
Ordered lists use

tags and unordered lists use

. Between these tags, you can use

and

to denote list items. Remember to close the tags (use the

or

tag at the end of the list, and

at the end of each item), otherwise the rest of your page will be indented.
You will lose marks if your page style is messed up because you didn’t close a tag.
Checklist
1. Your website has at least 1 orderedlist.
2. Your website has at least 1 unorderedlist.
14

Task #13: Modify and Use Two Pictures on Your Website
Instructions
If you haven’t already, use GIMP or similar program to modify 2 pictures for your otherapplications.html or venues.html page. Some simple and acceptable modifications are:
• Border effects
• Filters
• Cropping
• Adding pieces of otherpictures
Your header background does not count towards the 2 pictures. Remember to include the changes you’ve made to the images.
Checklist
1. Your otherapplications.html or venues.html page have 2 modified pictures onit.
2. You’ve included the changes you’ve made to theimages.
3. Your otherapplications.html or venues.html page has 2 original pictures onit.
15

Task #14: Make Use of a Table
Instructions
Your technologicalinnovations.html or restaurant.html page may be the perfect place for an HTML table, but you can use them on any page you want. A table uses the

tags.

tags denote rows in the table.

tags denote cells in the table. Your table must have at least 2 rows and columns.
Checklist
1. Your website has a table on it (Pictures of tables don’t count).
16

Task #15: Centre a Table or an Image Using CSS
Instructions
You can center an image or table by adding a new class to your CSS, like:
Apply it to the image or table by adding class=”imagecenter” or class=”tablecenter” inside of its opening tag. Inside of the new CSS class, add these lines:
This will force the element to occupy the center of its section. You can also force something to the right or the left by using: float: left; or float: right;
Checklist
1. At least 1 table and/or image is centered.
17

Task #16: Use Appropriate Indentation in Your HTML and CSS Files
Instructions
Good indentation makes it easier to read and debug your code. Whenever a new logical section of your code starts, you increase the number of tabs by one.
Whenever a logical section of your code ends, you decrease the number of tabs by one. Look at the indentation tutorial, and the given files for more information.
Checklist
1. You’veindentedyourcodeappropriately.
18

Task #17: Implement the Hover, Link, Visited and Active Pseudo-Classes Instructions
Implement the CSS hover, link, visited and active pseudo-classes as per the tutorials. Each pseudo-class should use at least one selector.
Checklist
1. The hover pseudo classworks.
2. The link pseudo classworks.
3. The visited pseudo classworks.
4. The active pseudo classworks.
19

Task #18: Use Correct Naming for all Webpages and Pictures
Instructions
It is essential that all of your webpages and pictures have correct naming, as if they don’t you will encounter complications uploading your files.
All filenames should be lowercase with correct extensions.
In order to modify file extensions in Windows, under Windows Explorer, go to Tools- >Folder Options, then go to the View tab, and deselect the box labeled “Hide file extensions of known file types”.
Correct extensions:
• Webpage files should have the extension.html
• Picture file extensions vary from picture format to picture format.
It is safe to make the extensions lowercase, but do not change them from one type to another, unless you are using a graphics program such as The GIMP. (The graphics program will change the graphics format to match the extension.)
Incorrect extensions:
• Anything withcapitals.
• Anything such as.html.html
If you have used inappropriate filenames or extensions, then you will have to fix them, and fix all references to them in your HTML code. (i.e. tags andtags).
On a related note, when you are working on your webpage on your computer, you should have all files in the same folder.
Checklist
• All filenames are in lowercase with correctextensions.
• All references to inappropriate filenames in your code have been updated.
20

Submission Instructions
Once you’ve finished your website, save it on a USB key and use a different computer to make sure all internal links and external links are working.
Then compress (zip) the website folder (including all files and images) and submit the zipped folder through the Dropbox link located in the NavBar on the Course Home page. Please do not publish it.
21