All the HTML Basics

Everything that has a beginning has an end

HTML is simple. It explains to the web browser what type of words are on the page. To clarify it tells a heading to be heading, a paragraph to be a paragraph and a list to be a list. To do this you write in angle brackets what something is at the beginning to start it and then at the end, with a forward slash, to finish it. All these tag names have been set so you'll need to learn them, but first lets just get started.

Open your index.html in Notepad and write this:

<html>
<head> 

</head>
<body>

</body>
</html>

You've just written the basic structure of the file. Every HTML file contains this. You'll see it starts html and finishes /html. In between that you have a head section and a body section. Both start and end. In the Head section you write everything that doesn't actually appear on the page, we'll come to that later. In the body section everything you write will appear on the page, so that's the exciting bit.

Structure with Headings and Paragraphs

Now add the following in the Body section:

<html>    
<head>    

</head>    
<body>    

<h1>Build This Site</h1>    

<p>HTML and CSS for absolute beginners</p>     

</body>    

</html>

I'll first explain, then show you the result. h1 means Heading 1 and you can see where it starts and where it ends. p means paragraph. To see your results, save your work and then double click on the index.html file opening it in your web browser (you can leave Notepad open). There you'll see your big heading and your paragraph with just one sentence. How cool is that?! Leave both your internet browser and Notepad open. You can switch between the two as we go, each time save your file and Refresh (F5) your web browser.

You might not like how the heading looks we'll cover that in the next lesson. With HTML you need to concentrate on the structure of the document and not it's appearance. It takes some people a while to grasp, having been used to Word or building websites since the olden days of the internet. Forget about how things look and think about what they are.

More Structure with Sub Headings and Lists

Lets add some more Headings, an Unordered List and an Ordered List (both with List Items):

<html>    
<head>    

</head>    
<body>    

<h1>Build this site</h1>    

<p>HTML and CSS for absolute beginners</p>    

<h2>Introduction</h2>    

<p>This is my first webpage</p>    

<p>A second paragraph</p>    

<h3>A list of fruit</h3>    

<p>Below is a list of fruit</p>    

<ul>  
  <li>Apple</li>    
  <li>Pear</li>    
  <li>Orange</li>    
  <li>Banana</li>
</ul>    

<h3>Favourite fruit</h3>    

<p>Here is the same list in order of preference</p>    

<ol>
  <li>Banana</li>  
  <li>Apple</li>    
  <li>Orange</li>    
  <li>Pear</li>
</ol>     

</body>    

</html>

First the headings. You have six to choose from h1 to h6. It is important to use them properly, a lot of people don't. Always start with Heading 1. A sub heading of Heading 1 is Heading 2 and a sub heading of Heading 2 is Heading 3. Never skip a number - the world won't end but it will make the page harder to read and harder to maintain, which defeats the point of creating it in the first place. You can see where the Ordered List starts and ends and you can see where each List Item starts and ends. Because it's an Ordered list the computer automatically numbers them.

Save your file, go to your browser and hit F5. Your page now has more things on it and the structure of the page is quite clear. You'll see how the Unordered List has bullet points and the Ordered List is numbered. Also looking at the HTML I've indented the List Items by two spaces, this makes the document easier to read when editing. White space doesn't effect the way it is displayed in the web browser. Try adding the line below if you're curious: 

<p>White space

               does not matter</p>

Inline elements

So far everything we've done has been a Block element which means it always starts on a new line, like a Heading or a Paragraph. Strong (bold) and Emphasised (italic) text do not start a new line and are known as Inline elements. At the moment it's nothing to worry about but there is a difference.

Add this line: 

<p>Why is <strong>bold</strong> text called strong
and <em>italic</em> text called Emphasis?</p>

The reason Strong is called Strong and Emphasis Emphasis is because it describes the structure of the document and not the way it looks. If we wanted Strong text could be red and not bold and Emphasis could have a yellow background and not be italic but that wouldn't change what it is.

Unusual Characters

Pound Signs, Copyright Symbols and Quotes crop up all the time but because they're not part of the basic alphabet they can have unpredictable results. In HTML each one has been assigned an abbreviated name. Special characters start with an ampersand, followed by their name and end with a semi-colon.

Please add this line at the end of your page:

<ol>    
  <li>Banana</li>    
  <li>Apple</li>    
  <li>Orange</li>    
  <li>Pear</li>  
</ol>    

<h2>Footer</h2>    

<p>&copy; Copyright 2007 Your name here.</p>    

</body>    

</html>

And amend the strap line:

<p>HTML &amp; CSS for absolute beginners</p>

Attributes

A tag can have attributes assigned to it. All attributes are set within the start tag between the angle brackets and are formatted: attribute name, equals sign then the value written in quotes.

For example you might want to start an Ordered List at a number other than one:

<ol start="5">
  <li>Banana</li>    
  <li>Apple</li>    
  <li>Orange</li>    
  <li>Pear</li>  
</ol>