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).

Difference between revisions of "Example simple"

From WHATWG Wiki
Jump to: navigation, search
Line 37: Line 37:
 
   </HEAD>
 
   </HEAD>
 
   <BODY>
 
   <BODY>
     == Step 3: Adding an Image ==
+
     <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>
 +
 
 +
</pre>
 +
 
 +
== Step 3: Adding an Image ==
  
 
<pre>
 
<pre>
Line 48: Line 56:
 
   <BODY>
 
   <BODY>
 
     <H1>Have You Seen This Cat?</H1>
 
     <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>
 
 
</pre>
 
 
<H1>Have You Seen This Cat?</H1>
 
 
     <!-- need to get an image of a cat -->
 
     <!-- need to get an image of a cat -->
 
     <P><IMG src="" alt="The cat is black with white paws, and is wearing a
 
     <P><IMG src="" alt="The cat is black with white paws, and is wearing a

Revision as of 14:02, 19 June 2007

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>