Home
Web Development
Short Contents
For Beginners...Introduction
Changes from 3.2
Document
Attributes
...that are available for all BODY objects
Text
Organisation tools
Forms
Images
Sounds
Style Sheets
Special Effects - Javascript
Search Engines
Full Contents
For Beginners...
Introduction
Other HTML sitesPutting pages online
Tips For beginners
Download this Guide
Changes from 3.2
Document
Specifying LanguageStructure
The <HEAD> section
...General attributes
...Title
...Setting the Base address
...Queries : ISINDEX
...META tags
...Character sets
...<LINK>s
The <BODY> tag
... General Attributes
...Document Colours
...Background
Attributes
...that are available for all BODY objectsText
HeadingsFonts
Preformatted text
Change text direction
Special Characters
Character Formatting
...Blink
...Bold
...Italics
...Underline
...Strikethrough
...Superscript
...Subscript
Paragraph formatting
...Blockquote
...Line Breaks
...New Paragraph
...Stop Line Breaks
...Word Break
...Centre text
...Marking Modifications
Miscellaneous
...Abbreviation
...Acronyms
...Addresses
...Use Bigger/Smaller fonts
...Citations
...Code
...Definitions
...Keyboard input
...Sample
...Teletype
...Variables
...XMP
Organisation tools
CommentsHorizontal lines
DIV and SPAN
Links
...<LINK>s
...within pages
...Image maps
Frames
...Naming and Targeting
...Inline Frames
Tables
...example tag
...Rows
...Cells
...Captions
...Head, Body & Foot
Lists
...Definition lists
...Directory Lists
...Menu Lists
...Ordered Lists
...Unordered Lists
Embedding special files
The Object Element
Forms
Inputs and buttonsSelection menus
Element Labels
Fieldsets and legends
Images
Sounds
Style Sheets
specifying versionindividual elements
in the HEAD section
specifying media types
external sheets
cascading sheets
media-dependant defaults
HTTP headers
Special Effects - Javascript
Events...onAbort
...onBlur
...onChange
...onClick
...onError
...onFocus
...onLoad
...onMouseOver
...onMouseOut
...onReset
...onScroll
...onSelect
...onSubmit
...onUnload
Basic Commands
...Changing the status bar
...Opening a new window
...changing page being viewed
Search Engines
The Complete Beginners Guide
Ok, this is for those of you who know absolutely nothing about making web pages! A web site is made up of a number of files ("pages") with ".htm" or ".html" on the end of their filename. HTML refers to the type of language used to create the pages - it means HyperText Markup Language. That's just a fancy way of saying that it can contain links (the "hypertext") that you click on to go to other HTML pages.Basically, A HTML file is just text with a whole lot of commands inserted amongst it to tell the viewing program to display things in special ways. These commands are commonly know as "tags", which are inserted between angular brackets
< >. Most HTML tags usually have a corresponding "closing tag" which tells the viewing program to stop doing that command. Theses are the same as the starting tag, but have a forward slash after the first bracket.
For example,
<B> Example Text </B> would display everything between the opening <B> and closing </B> in bold print (as the B tag does).HTML tags should also be used in a "nested" pattern, which basically means that the matching closing tag for a tag within another opening / closing pair must also be within that pair. That is,
<B>bold text <I> Bold Italics </I> </B> is allowed since the <I> </I> pair is within the <B> </B> pair, but <B>bold text <I> Bold Italics </B> Italics only </I> will not work because it does not conform to these rules. Note that most web browsers are very tolerant of such mistakes, but may not display the document as you intended. Be sure to test your pages on more than one browser, because while one may display things properly, another may get confused by any mistakes.
In addition, many tags have optional "attributes" which may be specified in the opening tag, before the closing > bracket. These allow you to customise the way they affect your page by specifying colours, font names, the address of images or other pages, etc.
The HTML tags are what is described by the rest of this guide - just look for the desired effect in the index and put the corresponding tag name within the angular brackets - it's that easy! If you get stuck on how to achieve something, find somebody's page that has the desired effect, and use the "view page source" option in your browser's "view" menu to see their code.
If you see any references to "style" or "stylesheets", don't worry too much about that until you have mastered HTML. Style Sheets are a new way of specifying appearance, but HTML will do just as well for at least a few more years. Style sheets are covered in my CSS guides.
Finally, here's a template HTML file to get you started. Just cut and paste it into a new file in any text editor (Notepad is perfect for this), and put all the desired effects between the BODY tags...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Keywords" content="(A comma seperated list of word that people may search for to find your page">
<meta http-equiv="Description" content="A description of your page that people see in search results">
<title> (put your chosen title here) </title>
</head>
<body text="#000000" bgcolor="#FFFFFF">
<center>
<h1>(put your title here)</h1>
</center>
<img src="picture.gif" align="left">
Type any text that your want to display here...
<hr>
<center>
<a href="pagename.htm">Link to Next Page</a> <br>
</center>
</body>
</html>
Good luck and feel free to let me know how you go,
Geoff!
geoff@geoffknagge.com
(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.