Very Simple Html

What is Html?

Most web pages are written in Hyper Text Markup Language or html. An html document is mostly just text. The html is in the form of tags scattered here and there throughout the document to direct the structuring and formatting of the text. Html files are read by a browser (such as Firefox, Netscape or Microsoft Internet Explorer) to produce a nicely formatted page.

Who needs to write html?

Not everyone. If you use Microsoft Word, for example, to write your documents, you can save these as web pages and open them with your browser. If you find Word easy to use, if you don't mind large files that can take a while to download, and if you have no wish to interact with your readers, you might not need to learn html.

If, however, you are serious about building web pages, you may find it just as easy to learn html, as to learn Word or any of the web programming software packages. Furthermore, once you have mastered html, you will be able to extend your abilities by learning to use a programming language such as PHP and a database. At this point, you will have a very useful tool. It will be easy to generate intricate and complex webpages.

What are Html tags?

Html tags, also called elements, are instructions to the browser. They structure and format the text by directing the placement of paragraphs, headings, forms, tables, images, links, colors, fonts, and so forth.

It seems obvious that the browser must have a way to differentiate its instructions from the text. This is done by enclosing the instructions in angle brackets, for example <pre> . The resultant structure is called a tag.

Html tags come in pairs, one to start the formatting, and the other to stop it. The stop tag is identical to the start tag except that it contains a forward slash, e.g. </pre>. Text to be formatted is placed between the two tags. Every start tag should be followed by the corresponding stop tag; otherwise the browser is likely to become confused. There are a few tags, that do not have stop tags. These will be pointed out as we go along.

What Should Go in an Html File? -- The html, head, title, and body tags

Here is a very simple html file. Note that each element has a start and a stop tag. Click the light bulb for the code results.

    <title>A Very Simple Document</title>
    The body section contains the text 
      to be displayed by the browser.
    The head section contains instructions 
      to the browser that will be applied 
      to the whole file.  

Light Bulb

No structuring or formatting instructions were used in this very simple file. Consequently the browser displays the text as one large paragraph.

Structuring and Formatting

There are two main considerations when writing a web page: structuring the text and formatting it. Structuring means marking headings, paragraphs, lists, tables, text to be emphasized, and so on. Formatting means choosing fonts, colors, margins, indentation, and so on.

It is certainly possible to format the text as it is being written, and it is a lot of fun, but it can drive you distracted, if you're writing much more than a page. It is easier to be content with structuring the text. The formatting of the entire document can then be adjusted at one time, using a style sheet.

Some Simple Structuring Instructions

A new paragraph is begun by using the <p> tag. The paragraph tag causes a line of white space to be left before and after the paragraph. It is not essential to use a </p> tag. However, it is a very good idea. If the paragraph had any styling changes, it may be essential.

Html provides six headings as shown. To produce a heading, place the text between the beginning and ending tags:

<h1> Text for Heading 1 </h1>
<h2> Text for Heading 2 </h2>
<h3> Text for Heading 3 </h3>
<h4> Text for Heading 4 </h4>
<h5> Text for Heading 5 </h5>
<h6> Text for Heading 6 </h6>

Light Bulb

Click on the light bulb to see the default settings of the headings. You'll learn to change the appearance of the headings in the section on style.

Block Quotes
Note that this paragraph has indented margins. This was accomplished by placing the text between the <blockquote> and </blockquote> tags.
Preformatted Text
        Text can be preformatted, 
                         like this, 
                        by placing it between the 

             <pre> and </pre> tags.
Marking Text for Emphasis

The World Wide Web Consortium, W3C, approves two ways of marking text for emphasis: <strong> and <em>.

  1. Text placed between the <strong> and </strong> tags is rendered in bold.
  2. Text placed between the <em> and </em> tags is rendered in italics.
These methods are recommended because they will be supported by aural and braille browsers, etc.

Some Simple Formatting Instructions

Most of our formatting will be done using CSS. Here are some html tags you can use as well.

Font Changes

These font changes are vintage html; they're fun and useful, as well as easy.

Bold text is placed between the <b> and </b> tags.

Italicized text is placed between the <i>and </i> tags.

Monospaced text is placed between the <tt> and </tt> tags.

Striken through text is placed between the <del> and </del> tags.

Underlining text is not recommended because clickable links are typically underlined, 

but if it must be done, it can be accomplished with the <u> and </u> tags.

xi Subscripts are placed between the <sub> and </sub> tags.

23 Superscripts are placed between the <sup> and </sup> tags.

Horizontal Rule

A horizontal line can be included by using the <hr> tag. Since a line encloses nothing, there is no stop tag.

Line Breaks

A line break can be included by using the <br> tag. There is no stop tag. The break tag is most useful for breaking a line in the middle
like this. Although line breaks can be used to format text, please don't; there are much easier ways to accomplish this.

Unbroken Text

When you don't want text broken, place it between the <nobr> and </nobr> tags.

Valid HTML 4.01 Transitional