HTML Tutorial

Skip to navigation.

Why have I decided to write an HTML tutorial? Well... I'm sick of badly designed and implemented websites. If you want to read my rant on that, go to this page. And so, in order to combat this army of crap web pages, I have decided to write a tutorial explaining how to write a web page well. This tutorial is not yet finished. There are still some missing chapters.

Chapter One: Philosophy

A brief chapter outlining the philosophy of this tutorial and explaining what its two main philosophies (standards compliance and seperation of style and content) mean and why they are important.

Chapter Two: Basic HTML

The basic structure of a web page, including the definition of a few elements:

</code></li>
            <li><code class="html"><link></code></li>
            <li><code class="html"><meta></code></li>
          </ul>
        </dd>
        <dt><a href="./?page=153">Chapter Three: Adding Some Style</a></dt>
        <dd>Some basic styling using <abbr title="Cascading Style Sheets">CSS</abbr>. <abbr title="Cascading Style Sheets">CSS</abbr> is not really the subject of this tutorial, but I will touch upon it in a few places.</dd>
        <dt><a href="./?page=25">Chapter Four: <abbr title="Hypertext Markup Language">HTML</abbr> Entities</a></dt>
        <dd>How to insert special characters into <abbr title="Hypertext Markup Language">HTML</abbr>.</dd>
        <dt><a href="./?page=154">Chapter Five: Advanced <abbr title="Hypertext Markup Language">HTML</abbr> Tags</a></dt>
        <dd>
          Some more <abbr title="Hypertext Markup Language">HTML</abbr> tags to add structure to your documents, including:
          <ul>
            <li>
<code class="html"><ul></code>, <code class="html"><ol></code> and <code class="html"><li></code>
</li>
            <li>
<code class="html"><dl></code>, <code class="html"><dt></code> and <code class="html"><dd></code>
</li>
            <li>
<code class="html"><em></code> and <code class="html"><strong></code>
</li>
            <li>
<code class="html"><abbr></code> and <code class="html"><acronym></code>
</li>
            <li><code class="html"><q></code></li>
            <li><code class="html"><cite></code></li>
            <li>
<code class="html"><code></code>, <code class="html"><kbd></code>, <code class="html"><samp></code> and <code class="html"><var></code>
</li>
            <li><code class="html"><br></code></li>
            <li><code class="html"><pre></code></li>
            <li><code class="html"><hr></code></li>
          </ul>With details on tables and semantic block elements coming soon.
        </dd>
        <dt>Chapter Six: What Next?</dt>
        <dd>Pointers to the <abbr title="Hypertext Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> standards, a brief discussion of <abbr title="eXtensible Markup Language">XML</abbr> and <abbr title="eXtensible Hypertext Markup Language">XHTML</abbr>, links to <abbr title="Cascading Style Sheets">CSS</abbr> layout tutorials and beyond.</dd>
      </dl>
    </div>
    <div id="sidebar">
      <div id="search">
        <h2><label for="searchboxinput">Search</label></h2>
        
        <p>Or try the site map or <a accesskey="1" href="./?page=0">home page</a>.</p>
      </div>
      <div id="navtree">
        <h2>Navigation</h2>
        <p><strong>You are here:</strong><br>
        <a href="./?page=0">Toby A Inkster</a> → <a href="./?page=162">The Web</a> → HTML Tutorial</p>
        <p><strong>Subsections:</strong></p>
        <ul>
          <li><a href="./?page=151">Chapter 1: Philosophy</a></li>
          <li><a href="./?page=152">Chapter 2: Basic HTML</a></li>
          <li><a href="./?page=153">Chapter 3: Adding Some Style</a></li>
          <li><a href="./?page=25">Chapter 4: HTML Entities</a></li>
          <li><a href="./?page=154">Chapter 5: Advanced HTML Tags</a></li>
        </ul>
      </div>
      <div id="sitenews">
        <h2>Site News</h2>
        <ul>
          <li class="a">
<strong><abbr title="Tuesday">Tue</abbr>, 6 <abbr title="April">Apr</abbr> 2004:</strong> Finally a new release. More configurable. More: <a href="./?page=10">Opera 7</a>
</li>
          <li class="b">
<strong><abbr title="Saturday">Sat</abbr>, 27 <abbr title="March">Mar</abbr> 2004:</strong> New alpha version of jukebox.pl available. More: <a href="./?page=4">jukebox.pl</a>
</li>
          <li class="a">
<strong><abbr title="Saturday">Sat</abbr>, 24 <abbr title="January">Jan</abbr> 2004:</strong> Updated jukebox.pl page to include requirements and future plans More: <a href="./?page=4">jukebox.pl</a>
</li>
          <li class="b">
<strong><abbr title="Friday">Fri</abbr>, 9 <abbr title="January">Jan</abbr> 2004:</strong> RSS feed added. More: </li>
          <li class="a">
<a href="./?news=news" accesskey="2">Older news items</a>, .</li>
        </ul>
      </div>
      <div id="styles">
        <h2><label for="styleinput">Site Style</label></h2>
        
      </div>
      <div id="aboutpage">
        <h2>Page Information</h2>
        <p><strong><a href="/tobyink/?page=150">Permanent URL</a></strong><br>
        <strong>Modified:</strong> <abbr title="Thursday">Thu</abbr>, 29 <abbr title="May">May</abbr> 2003.<br>
        <strong>Created:</strong> unknown.</p>
        <p><a accesskey="0" href="./?page=2"><strong>Site policy:</strong></a> This page is designed to be accessible and standards compliant. Your use of it may be affected by the copyright and privacy statements, content filtering policy and disclaimer.</p>
        <p><a href="./?page=132" accesskey="9">Contact me</a>.<br>
        Edit page [private].</p>
      </div>
    </div>
    <div id="bottomhack">
       
    </div>
  </div>
</body>
</html>

HTML Tutorial

Contents

to