Below is the code of a sample page that I demonstrated in class. Copy and paste it to a file saved with the .html extension (you can use Notepad, Notepad++, or TextEdit for this). Then you can edit and open in browser simultaneously. Save changes in the editor then refresh the browser.

You can see a live version of this page in your browser.

<html>
  <head>
    <style type="text/css">
      body { margin: 4ex 20%; }
      h1 { background: #fcc; border: 1px solid #f33 }
    </style>
  </head>
  <body>
    <h1>A silly page by Chris League</h1>
    <p>Welcome to my home page!</p>

    <img src="clpic.jpg" width="100" height="100" />

    <h2>My Hobbies</h2>
    <p>I like to:</p>
    <ol>
      <li>Travel around the world</li>
      <li>Take pictures</li>
      <li>Eat all kinds of foods</li>
      <li>Play piano</li>
      <li>Write computer programs</li>
    </ol>

    Hyperlinks can be deceiving because the URL and the linked text
    are distinct. They don't need to match. Here's a dubious link
    to: <a href="http://en.wikipedia.org/wiki/Phishing">Citibank</a>


    <h2>Resources</h2>
    <ul>
      <li><a href="http://www.w3schools.com/">w3schools</a> is a
        great reference for HTML and CSS.</li>
      <li>I ask and answer programming questions
      on <a href="http://stackoverflow.com/">StackOverflow</a></li>
    </ul>

  </body>
</html>

Miscellany

@idiot on Twitter

PDF

The web

Miscellany