One easy way to help guide readers through your HTML pages is through
the use of ordered and unordered lists of points, like numbered lists
and bullet points. Another helpfule aid for readers is the use of
headers (book)You can find more about
using headers in general in your book,
pgs 525-527, whether
they're large headers at the top of pages or headers marking important
sections within your page.
Both of these HTML tag types help direct your reader through your html
pages, and makes your pages scannable. You can't
always control what your reader reads, and putting in headers and
bullet points will make it easier for your reader to find the parts
that he or she is most interested in reading. Instead of having
to read through every word you've written, skipping to try and find
what they find most important, they can jump to the portion that seems
most pertinent.
We'll talk about lists first and then headers before viewing examples
of how each type of tag is used on the cover
page of The New York Times.
<h4>Ordered Lists</h4>
One of the best ways to
make your information quickly accessible is to
use bullet points. Seamonkey allows you to add two sorts of
bullets -- ordered and unordered lists. Ordered lists have
numbers or letters, and are usually used if you expect a reader to
reuse those points later, in which case they'll need a reference for
them, or if there is a certain logic to the order in which they are
presented.
By clicking Seamonkey's "Apply or Remove Numbered List" icon, you can
create a numbered list (and therefore a list whose order matters), like
the speaking points, below.
To indent, use the tab key, and use shift-tab to move back to a higher
level in your lists. We won't be discussing how to use
different ordinal types (1, 2, 3; I, II, III; A, B, C), but if you
follow the link in item 1.2., above, you can find out on your own.
The HTML code that creates the list, above, is listed below. Note
that the <ol> tag is used to show where an ordered list is being
used, and appears at the beginning and end of the list items
(<li> for "list item") in each level of the list. "Nested"
<ol> tags, or tags within other tags, create the indented
lists. Take a look at the unordered list (<ul>) at the end
of the code sample.
For the sites you create in this class, I would recommend using
SeaMonkey to create more of your tags. We're just viewing the
HTML to help you know how to "read" the page's source code directly.
1 <ol> 2 <li>There are two types of lists.</li> 3 <li>The first is the "ordered list".</li> 4 <ol> 5 <li>There are many types of ordering available.</li> 6 <li>These types are discussed in great detail at <a 7 href="http://www.w3.org/TR/html401/struct/lists.html">this page at the 8 w3c</a>.</li> 9 <li>Specific numbering schemes are displayed <a 10 href="http://www.w3.org/TR/html401/struct/lists.html#h-10.3.1">here</a>.<br> 11 </li> 12 </ol> 13 <li>The second is the "unordered list"</li> 14 <ul> 15 <li>Unordered lists are bullet points.</li> 16 <li>We'll discuss them, below.</li> 17 </ul> 18 </ol>
<h4>Unordered lists</h4>
Unordered lists are useful when you are trying to create a general
impression through examples rather than something a reader might want
to reference later, or when you're listing items whose order is of no
importance. The w3c website uses
recipe ingredients as an example for an unordered list. Other
items that might belong in an unordered list might include the
following:
Pet types
dog
cat
bird
hamster
zebra
Places to eat on Hillsborough
Bruegger's
Golden Dragon
Sylvia's
Use Seamonkey's "Apply or remove bulleted list" to put in an unordered
list, again using the tab button to indent and shift-tab to move back
up in your list hierarchy. Here's the code for these unordered
lists.
Questions: How many
unordered lists are in our example? How could we make the fact
that there are nested lists more "human readable"?
<h4>The New York Times'
use of ordered lists</h4>
The New York Times uses an
ordered list to display its ten most popularly emailed stories, as can
be seen in the page, above. An ordered list makes sense because
these are in order of popularity. Note the <ol> tag after
the division (<div>) tag on the page, and that each story is
displayed inside of <li> ("list item") tags.
1 <divclass="tabContenttabContentActive"id="mostEmailed"><ol> 2 <li><ahref="http://www.nytimes.com/2009/11/10/science/10angier.html?em"title="Clicktogotothisarticle">Basics: Pigs Prove to Be Smart, if Not Vain</a></li> 3 <li><ahref="http://www.nytimes.com/2009/11/10/health/10mind.html?em"title="Clicktogotothisarticle">Mind: A Dream Interpretation: Tuneups for the Brain</a></li> 4 <li><ahref="http://www.nytimes.com/2009/11/10/opinion/10baron-cohen.html?em"title="Clicktogotothisarticle">Op-Ed Contributor: The Short Life of a Diagnosis</a></li> 5 <li><ahref="http://www.nytimes.com/2009/11/11/opinion/11dowd.html?em"title="Clicktogotothisarticle">Maureen Dowd: Virtuous Bankers? Really!?!</a></li> 6 7 <li><ahref="http://www.nytimes.com/2009/11/10/opinion/10brooks.html?em"title="Clicktogotothisarticle">David Brooks: The Rush to Therapy</a></li> 8 <li><ahref="http://www.nytimes.com/2009/11/11/dining/11unit.html?em"title="Clicktogotothisarticle">United Tastes: Saving New Orleans Culture, One Sandwich at a Time</a></li> 9 <li><ahref="http://www.nytimes.com/2009/11/08/world/europe/08britain.html?em"title="Clicktogotothisarticle">Who Is a Jew? Court Ruling in Britain Raises Question</a></li> 10 <li><ahref="http://www.nytimes.com/2009/11/10/science/10patch.html?em"title="Clicktogotothisarticle">Afloat in the Ocean, Expanding Islands of Trash</a></li> 11 <li><ahref="http://www.nytimes.com/2009/11/10/health/research/10nutr.html?em"title="Clicktogotothisarticle">Vital Signs: Nutrition: Chocolate Milk May Reduce Inflammation</a></li> 12 <li><ahref="http://www.nytimes.com/2009/11/08/opinion/08kristof.html?em"title="Clicktogotothisarticle">Nicholas D. Kristof: Chemicals in Our Food, and Bodies</a></li> 13 </ol> 14 <aclass="more"href="http://www.nytimes.com/gst/mostemailed.html">Go to Complete List »</a> 15 </div><!--#mostemailedtop10 -->
<h4>Headers</h4>
Headers can be used to set up
sections within a longer
page. There are a number of common header "types", with each type
really only representing their relative importance. h1 headers
are the most important (and are typically displayed in the largest
font), with h2 of the next importance, then h3, etc.
Note that the size and presentation of headers can change quite a bit
between different HTML templates, as we'll see in our next
exercise. Sometimes, for whatever reason, designers will have a
higher number header display use a larger font than a lower numbered
header, or they'll have the text center itself on the page, or display
in a color that doesn't stand out from the page's background.
Though these might not be intuitive changes, don't be surprised if your
HTML changes in ways you wouldn't expect once you've given it to
someone else or put it into a template. Recheck its display with
each new incarnation.
Also note that you are not required to use each level of header before
using the next smallest. This page uses <h2> tags for its
main topic and <h4> for its section headings. This page
displays what size headers it's using within the headers' contents, so
that you can see the difference between the display of <h2> and
<h4> tags. Don't type in
<h4>, etc, in your own pages! The headers should
only be visible in your code, not the page's display.
To insert headers, use the "Choose a paragraph format" drop down at the
top left of SeaMonkey Composer, as pictured..
<h4>The New York Times'
use of headers</h4>
Here, notice The Times' use
of <h2> tags for the story titles, <h6> tags for the
stories' bylines, and a quick, bulleted (unordered) list to link to
related stories below the "summary" of each story.
1 <!--startledepackage--> 2 <divclass="wideBopeningmodule"> 3 <divclass="aColumn"> 4 <divclass="columnGroupfirst"> 5 <divclass="story"> 6 <h2><ahref="http://www.nytimes.com/2009/11/12/world/asia/12chinaflu.html?hp"> 7 China’s Tough Measures on Flu Appear to Be Effective</a></h2> 8 <h6class="byline"> 9 By EDWARD WONG <spanclass="timestamp">47 minutes ago</span> 10 11 </h6> 12 <pclass="summary"> 13 China’s actions, especially quarantines of foreign visitors, brought criticism abroad, but health officials say the spread of H1N1 may have been slowed. </p> 14 <ulclass="refer"> 15 <li><ahref="http://topics.nytimes.com/top/reference/timestopics/subjects/i/influenza/swine_influenza/index.html">Times Topics: Swine Flu</a></li> 16 </ul> 17 18 </div> 19 <divclass="story"> 20 <h3><ahref="http://www.nytimes.com/2009/11/11/world/asia/11policy.html?hp"> 21 3 Obama Advisers Favor More Troops for Afghanistan</a></h3> 22 <h6class="byline"> 23 By ELISABETH BUMILLER and DAVID E. SANGER </h6> 24 25 <pclass="summary"> 26 The president’s national security team is coalescing around a proposal to send 30,000 or more additional troops to Afghanistan, officials say. </p> 27 <ulclass="refer"> 28 <li><ahref="http://www.nytimes.com/2009/11/12/world/asia/12afghan.html?hp">Body of Missing Soldier Found in Afghanistan</a><spanclass="timestamp">8:01 AM ET</span></li> 29 </ul> 30 31 </div> 32 <divclass="story"> 33 <h3><ahref="http://www.nytimes.com/2009/11/11/world/middleeast/11blackwater.html?hp"> 34 Blackwater Said to Pursue Bribes to Iraq After 17 Died</a></h3> 35 <h6class="byline"> 36 By MARK MAZZETTI and JAMES RISEN </h6> 37 38 <pclass="summary"> 39 Former executives said it was unclear if payoffs of about $1 million were made to Iraqi officials, but the goal was to hush criticism and buy support after 17 civilians were killed. </p> 40 <ulclass="refer"> 41 <listyle="background-image:none;padding-left:0pt;"><IMGsrc="http://graphics8.nytimes.com/images/section/opinion/comment_icon.gif"alt="commenticon"style="margin-right:3px;padding-top:3px;"border="0"><spanclass="commentCountLink"articleid="1247465620487"overflowurl="http://community.nytimes.com/article/comments/2009/11/11/world/middleeast/11blackwater.html"></span></li> 42 </ul>
Question: What's easy
to read in the HTML source of The
Times' column of stories? What makes some
parts more difficult to read?
One of the best ways to
make your information quickly accessible is to
use bullet points. Seamonkey allows you to add two sorts of
bullets -- ordered and unordered lists. Ordered lists have
numbers or letters, and are usually used if you expect a reader to
reuse those points later, in which case they'll need a reference for
them, or if there is a certain logic to the order in which they are
presented.
Headers can be used to set up
sections within a longer
page. There are a number of common header "types", with each type
really only representing their relative importance. h1 headers
are the most important (and are typically displayed in the largest
font), with h2 of the next importance, then h3, etc.