Posted: April 24th, 2025
coding
topic top Retirment destinations Abroad
More bang for your Dollar
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 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
.
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 here 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. 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.
File Naming Conventions: 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 This file name will not change from week to week. 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++. On the Mac, you should use TextEdit (but make sure to set it to use Plain Text by default, following these instructions.
2) On the first line of the file, add the HTML5 DOCTYPE statement: <!DOCTYPE html>
3) Add the opening and closing , , , and
tags, making sure to nest them correctly, like this:</p>
<p><title>Page Title
(See an example of a basic HTML document
here)
4) Customize the text inside of the
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 tag, like in this example. Important tips:
- Add this attribute to your existing tag. Do not add a second tag to your file.
6) Add the charset, description, keywords, and author meta tags to the head section of your document, as in this example. 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. Two important tips:
- You can only modify what goes inside the quotes of the content=” ” attribute. You may not modify name=”description” or name=”keywords” or name=”author” because the value of the name attribute is what makes the tag into a meta description, keywords, or author tag, respectively.
- You must modify the list of keywords to be pertinent to YOUR website topic. Do not use “HTML, CSS, JavaScript” because the only reason the w3schools website uses those as keywords in their example is that their site is literally a tutorial for those languages. If your topic is gardening or soccer or cars, then your keywords should pertain to that specific topic (not the programming languages you wrote the page in).
- Here are examples of meta tags I might create for a website about dinosaurs (if my name were John Smith):
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. 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 tag and the closing tag. Use the
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). You web page must have a minimum of 3 headings, using at least 2 different types of heading tags (Ex.:
,
, through
).
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). 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. 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). Remember to validate your code before moving on to the next step! Important tips:
- Replace the placeholder “url” in the example with the actual URL.
- Meaningful text should go inside the tag (these are the words that appear on the page that the user will click on.
- Load your page in the browser and TEST your hyperlinks. If clicking the link doesn’t load the intended page, troubleshoot your syntax until the link functions as intended.
- Here is an example of a properly coded hyperlink:
Dinosaur Facts
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. Then add the HTML code to your file to display all three images on your page. (See an example of the code for an image here). You should use relative paths to the copies of the images you downloaded. Do not use absolute paths to locations on your computer (or only you will be able to see the images) and do not use URLs to externally hosted copies of the images. Remember to include the required alt attribute on every image. Also, remember to validate your code before moving on to the next step! Some important tips:
Make sure your image file names are not too long. Rename them to something short and meaningful, if needed.
File and folder names used on web pages cannot contain spaces. Rename image file names to remove any spaces (in the actual file names and in your code).
Image file names must match the actual file names EXACTLY. Do not append anything to the image file names like “img_” or anything else. In the w3schools example, it is assumed their actual file names are named that way. I don’t expect yours to be.
If the image files are in the same folder as the HTML file you are coding in, the relative path should only contain the file name of the image, like this:
![picture of brontosaurus]()
If the image files are in a sub-folder (for example, named “Images”) then your relative path should include the sub-folder name and the image file name, like this:
![picture of brontosaurus]()
After coding your images, open your web page in the browser and make sure the images appear correctly. If not, go back and troubleshoot your syntax until the images display as expected!
12) Turn one of your images into a clickable image that takes the user to an external website when the user selects it. Do this by embedding the image tag inside of a hyperlink. (See an example of code for a clickable image here). Remember to validate your code before moving on to the next step! Some important tips:
The syntax is the same as any other hyperlink except instead of embedding text for the user to click on, you embed an image tag inside the hyperlink element.
Use any URL to a webpage you want the user to go to when they click on the image.
Example of a clickable image:
![picture of brontosaurus]()
13) Include one ordered or unordered list, with at least three list items, on your home page. You can see examples of lists here. Important tips:
14) Before submitting your assignment, validate your HTML file one last time here, 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 Assignment
Rubric for Grading Assignment
Exemplary
Accomplished
Developing
Beginning
Points Available
Webpage (HTML file) validates without errors at
https://validator.w3.org/#validate_by_upload
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
20
Website contains 4-6 full paragraphs of well-written, well-thought-out, creative, attractive, and well-organized original content written by the student
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
8
Correctly written HTML5 DOCTYPE statement: <!DOCTYPE html>
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
4
Correctly written tag with lang=”en” attribute; and correctly written and nested and tags, with corresponding end tags for all three of these tags
Student effectively completed the assignment.
Student partially completed the assignment.
The student provided limited and meaningless substance completing the assignment.
Student failed to complete the assignment.
4
Correctly written tag with corresponding end tag. The text of your title should describe the topic of your web page</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
4</p>
<p><strong>Correctly written charset, description, keywords, and author meta tags</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.</p>
<p> 8</p>
<p><strong>At least three headings, using at least two types of heading tags. Ex: </p>
<h1>, </p>
<h2>, </p>
<h3>, etc.</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
4</p>
<p><strong>Correct use of </p>
<p> and <br /> tags</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
4</p>
<p><strong>At least 3 external hyperlinks</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.</p>
<p> 16</p>
<p><strong>At least 3 images on your web page (make sure you also include the image files in your zip archive)</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
8</p>
<p><strong>At least 1 clickable image (an image nested inside of a hyperlink)</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
8</p>
<p><strong>One ordered or unordered list, with at least 3 list items</strong></p>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
8</p>
<p><strong>Correctly created zip archive that contains all files for webpage (maintaining original folder structure)</strong></p>
<ul>
<li>No spaces in file names</li>
<li>Home page file named LastFirstHomePage.html (where “Last” and “First” are replaced with your last and first name, respectively)</li>
<li>Only create ONE zip file containing all HTML, CSS, image files, etc. Do not zip each file separately. Do not nest one zip file inside another one.</li>
</ul>
<p>Student effectively completed the assignment.<br />
Student partially completed the assignment.<br />
The student provided limited and meaningless substance completing the assignment.<br />
Student failed to complete the assignment.<br />
4</p>
<p><strong>Total</strong></p>
<p>100</p>
<p><strong>***Note: Your website must be written in HTML5 and include the correct HTML5 DOCTYPE statement to receive credit for this assignment.</strong></p>
</div>
</div>
</section>
<section class="action_block light_violet_bg pad20-rl-tablet pad50-t">
<div class="width dark_violet_bg violet_decor dark_violet_decor pad50-t pad20-t-tablet pad30-t-large wow bounceInUp">
<div class="t-center pad50-t pad20-t-tablet">
<div class="logo w160px pad10-rl mar-auto-rl mar30-b mar20-b-tablet">
<img src="http://www.essayby.com/wp-content/uploads/2021/09/logo-1.svg" alt="Logo" class="w100" height="44">
</div>
<h3 class="text-white h3 t36px pad20-t pad10-b pad5-tb-tablet mar5-b">Expert paper writers are just a few clicks away</h3>
<p class="text-white t16px pad50-b mar50-b pad20-b-tablet mar20-b-tablet mar30-b-large">Place an order in 3 easy steps. Takes less than 5 mins.</p>
<div class="calculator t-left">
<div class="uvocalc--wrapper">
<div class="uvocalc">
<h2 class="uvocalc--title">Calculate the price of your order</h2>
<div data-calc-mini class="uvocalc--container">
<form name="uvocalculator" method="get" action="/order" data-calculator-form style="display: block;">
<div class="uvocalc--type_of_paper">
<label for="paperTypeId">Type of paper needed:</label>
<div class="uvocalc--select">
<select class="f_sz_400 validate[required]" name="paperTypeId" data-academic-level-select></select>
</div>
</div>
<div class="uvocalc--pages">
<div class="uvocalc--pages__title">
<label for="pages">Pages:</label>
<div class="uvocalc--pages__words" data-words-qty></div>
</div>
<div class="uvocalc--pages__buttons">
<button type="button" title="Decrease" data-minus-button><span>−</span></button>
<input name="pages" value="1" data-pages-input type="text" />
<button type="button" title="Increase" data-plus-button><span>+</span></button>
</div>
</div>
<div class="uvocalc--field_tip uvocalc--field_tip_discount" data-tip-discount>You will get a personal manager and a discount.</div>
<div class="uvocalc--field_tip uvocalc--field_tip_paper_type_id" data-notice></div>
<div class="uvocalc--academic_level">
<label>Academic level:</label>
<div class="uvocalc--academic_level_control visible-in-desktop" data-academic-level-control-upgrade></div>
<div class="visible-in-mobile">
<div class="uvocalc--select">
<select data-academic-level-select-mobile></select>
</div>
</div>
<div class="uvocalc--academic_level_content" data-tariff-control-upgrade></div>
</div>
<div class="uvocalc--deadline">
We'll send you the first draft for approval by <strong data-ext-time=""><span> at </span></strong>
</div>
<div class="uvocalc--total_price_container">
<div class="uvocalc--total_price_title">Total price:</div>
<div class="uvocalc--total_price" data-total-price><span>$</span>0.00</div>
</div>
<div class="uvocalc--submit__container">
<button
class="content_button violet_button mar10-b mar0-b-large"
type="submit"
title="Continue to Order"
data-submit-button=""
>Continue to order</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="white_bg ">
<div class="width flex pad50-t pad20-b-tablet pad50-b-large mar10-b-tablet mar5-tb-large">
<ul class="footer_links text-medium flex w100 mar20-b pad10-b">
<li id="menu-item-295786" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295786"><a href="https://www.essayby.com/faq/">Frequently Asked Questions</a></li>
<li id="menu-item-295789" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295789"><a href="https://www.essayby.com/fair-use-policy/">Fair Use Policy</a></li>
<li id="menu-item-295790" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295790"><a href="https://www.essayby.com/how-it-works/">How It Works</a></li>
<li id="menu-item-295791" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295791"><a href="https://www.essayby.com/revision-policy/">Revision Policy</a></li>
<li id="menu-item-295792" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295792"><a href="https://www.essayby.com/plagiarism-free-guarantee/">Plagiarism-free Guarantee</a></li>
<li id="menu-item-295793" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295793"><a href="https://www.essayby.com/money-back-guarantee/">Money-back Guarantee</a></li>
<li id="menu-item-295794" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-295794"><a href="https://www.essayby.com/terms-and-conditions/">Terms and Conditions</a></li>
</ul>
<div class="contacts_group flex flex-column flex-grow1 pad5-t pad0-t-tablet mar20-t mar0-t-tablet">
<a href="mailto:support@essayby.com" class="mail flex flex-ai-center">
<span class="icon t-center mar10-r ">
<svg width="17" height="13" viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg" version="1.1" preserveAspectRatio="xMinYMin">
<use xlink:href="#img-shape-mail"></use>
</svg>
</span>
<span class="mar5-l mar0-l-tablet">support@essayby.com</span>
</a>
<div class="soc flex w100-tablet">
<a href="https://www.facebook.com/essayby.com1" target="_blank" class="fb"></a>
<a href="essayby" target="_blank" class="tw"></a>
</div>
</div>
<ul class="services_menu w100 flex flex-grow1 pad10-b pad0-b-tablet mar20-b mar0-b-tablet">
<li id="menu-item-303468" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303468"><a href="https://www.essayby.com/accounting-homework-help-service/">Accounting Homework Help Service</a></li>
<li id="menu-item-303469" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303469"><a href="https://www.essayby.com/nursing-homework-help/">Nursing Homework Help</a></li>
<li id="menu-item-303733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-303733"><a href="https://www.essayby.com/chemistry-assignment-help/">Chemistry Assignment Help</a></li>
</ul>
</div>
<div class="bottom pad5-t-large pad5-b pad0-b-tablet">
<div class="width flex flex-ai-center pad10-t-tablet pad10-b">
<div class="payments flex flex-ai-center flex-jc-center mar-auto-l-tablet mar10-b mar0-b-tablet"></div>
<div class="logo_grey mar-auto-r mar20-r-tablet mar-auto-r-large mar5-t mar0-t-tablet"></div>
<p class="copy t12px mar5-t mar0-t-tablet">Copyright © 2025 EssayBy.com</p>
</div>
</div>
</footer>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/tinkerbell\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" id="jquery-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-content/themes/tinkerbell/js/main.js?ver=1.0" id="boomessays-js-js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" id="slick-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-includes/js/imagesloaded.min.js?ver=5.0.0" id="imagesloaded-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-includes/js/masonry.min.js?ver=4.2.2" id="masonry-js"></script>
<script type="text/javascript" src="https://www.essayby.com/static/js/scripts.js" id="scripts-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-content/plugins/proxim-flashcards/js/vendor.js?ver=1.0.0" id="flashcards_vendor_js-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-content/plugins/proxim-flashcards/js/flashcards.js?ver=1.0.0" id="flashcards_js-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-content/plugins/proxim-pricingtable/js/pricing-table.js?ver=1.0.0" id="pricingtable_js-js"></script>
<script type="text/javascript" src="https://www.essayby.com/wp-content/plugins/samples/dist/bundle.js?ver=1.0.0" id="samples_js-js"></script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/610405ee649e0a0a5cceb2df/1fbrrebe0';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
</body>
</html>
