Reference no: EM132251335

Project - 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.

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 TextWrangler or BBEdit.

Do NOT use Microsoft Word or any other text editor that you might write an essay or formal paper in.

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.

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.

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 and 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 <p></p> tags. Paragraph tags add spacing before and after each paragraph. Note that this won't indent the paragraph.

Line break tags <br> 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 <hr> 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 <hr> somewhere on your webpage.

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. 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 <br>
• add a horizontal rule <hr>
• add a link
• add a heading like <h1>
• write a paragraph <p>
• 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.

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.

Task 7: Create a Link Bar

Instructions - In the <div class="links"></div> 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.

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 <head> section, there is a <title> tag. The text between <title> and </title> 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.

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 or Photo which is installed in every Mac.

You may want to take this time to edit the other 2 images you'll need for the entertainment 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 or add two set of images to entertainment page. (see assignment description for detail in attached file).

The width of the header division is 855px, keep that in mind.

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.

Task 11: Make Use of Different Heading Levels

Instructions - When you were investigating HTML, you should have stumbled across the different levels of headings: <h1>, <h2>, <h3>. 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 <h#> 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.

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 <ol></ol> tags and unordered lists use <ul></ul>. Between these tags, you can use <li> and </li> to denote list items. Remember to close the tags (use the </ul> or </ol> tag at the end of the list, and </li> 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.

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 entertainment.html page. Some simple and acceptable modifications are:

• Border effects
• Filters
• Cropping
• Adding pieces of other pictures

Your header background does not count towards the 2 pictures. Remember to include the changes you've made to the images.

Task 14: Make Use of a Table

Instructions - Your competition.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 <table></ table> tags. <tr></tr> tags denote rows in the table. <td></td> tags denote cells in the table. Your table must have at least 2 rows and columns.

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;

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.

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.

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 with capitals.
• 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. <a> tags and <img> tags).

On a related note, when you are working on your webpage on your computer, you should have all files in the same folder.

Note - For Detail Description of Assignment check attached file.

Attachment:- Assignment Files.rar