HTML Tags

      There are 12 basic "tags" that you need to be familiar with in order to build a webpage. Before we discuss those let's discuss the meaning of tag. A tag in web design is the code that tells the browser what items to display and where they are supposed to appear on a web page. Some tags come in pairs. The first tag opens the command the second closes or stops the command.

      1. The first tag is the <html></html> tag. This is one of those tags that come in pairs. The second of the pair has the backslash (/) which tells the browser to stop the <html> command. The <html> tag is the first tag of your web page. The </html> is the last. Everything inbetween is the webpage contents.

      2. The second set of tags is the <head></head> tags. Between the the <head> and the </head> is placed information about the web page such as the author's name, the page title and some othere information that we will wait to discuss in more detail toward the end of the semester.

      3. The third set of tags is the <title> </title> tages. Inbetween these two tags in the name of your web page. If you look at the source code for this page you would see <title>HTML Tags</title>.

      4. The fourth is the <body> tag. The <body> tag is used to tell the browser what color the background, text, and links on your page will be. The <body> also has a </body> which is the next to the last tag of your web page.

      5. The fifth tag is the <A></A> tag. The first of these two also includes the letters "href" so the beginning set would actually be <a href>. This tag is used to creat links between web pages and contains the URL address of the web page you want to link to.

        For example: If I want to make a link from my homepage to Yahoo's search page I would use the following tag.

        <A HREF="http://www.yahoo.com/">Yahoo The word Yahoo then becomes a clickable link from my site to the Yahoo site.

      6. If you want to put pictures on your site (and you will) then you will use this tag, <img src="name of picture">. You should also include the height and width of the image in this tag. For example: <img src="name of picture" height="50" width="150"> means that the image will be 50 pixels in height and 150 pixels wide.

      7. The seventh tag is the <BR> tag. BR means break. So the <BR> tag creates a line break between items on a web page.

      8. The eighth tag is the <HR> tag. This tag makes a ruler across your web page.

      9. The nineth tag is the <p> tag which comes in pairs, so there is a <P> and a </P>. This set of tags are used to define the beginning and end of a paragraph. The alianment of the text can also be designated inside the <P> tag. If you use this set of tags there is no need, usually, to use the <BR> tag at the end of a paragraph.

      10. The tenth set of tags is the <OL></OL> tag which is used if you need to make a list of items and have them numbered. This set of tag is used with the next set.

      11. Set eleventh is the <LI></LI> and stands for listed item. When used with the tags above the items in the list come between the <OL></OL> tags.

        For example:

        To begin an ordered list do the following..

        <OL>

        <LI>Item 1</LI>
        <LI>Item 2</LI>
        <LI>Item 3</LI>
        <LI>Item 4</LI>
        </OL>

        The result would be

        1. Item 1

        2. Item 2

        3. Item 3

        4. Item 4


        Of course you can have as many items in your list as you want or need.


      12. The next set of tags are used to make tables in your web page. These are a bit complicated so we will spend some time in class with these. I will only show you the structure at this time. To make a table you first use the <table> tag along with the tags that designate rows and columns. A basic table would be

        <TABLE border=2>
        <TR>
        <TD>Content of row 1 column 1</TD>
        <TD>Content of row 1 column 2</TD>
        </TR>
        <TR>
        <TD>Content of row 2 column 1</TD>
        <TD>Content of row 2 column 2</TD>
        </TR>
        </TABLE>

        The result would be

        Content of row 1 column 1 Content of row 1 column 2
        Content of row 2 column 1 Content of row 2 column 2

      Okay. Those are the basic tags and a brief explination of how they work. Don't worry if you don't understand it all right away. Nobody does. As you work through the semester this will all begin to make sense. Maybe a little practice will help. So, click here and let's make our first web page.