teach picture

SOME BASICS of HTML CODING

The Basic HTML Document Format

When you use your web browser program (such as Netscape Navigator or Microsoft Internet Explorer) to view a web page over the Internet, your computercreates the text and images you see on your screen by interpreting a text-only document that is transmitted from the server on which that page is stored.

In most cases, this document contains only the text that appears on the page, and html (HyperText Markup Language) "tags" which determine how this text and any graphic images that appear on the page will be displayed.

The HTML Tag

There are some basic tags which are found in virtually all html documents. The most basic is a simple pair of tags that identify the rest of the document as an html document - these two tags surround all of the other information on the page. The very first one, normally found at the beginning of the page is

<HTML>

The final tag in the document is

</HTML>

Everything between these two tags is to be interpreted as html and used to determine the content and layout of the page.

The HEAD and BODY Tags

In between the HTML and /HTML tags are two other pairs of tags which identify the two major sections of the html document, the "head" and the "body."

The head can contain basic information about the web page that will NOT appear in the main page itself. The body contains all of the information that appears in, or controls the appearance of the main web page. The head comes first and is followed by the body; both of these appear between the two HTML tags described above. The basic format of the html page is then:

<HTML>

<HEAD>

</HEAD>

<BODY>

</BODY>

</HTML>

Basic Text Formatting Tags

There are a variety of html tags whose purpose is to control the formatting of text. Tags control whether text is bold, italic, or underlined. They control where the text breaks between paragraphs and whether text is right-, center-, or left-aligned. Special tags determine the size of the text.

Simple Character Formatting Tags

Let's begin with some simple tags that may be used to control the formatting at the character level. First, consider this very basic html page.

<HTML>

<TITLE>My Page</TITLE>

<HEAD>

</HEAD>

<BODY>

This is my first web page. There is not a lot here, but it is a beginning.

</BODY>

</HTML>

Let's highlight the word "my" in the first sentence by making it appear in bold type. To do this we surround the word with a pair of tags that indicate that it is to be displayed using a bold font:

This is <B>my</B> first web page.

The text that appears on the browser screen is:

This is my first web page.

The logic is simple. In the following example we also use tags to underline and italicize parts of the text.

This is <B>my</B> first web page. There is <u>not</u> a lot here, <i>but it is a beginning</i>.

This produces the following text:

This is my first web page. There is not a lot here, but it is a beginning.

You can apply more than one character formatting tag at a time:

This word is <b><i><u>very</u></i></b> formatted.

produces the following text on screen:

This word is very formatted.

Centering Elements on the Page

By default html text normally appears left justified. The CENTER tags are often used to align blocks of text and other elements in the middle of the page. In the following example this tag has been used to center the text.

<HTML>

<TITLE>My Page</TITLE>

<HEAD>

</HEAD>

<BODY>

<CENTER>

This is the text of my first web page.

</CENTER>

</BODY>

</HTML>

This use of the CENTER tag results in the following layout on the page

This is the text of my first web page.

Creating Breaks in the Page

Typing text in your html document often does not produce the results that you might expect. In the following example it appears that there are two paragraphs of text.

<HTML>

<TITLE>My Page</TITLE>

<HEAD>

</HEAD>

<BODY>

This is my first web page. There is not a lot here, but it is a beginning. It will

probably improve a lot as I learn more about this. This is the end of the first

paragraph.

The second paragraph appears to start here. I know that you do not find this

to be very stimulating reading, but I had to type something for this example.

</BODY>

</HTML>

However, when this text is viewed in a web browser the break between the paragraphs disappears and is replaced by a single space.

This is my first web page. There is not a lot here, but it is a beginning. It will probably improve a lot as I learn more about this. This is the end of the first paragraph. The second paragraph appears to start here. I know that you do not find this to be very stimulating reading, but I had to type something for this example.

The lesson here is that what you see in your text editor is not necessarily going to bear much resemblance to what is displayed in your browser. If you want a new paragraph, you must explicitly create the paragraph break by inserting a character. Here is the same example with the paragraph tag placed between the two paragraphs.

<HTML>

<TITLE>My Page</TITLE>

<HEAD>

</HEAD>

<BODY>

This is my first web page. There is not a lot here, but it is a beginning. It will

probably improve a lot as I learn more about this. This is the end of the first

paragraph.

<P>

The second paragraph appears to start here. I know that you do not find this

to be very stimulating reading, but I had to type something for this example.

</BODY>

</HTML>

This html will produce the following two paragraphs.

This is my first web page. There is not a lot here, but it is a beginning. It will probably improve a lot as I learn more about this. This is the end of the first paragraph.

The second paragraph appears to start here. I know that you do not find this to be very stimulating reading, but I had to type something for this example.

You can use the "break" tag to start a new line of text without placing the extra blank between it and the preceding line.

My favorite foods are

<P>

chocolate

<br>

chocolate

<br>

chocolate

This will produce the following text in the browser:

My favorite foods are

chocolate

chocolate

chocolate

Another useful tag for separating blocks of text is the "horizontal rule." This tag places a horizontal line across the page. The simplest version of this tag

looks like this:

<HR>

and produces the following horizontal line:

You can also add "size" and "width" attributes to this tag. To produce a thicker line you specify its size in pixels.

<HR SIZE="6">

The width of the line can be described either as a specific number of pixels

<hr WIDTH="200">

or as a percentage of the page width.

<HR WIDTH="50%">

Both the size and width attributes can be combined in a horizontal rule tag to produce some interesting effects.

<HR SIZE="20" WIDTH="200">

The Heading Tag

Heading tags are used to create different sized text for titles of documents and sections of documents. There are six levels of heading tags which create successively smaller headings for different levels of document structure.

You may want to use your largest font size for the main title of your document. (See the title of this page, "The Heading Tag," for an example.)

To create this first level heading you surround the text with the heading tags.

<H1>A First Level Heading</H1>

This produces the following heading

A First Level Heading

There are six successively smaller headings as shown in the following examples.

<H2>A Second Level Heading</H2>

This produces the following heading

A Second Level Heading

<H3>A Third Level Heading</H3>

This produces the following heading

A Third Level Heading

<H4>A Fourth Level Heading</H4>

This produces the following heading

A Fourth Level Heading

<H5>A Fifth Level Heading</H5>

This produces the following heading

A Fifth Level Heading

<H6>A Sixth Level Heading</H6>

This produces the following heading

A Sixth Level Heading

Another characteristic of the heading tag is that it automatically produces a space between the heading text and text before and after the heading. It looks like a paragraph tag was used, but this is not the case. Here is an example of a heading followed by some normal text.

<h1>A Heading</h1>

Some body text following the heading.

Note that there is a blank space between the heading text when this is viewed in the browser.

A Heading

Some text following the heading.

You can center your headings by using the CENTER tag as in the following example:

<CENTER>

<H3>A Heading</h3>

</CENTER>

This is some text that follows the heading.

In the browser, this html will result in the following:

A Heading

This is some text that follows the heading.

NOTE: Here below some guides to html issues from other webpages. The key to anything about the web is ON THE WEB. So go to a great search engine for teachers like Inference, http://www.infind.com and put in the keywords you are looking for like"web page backgrounds," and see what you get.

HTML Guides

Web Design Issues

Software

Running a Server

  • MacOS Servers: Dan Mitchell's evolving list of Macintosh server software.

CLARIS HOME PAGE TEXT

Strongly recommend Richard Fenno's 1998 CLARIS HOME PAGE 3 FOR WINDOWS AND MACINTOSH, published by Peachpit Press in their "Visual Quickstart Guide" Series. You may also use this book effeciently with Home Page version 2.0. ISBN is 0-201-69647-9. Order from Amazon at http://www.amazon.com

Instructor

John Swensson: swensson@admin.fhda.edu / 408-864-8929