Writing Your Own WebPages

HyperText Markup Language

HTML Lesson 1

The Language of the Internet

Writing WebPages may be a lot easier than you think! There are many computer languages! Some are harder to learn than others. One of the easier languages is HTML. HTML stands for HyperText Markup Language. Don't let the name scare you! Take a look at the picture above. Those few lines of "gibberish" are a working HTML page. WebPages are written with the HTML language. Some people prefer programs like Microsoft's Front Page to build their WebPages, which is really unnecessary. I prefer writing WebPages with Notepad. Everyone should have a program similar to Notepad. That's what we will use for this lesson. Ready to start?

First, look at the picture above. Let's see what each line is doing. The first line: <HTML>, tells Internet Explorer or any other Web browser that this is an html file. There are many types of files online like pictures, text files, zip files, and etc. The Web browser needs to know what type of file it is going to open in order to open it properly.


The next line: <HEAD>, starts or begins the header information. Enclosed within the header, on the next line: <TITLE>Your Title Here</TITLE>, is the title information. Enclosed within the title tags is what will be displayed at the very top of the screen in the "title" bar when someone visits your WebPage. The next line: </HEAD>, closes the header tag. Headers often will contain other things like JavaScript(s) and/or META tags, but don't worry about that right now. You don't need any of that to make a WebPage.


The fifth line is the body tag: <BODY BGCOLOR="#FFFF00" TEXT="#0000FF" LINK="#00FF00" VLINK="#000000">. The body tag contains the information for the background color: (BGCOLOR="#FFFF00"), the text color: (TEXT="#0000FF"), the color for links: (LINK="#00FF00"), and the color for links that have already been visited: (VLINK="#000000"). Notice how the items are abbreviated. BGCOLOR = background color, TEXT = text color, LINK = link color, and VLINK = visited link color.

Within the quotation marks following each item are color codes in hexadecimal format. After the "#" sign there are 6 characters. The first 2 represent red, the next 2 represent green, and the last 2 represent blue. Using these three colors combined you can create virtually any color. The characters can range from 0 to 9 and A to F. 00 is the darkest possibility for any color and FF is lightest. To give you a better idea of how this works: #000000 = black, #FFFFFF = white, #FF0000 = red, #00FF00 = green, and #0000FF = blue. It's a bit confusing at first so just experiment using different values. #0000BB is a darker blue. #00007F is an even darker blue. Don't worry if you don't understand it. Some people just use the color names: aqua, black, blue, fuchsia, green, gray, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. They will also work for most Web browsers. For example TEXT="BLUE" would display blue text. I prefer using the hexadecimal format though, because you're not limited to just a few colors.


Line 6 is a center tag: <CENTER>, which centers everything on the page until you reach the center close tag: </CENTER>, near the bottom. Next is a page break: <BR>. The page break tag causes the page to drop down to a new line. Next the <FONT SIZE=6> tag defines the font size of the enclosed text: "My First WebPage!" Possible values for font size are 1 to 7. The <B> tag that follows the font tag makes the enclosed text bold. </B> and </FONT> close the bold and font tags. <BR><BR> makes two page breaks, dropping down two more lines. On line 10 is another font tag with additional text.

I should mention that you can do other things with the font tag. You can also change the font face from the default face to one like Comic Sans MS with <FONT FACE="Comic Sans MS">. You can also make the font color different from the one you chose for text color within the <BODY> tag with a color attribute like: <FONT COLOR="#800000">, making the enclosed text maroon. You can also use all these attributes in the same font tag like with: <FONT FACE="Lucida Handwriting" SIZE=6 COLOR="YELLOW">. Be careful using the face attribute! If someone does not have a font you change with the face attribute, he or she will not see your font. That person will only see a standard font.


The next line causes two more page breaks: <BR><BR>, then the page centering tag is closed with the </CENTER> tag. If any text had been written after this, it would not have been centered unless we used another <CENTER> tag. The </BODY> tag closes the body of our page. The </HTML> marks the end of our HTML file.

That's all there is to it! It's really quite simple! There are other tags in HTML, but these will get you started. What I want you to do now is to open up Notepad and give it a try yourself. Copy down everything like it appears in the picture at the top of the page. Save the file to your desktop as "webpage.html". The ".html" is the key here. This tells the computer that this is not a text file, but an HTML file. ".htm" will also work. Make SURE you save it as ".html" or ".htm". Notepad will try to save it as ".txt" and that won't work! You might also need to change the file type at the bottom of the "save as" screen from "text" to "all files."

The "webpage" name can be just about anything you choose. I just chose "webpage" for mine. Do not use any spaces though! "web page.html" may not work properly online. Another thing is to only use letters and numbers! Other characters often won't work. After you save your WebPage, double click on it to open it with your Web browser, (normally Internet Explorer). Once everything is working properly, try experimenting by changing a few things. If you keep reading you will learn a few other things you can also do. If you want to compare your HTML file with the one I wrote, just click on this link: My WebPage File. It's nothing fancy. It's up to you to make it better!

One thing to remember is to not overlap your tags! This is an example of overlapped tags: <I><B></I></B>. To use these tags properly, you should use either: <I><B></B></I> or <B><I></I></B>.

Also remember that when using HTML tags it is necessary to close most of them. If you are ever unsure, just go ahead and close them. It shouldn't hurt anything. The "/" in front of the tags name is what closes it.

The best way to learn HTML is by reading other people's HTML files. How do you do that? It's easy! When you're looking at any WebPage, right click your mouse on the page. A menu should appear. Click "view source" on the menu. Some HTML files are messy, especially those written with HTML editor programs like Front Page. JavaScript can also make things confusing. Don't worry about JavaScript right now. You will normally find JavaScript between the <HEAD>, and closing </HEAD> tags. It is enclosed inside its own <SCRIPT> tag, which is recognized by <SCRIPT LANGUAGE="JavaScript"> and the closing </SCRIPT> tag.

HTML is not "case sensitive" meaning that you can write it in both "UPPER CASE," (all capitols), and "lower case," (all small letters). A good HTML reference book helps a lot! You can view a good online HTML reference at HTML Goodies Reference. I used it a lot when I was learning. Another reference can be found at W3Schools HTML Reference. Both are good places to learn more about HTML. Below are a few common HTML tags for you to experiment with. If you have any questions or trouble, you can email me at mike@kids-online.net.

  • <BIG>Makes text one size bigger.</BIG>
  • <BLOCKQUOTE>Used to indent quotations.</BLOCKQUOTE>
  • <CITE>Used to cite an author. Makes text italic.</CITE>
  • <CODE>Used to display code. Makes text standard fixed width.</CODE>
  • <DD>Used in a definition list. Indents the text.
  • <DIV>Used to divide a page into sections.</DIV>
  • <EM>Used to show emphasis.</EM>
  • <H3>Makes a size 3 Header. (Can use sizes 1 to 6)</H3>

  • <HR WIDTH=50%> Makes a horizontal page break. (Shown below)

  • <HR WIDTH=50% SIZE=10 COLOR=RED ALIGN=LEFT> (Shown below)

  • <I>Italicises the enclosed text.</I>
  • <KBD>Makes text standard fixed width.</KBD>
  • <LI>A list item within a list like this. (Used within <UL></UL> or <OL></OL> tags).
  • <MARQUEE>Creates a scrolling marquee.</MARQUEE>
  • <NOBR>Text will not break or wrap the screen.</NOBR>
  • <P>Used for formatting paragraphs.</P>

  • <PLAINTEXT>Displays everything as plain text.</PLAINTEXT>
  • <PRE>Causes enclosed text to keep its exact format.</PRE>
  • <S>Puts a strikeout line through the enclosed text.</S>
  • <SAMP>Used to display code. Makes text standard fixed width.</SAMP>
  • <SMALL>Makes text one size smaller.</SMALL>
  • <STRIKE>Puts a strikeout line through the enclosed text.</STRIKE>
  • <STRONG>Makes text bold.</STRONG>
  • <SUB>Used for subscript. (Text is slightly lower.)</SUB>
  • <SUP>Used for superscript. (Text is slightly higher.)</SUP>
  • <TT>Makes typewriter text.</TT>
  • <U>Underlines the enclosed text.</U>
  • <VAR>Used to display code or variables.</VAR>
  • <WBR>Causes text before it inside a <NOBR> tag to break or wrap.
  • <XMP>Used to display code or examples.</XMP>

Note: This page would be great for you to try "viewing the source" on! Good luck and have fun learning HTML!

~ HTML Links ~

Lisa Explains It

HTML Goodies

HTML Code Tutorial

Learning HTML - UT

Dave's HTML Tutorial

W3Schools Tutorials

W3C HTML Home Page

Back to Learn