• Unit 4: Organizing Content and Information for More Complex Websites using HTML and CSS

    Now that we have a strong foundation for creating simple single-page websites, we will learn how to develop websites with several parts accessed through a menu. This unit will address contemporary best-practices for creating sophisticated websites, new technologies on the horizon, and a deprecated technique that you may find in some legacy code.

    Completing this unit should take you approximately 6 hours.

    • Upon successful completion of this unit, you will be able to:

      • identify deprecated uses of frames in existing HTML code;
      • use tags in an HTML file with associated CSS instructions to organize information and content in syntactically and stylistically correct HTML4; and
      • use newer HTML5 tags with associated CSS instructions to organize information and content. 

    • 4.1: Tags

      • Evan Goer's "Pocket HTML Tutorial: Div and Span" URL

        The <div> and <span> tags are crucial to contemporary site design. With "id" and "class" attributes, they allow the coder to specify different presentational qualities for the different parts of the Website. For instance, it is common to have a <div> for the banner, a <div> for the body, a <div> for side-navigation, and a <div> for the footer. Since you can specify different background, color, and font characteristics for each id using CSS selectors, it is easy to create familiar webpage layouts using these tools.

    • 4.2: Using CSS to Format an HTML List as Navigation Bar

      • W3Schools: "CSS Navigation Bar" URL

        Navigation bars have become expected features on sophisticated modern websites. Fortunately, with the skills you have already developed for manipulating the presentation of HTML lists using CSS, you are able to create a variety of navigation bar styles.

    • 4.3: Styling HTML Tags to Create Familiar Multi-Column Layouts

      • Multi-Column Layouts for the HTML4 and CSS Beginner URL

        This tutorial demonstrates how to use the <div> tag with CSS to create a familiar multi-column layout. You will use this tutorial to convert your simple example webpage into a sophisticated 3-column layout. Please use the HTML and CSS files attached here as examples while you work through the reading.

      • Web Design: "CSS Challenge 3 and 4" URL

        These CSS Challenges provide example HTML code prepared for the common 2-column layouts found throughout the Web today. They challenge you to produce CSS code that formats them. In a sense, this is the culmination of all the skills you have learned so far, so return to this challenge frequently to test your skills.

        Using the examples provided in this sub-unit and the skills you have developed by working with the CSS Challenges, now try to apply a 2-column or 3-column layout to your example website. This will entail editing both your HTML and your CSS. You might consider reusing some of the CSS code you developed for the CSS Challenges for this assignment - remember that modularity and reusability are two of the merits of abstracting presentational markup from semantic markup. Work towards making an aesthetically pleasing and usable website from the materials you have already developed. At this point, you have enough background information to hunt online resources for ideas, code snippets, and tutorials to help your realize virtually any design you can imagine.

    • 4.4: New Tags in HTML5 Increase Semantic Specificity

      • Mark Pilgrim's "Dive Into HTML5: Semantics" URL

        You will remember that the role of HTML is to store semantic content, while the role of CSS is to abstract presentational information from this content. But, as you have probably observed, the <div> tag does not tell us much about the content that it encapsulates and only provides semantic information about this content through the use of ids or classes. Since this is somewhat against the spirit of abstracting presentational information from semantic content, the new HTML5 standard introduces some extra tags allow more semantically specific markup, often replacing the heavy reliance on the <div> tag in the older HTML4 standard. This optional chapter addresses these new tags. Most readers can skim up to the heading "New Semantic Elements in HTML5," but before using these new tags, it would be worth your time to read up on compatibility issues in HTML5 - which are addressed throughout Mark Pilgrim's book.

        Drawing on the multi-column layout you created using <div> tags and the HTML4 standard, try to "port" this website to the HTML5 standard using the information in Pilgrim's chapter.

    • Unit 4 Assessment

      • Unit 4 Assessment Quiz

        Take this assessment to see how well you understood this unit.

        • This assessment does not count towards your grade. It is just for practice!
        • You will see the correct answers when you submit your answers. Use this to help you study for the final exam!
        • You can take this assessment as many times as you want, whenever you want.