Chapter 6: Static Data on the World-Wide Web

6.2 HyperText Markup Language (HTML)

The HyperText Markup Language (HTML) is designed to give your information semantic structure that can be understood by both people and computers.

The full specification of HTML 5.0.

Textual Content

Consider the information in Dodge’s Geography of New England (1912) describing Massachusetts. Would you understand it as easily if it appeared as one big clump of text, as follows?

Massachusetts Cities and Towns Gain in Population. In Massachusetts (Fig. 104) the steady drift of the people toward the cities is the most striking feature in the growth and movement of population. (Fig. 103.) This state has a greater number of large cities than any other in the Union and of all the states only Rhode Island surpasses it in a greater proportion of urban to rural population. At the same time the rate of increase in the number of the people of the cities or urban centers in Massachusetts is less than that of New York, and is exceeded by that of Rhode Island and Connecticut. In 1910 Massachusetts had twenty-five cities of more than 25,000 people; with this number we may compare New York with twenty-one and New Jersey with fourteen such centers. Including only cities having 10,000 or more persons we find that fifty-five cities had more than four-fifths of all the people living in Massachusetts. Boston (Fig. 107), the greatest city of New England, beginning as a little settlement on a hilly peninsula jutting out into Massachusetts Bay, has extended for miles along the shore; has filled and occupied the adjacent marshes; and has from time to time taken in large areas to the south and west, until to-day it covers an area of not less than forty-three square miles. The fifth city in size and the second great commercial center of the Union, its growth is due to the advantages of its position. Nature endowed it with a fine, deep, and spacious harbor (Adv. Geog., Fig. 214), and its situation farther inland than that of any other city north of Cape Cod has attracted a large coastwise and foreign trade. Boston is the second seaport in the country. New York alone surpasses it in extent of commerce. It is America's greatest wool market, as well as its greatest market for leather and leather goods; and it has a large and growing trade in many other imported or domestic manufactured articles. Railroads (Fig. 107) radiating in all directions connect the city with every part of New England as well as with New York and the West. Hence it is the natural outlet for the agricultural and manufactured products of all New England with the exception of southwestern Connecticut. This last mentioned region finds its most accessible market in New York City. Lines of elevated and electric railroads aided by a fine subway in the heart of the city supply means for local transportation. These connecting with steam roads and trolley lines also afford efficient and rapid communication with the scores of populous suburbs that fringe the borders of the city as well as with many other important places. Boston is one of the five great industrial cities of the United States. Like most large cities it has varied manufactures. It ranks fourth as a center for the refining of sugar and molasses. A literary as well as an educational center, it ranks fourth also in printing and publishing. The making of clothing, of boots and shoes, and of foundry and machine-shop products is also important. Large quantities of coffee and spices are imported and here prepared for market.

For millenia, writers have structured their text to make it easier to read, breaking it into semantic groups with different meanings, such as headings, paragraphs, lists, tables, etc.

To distinguish these groups of text visually, they would use different styles such as spacing, typeface, size, italics, color, et al.

For example, in traditional typographic convention, headings are generally in larger type and in bold face, both headings and paragraphs are usually set off with a margin before and after, lists have bullets (•) or numbers in front of each list item, emphasized text is set in italics, etc.

The HyperText Markup Language (HTML) interpreted by Web browsers provides the same capabilities, using extra instructions called markup to describe the semantics of the text.

Default styles for HTML markup are defined by Web browsers and generally follow the above conventions.

HTML markup elements consist of an opening tag and a closing tag surrounding content, in the format <tag>text</tag>; for example:

Headings of different importance, used for titles and subtitles:

<h1>The Geography of New England</h1>
<h2>I. New England as a Whole</h2>
<h3>Size and Location</h3>

The Geography of New England

I. New England as a Whole

Size and Location


Paragraphs used for long passages of text, commonly in the body of a document:

<p>In Massachusetts (Fig. 104) the steady drift of the people toward the cities is the most striking feature in the growth and movement of population. (Fig. 103.) 
This state has a greater number of large cities than any other in the Union and of all the states only Rhode Island surpasses it in a greater proportion of urban to rural population. 
At the same time the rate of increase in the number of the people of the cities or urban centers in Massachusetts is less than that of New York, and is exceeded by that of Rhode Island and Connecticut. 
In 1910 Massachusetts had twenty-five cities of more than 25,000 people; with this number we may compare New York with twenty-one and New Jersey with fourteen such centers. 
Including only cities having 10,000 or more persons we find that fifty-five cities had more than four-fifths of all the people living in Massachusetts.
</p>
<p>Boston (Fig. 107), the greatest city of New England, beginning as a little settlement on a hilly peninsula jutting out into Massachusetts Bay, has extended for miles along the shore; has filled and occupied the adjacent marshes; and has from time to time taken in large areas to the south and west, until to-day it covers an area of not less than forty-three square miles. 
The fifth city in size and the second great commercial center of the Union, its growth is due to the advantages of its position. 
Nature endowed it with a fine, deep, and spacious harbor (Adv. Geog., Fig. 214), and its situation farther inland than that of any other city north of Cape Cod has attracted a large coastwise and foreign trade. 
Boston is the second seaport in the country. 
New York alone surpasses it in extent of commerce. 
It is America's greatest wool market, as well as its greatest market for leather and leather goods; and it has a large and growing trade in many other imported or domestic manufactured articles.
</p>

In Massachusetts (Fig. 104) the steady drift of the people toward the cities is the most striking feature in the growth and movement of population. (Fig. 103.) This state has a greater number of large cities than any other in the Union and of all the states only Rhode Island surpasses it in a greater proportion of urban to rural population. At the same time the rate of increase in the number of the people of the cities or urban centers in Massachusetts is less than that of New York, and is exceeded by that of Rhode Island and Connecticut. In 1910 Massachusetts had twenty-five cities of more than 25,000 people; with this number we may compare New York with twenty-one and New Jersey with fourteen such centers. Including only cities having 10,000 or more persons we find that fifty-five cities had more than four-fifths of all the people living in Massachusetts.

Boston (Fig. 107), the greatest city of New England, beginning as a little settlement on a hilly peninsula jutting out into Massachusetts Bay, has extended for miles along the shore; has filled and occupied the adjacent marshes; and has from time to time taken in large areas to the south and west, until to-day it covers an area of not less than forty-three square miles. The fifth city in size and the second great commercial center of the Union, its growth is due to the advantages of its position. Nature endowed it with a fine, deep, and spacious harbor (Adv. Geog., Fig. 214), and its situation farther inland than that of any other city north of Cape Cod has attracted a large coastwise and foreign trade. Boston is the second seaport in the country. New York alone surpasses it in extent of commerce. It is America's greatest wool market, as well as its greatest market for leather and leather goods; and it has a large and growing trade in many other imported or domestic manufactured articles.

Lists, both unordered <ul>…</ul> and ordered <ol>…</ol>, with <li>…</li> tags around each list item:

<h3>Massachusetts</h3>
<h4>Colleges and Universities</h4>
<ol>
    <li>Amherst College, Non-sect., Amherst.</li>
    <li>Lasell Seminary, Non-sect., Auburndale.</li>
    <li>Boston College, R, C., Boston.</li>
    <li>Boston University, M, E., Boston.</li>
    <li>Simmons College, Non-sect., Boston.</li>
    <li>Harvard University, Non-sect., Cambridge.</li>
    <li>Radcliffe College, Non-sect., Cambridge.</li>
    <li>Tufts College, Univ., Medford.</li>
    <li>Smith College, Non-sect., Northampton.</li>
    <li>Mount Holyoke College, Non-sect., South Hadley.</li>
    <li>American International College, Cong., Springfield.</li>
    <li>Wellesley College, Non-sect., Wellesley.</li>
    <li>Williams College, Non-sect., Williamstown.</li>
    <li>Clark College, Non-sect., Worcester.</li>
    <li>Clark University, Non-sect., Worcester.</li>
    <li>College of the Holy Cross, R. C., Worcester.</li>
    <li>Massachusetts Agricultural College, Amherst.</li>
    <li>Massachusetts Institute of Technology, Boston.</li>
    <li>Worcester Polytechnic Institute, Worcester.</li>
</ol>

Massachusetts

Colleges and Universities

  1. Amherst College, Non-sect., Amherst.
  2. Lasell Seminary, Non-sect., Auburndale.
  3. Boston College, R, C., Boston.
  4. Boston University, M, E., Boston.
  5. Simmons College, Non-sect., Boston.
  6. Harvard University, Non-sect., Cambridge.
  7. Radcliffe College, Non-sect., Cambridge.
  8. Tufts College, Univ., Medford.
  9. Smith College, Non-sect., Northampton.
  10. Mount Holyoke College, Non-sect., South Hadley.
  11. American International College, Cong., Springfield.
  12. Wellesley College, Non-sect., Wellesley.
  13. Williams College, Non-sect., Williamstown.
  14. Clark College, Non-sect., Worcester.
  15. Clark University, Non-sect., Worcester.
  16. College of the Holy Cross, R. C., Worcester.
  17. Massachusetts Agricultural College, Amherst.
  18. Massachusetts Institute of Technology, Boston.
  19. Worcester Polytechnic Institute, Worcester.

Tables in a hierarchical structure beginning and ending with <table>…</table>, with <tr>…</tr> tags around each row, <th>…</th> tags around each column header, and <td>…</td> tags around each datum (cell) in the row:

<table>
    <caption>Statistics of the State of Massachusetts by Counties from the Federal Census of 1900 and of 1910.</caption>
    <thead>
        <tr>
            <th rowspan="2">County</th>
            <th rowspan="2">Organization</th>
            <th rowspan="2">Area</th>
            <th colspan="3">Population</th>
            <th rowspan="2">County Seat</th>
            <th colspan="2">Population</th>
        </tr>
        <tr>
            <th>1910</th>
            <th>1900</th>
            <th>1890</th>
            <th>1900</th>
            <th>1910</th>
        </tr>
    </thead>
    <tbody>
    ...
    <tr><td>Franklin</td><td>1811</td><td>697</td><td>43,600</td><td>41,209</td><td>38,610</td><td>Greenfield</td><td>7,927</td><td>10,427</td></tr>
    <tr><td>Hampden</td><td>1812</td><td>636</td><td>231,369</td><td>175,603</td><td>135,713</td><td>Springfield</td><td>62,059</td><td>52,926</td></tr>
    <tr><td>Hampshire</td><td>1662</td><td>585</td><td>63,327</td><td>58,820</td><td>51,859</td><td>Northampton</td><td>18,643</td><td>19,431</td></tr>
    ...
    </tbody>
</table>
Statistics of the State of Massachusetts by Counties from the Federal Census of 1900 and of 1910.
County Organization Area Population County Seat Population
1910 1900 1890 1900 1910
...
Franklin181169743,60041,20938,610Greenfield7,92710,427
Hampden1812636231,369175,603135,713Springfield62,05952,926
Hampshire166258563,32758,82051,859Northampton18,64319,431
...

Phrase elements, which add meaning to small pieces of text, such as whether they are emphasized (using <em>…</em>), are citations (using <cite>…</cite>), et al.:

<p><em>Boston</em> (Fig. 107), the greatest city of New England, beginning as a little settlement on a hilly peninsula jutting out into Massachusetts Bay, has extended for miles along the shore; has filled and occupied the adjacent marshes; and has from time to time taken in large areas to the south and west, until to-day it covers an area of not less than forty-three square miles. 
The fifth city in size and the second great commercial center of the Union, its growth is due to the advantages of its position. 
Nature endowed it with a fine, deep, and spacious harbor (<cite>Adv. Geog.</cite>, Fig. 214), and its situation farther inland than that of any other city north of Cape Cod has attracted a large coastwise and foreign trade. 
Boston is the second seaport in the country. 
New York alone surpasses it in extent of commerce. 
It is America's greatest wool market, as well as its greatest market for leather and leather goods; and it has a large and growing trade in many other imported or domestic manufactured articles.
</p>

Boston (Fig. 107), the greatest city of New England, beginning as a little settlement on a hilly peninsula jutting out into Massachusetts Bay, has extended for miles along the shore; has filled and occupied the adjacent marshes; and has from time to time taken in large areas to the south and west, until to-day it covers an area of not less than forty-three square miles. The fifth city in size and the second great commercial center of the Union, its growth is due to the advantages of its position. Nature endowed it with a fine, deep, and spacious harbor (Adv. Geog., Fig. 214), and its situation farther inland than that of any other city north of Cape Cod has attracted a large coastwise and foreign trade. Boston is the second seaport in the country. New York alone surpasses it in extent of commerce. It is America's greatest wool market, as well as its greatest market for leather and leather goods; and it has a large and growing trade in many other imported or domestic manufactured articles.

HTML tag names are case insensitive.

Note that HTML ignores multiple spaces, tabs, and newlines in the text, replacing any contiguous group of such white space with a single space. So, for example, the sentences in the paragraph above that all begin on separate lines automatically join together.

Different elements are also displayed differently:

  • Headings, paragraphs, lists, and tables by default have a block-level display, meaning:

    • they always start a new line;
    • they have a rectangle of space assigned to them that extends across the page;
    • they ignore white space at the beginning and end of their content.
  • Phrase elements by default have an inline display, so that they act like ordinary pieces of text (though they still fill a rectangular space).

Graphic Content

HTML includes several ways to mix graphic content with text. These elements generally consist of single tags, in the format <tag /> (note the trailing /):

Line breaks force new lines at particular points in text:

<p>
    By Lyman R. Allen, formerly Instructor in Geography, 
    State Normal School, Providence, Rhode Island,<br />
    and Alonzo J. Knowlton, Superintendent of Schools, Belfast, Maine.
</p>

By Lyman R. Allen, formerly Instructor in Geography, State Normal School, Providence, Rhode Island,
and Alonzo J. Knowlton, Superintendent of Schools, Belfast, Maine.

Note: <br /> tags should not be used as a substitute for paragraphs! They provide visual formatting, but have no inherent meaning themselves. If you are introducing a new paragraph, use </p><p> instead, since these tags add meaning along with the visual separation.

Horizontal rules help visually separate blocks of text:

<hr />
<h5>The Leading Educational Institutions of New England</h5>
<hr />

The Leading Educational Institutions of New England

Images can be pulled from any location on the Web by providing an <img /> tag together with attributes such as src followed by an = and a value between quotation marks:

<p> 
    The State Capitol at Boston, aka the Massachusetts State House.<br /> 
    <img src="images/chapter6_2/Dodge_s_Geography_of_New_England%2058_Fig_108.jpg"
        width="45%" 
        title="Fig. 108. The State Capitol at Boston."
        alt="The Massachusetts State Capitol sits high on a hill overlooking Boston Common."
    /> 
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Massachusetts_State_House_-_Boston%2C_MA_-_DSC04661.JPG/320px-Massachusetts_State_House_-_Boston%2C_MA_-_DSC04661.JPG"
        width="45%" 
        title="Massachusetts State House, Boston, Massachusetts, USA."
        alt="The Massachusetts State House in Boston is distinctive due to its golden dome."
    />
</p>

The State Capitol at Boston, aka the Massachusetts State House.
The Massachusetts State Capitol sits high on a hill overlooking Boston Common. The Massachusetts State House in Boston is distinctive due to its golden dome.

If attribute values contain spaces, quotes, =, <, or >, then they should be quoted with either single or double quotes (traditionally the latter, but never the same type as any embedded quotes).

In both of the above cases the images are in JPEG format. The first is located in a folder named images that is in the same folder as this Web page, i.e. they are “siblings”. The second is referenced from elsewhere on the Web.

Images have a particular width and height in pixels, 928×716 in the first case and 320×240 in the second. But the attributes width and height can be used to set different dimensions with values that are either numbers (expressing pixels) or as a percent of the page width, as above (note what happens to the image as you change the page size). If only one of the two attributes is declared, an image will be scaled proportionately.

The title attribute provides a brief description that will pop up when you point at (not click on) an image. Try it!

The alt attribute is important for those with visual handicaps, as it will be read aloud by screen readers and without it the image will be ignored. It should always be included to provide an extended textual description of what the image shows, if that is not obvious from the title or included elsewhere in the document (such as in a caption).

Like HTML tag names, attribute names are case insensitive.

Line breaks and images by default have an inline display (like text and phrase elements), while horizontal rules by default have a block-level display (like paragraphs).

HTML is “hypertext” because it allows you to mark up specific pieces of text with hyperlinks to other Web pages (which is what makes the World-Wide Web possible).

For example, the source of Dodge’s Geography of New England is addressed by the Uniform Resource Locator (URL) https://books.google.com/books?id=-DREAQAAMAAJ, and our Geoserver setup was referenced with http://localhost:8080/geoserver.

A URL has the format protocol://server/document:port?query, where:

  • The protocol is the set of transfer rules used; in the above two examples you can see both:
    • HyperText Transfer Protocol (HTTP) and
    • HyperText Transfer Protocol Secure (HTTPS), where Secure means that the transfer is encrypted.
  • The default port for HTTP is 80, and for HTTPS it is 443, and the default can be left off. In the case of Geoserver, 8080 isn’t the default, so it must be specified.
  • The optional query string ?id=-DREAQAAMAAJ sends additional information to the server that it uses to determine which book to send back.

We can link to any other Web page using an anchor element <a>:

Read
<a href="https://books.google.com/books?id=-DREAQAAMAAJ">Dodge’s Geography of New England</a>
for more information.

In your browser, this HTML will by default appear in the same font and style as surrounding text, but underlined:

Read Dodge’s Geography of New England for more information.

Clicking on this link will load the referenced page into your browser.

Like the <img> element, an anchor takes an attribute href that refers to the other Web page.

Also like the <img> element, an anchor is displayed inline by default.

Anchors can also supply hyperlinks to an internal part of a document, or fragment, by referencing an ID attribute, which can be assigned to any element. For example, the heading of the next section of this document is written in HTML as

<h4 id="document-elements">Document Elements</h4>

An anchor reference to a document fragment begins with the number sign #, aka the hash mark, possibly because more generic IDs are often numeric:

<p>Visit <a href="#document-elements">Document Elements</a>.</p>

This HTML appears as

Visit Document Elements.

If you click on this link your browser will scroll down to that part of the page (scroll up slightly to return here).

Internal id attributes in other documents can be jumped to by appending #value to the document address, e.g. a subsection in the previous section can be linked to with:

Return to <a href="chapter6_1.html#editing-web-pages" target="_blank">
Editing Web Pages</a>.

Return to Editing Web Pages.

The attribute and value target="_blank" makes the referenced document open in a new window.

Only the first id attribute with a given value will be found in a document, so don’t use them more than once; they wouldn’t be much good as identifiers, otherwise!

Document Elements

When writing an HTML document, there are a number of elements that should be included to help define the characteristics of the document. A minimal HTML document is:

<!DOCTYPE HTML>
<html>
    <head>
    </head>
    <body>
    </body> 
</html>

The content we have been writing above goes between the <body>…</body> tags, e.g.

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>The Geography of New England</title>
        <meta name="author" content="Lyman R. Allen" />
        <meta name="author" content="Alonzo J. Knowlton" />
        <meta name="date" content="1912"> 
    </head>
    <body>
        <h1>The Geography of New England</h1>
        <p>
            By Lyman R. Allen, formerly Instructor in Geography, 
            State Normal School, Providence, Rhode Island,
            <br />and Alonzo J. Knowlton, Superintendent of Schools, Belfast, Maine.
        </p>
        <hr />
        <h2>II. Growth and Development of Cities and Towns</h2>
        <p>
            <img src="images/chapter6_2/Dodge_s_Geography_of_New_England%2058_Fig_108.jpg"
                width="100%" 
                title="Fig. 108. The State Capitol at Boston."
                alt="The Massachusetts State Capitol sits high on a hill overlooking Boston Common."
            /> 
        </p>
        <h3>Massachusetts Cities and Towns</h3>
        <p>
            In Massachusetts (Fig. 104) the steady drift of the people toward the cities is the most striking feature in the growth and movement of population. (Fig. 103.) 
            This state has a greater number of large cities than any other in the Union and of all the states only Rhode Island surpasses it in a greater proportion of urban to rural population. 
            At the same time the rate of increase in the number of the people of the cities or urban centers in Massachusetts is less than that of New York, and is exceeded by that of Rhode Island and Connecticut. 
            In 1910 Massachusetts had twenty-five cities of more than 25,000 people; with this number we may compare New York with twenty-one and New Jersey with fourteen such centers. 
            Including only cities having 10,000 or more persons we find that fifty-five cities had more than four-fifths of all the people living in Massachusetts.
        </p>
        <p>
            <em>Boston</em> (Fig. 107), the greatest city of New England, beginning as a little settlement on a hilly peninsula jutting out into Massachusetts Bay, has extended for miles along the shore; has filled and occupied the adjacent marshes; and has from time to time taken in large areas to the south and west, until to-day it covers an area of not less than forty-three square miles. 
            The fifth city in size and the second great commercial center of the Union, its growth is due to the advantages of its position. 
            Nature endowed it with a fine, deep, and spacious harbor (<cite>Adv. Geog.</cite>, Fig. 214), and its situation farther inland than that of any other city north of Cape Cod has attracted a large coastwise and foreign trade. 
            Boston is the second seaport in the country. 
            New York alone surpasses it in extent of commerce. 
            It is America's greatest wool market, as well as its greatest market for leather and leather goods; and it has a large and growing trade in many other imported or domestic manufactured articles.
        </p>
    </body>
</html>

Here we can see the hierarchical structure of an HTML document, with many elements being containers of content and other elements.

The <head> element contains code that is not intended for display within the main Web page, including:

  • <meta> elements providing information about the document itself (known as metadata), such as:

    • the character set to use (8-bit Unicode in the above, a way to display every character you can imagine ☺).

    • the author, date created, et al.

  • A <title> to be displayed as the title of a browser window or tab;

  • <style> elements for CSS styling instructions (to be discussed later);

  • <script> elements for JavaScript programming code that doesn’t depend on specific elements defined in the body (also to be discussed later).

The hierarchy may be more clearly seen when represented as a tree:

The hierarchy of elements, attributes, and text in an HTML document.

HTML Comments

One other important type of “nondisplayed” data are comments, which are explanatory bits of text about what’s happening in a document. They are single tags with the following format:

<!-- This is an HTML comment. -->

If anything you are writing is more than routine, it’s a good idea to include a comment to explain your intentions.

Web Inspectors

Modern Web browsers provide a means to inspect both the content and detailed structure of Web pages.

To see the underlying source code as first loaded by a browser:

  • Safari:

    1. If the Develop menu is not visible:

      1. Menu Safari > Preferences…;
      2. In the dialog that appears, click on the tab Advanced;
      3. Check on Show Develop menu in menu bar.
    2. Menu Develop > Show Page Source.

  • Firefox: Menu Tools > Web Developer > Page Source;

  • Chrome: Menu View > Developer > View Source;

  • Internet Explorer:

    1. If the Menu bar is not visible, right-click on the page header, and in the pop-up menu that appears, select Menu bar.
    2. Menu View > Source.

To see the detailed structure of the code as interpreted by the browser, including changes made by Javascript, open the Web inspector:

  • Safari:

    1. If the Develop menu is not visible:

      1. Menu Safari > Preferences…;
      2. In the dialog that appears, click on the tab Advanced;
      3. Check on Show Develop menu in menu bar.
    2. Menu Develop > Show Web Inspector.

  • Firefox: Menu Tools > Web Developer > Inspector;

  • Chrome: Menu View > Developer > Developer Tools;

  • Internet Explorer: Menu Tools > Developer Tools;

In Firefox, the inspector looks like:

The Firefox Web Inspector

Notice that, as you point at or click on individual elements, they are highlighted in the display view above the inspector, and you can see the size of their container in pixels.

You can also open and close different parts of the HTML hierarchy by clicking on the buttons open-branch / and close-branch / at the left of each element.

A very common issue when writing HTML, especially at first, is that element open and close tags get out of order, or an element might appear inside of another element’s tag. The Web inspector can be really helpful in understanding how your code is being interpreted, so take a look if the page isn’t what you expect to see!

Summary

  • HTML provides structure to Web documents by wrapping their content inside of markup elements. Content can include text and images but also other elements.
  • Elements include headings, paragraphs, lists, tables, phrase elements, line breaks, horizontal rules, images, hyperlinks, titles, and metadata — but there are many more described in the full specification of HTML 5.0.
  • Browsers interpret a document’s HTML source code to produce a hierarchical model of the document that is visible in their built-in Web inspectors.

Exercises



The section of The Geography of New England that describes the Pioneer Valley (before it was known by that name) begins on p. 67 with “Towns of the Connecticut Valley” and continues to p. 69. Turn it into a Web page!

  1. With your editor, create an HTML document with appropriate elements in its head. Name it gne.html. You can open it and view the results with any Web browser.
  2. Using the text of these pages found here, mark up the paragraphs so that they have the same structure as the document shown to the right. (Don’t try to put it in two columns, though – that is not easily done!)
  3. Add the headings “The Geography of New England”, “II. Growth and Development of Cities and Towns”, and finally “Towns of the Connecticut Valley”, each at the appropriate level.
  4. Add a hyperlink from the heading “The Geography of New England” to the online document.
  5. Add these images at the appropriate positions, providing both alt and title attributes:
  6. Add a hyperlink to each of these images that will open them in a new page. (Hint: try clicking on the images above for the Massachusetts State House!)
  7. Choose one or more of the institutions described in the document that still exist, and add a hyperlink to their Web page(s). Do the same for any historical events and persons mentioned, to their Wikipedia page.
  8. Create a list of public normal schools in Massachusetts based on p. 51. It’s possible to start this at a number other than 1 — check the HTML documentation for an ordered list!
  9. Create a table of school population of Massachusetts based on p. 87.
  10. Save this document, you’ll add more to it in the next section!

results matching ""

    No results matching ""