General Overview

Under construction - Not for public use, yet!

So, you can design a nice looking site, but are not sure how to put it together? This site is here to help! The aim is to help you understand what´s what with HTML and building basic websites. Hopefully this will help you on your way to amazing sites! Why have I written this? Well, as the world of web grows day to day so does the need for websites. If your just looking for something to learn in your spare time or looking to take web design up as a profession this guide should help you learn the basics of what you need to get you well on your way to getting there.

HTML tags - what are tags?

Tags are a code used to define a format change or hypertext link. HTML tags are surrounded by the angle brackets < and >.

Syntactically HTML elements are constructed with: 1) a start tag marking the beginning of an element; 2) any number of attributes (and their associated values) 3) some amount of content (characters and other elements); and 4) an end tag. Many HTML elements include attributes in their start tags, defining desired behavior or indicating additional element properties. The end tag is optional for many elements in HTML, XHTML on the other hand requires the end tags on all elements, but we will cover the differences later.

<p>class="blue">This is a paragraph</p> The best way to read this is that the < is the start of the code, for it to work it has to start with this, next you specify what element you want to use, in this case we have used a paragraph. Class is the attribute name, you can also use ID if you so wish. The bit after the equals sign inside the "" is the Class or ID value that you will use to target later on in the process, this can be called anything you like as long as you can remember it. The text then is the content of the tag and can contain a few different things, in our example it contains text. The final part is the end tag which has to be closed for paragraph tags and others, which we will cover later on.

Examples of html tags you will use:

Some basics, let’s start with paragraphs

<p> A Paragraph tag defines where you want a paragraph of text. All large or small amounts of text are displayed in this format. When any text goes on the website you should never just type text in without formatting it with some sort of tag. Mostly you will use this one. </p>

Next we have how to make a list, this can be used for making lists of things, obviously, and is also used for the navigation.

  • <li>gives you a unordered list</li>
  • <li>gives you a unordered list</li>
  • <li>gives you a unordered list</li>
  • <li>gives you a unordered list</li>
</ul>
<ol>
  1. <li>gives you a ordered list</li>
  2. <li>gives you a ordered list</li>
  3. <li>gives you a ordered list</li>
  4. <li>gives you a ordered list</li>
</ol>
  • A definition list is more or less a defined list inside of a list. (confused? read below)

Definition lists consist of two parts: a term and a description. To mark up a definition list, you need three HTML elements; a container <dl>, a definition term <dt>, and a definition description <dd>. For example:

<dl> Starts a definition list.
<dt> is the definition list header</dt>
<dd> is the definition list item<dd>
</dl> closes a definition list.

Basic layout and styling

  • <h1>Gives you Heading 1</h1>

  • <h2>Gives you Heading 2</h2>

  • <h3>Gives you Heading 3</h3>

  • <h4>Gives you Heading 4</h4>

  • <h5>Gives you Heading 5</h5>
  • <h6>Gives you Heading 6</h6>

<br> is a break tag, more or less like a line drop, it is commonly thought of to be written like this, but for XHTML and better scripting it is better to write it like this <br />. You will notice this tag has been used to help drop down certain sections. This tag is not used on such things as headings as they have their own spacing.

<hr> tag is a horizontal line command, it also is commonly thought to be written like this, but again it should be written like <hr />

Special characters.

  • " or quotation marks should also be written as &quot;
  • The ´ character used in words like: it´s. Is written as &acute;
  • Other special characters such as å, ä and ö are available.
  • Question marks?, explanation marks! And obvious things like commas, full stops. Colons: semi–colons; are all code exceptions and do not have any special characters.