CS 1100: Web Development: Client-Side Coding

Session 5: Using HTML Containers to Describe Pages

HTML Block Elements and Containers

Recall the distinction between inline elements and block elements. Inline elements, such as em, a, and time, are part of the text and flow within it. Block elements are their own objects on the page. They have width and height. By default, there will be space above and below them on the page. Also, block elements may contain other elements.

This week's reading includes a section on grouping elements. All are block elements. Like the HTML we learned about last week, they identify kinds of text in a document. But the grouping elements are about the purpose of the text more than their form. They enable what we call semantic markup of a document. Semantic markup is one of the most important strengths of HTML.

I use grouping elements to define the structure of the pages on the course website. Use the devtools to view the source of this page, which has the same structure as all the session pages. The body consists of a nav bar along the top, a header, an article, and a footer. The article contains an h2 heading followed by one or more sections.

There are two generic containers, one of each type: 

<div>
  A div is a generic block-element container.
</div>
<p>
  A span is <span>a generic inline-element container</span>.
</p>
div and span are easy to use — and to overuse. Use content-specific containers whenever possible. There are many available, and they convey more precisely the purpose of an element. Use them!

If we should use div and span only sparingly, why do they exist? They can be useful when we are grouping items to coordinate their appearance and no suitable semantic grouping element exists.

For example, the footer on each course page consists of two lines of text that I want to style in a particular way: italicized, each displayed flush to the right of the page, and with no vertical space above or below either. Neither is quite a paragraph, and there is no specific grouping element that expresses their purpose. So I use a div to which I can apply the desired styles.

Practice: Recreating Page Content

How do we learn to use these elements? Try them out! Find a page and use the grouping elements to describe the page's structure and content. Doing so, we will bump into choices for how to describe the various elements of the document. Then we can learn: look the elements up in the MDN elements reference, ask classmates and other web developers, or search the web for pointers.

As practice today, let's mock the content and structure of two pages:

I created an index page for today's code that links to these pages and to our HTML copies.

Download this starter code. You can use these files to follow along and try some of the same things that I try in class.

Keep in mind: we are recreating the structure and content of the pages, not their appearance. Next week, we will begin our study of CSS and learn how to recreate the styles of many, may pages, including perhaps these two.

Recreating a Page from the Northern Iowan

This page has an image. Even if we don't care about the layout and styling of the page, we can at least drop an image into the flow. We don't have permission to use the Northern Iowan's photo, so I found an image of a swimmer competing on Unsplash: https://unsplash.com/photos/a-group-of-people-swimming-in-a-pool-TRLkrxytGNI The full image is 5 megabytes, so I downloaded the medium image, which is only 500K. Unsplash even gives us text to use in our credits.

For now, here's an outline of the steps we worked through in class.

The differently styled buttons, the sections in the footer, the icons — all are a task for CSS.

Examine the news pages you visit... Once you get used to taking web pages apart, you notice they are all different — except they are all the same! (logo, header, etc.)

Recreating the Cat Page at Wikipedia

For now, here's an outline of the steps we worked through in class.

How do handle such a complicated page? Decmpose it into parts, using semantic markup, and then decompose the parts into parts. Eventually, we get to bite-size chunks: paragraphs, lists, etc.

Redux: Recreating Pages as Practice

These pages don't look good, or at least the way the originals do. Keep in mind: we are recreating the structure and content of the pages, not their appearance.

Why go the effort to mark headers and footers, navs and asides, main sections? (ADD A LINK into this week's reading.) They define structure, and our tools can use this structure. Accessibility: the right thing to do, and the law. Preparation for the future: you don't know what tools your readers will be using, because they may not have been invented yet (smart watch).

Pay attention to the web pages you use. Other people expect pages to work in particular ways, and you want your pages to work those ways, too. When practicing:

Following Up on the Homework

I had fun looking at your pages and learning about you. Many of you seemed to have fun doing this assignment. I enjoyed the stories you told. Some of you asked me questions about myself, which I gladly answered. I was impressed with your willingness to try things out!

I am trying to balance two forces when creating assignments:

So: I'll try to offer options (as in HW 2) but whenever possible leave you the option to build a page you want to build. Stay excited!

Grading: 20 points possible. 10 * 20 == 200, / 2 = 100. Homework grade!

Two midterms: 50 points possible. 2 * 50 == 100. Exam grade!

My goal is for everyone to keep having fun and score 20/20 and 50/50 on everything. I know things will get busier as the term progresses, but let's make this course a bright spot in your week.

Closing Comments

Next time: tables and images.

Homework 2 is due Friday.