Sep 21 2008
HTML - The Basics (Tutorial 1)
HTML is really easy to learn - especially these days. Those of you who are completely new to code will have to get used to a few things.
First of all, if you want results fast and aren’t concerned about learning the skills then use a program. There exist many different tools for editing web pages in a WYSIWYG (What You See Is What You Get) interface. What I mean by that is that you can use programs to edit web sites and what you design on the screen is the final result! A popular (but expensive) program is Adobe Dreamweaver but for more basic purposes Microsoft Word and Openoffice will generate HTML web pages based on the content of your document!
If you want to learn the skills (which are essential if you want to get into serious web design) then there are a few points to keep in mind.
HTML is a set of tags (think of these as commands to the browser) that tells the browser whether the text is a table, paragraph, heading, …whatever. The browser then processes these commands and displays the page.
Let’s take an example. The HTML element p tells browser that the following text is a paragraph. The corresponding tag is <p>. We use </p> to tell the browser when the paragraph ends. Good HTML code always contains the staring tag (e.g. <h1>, <p> or <body>) and the ending tag (e.g. </h1>, </p> or </body>)
There are many tutorials and lists of tags out there, so I thought I’d just try and give a brief overview of all this. It’s by no means extensive in any way, but chances are it’s all you’ll need. A LOT OF HTML CODE IS BECOMING REDUNDANT, so don’t bother learning EVERYTHING from some old book. For example, HTML used to include formatting tags which told the browser which font to use, how big…etc. But now all of this is dealt with by a CSS stylesheet which you’ll probably be looking to learn next.
What I’ve tried to do below is to write an example HTML document. You can copy and paste this into Notepad, save it as whatever.html, and then open it in a web browser to see the results. I’ve left a lot of stuff out. For example, attributes. You can add things to the starting tag to define alignment, font…etc. But CSS has made a lot of that useless. It’s still worth learning though and you can use the wealth of tutorials out there to do so. But for now, let’s outline the basics of a HTML document…
Some of the tags are not explained within the text below. So I’ll explain them here.
<html> </html> first one at the start, last one at the end. These tags tell the browser it’s an HTML file.
<head> </head> the stuff within these tags won’t appear on the page itself. For example, the page title will appear in the bar at the very top of the web browser.
<body> </body> contains the actual page contents.
<html> <head> <title>Title of page</title> </head> <body> <h1>This is a big heading!</h1> <h2>This is a sub-heading.</h2> <h6>The headings get smaller as you go through 1 to 6.</h6> <p>This is a paragraph. Note that there's a bit of space between this and the last piece of code. It doesn't make the slightest difference. HTML automatically inserts space between paragraphs. It also inserts a blank line before and after a heading. If you want extra space then use this: <br/> That's just inserted a 'page break'. Let's do a few more. <br/><br/><br/> Cool. </p> <!-- This is a comment. All of the stuff that appears within the comment tags will not be displayed by the browser so it's actually pretty useful to be able to keep track of any changes I make. It'll also come in useful for coding Javascript later on so remember it! --> <hr /> <p>This is another paragraph. It's separated from the previous paragraph with a horizontal line using the hr tag. That's pretty useful too! <b>This text is in bold.</b> </p> <p>In this paragraph I've got a few weird looking expressions. < > & They represent Non Breaking Line Space, Less Than, Greater Than and Ampersand respectively. You may also see the more difficult to remember expressions for the same thing,   < > and & respectively. The first one is important because it's a way of including extra space in the line. The space I just left won't display in the document so I need to put loads of 's in instead. The other three exist because HTML doesn't display all of the characters on your keyboard correctly (some of them are used to indicate code). Therefore you need to enter these expressions to get the desired result. There are many more so it's worthwhile keeping a list of them somewhere. Do a Google search for HTML Character Entities. </p> <a href="http://www.steventhompson.co.uk/">This is a link to the homepage of this site.</a> <br/> <img src="http://www.steventhompson.co.uk/MBCT2.jpg" alt="" /> <br/> <ul> <li>An Unordered List</li> <li>Has bullet points attached.</li> </ul> <ol> <li>An Ordered List</li> <li>Has Numbers.</li> </ol> </body> </html>