Old intro to HTML

When friends of mine became interested in creating their own web pages, in the 1990s, I created this self-documenting sample HTML page for them to start from.

Here in 2023, there’s very little need for this sort of thing. These days, I would point people to WordPress or other page-creation tools that handle all the details for you.

But I decided to keep this online for historical reasons.

Below is the code for the page; if for some reason you do want a local copy of it, click the Download link to download the file.



<!-- The first thing you need to know to read this file is that you can mark text as a "comment" by starting with an opening angle bracket, an exclamation mark, and two hyphens.  Then you type the comment text; the browser completely ignores anything marked as a comment.  You end a comment with another two hyphens and a closing angle bracket.  You can safely delete all the comments in this file; I'm only using them to explain things at the beginning of this file, where I can't use text that's visible in a browser. -->

<!-- The basic idea of HTML is that you use things called "tags" to "mark up" text.  A tag consists of a word enclosed in angle brackets (like the "html" tag at the start of this file); to mark up a piece of text, you put an "opening tag" at the beginning of the text, and a "closing tag" at the end.  The closing tag is the same as the opening tag, except that it has a forward slash just before the word.  You'll see lots of examples below. -->

<!-- When creating a web page, always use good HTML structure -- start with the html tag, then proceed to a head section and a body section, then end with the closing /html tag.  See below for more info. -->

<!-- Here's where you put the head section, which in this example page contains only a title. -->


<title>My Sample HTML Page</title>

<!-- The title is displayed in the browser window's title bar. -->

<!-- Now end the head section with a closing /head tag. -->


<!-- Now begin the body section, which contains everything that isn't in the head section. -->


<h1>This is a level-1 heading</h1>

<p>(Last change: 4 September 2005.)</p>

<p>This document is a more or less self-documenting sample HTML file.  It mostly uses just a few tags: h1, h2, p, a, hr, and the standard html, head, and body tags (which you can put in a template and then never modify again).</p>

<p>You won't be able to make much sense out of this page by viewing it in a browser.  Instead, save it as a text file (with filename ending in .html) and then look at it in a text editor to see the tags and comments.  Then open the saved file in a browser to view it.  This document doesn't tell you how to post the page to a website; that's a whole big topic of its own.</p>

<p>A note about file names: you should end your filenames with .html, to make sure browsers will recognize them as HTML files.  And it's standard to name your main page index.html.</p>

<p>This is a paragraph of body text.  Always put p and /p tags around every paragraph.  Without those tags, the browser will just run the paragraphs together, ignoring the blank lines.</p>

<h2>This is a level-2 heading</h2>

<p>You can have as many headings of each level as you want, but it's good form
to structure your document well -- for example, an h3 should be a subhead in a section that starts with an h2.</p>

<p>Note that you can delete anything in this file that's not a tag, and you can delete most of the tags too.  Also note that line breaks and blank lines are ignored by browsers, and are thus only present in the file to improve readability for humans who are looking at the HTML code.</p>

<p>You can format your text using tags like <em>emphasis</em>, <cite>citation</cite> (for book titles and such), <strong>strong emphasis</strong>, <i>italics</i>, and <b>boldface</b>.  (HTML purists like me generally recommend avoiding the i and b tags where possible, but I won't get into that here.)</p>

<p>The next paragraph shows how to use the most powerful thing in HTML: hypertext links.  The a and /a tags set off some text (known as "link text" or "anchor text") which will be marked (when displayed by a browser) as a link -- usually blue text and/or underlined. The "href" part tells the browser where to jump to if the visitor clicks there.</p>

<p>This is a link to <a href="http://www.kith.org/logos/index.html">
Jed's home page</a>; change the URL and the link text to create other links.</p>

<p>There are other kinds of links, too, such as "mailto".  If you click the following link, you'll send email to me: <a href="mailto:logos@kith.org">logos@kith.org</a>.</p>

<p>The hr tag indicates a horizontal rule (a line across the page).  You can set its width if you want.  Since the tag doesn't enclose any text, you close it by just putting a slash before the closing angle bracket.</p>

<hr width="20%" />

<p>You'll probably want images on your page.  Here's the basic idea of how to include one:</p>

<p><img src="http://www.kith.org/logos/pix/title.gif" alt="Jed Hartman's Home Page" /></p>

<p>Use the img tag to specify an image; the "src" part tells it where to find the image.  (You should only use images that are on your local disk; it's bad form to include images that are being served from someone else's server without their permission.)  "alt" is the text to display if the user has image-loading turned off, or if the user is blind.</p>


<li>This part of the document is in case you want to include an "unordered" (bulleted) list in your page.</li>

<li>Each list item should have an opening li tag and a closing /li tag.</li>

<li>If you don't want your page to contain a bulleted list, delete the ul and the /ul and everything in between.</li>

<li>There are other kinds of lists as well, such as ordered lists (ol),
which automatically number their list-items sequentially.  Ordered list items use li tags just like unordered list items.</li>

<li>Also "descriptive lists" (dl), which use pairs of "descriptive term" (dt) and "descriptive definition" (dd) tags.</li>


<p>Okay, that's all.  There's plenty more to know about HTML, but this should do for a start.  Good luck!</p>