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 theAtom installer (remember where you saved it).
2. Find the Atom Setupfile.
3. Open the Atom Setup file and wait for the setup screen todisappear.
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).
2
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 alsofindinyour App Store
Checklist
1. You've downloaded Atom for Windows and TextWrangler for Mac.
3
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 Websitefolder
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
4
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. You understand that adding text to your .html files causes the text to appear on your
website when viewed in abrowser.
2. You understand that tags (like
) have special effects on the content of your
webpage.
3. You understand that you must save your file and refresh your browser before
changes willoccur.
5
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.
6
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 sometext
• 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. You have followed along with some of thesetutorials.
3. You have experimented in your .html files by adding some elements.
7
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.
8
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.
9
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 TEXT where 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: href="www.google.ca">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 toitself. Every page on your website has at
least 2 externallinks.
3. Every page has at least 6 links in its linkbar.
4. All links work when your HTML files are in the same folder.
10
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.
11
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 usingCSS.
3. The header is stillreadable.
12
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. The link section on each page has abackground.
2. The maintext section on each page has abackground.
13
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 yourwebsite.
2. You have used CSS to customize the appearance of your headings.
14
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.
15
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.
16
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).
17
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.
18
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've indented your code appropriately.
19
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.
20
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 and tags).
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.
21
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.