Project 4: Website Development Using HTML and CSSProject InstructionsThis project assignment will be marked based on a number of requirements that yourwebsite meets. Specifically, this project involves 18 tasks. Each task has someinstructions and a checklist of requirements. You may also want to check markingscheme that posted in Assignment 4 forum.Task #1: Choose a Text EditorInstructionsIn order to make changes to template.html and mystyle.css youll need a basic text editor whichhave 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 orformal 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 iconshould now be on your desktop to run Atom again in the future (You can also accessAtom by searching for it from your startmenu).2If you are having any issues on installing Atom, you can check out an official tutorialon installing Atom on any platform.How to install TextWrangler (BBEdit) – Macs Only1. Follow the video tutorial to download and install theTextWrangler (BBEdit).2. Download BBEdit from the following links:http://www.barebones.com/products/textwrangler/download.html3. You may alsofindinyour App StoreChecklist1. Youve downloaded Atom for Windows and TextWrangler for Mac.3Task #2: Create the Required .html FilesInstructionsIt is recommended that you make a special folder on your Desktop called Website orProject 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, downloadlink2. Click the link or right-click and select Save Link as…3. Save the file to your Websitefolder4. Unzip Project_4.zipi. On Windows: right-click -> Extractall…ii. On Mac: double click5. Copy and paste template.html so that you have four (4) copies of it.6. Rename them: index.html, naturaldisasters.html, technologicalinnovations.html andotherapplications.html for the option A; index.html, hotels.html, restaurants.html,venues.html for optionB.7. You dont need a file called template.html any more. Make sure that filenames arelowercase and that the extensions are .html.ChecklistOption A Option B1. index.html exists 1. index.html exists2. naturaldisasters.html exists 2. hotels.html exists3. technologicalinnovations.html exists 3. restaurants.html exists4. otherapplications.html exists 4. venues.html existsAll files in the same folder4Task #3: Investigate Host HTML WorksInstructionsYou have investigated how HTML works in your Lab 4 activities. If you need to refresh yourmemory you can check out other HTML tutorials. It is a bit overwhelming at first, but justtake 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 veryimportant 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 canselect the web browser of your choice). This only works for .html files. Note that before anychanges will appear, you must save the file, and then reload your browser.Checklist1. You understand that adding text to your .html files causes the text to appear on yourwebsite when viewed in abrowser.2. You understand that tags (like ) have special effects on the content of yourwebpage.3. You understand that you must save your file and refresh your browser beforechanges willoccur.5Task #4: Use Horizontal Rules, Paragraph Tags, and Line BreaksInstructionsNow 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 toformat the text how you wish.To change the layout of your text, you can use horizontal rules, paragraph tags, and linebreaks.Paragraphs of text can be enclosed by tags. Paragraph tags add spacing beforeand after each paragraph. Note that this wont indent the paragraph.Line break tags basically put an enter or new line into your text. HTML ignoreswhitespace – so it doesnt matter how you space things in your HTML code, it wont affecthow it displays in a web browser.Horizontal rules place a horizontal line across the page. Their appearance can bemodified using CSS. They are usually used to separate sections. You are expected to haveat least one somewhere on your webpage.Checklist1. 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.6Task #5: Investigate How HTML Works Part 2InstructionsIt is very important that you know how HTML works before going any further in theassignment. 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 tableYou may delete the elements after you are satisfied you know how they work, the point ofthis task is just for you to make sure you know how to use HTML.Checklist1. 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.7Task #6: Investigate How CSS WorksInstructionsLike HTML, CSS is going to be difficult to learn. You have worked through the Lab 4 to helpyou 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 mainsection of your webpage. In your CSS file, everything between .maintext {and} effects theappearance of your main section.Lets look at an example. Say we wanted all of the text in the main part of our webpage tobe blue. We could through each of us .html file and add the line , butthat 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 sectionshould be blue.8In a similar fashion, there are also sections in your mystyle.css that correspond with yourlinks 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 allof the code in that CSS sections will apply to this .One thing you shouldnt do in CSS is nest burly braces: {{}}. If you do, it may completelybreak your CSS.One more example before you are going to investigate CSS on your own. Remember theHTML tags that you experimented with earlier: , , , , and ? Wecan 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 wantall 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 toalter, 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.Checklist1. You understand that changes to your CSS code within curly braces affects theassociate 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.9Task #7: Create a Link BarInstructionsIn the sections of your HTML pages, you will add links to otherpages. On each page, you need to have a link to every other page on your website (forconsistency, you should have a link to the current page as well). Try to make sure that theorder 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 externallinks (different website). They can be to any websites you like so long as they areappropriate. The easiest options would be google.ca and the univeWebsite代做、代写HTML/CSS编程语言、HTML，rsity website.You can add a link using LINK TEXT where URL is the page you wantthe 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 needthe name of the file, for example: VenuesFor links to external pages, youll need a full URL, for example: href=www.google.ca>GoogleChecklist1. 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 atleast 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.10Task #8: Set a Title to Appears in the Title Bar for Each PageInstructionsAt the top of each of your HTML files, inside the section, there is a tag. Thetext between and is the title of that webpage. For each page, add anappropriate title, it will appear at the top of the browser window, usually on a tab.Checklist1. Each page on your website has a title.11Task #9: Create and use a Background Picture for Your Header DivisionInstructionsUsing GIMP or a similar image editing program, modify a picture such that it is suitable asa background for your header division. If you dont have an image editing program yet, youcan Download GIMP which is available for both Windows and Mac (keep in mind that itisnt a very fast program). For Mac user, you may want to use iPhoto which is installed inevery Mac.You may want to take this time to edit the other 2 images youll need for the venues ortechnological innovations page of your website.Once youre happy with your image, you can add it into the background by going into yourCSS and adding, in the header section:Make sure that the filenames match exactly and the extension is the same. Also make surethat you page header is still readable on each page.The width of the header division is 855px, keep that in mind.Checklist1. Every page has a background image in its header division.2. The background image is placed usingCSS.3. The header is stillreadable.12Task #10: Add Background to Your Links and Main Text DivisionsInstructionsYou can add a simple color background to a section of your website by adding this line tothe corresponding section in your CSS:This will set the background of that section to a harsh red color. This works for most basiccolors, and you can also use light colors, like lightblue and lightgreen, which arent asharsh (light red is pink).To set more custom colors, you can use RGB codes like #0080FF (which is a shade ofblue).You can also use an image for these sections as well.The sections must have different backgrounds, but can have the same color scheme oneach page.Checklist1. The link section on each page has abackground.2. The maintext section on each page has abackground.13Task #11: Make Use of Different Heading LevelsInstructionsWhen you were investigating HTML, you should have stumbled across the different levelsof headings: , , . Each level of heading should be slightly smaller than theprevious 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 shouldmake 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 headingsto judge the content of your website. Google still looks at all of the content on the page, butconsiders text in tags to be more relevant than other text, progressively less relevantas the heading gets smaller.You should also use CSS to customize the appearance of each level of heading.Checklist1. At least 2 levels of headings are used on yourwebsite.2. You have used CSS to customize the appearance of your headings.14Task #12: Make Use of ListsInstructionsThere are two basic type of list in HTML – ordered lists and unordered lists. Ordered listsare numbered, and unordered lists have bullets. You are expected to have at least oneordered list and one unordered list on your website (each list must contain at least 3elements).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 ofyour page will be indented.You will lose marks if your page style is messed up because you didn’t close a tag.Checklist1. Your website has at least 1 orderedlist.2. Your website has at least 1 unorderedlist.15Task #13: Modify and Use Two Pictures on Your WebsiteInstructionsIf you havent already, use GIMP or similar program to modify 2 pictures for yourotherapplications.html or venues.html page. Some simple and acceptable modificationsare:• Border effects• Filters• Cropping• Adding pieces of otherpicturesYour header background does not count towards the 2 pictures. Remember to include thechanges youve made to the images.Checklist1. Your otherapplications.html or venues.html page have 2 modified pictures onit.2. Youve included the changes youve made to theimages.3. Your otherapplications.html or venues.html page has 2 original pictures onit.16Task #14: Make Use of a TableInstructionsYour technologicalinnovations.html or restaurant.html page may be the perfect place for anHTML 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 tablemust have at least 2 rows and columns.Checklist1. Your website has a table on it (Pictures of tables dont count).17Task #15: Centre a Table or an Image Using CSSInstructionsYou 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 insideof 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 forcesomething to the right or the left by using: float: left; or float: right;Checklist1. At least 1 table and/or image is centered.18Task #16: Use Appropriate Indentation in Your HTML and CSS FilesInstructionsGood indentation makes it easier to read and debug your code. Whenever a new logicalsection 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.Checklist1. Youve indented your code appropriately.19Task #17: Implement the Hover, Link, Visited and Active Pseudo-ClassesInstructionsImplement the CSS hover, link, visited and active pseudo-classes as per the tutorials. Eachpseudo-class should use at least one selector.Checklist1. The hover pseudo classworks.2. The link pseudo classworks.3. The visited pseudo classworks.4. The active pseudo classworks.20Task #18: Use Correct Naming for all Webpages and PicturesInstructionsIt is essential that all of your webpages and pictures have correct naming, as if they don’tyou 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 fileextensions 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 toanother, unless you are using a graphics program such as The GIMP. (The graphicsprogram will change the graphics format to match the extension.)Incorrect extensions:• Anything withcapitals.• Anything such as.html.htmlIf you have used inappropriate filenames or extensions, then you will have to fix them, andfix 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 shouldhave 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.21Submission InstructionsOnce you’ve finished your website, save it on a USB key and use a different computer to make sureall internal links and external links are working.Then compress (zip) the website folder (including all files and images) and submit the zipped folderthrough the Dropbox link located in the NavBar on the Course Home page. Please do not publish it.转自：http://www.3daixie.com/contents/11/3444.html
