HTML Tutorial

HyperText Markup Language (HTML) is not a programming language, it is a method of formatting text. The source for any web page can be viewed using View->Page Source (Netscape) or View->Source (Explorer). Learn from other's examples! See a neat feature on someone's page, check out the source to see how it's done!

ElementDescription
Bold
Italics
Underline
Center text in middle of page

Paragraph
textAnchor for link to web page (name), display text

Most prominent header

Not as prominent header
... 
Least prominent header
    Unordered list
      Ordered list
    1. List item
      image nameDisplay an image (alt text is displayed if no image)
      Table of rows and columns
      Row of a table
      Column headings for a table
      Data for a cell of a table within a row

      Insert a line break

      Horizontal line

      These are just the basic elements. As you gain experience, you can try more advanced techniques. There are some good on-line references for learning about HTML. Some of these are:

      Below you will find:


      Example of HTML Techniques
      <html> <head> <meta name="Author" content="author.name.goes.here"> <title>Troop 865's Example of HTML Techniques</title> </head> <body> <center><b><font size=+3>Example of HTML Techniques</font></b></center> <p>Here is an example of a paragraph. Notice that you have no control over the spacing format. <b>Let's throw in an example of bolded text <i>with italics</i> and <u>underlined</u>.</b> The Browser has complete control over how things are spaced. <br><br>However, you can place br commands in the paragraph to start new lines. </p> This is an anchor to the search engine <a href="http://www.hotbot.com">Hotbot</a> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <center>Example of an <u>Unordered</u> List</center> <ul><li>First item</li> <li>Apples</li> <li>Bananas</li> <li>Water melons</li></ul> <center>Example of an <u>Ordered</u> List Scout Ranks</center> <ol> <li>Scout</li> <li>Tenderfoot</li> <li>Second Class</li> <li>First Class</li> <li>Star Scout</li> <li>Life Scout</li> <li>Eagle Scout</li> </ol> <center><table border=1> <tr> <th>Name</th> <th>Rank</th> <th>Patrol</th> </tr> <tr> <td>Tom</td><td>Life</td> <td>Sharks</td> </tr> <tr><td>Phillip</td><td>Eagle</td><td>Mountain Man</td></tr> </table></center> <br> <center><img src="images/sq-rope.gif" alt="Square Knot horizontal line"><br> <b><font size=+1>Troop 865 Dallas, Texas</font></b></center> </body> </html>

      Here's what the example code above looks like in the browser.
      Troop 865's Example of HTML Techniques
      Example of HTML Techniques

      Here is an example of a paragraph. Notice that you have no control over the spacing format. Let's throw in an example of bolded text with italics and underlined. The Browser has complete control over how things are spaced.

      However, you can place br commands in the paragraph to start new lines.

      This is an anchor to the search engine
      Hotbot

      Heading 1

      Heading 2

      Heading 3

      Heading 4

      Heading 5
      Heading 6
      Example of an Unordered List
      Example of an Ordered List Scout Ranks
      1. Scout
      2. Tenderfoot
      3. Second Class
      4. First Class
      5. Star Scout
      6. Life Scout
      7. Eagle Scout
      Name Rank Patrol
      TomLife Sharks
      PhillipEagleMountain Man

      Square Knot horizontal line
      Troop 865 Dallas, Texas





      Troop 865 Default Page Format
      <html> <head> <meta name="Author" content="author.name.goes.here"> <title>Troop 865's Title.of.page.goes.here</title> </head> <body bgcolor="white"> <center><b><font size=+3 color="#3333FF">Title.of.page.goes.here</font></b></center> <!--content.of.page.goes.here--> <br><br> <center><img src="images/sq-rope.gif" alt="Square Knot horizontal line"> <br> <b><font size=+1>Troop 865 Dallas, Texas</font></b> <font size=+1><a href="index.html">[Home]</a></font>  <font size=+1><a href="past.html">[Past]</a></font>  <font size=+1><a href="present.html">[Present]</a></font>  <font size=+1><a href="future.html">[Future]</a></font> <font size=+1><a href="site_map.html">[Site Map]</a></font> </center> </body> </html>


      Square Knot horizontal line
      Troop 865 Dallas, Texas
      [Home]  [Past]  [Present]  [Future] [Site Map]