First steps in HTML

What is HTML?
What tools do we need to create HTML documents?
An example of a simple web page and the HTML code that makes it happen
Text elements in HTML

What is HTML?

HTML is an abbreviation of the term HyperText Mark-up Language.

HTML is a language, used to annotate or mark up the material you wish to display on a web page, so that the browser used to view the web page knows how to display the material in the format you require.

HyperText, meaning "text that is more than just text", is the term for the special type of text on web pages that links to other material. So it acts like ordinary text, in that it carries the meaning of the words, but it also has the extra property of acting as a link to other words and images.

In short, HTML is the language used to communicate to the web browser what material you wish to display on a web page, and how you wish to have that material arranged.

The format of HTML is very simple. Its component parts are called elements. Elements are written within pointy brackets <>, and usually take the form of a pair of tags that indicate that the material occurring between them should be displayed in a certain way.

For example, the paragraph element <p></p> indicates that the text that appears between these two tags is a paragraph.

Similarly, the emphasis element <em></em> indicates that the text appearing between the two tags should be displayed in italics.

What tools do we need to create HTML documents?

All you need to create a HTML document is a simple text editing program, such as Notepad on the PC or SimpleText on the Mac. You also need access to a browser, such as Internet Explorer on the PC or Mozilla on the Mac, so that you can view your HTML document and check that it looks the way you intended.

There are lots of programs available that offer to write HTML for you:

HTML editors like Dreamweaver and FrontPage not only generate HTML, but also manage the files that make up your web site - HTML documents, JPGs, GIFs, MPEGs, PDFs etc.

Word processing software, such as more recent versions of Microsoft Word, have a facility that allows you to turn your documents into HTML documents. Unfortunately, Word doesn't do a very good job of this, and the HTML documents it produces often do not look as you wished them to do when you view them in a browser.

But whatever program you use, and however it works, essentially what is going on behind the scenes is that HTML is being written. So it makes sense to develop some understanding of HTML so that, even if you decide to use Dreamweaver to make a web site rather than doing it by hand, you have some sort of clue about what is going on "underneath the bonnet".

Besides, HTML is not difficult, and writing it yourself allows you a much greater degree of control over how your web site looks.

A sample web page and the HTML that makes it happen

Have a look at this little web page

What follows below is the source code for that page, (which you saw when you selected Source from the View menu in Safari):

<html>

<head>

<title>IADT BA in Visual Arts Practice: Practical Support Studies Workshop</title>

<LINK
href="presentationstyle.css" type=text/css rel=stylesheet></LINK>
<style type="text/css">

</style>

</head>

<h1>This is the main heading for the page</h1>

<p>And here's a little paragraph of text for you to read. Doesn't really have anything interesting to tell you - it just has to sit here and look like a paragraph, so you get the idea of what paragraph text looks like.</p>

<h2>We have six levels of heading: this is level two</h2>

<p>Followed by yet another paragraph. I should be writing my memoirs or something, just to give you something to read, but hey, at least you can see it's a paragraph.</p>

<p>OK. Say I have yet another paragraph of stuff to say, and I'm saying it away quite happily, when suddenly I come to a bit that's quite important. And I want to make people realise it's important, so I need to denote its importance in some way, like making it <b>bold</b> or <em>italic</em>. Well, I can do that quite easily, as you can see.

<h2>You want lists?</h2>

<p>We got lists. Two types - ordered and unordered.</p>

<p><b>Ordered lists</b> are used where the order of the items matters, say, with instructions for making tea:</p>

<ol>
<li>Boil water
<li>Put teabag in mug
<li>Pour boiling water into mug
<li>Stir with a spoon until the right colour of liquid is attained
<li>Remove the teabag with the spoon
<li>Add milk
<li>Stir again
<li>Drink your tea before it goes cold
</ol>

<p><b>Unordered lists</b> are used where the order of the list items doesn't matter, for example:</p>

<ul>
<li>Dasher
<li>Dancer
<li>Prancer
<li>Vixen
<li>Comet
<li>Cupid
<li>Donner
<li>Blitzen
<li>Rudolph
</ul>

</body>

</html>

Text elements in HTML

In addition to learning about the html elements that actually create the html document, today we will also be covering the main elements concerned with governing how text in your document appears on screen.

ELEMENT	ATTRIBUTE	DESCRIPTION
<html></html>		HTML tags. Everything that appears between these tags is understood by the browser to be part of a HTML document.
<head></head>		Denotes the beginning and end of the head section of the HTML document (the part that doesn't appear directly on the page).
<title></title>		Text placed between these tags will appear in the title bar of the browser. The text element is located in the head section of the HTML document.
<body></body>		Denotes the beginning and end of the body section of the HTML document. Anything between these tags will appear in the browser window.
	background="example.jpg"	The background of the browser window is tiled with the image "example.jpg". The image can be a .gif or a .jpg file. The relative path of the image must also be specified.
	bgcolor="#xxxxxx"	The background of the browser window is set to the colour #xxxxxx.
<p></p>		Paragraph text.
<b></b>		Bold.
<i></i>		Italic.
<h1></h1>		Top level heading. There are six levels of heading defined in HTML, from h1 to h6.
<br>		Creates a break in the text, forcing it to continue on the next line.
<ul></ul>		Unordered list, i.e. a bulleted list. Items within the list are denoted with the <li> element.
<ol></ol>		Ordered list, i.e. a numbered list. Items within the list are denoted with the <li> element.
<li>		List item. An item in either an ordered or an unordered list.