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 Chat (such as one of these permanent autoconfirmed members).

Example simple: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
m (main)
Line 1: Line 1:
:''Main article: [[HTML5 tutorial]]''
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.
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.


Line 65: Line 66:


</pre>
</pre>
[[Category:Tutorials]]

Revision as of 10:36, 4 September 2007

Main article: HTML5 tutorial

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>

How This Looks

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:[email protected]">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:[email protected]">Ian Hickson</A>.</P>
  </BODY>
</HTML>