HTML WORKSHOP

HTML is the language of web pages.

    In order to truly understand HTML, you need to know a little about browsers, and in order to understand browsers, you really need to know a little about how the web works.

Here's what really happens when you surf the web...

 you attach to the Internet with a special type of computer program known as a browser. The first thing the browser wants to know is where to go. You type in an url. An url is an address. This address tells the browser exactly where to find the page you're looking for.  What happens next is that your browser writes a quick message to the computer at that address requesting the page you want. In less than a second, the request has been delivered. The computer which has received the

request (The Web Server, remember?) grabs the data for the requested page, and shoots it back to the requesting computer.

How It All Works

                     A webpage, in it's raw form, is simply a text file ending with the suffix .html or .htm If you display this file on your computer in it's raw form, you'll see nothing but text interspersed with HTML tags. We're talking no background, no pictures of your cat, no really cool animations, nuthin but text and code. B O R I N G !!!

This text file, in all it's rawness, is often referred to as the "source code" of a webpage.

So how does this boring and dry text file become a webpage with color and life and vitality?

You have a program on your computer that takes these text files, reads them in the raw, and displays them on your computer's monitor in whatever way the file's HTML suggests. This program is called a browser.

It's All In The Angles

                     If you look at the source code for any webpage, you'll notice different HTML commands interspersed all through the document. These commands are called TAGS and tell the browser how to display the text, layout, and images of the document.

HTML tags are easy to recognize because they are always between a lesser than sign and greater than sign, or as I like to call them, Angle Brackets.

                                                          <Like This>

                     The first you should learn is the BOLD tag.

                     IT's simply the letter "B", sandwiched between two angle brackets and looks like

                                                            <B>

                     Tags almost always work in pairs. There are a few exceptions we'll discuss later, but most of the time there is  an opening tag and a closing tag. The closing tag for Bold looks like

                                                            </B>

                     Notice it's the same as the opening Bold tag except for the /mark. All closing tags are like that. They look the same as the opening tag except for the added slash right after the lesser than sign. Any text placed between the opening and closing Bold tags will look thicker than the rest of the text on the page.

                                                     This is NORMAL text.

                                                   <B>This is BOLD text</B>

                     Two more real simple tags are EMPHASIS and BIG.

                                                    <EM>EMPHASIS</EM>

                                                      <BIG>BIG</BIG>,

Every Webpage written in HTML has essentially two parts:

                                                     The Head     The Body

                     Now, having told you that, let me tell you about one more tag before going on.

                                                      <HTML> </HTML>

                     The HTML tag tells your computer that everything between these two tags is an HTML document. You'll always begin your page with the opening HTML tag and end it with the closing HTML tag.

                                                     <HEAD>    </HEAD>

                     The very first part of your document is the Head.  This is where you'll put the title that comes up on somebody's navigation bar when they call up your page.

                                                     <BODY>    </BODY>

                     After the Head is the Body. This is the real meat of the page. It's where all your visible text will be, and all your images and links too. Don't forget to put a body in your Homepage!

Now here are a few examples to elaborate on the previous information you have just learned.

Ex.

<HTML>

<HEAD>

<TITLE> Web Pages </TITLE>

</HEAD>

<BODY>

I am a union <EM> STUDENT </EM>!

</BODY>

</HTML>

SOME FEATURES

 1) <ELEMENT ATTRIBUTE = value>

     examples

    BGCOLOR = white

    TEXT = black

     LINK = blue

    ALINK = purple

    VLINK = red

2) STAND ALONE TAGS

<P>

<BR>

<HR>

3) HEADINGS

<H1> your heading </H1>

<H2> your heading </H2>

EX.

<center><h1> your heading </H1><center>

4) HEXADECIMALS

  #000000   BLACK

  #FFFFFF   WHITE

   #FF0000    RED

   #00FF00  GREEN

  #0000FF      BLUE

  #00FFFF    CYAN

    #A020F0  PURPLE

Once you decide which word or words to use as the link, place a set of link tags around that word.

                     A link tag looks like this:

                                                  <A HREF="URL"> TEXT </A>

                     In the case of Anthony's Transload Service, the url is

                                                   "http://transload.starblvd.net"

                     So the tags would look like:

                                              <A HREF="http://transload.starblvd.net">

                                                        ;Transload</A>

                     Here's How that will look on your webpage:

                                                   You can transfer images online

                                                at Anthony's Transload Service. It's

                                                         easy to use.

TABLE

This is a very simple table which contains four cells.

                     The TABLE CELL, or <TD> is the basic unit of a cell. You can have as many or as few cells in your table as you wish.

                     A horizontal row of cells is called a TABLE ROW or <TR>.

                     CELLS go into ROWS.

                     Always remember that cells go into rows, and rows go into a table.

                     Here is what the HTML for a table looks like:

                     <TABLE>

                          <TR>

                               <TD>Your Data </TD>

                           </TR>

                     </TABLE>

                     Notice how the opening and closing TD tags are nested inside of the TR tags, and likewise, the TR tags are nested inside the TABLE tags.

                     Here's the HTML for a more complicated table:

                     <TABLE>

                          <TR>

                               <TD> Your Data </TD>

                               <TD> Your Data </TD>

                          </TR>

                          <TR>

                               <TD> Your Data </TD>

                               <TD> Your Data </TD>

                          </TR>

                     </TABLE>

                     In this example, I've outlined a table with two Table Rows. Each row contains two Cells, which gives us a four cell table.

                                                          BORDER

                                                                                    

                                                       Laying It Out

                                                    <TABLE WIDTH=33%>

                     Use the WIDTH attribute inside the table tag to specify how much of the screen you want your table to span.

                     You can use a percentage, like I just did, or you can use pixels for the value.

                                                  <TABLE BGCOLOR=yellow>

                     BGCOLOR in a table works just like the BGCOLOR attribute in a body tag.

                     Use the color's name or it's Hexadecimal code.

                                                                                 

                     CELLPADDING and CELLSPACING will let a little air into your table and make it easier to view.

                                          <TABLE CELLPADDING=5 CELLSPACING=5>