Basic HTML Topics

Initially, we will teach you six basic formatting elements, and the anchor element, the keystone of the World Wide Web.

The formatting of an HTML page is done through the use of HTML elements, sometime called tags when referring to a single one. A tag is denoted by being preceded with a Less-than sign "<" and followed by a Greater-than sign ">". So, <tag> would represent a mythical element called "tag".

Your first six elements

The first six elements we will teach you about are:
  1. The title element <TITLE>text</TITLE>
  2. The header elements <H1>text</H1> through <H6>text<H6>
  3. The paragraph break element <P>
  4. The line break element <BR>
  5. The bold element <B>text</B>
  6. The italics element <I>text</I>

The Title Element

Each page you create should have a title. Often pages will be referred to by their title rather than their address for convenience. You denote the title of your page by enclosing the title between the two parts of the title element. Just before the title, put "<TITLE>" and immediately after, put "</TITLE>". For example, the full title section of this page is "<TITLE>UCF HTML Primer</TITLE>". This shows the general way of using "enclosing" elements, or elements with both a beginning and an ending part enclosing the text they affect. The first tag (<TITLE> in this case) shows where to begin, and the second tag has a slash "/" showing that it closes an element (in this case </TITLE> closes the area affected by the previous <TITLE> tag).

Another thing to keep in mind, is that each document should only have a single title element. To avoid confusion, the title element should be placed at the beginning of the file.

The Header Elements

In order to differentiate between different sections of your document, you can use a header element. The header elements create "chapter headings" that can be used to separate sections of text. There are six different levels of header, numbered 1 through 6, but they are fundamentally similar and we will only actually deal with header one <H1></H1>. But, the "1" could be replaced with "2", "3", "4", "5", or "6" if so desired. Typically, the 1 header is the most emphasized, often shown as larger than normal text. From there the 2 header is a bit smaller or less emphasized, then the 3 header, all the way down to the 6 header. But, this is only a general guideline as the exact representation of the headers is browser dependent and can vary greatly. The relative importance of each header to the others is specified, but there are no guidelines for exactly how each level should be represented.

To create a header, in this case a header 1, put <H1> before the text to become the header, and </H1> after the text.

Paragraph Break Element

In order to separate paragraphs, use the paragraph break element <P>. This will create a blank line or space between the preceding text and the text following the paragraph break element. You do not need a closing tag with the paragraph break for simple use, the paragraph break will just occur where the <P> element is located in the file.

Line Break Element

Less emphatic than the paragraph break is the line break element <BR>. This element ends the current line and starts a new line on the immediate following line (unlike the paragraph break, which would leave a blank line). You do not need a closing tag with the line break for simple use, the line break will just occur where the <BR> element is located in the file.

Bold Elements

To emphasize a section of text by making it bold, surround it with the bold element <B></B>. For example to make the word "is" bold in the sentence "This is a test", it would look like "This <B>is</B> a test".

Italics Elements

To emphasize a section of text by making it italic, surround it with the italics element <I></I>. For example to make the word "is" italic in the sentence "This is a test", it would look like "This <I>is</I> a test".

The Anchor element

What makes the Web a unique Internet tool is the ability to reach related documents and information servers from within a document by using "links" within that document. To create these links, you use the anchor element.

Before you actually enter the anchor element, you need to know the URL of the page you wish to link to. URL stands for Universal Resource Locator, and serves as a unique address for HTML pages and certain other information resources. For example, the URL of the UCF home page is "http://www.ucf.edu/". The characters before the colon ":" tell you the type of resource it is, in this case "http" for the World Wide Web. Immediately after the double slashes "//" comes the machine name, "www.ucf.edu", followed by the path to the file, in this case "/" for the default document in the root directory of the server. The URL of another document on the UCF Web Server, the Campus Map, it is "http://www.ucf.edu/campus/html/campus.html". It is also a Web resource (denoted by "http"), is also on www.ucf.edu, but it has a different path ("/campus/html/campus.html" as opposed to just "/" for the home page) showing that it is a different document.

To create an anchor element, use:

<A HREF="url">text</A>

Replacing url with the URL of the page you wish to point to, and text with the word or phrase (I suggest keeping it to as few words as possible) you wish to actually be the link. For example, if I wanted the word "is" in "This is a test" to be a link to the UCF Home Page, it would look like "This <A HREF="http://www.ucf.edu/">is</A> a test". Make sure that the URL is surrounded by double quotes, they are not always necessary, but it can prevent confusion later.

Most browsers have some way of showing the URL of the current document. In Netscape and Mosaic, it is usually displayed near the top of the browser window (you might have to turn the option to show the URL or Location back on). In Lynx, you can press the equal sign "=" to get an information page that shows the URL.

Up to the Primer Lesson List.
Forward to the next lesson.
Return to the Pegasus home page.