A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on IRC (such as one of these permanent autoconfirmed members).

Example simple

From WHATWG Wiki
Revision as of 14:02, 19 June 2007 by Beowulf (talk | contribs)

Jump to: navigation, search

This tutorial is aimed at a person using a desktop or laptop computer with a basic text editor. The examples below should be saved to a file with the extension .html. This will help your operating system know that the file is one that should be opened and interpreted by a web browser.

Step 1: The Basics of an HTML5 Document

A basic HTML5 document consists of a DOCTYPE, HTML tag, HEAD tag with TITLE tag and a BODY tag; this is the basis for all HTML5 documents. Tags are... A comment is... The DOCTYPE is an exception... included because...


<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Lost Cat!</TITLE>
  </HEAD>
  <BODY>

<!-- Page content -->

  </BODY>
</HTML>

Web Browser Results

Opening this page in a web browser would produce a blank page with a title in the browser window "Lost Cat!". (link to example)

Step 2: Adding a Heading and Paragraph


<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Lost Cat!</TITLE>
  </HEAD>
  <BODY>
    <H1>Have You Seen This Cat?</H1>
    <P>Moggy has been missing since 12th June, 2007 if you see her please
     notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
  </BODY>
</HTML>

Step 3: Adding an Image


<!DOCTYPE HTML>
<HTML>
  <HEAD>
    <TITLE>Lost Cat!</TITLE>
  </HEAD>
  <BODY>
    <H1>Have You Seen This Cat?</H1>
    <!-- need to get an image of a cat -->
    <P><IMG src="" alt="The cat is black with white paws, and is wearing a
     white collar with a small bell attached."></P>
    <P>Moggy has been missing since 12th June, 2007 if you see her please
     notify <A href="mailto:ian@whatwg.org">Ian Hickson</A>.</P>
  </BODY>
</HTML>