    |  Chapter 5: Formatting Pages with HTML The Art of Scintography Edition 3.0 © 2008 Aurora Isaac www.scintography.com | ||||||||||||||||||||||
 5.1 Arranging Your Page | |||||||||||||||||||||||
| Once you have collected your site content, you need to arrange it on your page. This is done by specifying instructions with a markup language. A variety of markup protocols are available today, including HTML XHTML, XML, and others. If you are just starting, and plan to implement and maintain your own site, start with HTML. It is the most forgiving of all markup languages. How you arrange the elements of your page will be strongly influenced by the extent of your markup knowledge. Fortunately, it doesn't take much HTML to make a nice looking page. | |||||||||||||||||||||||
| 5.2 About HTML | |||||||||||||||||||||||
|
HTML, or Hyper Text Markup Language, was the first widely-used document formatting protocol on the Internet.
Since then, a number of protocols have been built around this foundation.
Many aspects of HTML have become nearly obsolete with the advent of
protocols such as STYLE and XML,
while others
are so new they are as yet thinly supported within the HTML developers community.
Understanding basic HTML is essential to
understanding the expanded capability of the newer protocols built around it.
HTML is a simple text markup language that can be edited into a text file with any editor or word processor that can output a text only format. HTML source documents should be saved into files with the suffix name .htm or .html. Such an HTML source document contains the text content you create for your viewers and HTML instructions for the browser program that displays your document. This instructional markup indicates to the browser how your document is to be displayed. For example, you may want your text to be white and your background to be black. You create a text file called "myfile.html" with your text editor. This file contains HTML instructions indicating white text and black background, as well as the text that will appear in this format. When a browser accesses your file, the instructions are interpreted and the text is displayed. HTML instructions, or tags, are contained in angle brackets: <TAGNAME>. Most tags are paired, and enclose the text that the formatting instructions apply to: <TAGNAME>Text to be formatted.</TAGNAME>. The closing tag includes a slash (/) preceding the tagname. These tag pairs are often referred to as containers. Many tags have attributes. These are defined within the opening tag:
<TAGNAME ATTRIBUTE="value">
The set of HTML tags and their attributes constitutes the HTML language.
Browsers are generally very forgiving in their interpretation of HTML source.
Your page may be formatted the way you want it, even if it has errors.
Unfortunately, different browsers will probably handle the flaws in your code differently.
As standards are incorporated into the process, interpretation will become more precise.
It would be wise to keep your markup as accurate as possible, even where it may not seem neccessary.
Colors and dimensions are often specified in attribute values. Colors in HTML are identified by their numerical code. Many colors also have names, which are aliases for their numerical codes. Use the Color Palette and Color Selector to find color names and numbers. Dimensions in HTML are specified in pixels or percentage. A dimension is specified without units to indicate pixels. A pixel is the smallest differentiable area on a screen. This is a relative unit, since different monitors use different numbers of pixels per inch. A dimension is specified with % to indicate percent of available space. Percentage dimensions resize with the window, but pixel dimensions do not. | |||||||||||||||||||||||
| 5.3 Using the Tutorials | |||||||||||||||||||||||
The easiest way to learn HTML is to see it in action.
This text includes a series of "hands-on" interactive tutorials.
Each lesson page has a menu button, a text area, and a "See This Page" button on the left.
Each menu topic displays a portion of the tutorial.
The text area contains the HTML source document code as it would appear in your editor.
You can type into this text area. If you want to see the formatted document,
click the "See This Page" button.
The formatted document appears at the right.
Each time you click the button, the document will be updated.
These tutorials do not portray all possible tags, attributes, and values.
Use them in conjunction with a good reference to explore the full possibility of hypertext markup.
| |||||||||||||||||||||||
| 5.4 A Basic Page | |||||||||||||||||||||||
|
An HTML document is contained within the HTML tags.
Within each document are two parts, the HEAD and the BODY:
<HTML>
<HEAD> The HEAD tag contents is loaded first. If your file contains special components such as scripts or style sheets, this content goes here.
</HEAD>
<BODY> The BODY tag contents is loaded last. The content to be displayed on your page goes here.
</BODY>
</HTML> Your browser may display text that is contained in any location, regardless of the tags included or not included. However, this is contrary to both the standards and conventions of the HTML markup language. For the most consistent formatting across platforms, keep your displayed content within the body of the document. Most HTML tags fall into one of two categories: inline tags and block tags. Inline tags format content within the line of text. These include font, bold, italic, etc. The contents of block tags are formatted in spaces that generally extend beyond a line of text, with formatted content starting on a new line. These include paragraph, blockquote, headings, etc. Since each tag was incorporated into HTML with a particular purpose, it is unlikely you will be combining tags in ways that will not produce the intended format. However, there are a couple of rules of thumb that will guide you in combining tags.
HTML inline tags will generally work well either nested or staggered, and may be combined with block tags. This nested combination of inline tags:
<FONT COLOR="dodgerblue"> creates the expected output:
dodgerblue font
combined with bold font
dodgerblue font
This staggered combination of inline tags:
<FONT COLOR="dodgerblue"> though not recommended, also produces an expected output:
dodgerblue font
combination
bold font
Block tags do not always work well together, even nested. This nested combination of block tags:
<P ALIGN="right"> causes the paragraph formatting to be unexpectedly altered by the insertion of the heading: paragraph aligned right combined with headingparagraph aligned rightSince headings are intended to separate sections of text, paragraphs and headings should be sequential:
<P ALIGN="right"> so the page will have the intended formatting: paragraph aligned right headingparagraph aligned right Of course, block tags do work well nested in many cases. Some block tags (especially table and div) are intended to be used to contain sections of a page that will include both block and inline tag formatting. In general, the more character a tag imparts, the less likely it will combine well with others. In other words, refrain from complex combinations with tags like marquees and lists.
HTML is evolving. Soon, STYLE will be an essential part of the language.
Some of the tag attributes that are taught in these tutorials will be superceded by their STYLE counterparts.
You may encounter reference to these features as deprecated attributes.
They are taught here because they provide the foundation for the application of STYLE.
Although HTML and STYLE have been relegated to separate chapters,
you should consider them as two parts of a single markup language.
| ||||||||||||||||||||||
| 5.5 Formatting Fonts | |||||||||||||||||||||||
|
Fonts are specified by enclosing the text to be formatted within a <FONT> container:
<FONT ATTRIBUTE="value">
Text to be formatted with font attribtue. </FONT> Attributes include the font face, size, and color. The font face can be specified uniquely, by name, as in Times New Roman, Palatino, Arial, Helvetica, etc, or, by generic name: serif, sans-serif, cursive, fantasy, and monospace. Other tags used in conjunction with the font tags specify weight and style, including bold, italics, superscript, etc. For example, an italicized serif font colored dodgerblue:
<FONT FACE="serif" COLOR="dodgerblue"><I>
does this to text </I></FONT> The browser can use any font available on the client system. The challenge of formatting fonts is that different client systems have different sets of fonts. Three techniques are used to get around this problem.
| ||||||||||||||||||||||
| 5.6 Formatting Text | |||||||||||||||||||||||
|
| ||||||||||||||||||||||
| 5.7 Creating Links | |||||||||||||||||||||||
|
A link is a connection from an item that appears in your page
to another page in the network you are connected to.
The three essential parts of a link are the URL, or address, of the page you want to link,
the item, text or image, that will be seen in your page,
and the HTML anchor tag that binds the URL to the item.
A URL can be relative or absolute. A URL with only the directory and file specified is considered relative to the source file of the page. For example, if the page http://www.mydomain.tld/library/thisfile.htm
is accessed by your browser, a link in this file specified by the relative URL
in the hypertext reference (HREF) attribute of an anchor (A) tag:
<A HREF="../faq/sometopic.htm">item</A>
is equivalent to referencing the absolute URL http://www.mydomain.tld/faq/sometopic.htm
Links within your site should be relative. Using relative URLs allows you to develop your site in one place, then move it to another when you are ready to publish, without having to change all the URLs that connect the elements of your site. Links to other sites will generally have to be absolute, and therefore unaffected by moving your site from one location to another. If you are unfamiliar with directory tree structures and naming files, see Appendix VI: File Names for more information. | ||||||||||||||||||||||
| 5.8 Adding Images | |||||||||||||||||||||||
|
The "On the Lake" image is a typical picture image. The icon at the top left of the page is also a typical picture image. Pictures are often .jpg format files. Of course, images used in a page layout are not just pictures. This page uses images in a variety of ways. The Book Title font was converted to an image because this font may not be available on your system. This is often done for text that is part of the style of the page. These foreground images are large enough to interrupt the flow of text. But others, like this image  , fit within a line of text.
Background images are usually small, because they tile. The background image creating the wallpaper behind the "On the Lake" picture, above, is this small, white transparent .gif image  on a light green background.
The background image on the "paper", the faded margin, is also a transparent .gif.
Even the Menu and See-This-Page buttons in the tutorial page above use background images.
An image is specified by giving its URL. As with links, an image URL can be relative or absolute. A URL with only the directory and file specified is considered relative to the source file of the page. For example, if the page http://www.mydomain.tld/library/thisfile.htm
is accessed by your browser, an image in this file specified by the relative URL
in the source (SRC) attribute of the image (IMG) tag:
<IMG SRC="images/someimage.jpg">
is equivalent to accessing the source in the absolute URL http://www.mydomain.tld/library/images/someimage.jpg
Using relative URLs allows you to develop your site in one place, then move it to another when you are ready to publish, without having to change all the URLs that connect your images. If you are including an image that is to remain published on another site, use an absolute URL. | ||||||||||||||||||||||
| 5.9 Using Tables | |||||||||||||||||||||||
|
Attributes offer a variety of options in designing tables. These include the border, cellspacing, and cellpadding attributes. Background and font features for individual cells can also be formatted. The outer BORDER surrounds the table. If borders are non-zero, an inner border outlines the cells. The space between the outer and inner borders is the CELLSPACING. This attribute also separates cells from each other. The CELLPADDING attribute separates the cell content from its border. The table below has three cells, each containing part of an image. Explore the relationship of attributes in this table:
Tables have two features that make them especially useful for arranging elements on a page. Although the content of cells may vary, table cells are always located in the same relation to each other. And, tables can be nested. For example, the "On the Lake" image is nested within an inner frame table, nested within an outer frame table, then nested within the table used to arrange the image and the title within the surrounding text. Because complicated tables with invisible borders can be hard to keep track of during development, it is a common practice to give the BORDER a width of 1 while the table is being developed, then change the border to 0 when the table is ready to publish. | ||||||||||||||||||||||
| 5.10 Using Frames | |||||||||||||||||||||||
|
Frames are used to divide a window into separate areas that
can be loaded with different HTML pages (documents).
Each frame definition specifies the source URL of the file to be loaded into its frame.
There are two kinds of frames.
The inline frames are placed within a page by the <IFRAME> tag.
The set frames fill the window, and are arranged in a special HTML file containing only the <FRAMESET> and <FRAME> tags.
When the frameset file is loaded, the frames are made according to its specifications,
then the separate source documents are loaded into each frame.
Frames are useful for keeping one area of the screen constant, while changing another. For example, you could put a row of buttons on the top or bottom of the window, or a menu at the side, then make the rest of the window another frame, a target for each page you load as you go through the menu of options. | ||||||||||||||||||||||
| 5.11 HTML Standards | |||||||||||||||||||||||
|
From its inception, the use and capacity of HTML expanded.
As a result, managing complex sites became unwieldy,
but solutions were found, and the language evolved.
Sometimes different developers found different solutions.
The World Wide Web Consortium (W3C) convened
to ensure the universality of the WWW languages, standards were made,
and developers adjusted their implementations to these standards.
Where once an <HTML> and a .html was all a page needed to be properly identified,
now your page should also have a <!doctype> statement.
HTML belongs to a family of markup languages that all have one thing in common, they include the content and markup instructions together in plain text files. The Standard Generalized Markup Language (SGML) is the "parent" language that is used to define markup languages. This language uses Document Type Definitions (DTDs) to specify language features. The <!doctype> statement is an SGML tag that references a specific DTD. If this statement appears in the first line of your HTML file, your browser will know which DTD you want to use to format your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Page Source
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
</HTML> If you don't use a doctype statement, your html will most likely be formatted in the current standard. This standard may change over time. The doctype statement assures that your page will always be formatted in the standard specified. The current standards are:
| |||||||||||||||||||||||
| 5.12 HTML Deprecation | |||||||||||||||||||||||
| In the context of rapid evolution, the need for backward compatibility has made web development difficult. In the end, something has to give, and one of these somethings is embodied in the deprecation, and eventual loss of support, of parts of the HTML language. Because STYLE has solved many site development and maintainence problems, use of STYLE rules is now preferred to the use of HTML attribute assignments where possible. Learning STYLE after you have learned HTML is like learning to drive a car with an automatic transmission after you have learned to drive with a stick shift. It will make you smile! | |||||||||||||||||||||||
| 5.13 References | |||||||||||||||||||||||
|
1
Apple: Internet and Web http://developer.apple.com/internet/
2
: Web Content
3
HTML Writers Guild
4
Microsoft Developers Network Library
5
: HTML and DHTML Overviews and Tutorials
6
: HTML Objects
7
Microsoft Product Support
8
: List of Default Fonts Included in Windows 98
9
O'Reilly Network Safari Bookshelf
10
: HTML Pocket Reference, 2nd Edition
11
World Wide Web Consortium
12
: Character entity references in HTML 4
13
: Getting started with HTML
14
: Recommended DTDs to use in your Web document
15
: The global structure of an HTML document | |||||||||||||||||||||||
| All Contents © 2008 Aurora Isaac. All Rights Reserved. Legal Notices. | |||||||||||||||||||||||
| |||||||||||||||||||||||
