Markup is a term that basically describes an older process that used to be done entirely on paper. It usually refers to the layout of elements on a page of text and pictures that is eventually turned into the final image to be printed. Electronic markup is much more flexible than the paper version, but needs to accomodate a variety of contexts where the final presentation is to be viewed.
The discussion here will focus on the markup and layout that applies to a Web Browser. Browsers have the capability to display a variety of file formats for graphics and text. "Flat" text is presented without any additional interpretation beyond a default text font and appropriate line breaks. HTML (HyperText Markup Language) is quite a departure from the limits of flat text, giving control of text characteristics down to the individual letters, numbers, and symbols. It also provides structure for a document so that it has an architecture that relates all its parts together in a coherent way. HTML is derived from another markup language, called SGML (Standard Graphical Markup Language). The original intention of SGML was to provide structure for documents to be printed on paper, but it has since become the source for an explosion of new markup languages. The derived markup languages provide new levels of abstraction so that a single source document can be presented in a variety of ways without having to change the main content of the document at all. XML (eXtensible Markup Language) is currently to most notable of these, XHTML (eXtensible HyperText Markup Language) is another upcoming standard.
So now let us consider the most basic elements of markup in general. Markup starts at the highest level of structure, defining the various resources that will be used later in the document, and creating the largest "box" that other smaller boxes will fit into. Inside the biggest box will be other boxes that are "glued" together by the internal structure of the document. Each of the boxes can be given various attributes, such as the font, color, and size, or be organized into lists with bullets or numbers. Images also serve as boxes of their own, rather than being filled with text. Each container box can be filled with an arbitrary number of smaller boxes.
With this general design in mind, also note that a box cannot overlap another box within the same container, and that all the boxes inside a larger box cannot be larger that the containing box. These are the basic "real estate" issues that we are faced with doing markup. Browsers are able to act as a movable window that looks at all or a portion of the document being viewed. The browser will prefer to fit a document inside the current width of its window, allowing the layout to flow downward as much as necessary. In a browser, there is no such thing as a page break, because any document is effectively one long page. The alternative is to show different sections of text by using different typographical conventions, such as headers that label major text sections.
The following is a list of the most important structural elements of HTML, introduced as examples that can be copied and inserted into documents of your own.
<html>
<head>
<title>
Document Title
</title>
</head>
<body>
</body>
</html>
This basic document is empty, but it does serve to introduce the way that HTML structure works. Each element is enclosed inside what are called "tags", meaning a start tag (<tag-name>) and an end tag (</tag-name>). Some HTML elements have no end tag because they are complete elements within themselves and do not contain anything else. Our main focus is to create text inside the "body" tag (<body></body>), which will be displayed in the main window of the browser. The head and title elements are used to set the title of the browser window, and do not affect the way that the document body is presented.
The most basic element inside the body of the document is the paragraph. Although browsers have been implemented to be rather tolerant about the strict structure of the tags, only strictly correct tag structure will be presented here. There are practical reasons for this, mostly related to the more advanced text control options browsers make available.
Here is a paragraph (<p>) element:
<body> <p>This is the text of a small paragraph.</p> </body>
If several paragraphs are put one after the next, the browser will insert an empty line between them so they are clearly separated. Several other structures are also separated by empty lines, such as lists and tables. Each of these elements is a "box" with its own internal structure.
Here are a few kinds of list examples:
This is an "unordered list" (<ul>) element:
<body> <ul> <li>This is a line in a bulleted list.</li> <li>This is another line in a bulleted list.</li> </ul> </body>
It will look like this:
This is an "ordered list" (<ol>) element:
<body> <ol> <li>This is a line in a numbered list.</li> <li>This is another line in a numbered list.</li> </ol> </body>
It will look like this:
Tables are a large area of discussion, and will be fully covered in their own page HtmlTables. A very basic table is show below:
<body>
<table>
<tr>
<td>This is a column one of a one-row table.</td>
<td>This is a column two of a one-row table.</td>
</tr>
</table>
</body>
It will look like this:
| This is a column one of a one-row table. | This is a column two of a one-row table. |
A more elaborate table is next, with headings and several rows:
<body>
<table>
<tr>
<th>Column One Header</td>
<th>Column Two Header</td>
</tr>
<tr>
<td>This is a column one of row one.</td>
<td>This is a column two of row one.</td>
</tr>
<tr>
<td>This is a column one of row two.</td>
<td>This is a column two of row two.</td>
</tr>
</table>
</body>
It looks like this:
| Column One Header | Column Two Header |
|---|---|
| This is a column one of row one. | This is a column two of row one. |
| This is a column one of row two. | This is a column two of row two. |
HTML tags can also have "attributes" inside them. This allows the structure to be defined by the tags, and the attributes control the appearance or behavior of the element. This is done by using the following tag structure:
<tag-name attribute-name="attribute-value"> ... </tag-name>
An example:
<font color="blue">This text will be blue.</font>
Any tag may have more than one attribute. Missing attributes generally default to standard values, but some tags have no affect at all if specific attributes are missing.
One tag not discussed yet is important to the examples in later sections, which is the HTML comment. It is not displayed by the browser when viewing the page, and has no affect on the layout or the markup of the document. It will be helpful to describe what the HTML tags are doing when things are more complex and subtle.
Here is and example comment:
<!-- This is an HTML comment. -->
It begins with "<!--", and ends with "-->". It may cross several lines of text in the .html file itself.
Since this is, after all, a hypertext language, we should look at the most essential tag to hypertext structure, the anchor. It is a tag that needs to have attributes or it has no effect. Here is a simple example:
<a href="http://www.w3c.org/">The World Wide Web Consortium</a>In this section, no body or paragraph tags will be shown, since the text modifications can be done anywhere normal text is allowed.
The anchor looks like this:
The World Wide Web ConsortiumThe href attribute is given a value that points to a web site, and the text before the tag end will be displayed as usual, except that it will be given a hyperlink text color and usually underlined. Most browsers allow the user to modify these default behaviors. In addition, the mouse cursor usually changes to indicate that the link can be clicked.
The browser can also be told how to modify the font, color, and size of the text, but layout and markup can be controlled much more precisely in several different ways. This section will provide a summary of the text control capabilities with HTML tags, but note that modern browsers also support a mechanism called CascadingSytleSheets, which allows the text inside the various layout elements to be modified more elegantly and according to document-wide standards. The HTML tags will certainly do the job, but have limits and are more difficult to organize when creating large systems of documents.
Bold, Italic, and Underlined Text:
Bold: <b>Text</b> or <strong>Text</strong> Italics: <i>Text</i> or <em>Text</em> Underline: <u>Text</u>
They look like this:
Bold: Text or TextSize, Color and Face Changes to Text:
Font Size: <font size="+1">Bigger Text</font> Font Color: <font color="#ff0000">Bright Red Text</font> Font Face: <font face="Courier">Courier Face Text</font>
They look like this:
Font Size: Bigger TextThis will provide most of the kinds of controls that typical word processors provide for text. Several other word processor features worth mentioning control paragraph flow.
Centered text:
<center>Centered Text</center>
It just places the text in the middle of the browser window as below:
A paragraph may also be aligned using paragraph tag attributes:
<p align="left">Left flush, right ragged text</p> <p align="right">Right flush, left ragged text</p> <p align="center">Centered text</p> <p align="justify">Justified text (may not work in all browsers)</p>
It looks like this:
Left flush, right ragged text
Right flush, left ragged text
Centered text
Justified text (may not work in all browsers)
What follows is an example that is more realistic of a typical web page. It will use all the elements demontrated before, but is by no means exhaustive. The possible combinations that apply to your own application may vary quite a bit, since HTML only dictates structure and behavior, and does not dictate taste. Most of the structural tags are recursive, meaning that they all can fit inside one another. Lists of lists are perfectly acceptable, for example. Text control can go almost anywhere. Just remember that it is mostly just boxes inside boxes, so design your boxes so they can be moved around until you are happy with the overall structure and presentation.
<html>
<head>
<title>Family Home Page</title>
</head>
<body>
<p>
Here in the household, we all have responsiblities
to fulfill that make everything go a bit more smoothly.
This summer, we have a little extra time, so let's
stick to the program so we can make the best of it!
</p>
<table>
<tr>
<th>Meal</td>
<th>Time</td>
</tr>
<tr>
<td>Breakfast</td>
<td><font face="Courier" size="+2" color="#0000ff">8:00 AM</font></td>
</tr>
<tr>
<td>Lunch</td>
<td><font face="Courier" size="+2" color="#00ff00">1:00 PM</font></td>
</tr>
<tr>
<td>Dinner</td>
<td><font face="Courier" size="+2" color="#ff0000">6:00 PM</font></td>
</tr>
</table>
<!-- Align the paragraph with a tag -->
<center>
<p>Shared Meal Cleanup Tasks:</p>
</center>
<!-- Ordered List -->
<ol>
<li>Clean the Table</li>
<li>Take out the Garbage</li>
<li>Clean the Dishes</li>
</ol>
<!-- Align the paragraph with an attribute -->
<p align="center">Before-Bed Meal Preparation Tasks:</p>
<!-- Ordered List -->
<ol>
<li>
Move anything to be defrosted for tomorrow
from the freezer into the fridge
</li>
<li>
Make sure the fridge is stocked,
add things to the <i>shopping list</i>
if necessary (it's on the fridge)
</li>
</ol>
<p>Things we want to do at some point this summer:</p>
<!-- Unordered List -->
<ul>
<li>Go see <b>Grandma</b></li>
<li>Visit the park and feed the ducks</li>
<li>Swim in the community pool once a week (at <i>least</i>!)</li>
</ul>
<p>
If you have any questions about any of this, or have
anything important to say about, please ask. If you
have any contributions to this site please email it
to <a href="mailto:theparents@ourhouse.com">Mom and Dad</a>
over email so that we can add it in.
</p>
</body>
</html>
The body of the page looks like this:
Here in the household, we all have responsiblities to fulfill that make everything go a bit more smoothly. This summer, we have a little extra time, so let's stick to the program so we can make the best of it!
| Meal | Time |
|---|---|
| Breakfast | 8:00 AM |
| Lunch | 1:00 PM |
| Dinner | 6:00 PM |
Shared Meal Cleanup Tasks:
Before-Bed Meal Preparation Tasks:
Things we want to do at some point this summer:
If you have any questions about any of this, or have anything important to say about, please ask. If you have any contributions to this site please email it to Mom and Dad over email so that we can add it in.