WEBD 121 Cyber Security Threats and Latest News Project
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.asp
6) 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.asp
14) 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.