Formatting

Now that you have viewed the source code of a few HTML pages, you probably have noticed several text-formatting commands, such as the <span style="font-weight: bold;">Bold-face</span> commands, lists, and italics. You don't need to learn how to type these commands directly; just use the convenient tools in Composer.

Howerver there are three more formatting issues you should know about:
  1. Paragraph Styles,
  2. Background color, and
  3. Tables.
Paragraph Styles: the first word on this page in Formatting. In HTML, it says:
<h1 style="text-align: center;">Formatting</h1>
The h1 paragraph style is short for Heading1, similar to Heading 1 in Microsoft Word. There is no exact font-size or font-effect specified for Heading1, and I even had to specify the centered alignment. In fact, in different browsers this Heading style may look different. Why do this?
1. To let end-users choose the overall appearance of different paragraph styles on their own web-browsers.
2. To let you specify your own formatting, which you can do in the <head> section of the web page.

Background color: to change background color, choose Format -> Page Colors and Background... click the radio button that enables custom colors for normal text, links, and background; click on background color, and select one. Frankly, I have changed my mind on this and probably will no longer use background colors, but humor me for a moment and look at the source code for this page. Unlike the other pages in this tutorial, the body of this page starts with the following markup:
<body style="background-color: rgb(255, 255, 204); color: rgb(0, 0, 0);"
alink="#000099" link="#000099" vlink="#990099">
I just wanted you to see that so you can understand a bit more under-the-hood.

Tables: tables can be used just like in Word to show tabular data, but they are also an essentil formatting tool for web pages. If you open any of the pages of this tutorial in a browser, and resize the browser window, the text will automatically rearrange to fit the width of the window. This makes sense in most cases, because the browser-window on your screen is the 'final output format' of most web pages. In other words, normally there is no such thing as page-formatting in HTML. (hello, I am another column!)
The scientists who invented HTML didn't care, nor do the geeks who maintain the HTML standards. But alot of people do care about controlling column width, and having multiple columns of text and images on each page (for example, see the BBC's news page). So they place paragraphs of text and images into the cells of tables and specify the width and internal margins of each cell of the table. To see how it was done for these paragraphs, review the source code, or try it yourself under Composer. The markup terminology is clumsy; each new row begins <tr> for 'table return' and each new cell begins with <td> for 'table data'. To keep your sanity, just edit tables graphically in Composer.


back to Introduction
back to Web Page Anatomy
back to Hyperlinks
on to Graphics for the web
on to Organizing and Uploading Web Pages