BellSouth Site Builder® >> FAQs > Free Basic HTML Lesson
Please be aware that BellSouth Web Hosting Technical Support will not be able to assist you with web design or HTML questions. For tips on web design and help with HTML, please consult the links found at the bottom of this page.
Index for Lesson


What is HTML
HTML, or HyperText Markup Language, is a set of instructions, or tags, that a web designer uses to tell your web browser exactly how to interpret text. By using a pre-defined set of tags, a designer can change their text from being just plain text to headlines, bullets, bold, underlined, etc. The history of HTML is short but strong. Currently, there are two distinct paths that HTML has taken: Microsoft and all others. The difference in these paths is still minimal but continues to widen. Mostly, the difference between the two versions is in what tags the browsers will recognize. For the purpose of this tutorial, we will stay with common tags that all browsers can identify.
There are many web page editors in existence today, but a notepad session should be sufficient to create a web page! Some other editors are: Netscape Composer, Microsoft's Front Page, and a host of other "GUI" editors.

The Basic Anatomy of a Web Page
The basic design of all web pages is nearly the same. In fact, you should open another browser window now and go to a favorite web page. Once the page has finished loading into your browser, right-click on the page with your mouse. An alternate menu will popup on your screen. Click on the entry "View Source" or "View Page Source" in Netscape Navigator.
This will bring up the HTML code behind the page that you see. Notice that at the top you will see these tags: <HTML>, <HEAD>, <TITLE>, </TITLE>, </HEAD>, <BODY>. These are all necessary at the top of your HTML document. Also take note that each tag is inclosed with a < and a >. You also might notice that the <body> tag has other things within the open and ending brackets. These are called attributes and will be discussed in a little more detailed later in this lesson. Attributes are the details for the browser to use so that you, as a designer, can represent the page exactly how you want it to appear.
Now scroll down to the end of the source document. There you will see the closing tags for the </body> and </HTML> tags. These are necessary for the browser to know when the page is finished. There are some tags that need a closing tag and there are some that don't need a closing tag but the browser will understand if you put one there. Don't worry if you're not sure whether a tag needs to be closed or not since this tutorial will tell you which of the basic tags need to be closed. To "close" a tag, you simply retype the tag with a slash ("/") in front of it. This tells the broswer that you want to stop treating the text or image the way you had previously dictated. Here are some basic tags to help you get started.

Basic Tags
The following are a list of the basic tags for creating and manipulating text for a web page. While not all of these tags are necessary for your code to work in a web browser, most of them are necessary to have your text appear the way you want.
  • <HTML> - </HTML>:
    • These are the open HTML and close HTML tags.
    • These tags tell the browser that the information that is contained between these tags is to be processed as a web page.
    • All pages of BellSouth Site Builder® already contain the <HTML> tags.
    • It is VERY important that you do NOT use these tags in ANY field on BellSouth Site Builder®!
  • <HEAD> - </HEAD>:
    • These are the open HEAD and close HEAD tags.
    • The HEAD section of an HTML document is information that you pass to the browser but do not display on the page directly.
    • One exception to this rule is with the <TITLE> tag. That tag displays whatever is written there in the "blue bar" at the top of the Browser window.
    • Both the <HEAD> and the <TITLE> tags are already supplied for all pages of a BellSouth Site Builder® site.
    • It is VERY important that you do NOT use these tags in ANY field on BellSouth Site Builder®!
  • <BODY> - </BODY>:
    • These are the open and close BODY tags.
    • All information contained within these two tags will be processed by the browser as "the" page you want displayed on your site.
    • This tag is also already included within all pages in BellSouth Site Builder®
    • It is VERY important that you do NOT use these tags in ANY field on BellSouth Site Builder®!
  • <CENTER> - </CENTER>, <LEFT> - </LEFT>, and <RIGHT> - </RIGHT>:
    • These are the open and close CENTER, LEFT, and RIGHT tags
    • These control what position the content between the tags appears.
    • The default position for all content is left unless otherwise stated by one of these tags.
  • <H1> thru <H7> and </H1> thru </H7>:
    • These are the Headline tags
    • This tells the browser to make the text bold and a little bigger
    • The lower the number, the bigger the font size
    • Use these tags for the headlines of sections or when you want something to be noticed.
    • If you typed a line like this: <H3>Here is an example!</H3>, it would display on the web page like this:

      Here is an example!

  • <FONT> - </FONT> tags:
    • These are the FONT tags.
    • This tag has attributes.
      • SIZE Attribute:
        • Controls the size of your text.
        • Written like this: <FONT size=3>
        • Acceptable sizes are between 1 - 7
        • The lower the number, the smaller the font
        • size=3 is the default browser font size
      • COLOR Attribute:
        • Controls the color of your text.
        • Written like this: <FONT color="red">
        • While using the word name for a color may not display that color, using a color nomenclature will.
        • The color nomencalture is like this: "#FF0000"
        • Written like this: <FONT color="#FF0000">
        • The first two numbers are the red pigmentation.
        • The second two numbers are the green pigmentation.
        • The last two numbers are the blue pigmentation.
        • The numbers are base 16 which mean you can use any number between 0 - 9 plus A=10, B=11, C=12, D=13, E=14, F=15.
        • By experimenting with this color nomenclature, you can get your font to be exactly the color you want.
      • Combination Attributes
        • By combining the two attributes size and color, you can tell a web browser exactly how you want your text to appear on a web page.
        • Written like this: <FONT color="#995ACC" size=5>This is an example</FONT>
        • That would produce this output: This is an example
  • <B>, <U>, and <I> - </B>, </U>, </I> tags:
    • These are the Bold, Underline, and Italicize tags
    • Written like this: <B>Hello World!</B>: Hello World!
    • <U>Hello World!</U>: Hello World!
    • <I>Hello World!</I>: Hello World!
    • Or use any combination: <B><U>Hello World!</U></B>: Hello World!
  • <BR> tag
    • This is the break tag.
    • Use this to force a break or carriage return on your page.
    • Each use of the <BR> tag results in one line break.
    • Here is a <BR>
      example



Advanced Tags
While the tags listed above are handy, they are limiting as to how you can present your data to the world. By combining the basic tags with more advanced tags you can stretch your data to represent the quality your company believes in. Here are a few advanced tags to assist you in bringing out that quality.
  • <HR> Tag:
    • This is the Horizontal Rule or line tag.
    • This will force a line to be drawn on your web page!
    • You can include an attribute with this tag to change the way it displays.
    • The attributes are:
      • width
        • Written like: <HR width="50%">
      • height
        • Written like: <HR height="10">
    • The two attributes can be combined within one <HR> tag.
    • This tag does not have a closing tag.
    • Here is an example: <HR width="50%" height="10">
  • Bulleted Lists
    • Non-numbered lists
      • <UL> - </UL>
        • Tells the browser that the lines between the tags will be a list.
        • Automatically uses different styles to denote lists within lists - this page is a good example!
      • <LI> - </LI>
        • Tells the browser that the line between the tags will be one point, or bullet of the list.
      • An Example
        • <UL>
          <LI>This is the first item on the list.</LI>
          <LI>This is the second item on the list.</LI>
          </UL>

          Would show up like this:
          • This is the first item on the list.
          • This is the second item on the list.
    • Numbered Lists
      • <OL> - </OL>
        • This tag informs the browser that you will be creating an ordered list.
        • This tag as three attributes:
          1. TYPE
            • TYPE=1 means arabic number and is the default type.
            • TYPE=A means use the uppercase alphabet.
            • TYPE=a means use the lowercase alphabet.
            • TYPE=I means use the uppercase Roman numerals.
            • TYPE=i means use the lowercase Roman numerals.
          2. START
            • Used to tell the browser to start the list at a number, letter, or numeral other than "1" or "A".
          3. COMPACT
            • Tells the browser to use the minimal space to create the list, but not very common.
        • You would still use the <LI> tag to denote the list items within the <OL> and </OL> tags.
  • <a> - </a> tag:
    • This is the anchor tag.
    • It tells the browser that the information between the open tag and close tag is a link to another site or e-mail address.
    • In order for this link to work, you MUST use one of its attributes
    • Attributes
      • HREF=
        • Used to denote where the browser goes when the text is clicked on.
        • Example - <a href="http://www.ebusinesswalk.net">Visit Our Community!</a> would product this result: Visit Our Community!
        • Note that the text between the tags is now "clickable" and would take your customer to whatever link you provided in the "HREF=" attribute.
        • You can also create an e-mail link.
        • Clicking on this link would start an e-mail for your customer and include whatever you put in this tag as the "TO:" line of that e-mail.
        • Example = <a href="mailto:support@bellsouth-hosting.net">Contact Us</a> would appear like this: Contact Us
        • Try clicking on the link above and watch how it starts a blank e-mail that is addressed to us!
      • TARGET=
        • Used to denote what window the browser will open the site into.
        • The options are:
          • _blank
            • Would cause the browser to open up the clicked link in a brand new window and keep your site open.
            • Example - <a href="http://www.ebusinesswalk.net" target="_blank">Visit The Walk!</a> would appear like this: Visit The Walk!
            • Click on the above example to see that a new window is used.
          • _parent
            • Would cause the browser to open up the clicked link in the window they are in.
            • Leaving off the TARGET attribute has the same effect as making target="_parent".


      Even though these tags are very basic, they can be very powerful! We would suggest that you practice your HTML in Notepad, save it to your hard drive with a ".html" extension, then open it using your favorite web browser. Make changes to your document and see them reflected in your web browser by clicking the reload or refresh button of your browser.

      When you have your web page exactly how you want it to look, then you are ready to transfer it to a Free Content page or field on your BellSouth Site Builder® account. Please note, do NOT include the <HTML>, <HEAD>, </HEAD>, <BODY>, </BODY>, nor </HTML> tags in the HTML code that you paste into your Back Office area. This will cause your web page to break!

      For more information on coding HTML, please visit one of these links:

Other FAQs
BellSouth Site Builder® FAQs version 1.0 updated Septmeber 2001