Question for Prof_Baron Webd121
Assignment InstructionsGeneral Instructions for your Website: During Week 1 through Week 7 of this course, you will be building a personal website on a topic of your choice. Choose a topic about which you are both knowledgeable and enthusiastic, so that you will be able to easily write about the topic and share your knowledge of the topic through your website. During Week 1, you will create the home page of your website. Make sure that you write the content (the paragraphs of information about your topic) yourself. Do not copy content from other web pages. Your website should contain at least 4-6 paragraphs of information, arranged in a logical manner (using headings and sub-headings appropriately). During Week 2, you will add an external style sheet to your website. During Week 3 through Week 7, you will either add additional pages to your website or you will add new functionality to your home page, as directed in the instructions for each assignment.You must write the code files by hand for all assignments in this class. A simple text editor, such as Notepad or Notepad++ will suffice (or TextEdit on the Mac). DO NOT use GUI editors, such as FrontPage, Dreamweaver, etc. You must write the code for your web pages yourself. If you are using a PC, it is strongly recommended that you download the free Notepad++ text editor (https://notepad-plus-plus.org/) because it contains extra features which assist with debugging, such as line numbering and color coding of different elements of syntax. Mac users should use the TextEdit text editor that comes with the Mac OS. However, if you are a Mac user, make sure you set TextEdit to use Plain Text by default. You can find instructions for this here: https://www.tekrevue.com/tip/textedit-plain-text-mode/ Make sure all of your web pages comply with the HTML 5 standards and CSS standards. DO NOT use obsolete HTML elements and attributes from previous versions of HTML. By including the HTML 5 DOCTYPE declaration in your webpages, and validating all of your HTML files at https://validator.w3.org/#validate_by_upload, you can be sure that your code complies with HTML 5. Starting Week 2, your external style sheet (.css file) must pass validation at the W3C CSS Validation Service: https://jigsaw.w3.org/css-validator/#validate_by_upload. Make sure you use the "Validate by File Upload" option (and NOT the "Validate by Direct Input" option), on both of these validators since this is the way your instructor will check your pages when grading your assignments.The home page of your website must be named "LastFirstHomePage.html" where "Last" is your last name and "First" is your first name. For example, if your name is John Smith, you would name your home page file SmithJohnHomePage.html Starting with Week 2, you will also have a CSS file linked into every HTML page on your website. Name your CSS file "LastFirstStyleSheet.css" where "Last" is your last name and "First" is your first name. Your website must only have 1 CSS file and that file should be linked into all HTML pages on your website. Additional HTML pages created for your website (During Week 3 through Week 5) should be hyperlinked together through a navigation menu that appears on all pages of your website. Naming conventions for each additional page on your website will be included in each assignment description that requires a new HTML page.Specific Instructions for Assignment 1:For this assignment, you will create a Home Page for the website you will be developing throughout the first 7 weeks of this semester. Include all of the following in your Home Page:1) Begin by creating a new file in your text editor. On the PC, you should use Notepad++ (https://notepad-plus-plus.org/). On the Mac, you should use TextEdit (but make sure to set it to use Plain Text by default, following these instructions: https://www.tekrevue.com/tip/textedit-plain-text-mode/).2) On the first line of the file, add the HTML5 DOCTYPE statement: <!DOCTYPE html> 3) Add the opening and closing <html>, <head>, <body>, and <title> tags, making sure to nest them correctly, like this:<!DOCTYPE html><html><head><title>Page Title</title></head><body></body></html>(See an example of a basic HTML document here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro)4) Customize the text inside of the <title> </title> tags to give your home page a meaningful title that describes the topic you have chosen for your website. Remember that the title does not actually show up on the webpage, but instead shows up on the tab at the top of the browser.5) Add the lang="en" attribute to your opening <html> tag, like in this example: https://www.w3schools.com/tags/ref_language_codes.asp6) Add the charset, description, keywords, and author meta tags to the head section of your document, as in this example: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_head_meta. The charset should be set to "UTF-8". Customize the description, keywords, and author meta tags to contain a description of your webpage, keywords related to your web page, and your name as the author. Before saving your file, check the encoding settings to make sure your file is encoded in "UTF-8" to match the file encoding you specified in your charset meta tag. In Notepad++, go to the Encoding menu on the menu bar and make sure "Encode in UTF-8" is selected.7) Your page should now contain the basic skeleton required on all HTML pages (although it still does not contain any of the content that will actually display in the browser). Save your file and upload it to the HTML validator to check for compliance with the HTML5 standards here: https://validator.w3.org/#validate_by_upload. Your file should pass validation. If you receive any errors or warnings, then go back through Steps 1-5 of the assignment again until you have corrected all errors and your file passes validation. It is also recommended that you save your work and validate your file after each of the remaining steps of the assignment, in order to identify and fix your errors promptly. It is must easier to debug and correct your errors if you validate your file after each new element that you add to your file than if you wait until the end of the assignment to validate your file.8) The rest of the code that you add to your file for this assignment will go inside of the body section of your document, between the opening <body> tag and the closing </body> tag. Use the <h1> tag to add a main heading to your page. The text inside of the heading should reflect the topic you have chosen for your website. Similarly, use additional heading tags and horizontal rules to add sub-headings to your page and to divide your page into sections (See examples here: https://www.w3schools.com/html/html_headings.asp). You web page must have a minimum of 3 headings, using at least 2 different types of heading tags (Ex.: <h1>, <h2>, through <h6>).9) Use paragraph tags and line break tags to add 4-6 full paragraphs of original content that you have written yourself about the topic you have chosen for your website. (See examples here: https://www.w3schools.com/html/html_paragraphs.asp). Arrange the paragraphs between the different sub-headings you created on your page. Be sure to avoid improperly nesting the tags. Remember that you cannot nest a paragraph inside of a heading, or nest a heading inside of a paragraph. You can see another example of a properly arranged page here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_hr Remember, though, that these code examples only show the code, but you will be expected to have real content and substance on your page, too. The content is the 4-6 full paragraphs of information that you write yourself about the topic you have chosen for your website. Also, remember to validate your file after completing each step in this assignment to make sure your file still passes validation before moving onto the next step of the assignment!10) Include three external hyperlinks to websites that are related to the topic you have chosen for your own website. (See an example of the code for an external hyperlink here: https://www.w3schools.com/html/html_links.asp). Remember to validate your code before moving on to the next step!11) Include three images on your web page that are related to the topic you have chosen for your own website. First, you need to find 3 images that are in the public domain and download a copy of each image to your own computer. You may want to try some of the sites recommended in this article for locating public domain images: https://99designs.com/blog/resources/public-domain-image-resources/. Then add the HTML code to your file to include all three images on your page. (See an example of the code for an image here: https://www.w3schools.com/html/html_images.asp) Remember to include the required alt attribute on every image. Also, remember to validate your code before moving on to the next step!12) Turn one of your images into a clickable image that takes the user to an external website when the user clicks on it. Do this by embedding the image tag inside of a hyperlink. (See an example of code for a clickable image here: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_images_link). Remember to validate your code before moving on to the next step!13) Include one ordered or unordered list, with at least three list items, on your home page. You can see examples of lists here: https://www.w3schools.com/html/html_lists.asp14) Before submitting your assignment, validate your HTML file one last time at https://validator.w3.org/#validate_by_upload, using the "Validate by File Upload" option. Note: It is critical that you debug and fix ALL errors identified by the validator before submitting your assignments. Contact your instructor for assistance if you are having difficulty debugging and fixing your errors because it is imperative that all of your code files pass validation.15) Create a zip archive containing your HTML file and all image files. Make sure you maintain the necessary directory structure in your zip archive so that your webpages will view correctly when unzipped. In other words, if your images are in a sub-folder, in relation to the folder containing your .html file, then you need to maintain that same directory structure in your zip archive, too, including the sub-folder. Submit only the zip file for grading.Rubric for Grading AssignmentPointsWebpage (HTML file) validates without errors at https://validator.w3.org/#validate_by_upload20Website contains 4-6 full paragraphs of well-written, well-thought-out, creative, attractive, and well-organized original content written by the student10Correctly written HTML5 DOCTYPE statement: <!DOCTYPE html> 1Correctly written <html> tag with lang="en" attribute; and correctly written and nested <head> and <body> tags, with corresponding end tags for all three of these tags 6Correctly written <title> tag with corresponding end tag. The text of your title should describe the topic of your web page 2Correctly written charset, description, keywords, and author meta tags 8At least three headings, using at least two types of heading tags. Ex: <h1>, <h2>, <h3>, etc. 6Correct use of <p> and <br/> tags 4At least 3 external hyperlinks 9At least 3 images on your web page (make sure you also include the image files in your zip archive) 9At least 1 clickable image (an image nested inside of a hyperlink) 10One ordered or unordered list, with at least 3 list items 10Correctly created zip archive that contains all files for webpage (maintaining original folder structure) 5Total100***Note: Your website must be written in HTML5 and include the correct HTML5 DOCTYPE statement to receive credit for this assignment.
