Unit03 Handcoding HTML5

Overview

In this lesson you will build two pages based and linking them together. These pages will be based on the website you designed in the previous unit. You will have to write the content for these pages (no filler text).

Name the home page "index.html" so it will load as the default page. Next you will expand your knowledge of HTML5 tags by creating a second page with various kinds of lists. Name the second page so it reflects the purpose of the page. If the second page is about your business then name it "about.html". If you second page contains events or shows, name it events.html or shows.html.

Once you have added all the other required content, you will need to transfer both the index.html and the other html page from your local computer to GitHub. Be sure that you check your work by opening your subdomain (https://yourgithubaccount.github.io/dwdd1600) and clicking on the "Hand Coding Assignment" link. What you see is what we grade. We will be checking your work using the w3c validator and audit tool.

Vocabulary

HTML: HyperText Markup Language. The coding scheme used to format text for use on the World Wide Web.
Semantic Elements: Tags that clearly describe their meaning to both the browser and the developer. Example <footer>
Non-Semantic Elements: Tells nothing about its content. Example <span>, <div>, etc.
Validation (W3C): Ensuring that the pages on the website conform to the norms or standards defined by various organizations
Elements: Everything from the start tag to the end tag
Attributes: Attributes provide additional information about an element. Example name/value pairs like: alt="logo"
Tags: The HTML from < to the >. Most come as opening and closing combinations but a few are single like the break tag.
Block Level Elements: Start a new line. Example: paragraph and heading tags.
Inline Level Elements: Does not start on a new line and only takes up as much width as necessary
Relative Links: URLs that reference files on the same server within the same directory (folder). Does not contain a protocol (http, https, ftp, etc.)
Absolute Links: Complete internet address that takes one to the exact directory or file of a website. Starts with a protocol (http: https: ftp: etc. ) example: http://www.apple.com/index.html
Meta Elements: An HTML code that resides in the head section of a web page and includes information about the page, such as keywords and descriptions.
Entities: Display reserved characters in HTML that are not typically found on the keyboard. Example ©
Viewport: The viewport is the user's visible area of a web page. It varies with the device - it will be smaller on a mobile phone than on a computer screen.

Tools

Download Visual Studio Code for Editing
Check your page using the Markup Validation Serivce
Use my Module 3 AutoGrader to check your own work before submitting.

Objectives

At the end of this module, you should be able to...

Create two basic HTML5 pages.
Populate the head tag with a language, description, character set, viewport, and title.
Populate the body with four main parts (header, nav, main, footer).
Properly use heading tags.
Build several different types of links.
Build three kinds of lists.
Contrast block vs. in line elements.
Describe and use HTML entities and comments.
Demonstrate semantic markup best practices.
Validate your page with different tools.
Upload your pages to a serve.

Tasks

Learn about Character Sets by Paul Tero
Read Page Structure by Lynch & Horton
Read HTML Tag Versus an HTML Element by Jennifer Kyrnin
Read HTML h1 to h6 Tags by w3schools
Review the importance of using heading tags appropiatly
Review the difference between titles and heading
Read HTML paragraph tags by w3schools
Read HTML blockquote Tag by w3schools
Read about the horizontal rule tag by w3schools
Read HTML break Tag by w3schools
Read HTML Unordered List Tag by w3schools
Read HTML Ordered List Tag by w3schools
Read HTML Definition List Tag by w3schools
Read HTML Links by w3schools
Read HTML Attributes by w3schools
Read HTML break Tag by w3schools
Read HTML Text Formatting (bold, italic, etc.)
Read HTML comment Tag by w3schools
Use the text on this site for the follow along activity
Use this address for the National Archives
Read The Principle of Proximity in Web Design by Staff

Watch

Canvas Videos
Watch 1600_3a-Module Overview
Watch 1600_3b-Build the Page Head
Watch 1600_3c-Four Sections of the Body
Watch 1600_3d-Build the Page Header
Watch 1600_3e-Build the Navigation Links
Watch 1600_3f-Add a Footer
Watch 1600_3g-Create Second Page
Watch 1600_3h-Build First Page Content
Watch 1600_3i-Build Second Page Content
Watch 1600_3j-Enhance with AI
Watch 1600_3k-Common Mistakes
Watch 1600_3l-Handcoding Assignment
Watch 1600_3m-Using the Audit Tool

Assignment Example

View the index page example.

View the tools page example.

Assignment Checklists

Follow Along Activity(5 pts)

Follow along with videos in this unit to create you own version of the "Declaration of Independence" Website.
Rename the completed assignment folder as "03follow-along".
Upload this folder to your GitHub account and make sure the link works.
Submit a link to your site in Canvas.

Unit03 Handcoding HTML5 (10 pts)

Create your first two pages and upload them to your website. Remember to name the home page "index.html" (lowercase i) or it will not show up. Use real text related to your topic. Filler, fluff, or nonsense text will not be accepted.

Document Head Requirements

Please include a title in the head of the document.

The HTML language attribute is present
The title is present referencing the company name.
The character set is present
The author meta tag is present
The description meta tag is present
The viewport meta tag is present

Semantic Tags

Use four semantic html5 tags for the body of your page.

Use a header tag for the company name and slogan
Use a nav tag for the navigation
Use a main tag for the page content
Use a footer tag for copyright information

Site Name Requirements

Use a span tag for the site name.

Within the header tag, use a span tag for the company name or site name.