Shadow Academy Campuses
"Khar Shian Campus: HTML Basics"


1—Introduction
HTML is a markup language commonly used in the development of websites. HTML stands for "Hyper Text Mark-Up Language". This course is designed to help people get through the fundamental basics of making their own webpage. The information contained within this course is the building blocks for the things that you will need in making great websites and incorporating server-side scripting languages, like PHP and ASP, into your pages. This course will cover the basic HTML tags and how they are used.

What is expected of you, the student, is that by the time you finish with this course you will have a basic understanding of HTML and will be able to create a basic webpage that people could go to and view if they wanted to. After reading through the course notes you should be able to adequately show what you have learned.

Important: While you can use visual editors like Frontpage or Composer to write HTML, these won't help you if you want to add PHP or ASP to your pages. In that case, you will have to understand and be able to use HTML source code. The exam questions in this course are written for students doing a direct source code edit. Please do not use a visual editor while doing the exam; it is obvious if you do, and you will be penalized some points for doing so.

Another note: In this course, we always show code examples in a blue and output in red.

2—The HTML Language
The actual HTML language is composed up of text and the so-called markup. Markup is done with objects called tags. Tags are enclosed in < >, e.g. <HTML>. The tags are the required knowledge of HTML. Once you learn the tags and how to use them then you have a basic understanding of HTML and can make a page quite easily.

We strongly recommend that you use Notepad or other plain text editor (such as Notepad++) for writing HTML source code. First, it automatically saves files as the correct text-only structure (not in a document structure like Word or Wordpad) and secondly, it allows you to nicely structure code because of the fixed-width font. Most HTML editing software also possesses a source code editing mode you can use.

Warning: While Microsoft Word can be used as an HTML editor, it is not recommended that you use it. It has a bad tendency to add things to your html file and change tags around. Especially opening a pre-existing HTML in Word, editing it and saving it back can completely destroy the structure of your page. You have been warned. When you are working with Notepad or other plain text editors like it, make sure to save you files as .html or .htm. Either of the two will work, but .html is recommended for saving your files.

One of the things that can screw up a page easier then any other thing is that one of the tags was not closed out properly. A closing tag looks like </HTML>. Most tags require that they be closed out to work properly. All you do to close out a tag is add / before the text of the tag and the after . So to close the <BODY> tag, you would type </BODY>

Another note within this course you will see all tags in upper case. Tags can either be in upper or lower case, it does not matter. All of the following are acceptable examples of the <BODY> tag: <Body>,<body>,<bOdY> etc. (However, the W3C's XHTML specifications state that all tags and elements must be defined in lowercase.)

Now, we move on to talking about the individual tags.

3—The HTML, HEAD and TITLE Tags
The first tag that this course will address is the <HTML> tag. The <HTML> tag goes at the beginning of every HTML document and the closing tag (</HTML>) goes at the end of every HTML document. Here is an example:

<HTML>
   Text and tags for webpage
</HTML>

Remember, every page must open with an <HTML> tag and close with the corresponding </HTML>.

The next two tags you will need are <HEAD> and <TITLE>. The <HEAD> tag is used to define the header of the page. The header contains basic settings, for now the only thing relevant is that this is the location that the <TITLE> tag goes in. The <TITLE> tag is the tag that is used to make the title of the page, in Internet Explorer or Mozilla that is the text that appears in the little blue bar at the top of the window. An example of what these tags will do and how to place them:

<HTML>
    <HEAD>
        <TITLE>
           A great HTML page
        </TITLE>
    </HEAD>
    Rest of HTML document.
</HTML>

This will show in your browser as:


4—The BODY Tag
The next tag that will be covered is the <BODY> tag. This is one of the more complex tags that this course will get into. The tag in and of itself is not all that complex, but it has many attributes that can be added to it, thus enabling it to do many different things. A simple example of how this tag works and its location is as follows:

<HTML>
    <HEAD>
        <TITLE>
            An HTML page with body
        </TITLE>
    </HEAD>
    <BODY>
        The body of the HTML document.
    </BODY>
</HTML>

This is a simple example, but there is more to this tag, because it can control the general color schema of a page. Through the body tag, you can set the background color, the text color, and three link colors (active links, visited links, and unvisited links).

To do this, you will need to add attributes to the tag. An attribute is written as name="value"; for example, text="white".

Here is an abridged list of the available attributes for the <BODY> tag:
  • bgcolor = a background color for the page
  • background = a background image for the page (this will be explained later)
  • text = the page text color
  • link = the color for unvisited links on the page
  • vlink = the color for visited links on the page
  • alink = the color for active (just being clicked on) links on the page
Colors can be specified either as a color name (about any color you can think of is defined) or a hexadecimal code using a "#" For a hexadecimal code, the first two digits define the red component, the second two for green, and the third two for blue. A slightly greenish yellow could be #DDFF00. A pure yellow is #FFFF00. (If you do not know how to compose the hex codes, don't worry. They are not required to write good HTML).

And now for a more complex example of the <BODY> tag using all these:

<HTML>
    <HEAD>
        <TITLE>
            An HTML page with a colorful body
        </TITLE>
    </HEAD>
    <BODY BGCOLOR="black" TEXT="white" LINK="green" VLINK="red" ALINK="#FFFF00">
        The body of the HTML document.
    </BODY>
</HTML>

This example will set the background color to black, the text color to white, the unvisited link color to green, the active link color to yellow, and the visited link color to red.

5—Formatting
With the commands you now know, you should be able to create a basic HTML web page with a simple layout that has colored links, backgrounds, and text. But there are some other things that you can do with HTML, and there are a few more tags that this course needs to cover before setting you loose so that you can show the world your HTML skills.

This next group of tags are the text formatting tags. The first of which is the <FONT> tag. This tag is used mostly for changing font size of the text or for changing the font color. It is best that this tag only be used to change the text for certain areas or phrases and not the whole document. An example is as follows:

<HTML>
    <HEAD>
        <TITLE>
            A complete HTML page with some markup
        </TITLE>
    </HEAD>
    <BODY>
        <FONT COLOR="#808080">
            This is grey text.
        </FONT>
        <FONT SIZE="+2">
            And this is very large red text.
        </FONT>
    </BODY>
</HTML>

The result of this code is:

This is grey text. And this is very large red text.

Notice: You will have seen that the example code is always indented. While this is not required, it makes for good legibility. You will always see which tags are closed where. The style shown is a good start - you can vary yours. Also, multiple spaces show in a page as just one space, so don't feel afraid to use liberal spacing in your source code if it's easier to read.

The next group of tags that we will discuss are the <B>, <I>, and <U> tags. These tags are really easy to use and understand. The <B> tag is bold,<I> is italics, and <U> is underline.

Notice: An alternative for <B> is <STRONG> and an alternative for <I> is <EM>.

An example of their use:

<HTML>
    <HEAD>
        <TITLE>
            Hello World!
        </TITLE>
    </HEAD>
    <BODY>
        Hello World, <B>bold</B>, <I>italic</I> and <U>underlined</U> text help emphasize things.
    </BODY>
</HTML>

which results in:

Hello World, bold, italic and underlined text help emphasize things.

Notice: Make sure to remember to close your tags, otherwise everything after the tags will receive the emphasis.

The next few tags that are going to be covered are formatting tags, but are generally used for larger sections of text, not just a few words here and there. The first of these is the <CENTER> tag. This tag is self-explanatory: Put the text you want centered between the tags: <CENTER> Text </CENTER>. The next tag is the <BR> tag. This tag insets a break line into the document. The next one is the <HR> tag. This tag puts a horizontal rule into the document.

Notice: Neither the <BR> and <HR> tags have a closing tag, instead they can be "self-closing"; either is correct: <BR> and <BR />.

Example all these tags:

<HTML>
    <HEAD>
        <TITLE>
            Look mum, more tags!
        </TITLE>
    </HEAD>
    <BODY>
        This is a normal paragraph of text.<BR>
        Now this text is on a new line.<BR>
        <HR>
        <CENTER>
            This line of text is centered, between two horizontal rules.
        </CENTER>
        <HR>
        <BR><BR>
        And this final line is set apart from the rest of the page by several line breaks.
    </BODY>
</HTML>

Which shows up as:

This is a normal paragraph of text.
Now this text is on a new line.

This line of text is centered, between two horizontal rules.


And this final line is set apart from the rest of the page by several line breaks.


6—Hyperlinks
The next tag is the tag to create a hyperlink (usually shortened to "link"). It is probably the one tag that made the World Wide Web what it is today. The linking tag is <A> and it needs at least one attribute called HREF. The value of this attribute is the file or website to link to. You have three possibilities to write this:
  • Just a filename (htmlnotes8.html): Links to a file in the same directory
  • A directory and filename (/dbjedi/shadowacademy/sa/htmlnotes1.html): Links to a file in a different directory on the same server.
  • A full URL like it would show in your browser address bar (http://www.darkjedibrotherhood.com/dbjedi/news.asp): Links to a page on a different site.
Remember you also need to close the <A> tag with </A>. The text between <A> and </A> is the text that will later appear as the link. It is best illustrated with an example.

<HTML>
    <HEAD>
        <TITLE>
            Link examples
        </TITLE>
    </HEAD>
    <BODY>
        Go to the <A HREF="KharShian_HTML.php">next page</a> in this course.<BR>
        Or <A HREF="/dbjedi/shadowacademy/sa/KharShian_HTML.php">read it again</a> from the beginning.<BR>
        Or, you could just go check <A HREF="http://www.darkjedibrotherhood.com/news.asp">Dark Jedi Brotherhood News</A>.
    </BODY>
</HTML>

The result here is:

Go to the Advanced HTML course notes.
Or go to the topof this page.
Or, you could just go check Dark Jedi Brotherhood News.

You may remember that occasionally, links open in a new window. To do that, add the TARGET attribute, using the value of _blank.

<A HREF="http://www.starwars.com" TARGET="_blank">Official Star Wars Page</A>

Official Star Wars Page

Warning: When typing link targets, sometimes capitalization matters (it depends on the server the page is on). It is always safest to copy and paste the link target directly from your browser address bar. Also, when in doubt, always use the third way of linking (with the http:// part). It is the only one that makes sure exactly which page you will get.

7—Images
Now that you understood linking, images are easy. Placing an image in a web page is achieved with the <IMG> tag. It uses the SRC attribute to determine the image's location. You use that attribute just like the HREF attribute of the <A> tag. Remember the image on page 3 of this course? Here's how to put it on a page:

<IMG SRC="KharShian_HTML_Head.jpg" width="193" height="63">

The <IMG> tag also allows you to specify the size of the image in case you want it larger or smaller. For that, use the WIDTH and HEIGHT attributes and specify the desired size in pixels. If I wanted to double the size of the image above, I would write:

<IMG SRC="KharShian_HTML_Head.jpg" WIDTH="386" HEIGHT="126">

You can also distort an image by using these attributes, so be careful! If I were to forcefully constrain the above image into a 200x200 square with

<IMG SRC="KharShian_HTML_Head.jpg" WIDTH="200" HEIGHT="200">

I'd get this rather unsightly result:

Now we can also complete the discussion of the <BODY> tag. Remember the BACKGROUND attribute? It is used just like the SRC attribute of the <IMG> tag. Thus, <BODY BACKGROUND="myback.jpg"> gives you a page that uses myback.jpg as a background image.

8—Tables
Tables are a great way to present information in a clear and readable format. The first part of the table is the <TABLE> tag. This tells the HTML document that the information to follow will be in a table. Inside the table, you will have table rows, indicated by a <TR> tag (Table Row), and in those rows, cells, delineated by <TD> tags (Table Data). You can also use <TH> tags (Table Header) to create bold, centered headings for your table data, especially in the first row. Here's a simple table:

<HTML>
    <HEAD>
        <TITLE>
            Some Shadow Academy Staff
        </TITLE>
    </HEAD>
    <BODY>
        <TABLE>
            <TR>
                <TH>Position</TH>
                <TH>Rank</TH>
                <TH>Name</TH>
            </TR>
            <TR>
                <TD>Headmaster</TD>
                <TD>Dark Side Adept</TD>
                <TD>Anshar Kahn Tarentae</TD>
            </TR>
            <TR>
                <TD>Praetor</TD>
                <TD>Sith Warlord</TD>
                <TD>Dacien Victae di Plagia</TD>
            </TR>
            <TR>
                <TD>Eclectic Pedagog</TD>
                <TD>Jedi Hunter</TD>
                <TD>Made Up Name</TD>
            </TR>
        </TABLE>
    </BODY>
</HTML>

Now you may also truly appreciate the value of indenting. Try reading this code snippet without any formatting here.

The resulting table looks as follows:

Position Rank Name
Headmaster Dark Side Adept Anshar Kahn Tarentae
Praetor Sith Warlord Dacien Victae di Plagia
Eclectic Pedagog Jedi Hunter Made Up Name

9—Lists
There are three different types of lists that can be created on a web page using HTML: Unordered, Ordered, and Definition. Unordered lists are begun with <UL> and Ordered lists are begun with <OL>. Both of these lists you use the <LI> tag to designate list elements.

An Unordered list simply uses bullets to designate elements. Here is an example:

<HTML>
    <HEAD>
        <TITLE>
            Some Shadow Academy Staff
        </TITLE>
    </HEAD>
    <BODY>
        <UL>
            <LI>
                Toilet paper
            </LI>
            <LI>
                Orange juice
            </LI>
            <LI>
                Coffee beans
            </LI>
        </UL>
    </BODY>
</HTML>

  • Toilet paper
  • Orange juice
  • Coffee beans

Ordered lists number their elements. Here is an example:

<HTML>
    <HEAD>
        <TITLE>
            Some Shadow Academy Staff
        </TITLE>
    </HEAD>
    <BODY>
        <OL>
            <LI>
                Toilet paper
            </LI>
            <LI>
                Orange juice
            </LI>
            <LI>
                Coffee beans
            </LI>
        </OL>
    </BODY>
</HTML>

  1. Toilet paper
  2. Orange juice
  3. Coffee beans

The next type, a Definition, also called "Dictionary", list, is a little bit trickier than its Ordered and Unordered companions. A Definition list starts with a <DL> tag. In a Definition list, you do not use the <LI> tag to define an element. Instead, you have to use the <DT> and <DD> tags. The <DT> tag's data is used to represent a Dictionary Term, and the <DD> tag is used to define that Term's definition.

Here is an example:

<HTML>
    <HEAD>
        <TITLE>
            Some Shadow Academy Staff
        </TITLE>
    </HEAD>
    <BODY>
        <DL>
            <DT>
                Cow
            </DT>
            <DD>
                An animal that goes "Mooooo!"
            </DD>
            <DT>
                Tomato
            </DT>
            <DD>
                A fruit that is used in many different kinds of salads.
            </DD>
            <DT>
                Salad
            </DT>
            <DD>
                Nutritious, delicious rabbit food.
            </DD>
        </DL>
    </BODY>
</HTML>

Cow
An animal that goes "Mooooo!"
Tomato
A fruit that is used in many different kinds of salads.
Salad
Nutritious, delicious rabbit food.

As you can see, a Definition list is very different from an Ordered or Unordered list in that it shows a term and a description, not just a "bare bones" list.
Conclusion
I hope that this very small taste of the Internet didn't hurt too much. This is only one small step into the world of web development, so don't worry if you're hungry for more! If you are interested in a career in information technology and web development, HTML is the first step that you must take, and if you have read these notes thoroughly, you have taken that step.

Once you pass the HTML Basics exam, I recommend trying your hand at the Advanced HTML course, which covers several more topics, including frames and image maps.

Good luck with the exam, and remember, if you have any questions about the HTML Basics notes or exam, please feel free to contact me, the Eclectic Pedagogue.


Take the Test: HERE
Copyright © 2006 Dark Jedi Brotherhood
Site Maintained by: Dranik & Acxodim "DV" Pyralis
Site Design: DJM Acxodim "DV" Pyralis / Site Header: Muz Keibatsu Sadow