Web Design & Development 1 in HTML & CSS -- Unit 6 Hyperlinks and Data Structures:
This is the sixth in an eight-unit course which aims for students to master HTML & CSS basics to write complete static web pages. This unit explores concepts and applications for hyperlinks and other data structures such as lists and tables. It includes conceptual topics about hyperlinks, analysis of data to determine appropriate data structures, relevant CSS properties, and more.
If you need a complete curriculum for teaching HTML & CSS in a classroom setting, consider the BUNDLE
that contains all 8 units, supplemental ebook, and master student view!
The materials are classroom-ready and created in easily editable formats (such as HTML and Word documents) for quick customization. A variety of activities are provided, including hands-on work with professional tools, worksheets and assessments with answer keys, and web pages and web apps made specifically for use in this course.
This package includes the complete resources for Unit 6 (Hyperlinks and Data Structures), including lesson plans, answer keys, and project files. The zip file contains 7 primary folders organizing the unit:
Lesson 1 - Intro to Hyperlinks:
In this lesson, students will use the HTML anchor (a) tag to create links between web pages and other typical web resources like images. They will apply different values in the HREF attribute including internal versus external URLS as well as relative versus absolute paths. Once their hyperlinks are functional, students will style these links using the appropriate CSS pseudoclass selectors representing various states of the link (link, active, visited, hover).
Lesson 2 - Special Hyperlinks:
In this lesson, students will use the HTML anchor (a) tag for special-purpose links such as bookmark/faq-style anchors and application schemes like tel: which launches phone applications to dial a phone number. Students will continue to apply CSS styles using pseudoclasses for link states and plain CSS class names for styling navigation links differently than external links and other specialized links.
Lesson 3 - Lists:
In this lesson, students will apply the HTML elements for creating ordered (numbered) and unordered (bulleted) lists. This includes the UL, OL, and LI tags. Students will study which kinds of data are appropriate for organizing into list structures, and they will apply CSS using list-specific properties such as list-style-type.
Lesson 4 - Tables:
In this lesson, students will apply the HTML elements for creating tables. This includes the TABLE, THEAD, TBODY, TFOOT, TR, TH, and TD tags. Students will study which kinds of data are appropriate for organizing into table structures, and they will apply CSS using table-specific properties such as border-collapse.
Lesson 5 - Additional Data Structures:
In this lesson students will explore miscellaneous HTML tags for organizing content on their web pages, including but not limited to BLOCKQUOTE, FIGURE, IFRAME, and more. Students will determine which kinds of data are appropriate for these structures, and they will apply CSS using properties appropriate for styling these structures.
Unit Activity - Improve My Web Elements:
In this activity, students will expand their work from a previous activity, adding new pages and updating the old ones, to both describe and apply their cumulative knowledge and skills.
Review and Assessment:
Use the data-structures.html reading as a summary review document with suggested activities that students should be able to complete on their own by the end of the unit. The provided assessment may be used directly as an exam or modified as needed
For the next unit, see Unit 7: Layouts and Response. For the previous unit, see Unit 5: The Box Model. Also check out the complete 8-unit bundle for a full class in HTML & CSS.