Free technical help for digital creators - music, video, art, photography, graphic & web design

HTML by Matt Ottewill

Hyper Text Mark-up Language (HTML) is the original programming language used to create web pages. It has developed over the years into a bewildering number of variations such as XHTML, DHTML, XML etc. An understanding of the principals of the HTML language is invaluable for web designers.

An overview of web page building languages is here

A timeline of key web technology milestones is here

IMPORTANT NOTE!! Because there are so many tutorials on HTML on the web, its pointless to write another one here. Therefore we have made a few important points and then concluded this article with a comprehensive list of links for you to explore.

Hand coding

You can create a web page with a simple text editor (ensure it's in plain text mode, not RTF format), by simply typing in your text and writing the necessary HTML tags. Even if you create your web pages in a WYSIWYG web design tool such as Dreamweaver, it is useful to be edit HTML code in order to optimise your site and resolve problems.

Web design programs

Programs like Dreamweaver were created to help visual and graphic designers to create web pages without hand coding HTML. You use a drag and drop interface and the program does the hard work of generating code for you. But even the best of these programs can produce "problem" code occasionally and then a knowledge of hand coding is useful.

Tags

HTML uses a system of "tags" to "mark-up" or format text, images and other multimedia elements. The term mark-up comes from a time when graphic designers would mark-up a page of unformatted text with instructions for how it should be typset. Mark-up instructions would specify type face, size, weight, line height etc.

HTML documents comprise data surrounded by tags . You can look at the HTML of any page by selecting "View source" in your web browser.

Here is an example of a very simple HTML document ...

<html>

<head>
<title>This text will become the window title</title>
</head>

<body> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script>
<h2>THIS IS A MAIN HEADING h2</h2>
<h2>THIS IS A SUB HEADING h2</h2>
<p>This is some paragraph with <strong>a bold bit</strong> in the middle of it.</p>
<img src="picture.jpg">
<br>
<a href="http://www.planetoftunes.com" target="blank">Go to Planet Of Tunes website</a href>
<br>
<a href="mailto:somebody@somebody.com">Click here to email Mr Somebody </a>
</body>

</html>

HTML advice and tutorials

If you search the web with keyword such as "HTML tutorials" you will find a vast number of helpful web sites. Here are some that we use ...

http://www.w3.org/MarkUp/Guide/

http://html.com

http://www.davesite.com/webstation/html/

http://www.w3schools.com/html/

http://www.htmlhelp.com/

http://www.htmlgoodies.com/