Simple Examples of using HTML

(I wrote this page way back in 1996, It still applies to HTML, although it does not use CSS.)
  1. My Simple Form examples of all the common HTML form elements.
  2. Simple Table Example:
    Title Author Comments
    Pooh's Adventure A.A. Mine Cute.
    The Hobbit J.R.R. Tolkien Great Book!

    The HTML code looks like:

    <table>
        <tr>
            <th>Title </th>
            <th>Author </th>
            <th>Comments</th>
        </tr>
        <tr>
            <td>Pooh's Adventure</td>
            <td>A.A. Mine</td>
            <td>Cute.</td>
        </tr>
        <tr>
            <td>The Hobbit </td>
            <td>J.R.R. Tolkien</td>
            <td>Great Book!</td>
        </tr>
    </table>
    
  3. A little more advanced table including "thead" and "tbody" example:
    Favorite Books
    Title Author Comments
    Pooh's Adventure A.A. Mine Cute.
    The Hobbit J.R.R. Tolkien Great Book!

    The HTML code looks like:

    <table>
        <thead>
            <tr>
                <th colspan="3">Favorite Books</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Title </th>
                <th>Author </th>
                <th>Comments</th>
            </tr>
            <tr>
                <td>Pooh's Adventure</td>
                <td>A.A. Mine</td>
                <td>Cute.</td>
            </tr>
            <tr>
                <td>The Hobbit </td>
                <td>J.R.R. Tolkien</td>
                <td>Great Book!</td>
            </tr>
        </tbody>
    </table>
    
  4. To play a music track in the background of a page:
    
    <embed src="media/music5.mid" hidden="true" autostart="true" repeat=true loop=true>
    
    
  5. To "force" a refresh of a page on each access, inside the HEAD section add,
    <meta Http-Equiv="Pragma" Content="no-cache" />
    this will suggest to the browser not to use the cached version, but to get it fresh from the server.

    For a good discussion on META tags see NetMechanic.

  6. To clue in search engines about your pages' contents:
    In the <head> section add,
         <meta name="description" content="Mitch's Tips for HTML" />
         <meta name="keywords" content="HTML, JavaScript, Java" />
    
  7. To hint that robots should not index this page nor its links,
    <meta name="robots" content="noindex,nofollow" />
    

    To encourage robots to index the current page and follow its links,
    <meta name="robots" content="index,follow">
    
    see A Standard for Robot Exclusion for a discussion on the robot.txt file.
    Example robots.txt file:
    # go away
    User-agent: *
    Disallow: /
         
  8. To force a redirect to another page in 10 seconds, place the following code in the HEAD section:
    
    <meta HTTP-EQUIV="refresh" content="10; URL=http://www.fincher.org/index.shtml">
    
    
  9. Language
    To clue in a browser that the content of a page is in the Japanese "euc-jp" character set your META tag to something like the following:
    
    <meta http-equiv="Content-Type" Content="text/html; charset=euc-jp">
    
    
    And for search engines:
    
    <meta name="keywords" lang="en" content="Phone Lists, email, free">
    
    

    The LANG attribute can be used in tandem with almost any main HTML container tag such as <HTML> <BODY>, <P> and even <B> or <I>. Also for refreshing you can use the Expires keyword:
    <meta http-equiv="Expires" content="Tue, 20 Aug 1996 14:25:27 GMT">

    For more info visit http://www.w3.org/International/Activity.html

  10. Embed the html from another url into a page

    using iframe

    <iframe src="http://xml-na.amznxslt.com/onca..." 
    frameborder="yes" scrolling="no" width="100%" height="3000" />
    
  11. To have a link popup a new window for a reference

    Use the "target" parameter with your href tag, a la,

    <a href="http://economist.com/" target="_blank">The Economist</a>
    

    Try it : The Economist

  12. Opening a new window with a particular width and height

    <a />
    <a href="#here" onclick="newwindow=window.open('http://www.economist.com',
       'news','width=300,height=400,scrollbars=yes'); return false">The Economist</a>
    
    
    
    Try it here: The Economist