Unit 2: Creating Pages with HTML

Overview

This unit gives the students the basics of HTML coding. In this unit, an emphasis is placed on document content and structure, as opposed to presentation (Presentation will be covered in Unit 3). This unit can be completed entirely with a web browser and text/HTML editor (see Software and Hardware Requirements for additional details). The product that students will create while learning HTML code, and later CSS and JavaScript, is a working portfolio, which is used to demonstrate their mastery of the skills learned during this course. Students create the scaffolding for their portfolio in this unit, then continue to build on it in subsequent units.

Depending on your philosophy and the types of students you have, there are at least three approaches to teaching the curriculum from this point forward:

1. Independent Study. Set up your class so that students are able to work at their own pace through the curriculum. Students are extremely varied in their comfort with code, typing speed, and ability to understand the material. Allowing students to proceed independently through the lessons enables each student to work at a pace that best meets their needs. Cooperative learning opportunities are also built into the curriculum however, so the course will need to be structured in a way that includes these activities. For example, when a student comes to an assignment that requires cooperative learning, they must find a partner to complete the activity. Typically there are groups of students working at a similar pace. The instructor may have to facilitate these arrangements, and reinforce that cooperation is an expectation for every student. Students need to be willing to seek help and provide help.
2. Traditional Classroom Study. Proceed step-by-step through the curriculum as a class, with all students working on the same lessons. Given the individual variation between students, advanced students can be encouraged to exceed course requirements by helping teach their peers, or by exploring advanced topics related to each lesson using online tutorials such as those available on w3schools.com.
3. Hybrid. Set up your class so students can progress at their own pace within each unit, but regroup before proceeding to the next unit. As with the preceding approach, instructors should be prepared with additional learning opportunities for advanced students. Starting with Unit 2, each unit concludes with a Reflections activity in which students write about what they've learned in that unit. This provides another opportunity to engage advanced students, who could supplement their personal reflections (written to their portfolio website) by contributing content to a classroom blog. Also, the curriculum includes a short video at the start of each unit, summarizing the content contained in that unit. If students are working independently through a lesson, they could regroup as a class to watch the video.

Estimated time required: 5 to 8 hours

Learner Outcomes

Students will:

• be able to use pre-coding design steps to aid in the planning of a web site prior to building it.
• be able to identify a site's purpose and audience and utilize that information in designing a web page.
• be able to conceptualize a web site's design and prepare a sketch of the web site outlining key design elements.
• have a basic understanding of HTML syntax, including the difference between elements and attributes.
• have learned the basic tags required for all HTML documents and be able to create a blank HTML page with all of the essential tags in place.
• be able to use some common tags for adding content to a web page including <h1>, <h2>, <h3>, <p>, and <div>
• be able to apply the concepts of nesting and assigning attributes to tags.
• be able to properly utilize headings and paragraphs to structure content on a web page.
• be able to explain the difference between an ordered and unordered list.
• be able to identify ordered and unordered lists when you see them on web pages.
• be able to create a list using HTML.
• be able to create a navigation menu using an unordered list.
• be able to create a link to another web page on the Internet.
• be able to create a relative link from one page to another within your website.
• have converted a list of words into a functional navigation menu.
• be able to set up a same-page link that allows users to skip to the main content of a web page.
• be able to add an email link to a web page.
• be able to create a simple data table that includes <table> <caption>, <thead>, <tbody>, <tr>, <th> and <td> elements as well as scope attributes.

Modules

• Module 1: Pre-Coding
• Module 2: Basic HTML Markup
• Module 3: HTML Lists
• Module 4: Creating Links
• Module 5: Creating a Data Table
• Module 6: Reflections

Assessment

See the Unit 2 Question Bank for sample questions, organized by module. These questions could be used as needed for quizzes and exams. See also our Recommended Assessment for the overall course.