Introduction to HTML - Part 1

HTML and CSS – The difference

Think of HTML as the structure of the website you are making. It will contain the text, images and links – all put in the correct order – to compose the page that you want to display. CSS is the look and feel of the page. In your CSS you define the colours, fonts, backgrounds and borders surrounding the content you have in your HTML file. We explain below how to attach your CSS file to your HTML file, but read our CSS tutorials for more information on that topic.

A simple HTML page

The best way to learn is by doing, so the following are a few examples of HTML in action. This is, at it’s simplest, a HTML page:

<html>
   <head>
      <title>My Website</title>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      Website Text
   </body>
</html>

That’s it – it’s much more straight forward than you would expect. HTML works on a system of tags, with each one surrounded by <> brackets. Any tag that you open must be closed. This can be done as above with a seperate opening and closing tag (i.e. <body></body>) or using one tag such as below, for a line break, <br />. Here is a brief description of the tags used in the above example:

<html> – This tells your web browser that you want to display a HTML page – everything inside those tags is HTML.

<head> – The ‘head’ is a section where you can show the title of the document and provide information about what the page contains.

<title> – The title is self explanatory, and displays in the title bar of your web browser window.

<link rel="stylesheet" type="text/css" href="style.css" /> – This links the CSS file (style.css) to your HTML document.

<body> – The ‘body’ is the main section. Anything inside the body tag will display in your web browser.

This won’t really do much good though, as it will display a blank page with ‘Website Text’ inside it. The following will explain how to get a little more advanced:

Paragraphs, Line Breaks and Headings

<html>
   <head>
      <title>My Website</title>
   </head>
   <body>
      <h1>Main Heading</h1>
      <p>
         Welcome to my website, full of information
      </p>
      <h2>Second Heading</h2>
      <p>
         Here is some more information about my website, going into
         further detail about what you can look at and how you can navigate
         around.<br />
         If you would like to contact me, you can do so from our contact page.      
      </p>
   </body>
</html>

This is a slightly more advanced example which introduces the idea of defining headings, using the <h1></h1> tags, putting <p></p> around paragraphs, and using <br /> where you just want a normal line break. Having one page is OK, but generally you would want more than one page, with the ability to link them together…

Introduction to HTML Part 2 – Links, Pictures and Lists