HTML Tutorial, Part One
So, you've been on the 'net for a wee while, and you're thinking about producing your own website?
Leaving aside questions of what the site is for, you'll need to learn at least the basics of HTML, Hypertext Markup Language, which this and the next two columns will aim to teach.
The good news is that it isn't really that difficult. All you'll
need is some time and a little patience, a web browser such as
Internet Explorer ( IE ) or a Netscape browser ( NN ), and a
basic text editor, such as Notepad, preferably, or Word for Windows.
Using the latest all-bells-and-whistles editor won't help you learn HTML, because it will produce the markup for you, and you'll have no idea or control over what is happening 'under the hood'.
Web pages are basic text files with the file extension .html or .htm, which you can see by opening your browser and choosing View -> Source in IE or View -> Page Source in NN.
These files use what are called tags to tell browsers how to render the page. An example of a bare-bones page might be;
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello Northland</h1>
Some text.
</body>
</html>Everything within the "<" and ">" symbols are tags. Apart from the <h1> tag, this is the basic tag set required for a webpage, although it should still render without the <html> and <head> tags.
Notice how tags come in pairs, such as the opening <title> and closing </title>, and how some tags, such as the <body>, contain or nest other tags such as <h1>.
To turn what is above into a webpage on your own computer, copy it exactly ( the indents aren't necessary ) into Notepad or Word.
If using Notepad, make sure you choose "all files" in the "Save As Type"
option within the Save As dialogue box, and that you give the
file a ".html" extension. If using Word, make sure you save the file as
"text only", give it the same .html extension, and confirm your choice
by clicking yes to the alert.
Once you've saved it ( it's a good idea to create a new folder to contain these html files ), open your web browser, and choose File->Open and the browse button in IE, or File->Open File in NN to find and open the .html file.
You should see something similar to the image at left, with the contents of the <title> tag showing at the top left of the browser window, and the contents of the <body> tag showing in the page itself.
If not, check that you have copied the file exactly. Common mistakes are failing to close open tags, and nesting tags incorrectly, for example;
<head>My first page
<title></head></title>Now you've managed to produce and view your first page, you can revisit the html file in your text editor, make and save changes, and refresh or reload the page in your browser to see those changes.
For example, to add some text, use <p> tags, to add a background colour, use the bgcolor attribute on the body tag ( notice the quotes and the hash character ) , and emphasize and bold-face text using the <em> and <strong> tags as below.
<html>
<head>
<title>My first page</title>
</head>
<body bgcolor="#33CCFF">
<h1>Hello Northland</h1>
<p>Some text, with <em>this bit</em> emphasized,
and <strong>this
bit</strong> bold.</p>
</body>
</html>The >h1> tag is for a top-level heading. Up to six levels of heading can be used, from <h1> to <h6>.
Attributes can also be added to the <p> and <h> headings to align them left, right, and centre ( US spelling in the code ), as in
<h2 align="center">A second-level heading</h2>In the next column, I'll show you among other things how to add images and links. Meanwhile, you can learn more yourself by visiting http://www.w3schools.com/html/html_intro.asp, or look up an HTML reference at http://www.htmlhelp.com/reference/html40/
site by Urban Legend Designs