Basics
Creating a Document
Head and Body Elements
Formatting Text
Creating Lists
Embedding Images
URLs Explained
Linking to Documents
Creating Tables
Forms Form Basics
Input and Textarea
Select Lists
Frames Framesets
The Frame Element
Nested Framesets
Targetting Frames
Inline Frames
Tips and Tricks Meta Tags
Transition Effects
HTML Generators Create a Document
Create a List
Create a Table
HTML
Basics
Implementing CSS
CSS Syntax
Pseudo Classes/Elements
CSS Classes
CSS Properties Font Properties
Color and Background
Text Properties
Border Properties
Margins and Padding
Size and Position
Tips and Tricks Menu Buttons
Special Effects
CSS
Basics
Running a Script
Variables
Expressions and Operators
Objects.Properties.Methods
The Date Object
Strings
Regular Expressions
Defining RegExp Patterns
Branches and Conditions
Loops
Arrays Array Basics
Array Methods
Sorting Arrays

User-Defined Functions
Cookies
Windows
Frames
Tips and Tricks Image Replacement
Using Includes
Form Validation
Debugging
JavaScript
Basics
Creating a Script
Running a Script
Variables
Expressions and Operators
Strings Strings Basics
Strings and Substrings
Replacing Substrings
Regular Expressions
Branches and Conditions
Loops
Arrays Array Basics
Array Functions
Sorting Arrays
User-Defined Functions
Include and Require
Uploading Files
File Functions
Session Variables
Tips and Tricks Page Templates
Form Reply Scripts
Form Validation
JavaScript to PHP
PHP
Basics
Create and Drop
Show and Describe
Insert, Update and Delete
Querying
Join Queries
Functions
Table Locking
PHP/MySQL Functions Accessing a Database
Querying with PHP
Create and Drop with PHP
Insert and Update with PHP
Frequently Used Functions MySQL
Basics
Layout and Navigation
Page Content Style
Web Page Copy
Graphics and Animation
HTML Forms
Accessibility
Legal Requirements
MySQL
HTMLBasicsCreating an HTML DocumentCreating a DocumentHead and Body ElementsFormatting TextCreating ListsEmbedding ImagesURLs ExplainedLinking to DocumentsCreating TablesForms - BasicsInput and TextareaSelect ListsFramesetsThe Frame ElementNested FramesetsTargeting FramesInline Frames

Home > HTML > Creating a Documentprinter version

Creating an HTML Document

Creating an HTML document is straightforward. All that's required is a simple text editor such as Notepad or Wordpad (not Word) that can save a file as simple text (not rich text).

HTML instructions are typed in and the file then saved to the hard drive with a .html or .htm extension (instead of .txt). The file can then be viewed in the browser by going to the File menu, selecting Open, browsing the hard drive to find the file then double clicking it.

HTML Tags

An HTML document consists of the text to be displayed in the browser, interspersed with HTML tags. Tags are instructions to the browser on how to render the document and a tag begins with the less than character < and ends with the greater than character > with the name of the instruction (element) between. Most HTML elements have a start tag and a closing tag with whatever the element is to operate on, written between the tags.

Example: To create bold text the bold element can be used.
"I want <b>this</b> in bold." Will produce "I want this in bold."

Almost all HTML elements have a start and closing tag, with the forward slash at the beginning of the closing tag but there are few exceptions. For example the element to break to new line has no closing tag and is written as <br>.

If the browser encounters a tag it doesn't recognise, for example <nonsense> (there's no such tag), it just ignores it. HTML differs from languages like PHP in that an error will not stop processing (PHP stops when it encounters an error). This is to avoid pages breaking, and even badly written HTML will normally display reasonably well.

Attributes

Attributes extend the capabilities of elements and are placed within the opening tag. For example a heading element such as <h1>My Heading</h1> will align left by default but can be centred with the align attribute. e.g. <h1 align="center">My Heading</h1>. Many tags support multiple attributes that can be used to give fine control of the formatting of a document.

Required Elements

As a minimum an HTML document should contain the following elements.



Document Types

The two most up to date document types are HTML 4.01 and XHTML 1.0 and both of these can be written as transitional or strict. Transitional allows you to use mark-up from earlier versions which would now be considered obsolete (depreciated) if validated as strict.

The difference between HTML and XHTML is that HTML does not conform fully to the syntax of XML whereas XHTML does. XML is more portable than HTML and is extensible therefore XHTML is considered to be extended XML.

HTML or XHTML?

Whether you choose to use HTML or XHTML is up to you since there's not much difference, but XHTML is probably favourite.



Therefore a basic document with required elements should be like one of the ones below.

HTML 4.01 transitional Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
Some content here
<br>
Some more content here
</body>
</html>


XHTML 1.0 transitional Example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
Some content here
<br />
Some more content here
</body>
</html>


Previous - HTML Basics Previous - Basics     Next - Head and Body Elements Next - HTML head and body elements


Privacy | Terms | Contact | Links | Sitemap | RSS Feeds RSS and JavaScript Feeds
©2010 www.webdesignworkmate.co.uk all rights reserved 
Design and Production by smallbizonline website design © 2000-2010
Valid HTML 4.01! Level Double-A conformance icon, W3C-WAI Web Content Accessibility Guidelines 1.0Valid CSS!
Tips and TricksMeta TagsTransition EffectsHTML GeneratorsCreate a DocumentCreate a ListCreate a Table
Got any HTML Tips?
Send me your tip and if it's suitable I'll put it on the site, credit it to you and add a link back to your site.
Recommended Reading
html_and_xhtml

html and xhtml complete reference

learning web design beginners 

guide