Design Post Update

HTML can also be used to add video and audio files to your webpage

HTML Video

Videos can be easily hosted online embedded into your web pages using html with the <video> tag to display your media file. It works in a similar way to the image tag in that a 'src' attribute must be defined in order for the video file to be located. However with video and audio files the player details as well as the file details need to be specified. Here is a look at a sample,

Images are very powerful tools in web design and help convey the message and style of a business instantly

HTML Images work in a similar way to links in that they require a single element but also only work together with one specific attribute. So with links the element <a> always uses the attribute 'href', with images the element <img> (for image) always uses the attribute 'src' (for source).

The <img> Element

HTML links are what makes the web ... a web!

HTML Links are clickable text or images that connect one webpage to another. To make links, we use what we always use when coding HTML, an element. A simple element <a> used with one attribute 'href' and you will be able to link to anything and everything. The element 'a' stands for anchor and the attribute 'href' is short for "hypertext reference", which specifies where the link leads to, typically another web page on the internet but it can also lead to a file of any type.

External HTML Link

Here is an example of a standard external html link to www.google.com
<a href="http://www.google.com/">Here is a link to Google</a>

The html5 code above would look like this in the browser,

Here is a link to Google


In the above example the attribute 'href' has the value "http://www.google.com/", which is the full address of google.com and is called a URL which stands for Uniform Resource Locator. Note that "http://" must always be included in URLs.

The sentence "Here is a link to Google" is the text that is shown in the browser as the clickable link, it does not really matter what this text is but for the sake of visitors to your website try to use relevant text. As always remember to close the element with an </a>.

Link To Your Own Webpages

If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages, let's call them page1.html and page2.html, and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link. Under such circumstances a link from page1.html to page2.html would look like this,
<a href="page2.htm">Click here to go to page 2</a>
If page 2 were placed in a subfolder (named "subfolder"), the link would look like this:
<a href="subfolder/page2.htm">Click here to go to page 2</a>
If it was the other way around, a link from page 2, in the subfolder, out to page 1 would look like this:
<a href="../page1.htm">A link to page 1</a>

In this case '../' points to the folder one level up from position of the file from which the link is made. Following the same system, you can also point two (or more) folders up by writing '../../'. If you find this hard to follow or understand the best thing is to try out creating some links yourself, practice makes perfect!

Link Within A Webpage

You can also create internal links within a page - for example create a table of contents at the top of the page which has links to each chapter below. All you need to use is a very useful attribute called 'id' (identification) and the symbol "#". Use the id attribute to mark the element to which you want to link to. For example,
<h1 id="heading1">heading 1</h1>
You can now create a link to that element by using "#" in the link attribute. The "#" tells the browser to stay on the same page. The "#" must be followed by the id of the tag you want to link to. For example,
<a href="#heading1">Link to heading 1</a>

As always, try it out yourself but remember that if the content you are linking to is within the same screen view, i.e. you don't have to scroll down to it, then the link may appear not to be working when it actually is. This is because the link and the area you are linking to are too close to each other.

Link To A Document

You can also make a link to any type of file, such as a word document or PDF. It is done in almost the same way as all other links.
<a href="documents/info.pdf">Click to open the info file</a>

In this example the file is a PDF called info and it is located in a subfolder called 'documents'.

Link Titles

In addition to the 'href' attribute, you can also use the attribute title put a title on your link which appears when you hover the mouse cursor over the link. This can be used to provide extra information to the user about where the link leads to. For SEO purposes it is also recommended that you add a title attribute to all links. For example,
<a href="http://www.google.com/" title="This leads to Google">Google</a>

The code above would appear in the browser like this, (Hover over it to see the title).

Google

Next Up

Next up we explain how to add images to your webpages using HTML.

HTML can be used to structure tabular data

HTML Tables are used when you need to show 'tabular data', in other words information that is logically presented in rows and columns. NOTE: Do not attempt to use tables to arrange the layout of an entire webpage or website with tables, that is what CSS is for. But more on that later.

Building tables in HTML works in a similar way to lists although at first they may seem more complicated. However if you take it step by step it is actually strictly logical - just like everything else in HTML. Tables use three main elements, <table> for table, <tr> for table row and <td> for table data

• The opening tag <table> and the closing tag </table> starts and ends the table. Logical. 
• <tr> stands for "table row" and starts and ends horizontal rows. Still logical. 
• <th> stands for "table header" and is used within the first table row to set the table headings. Still logical. 
• <td> is short for "table data". This tag starts and ends each cell in the rows of your table. All simple and logical. 

See the example below.
The html code above will create a table like this in the browser ...


Try it yourself and experiment with different attributes to see what kinds of tables you can create using HTML.

Next Up

Once you have mastered the basics of HTML tables the next step is how to create web links using HTML.

Ordered HTML Lists

<ol><li>A list item</li><li>Another list item</li></ol>

The html code above will create a list like this in the browser...

1. First list item 
2. Second list item 

A visual reference of the a HTML page structure

Start With A DOCTYPE...

The doctype declaration must be the very first thing in your HTML document, before the html tag. The declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. In HTML5, the latest version of HTML, there is only one declaration, and it is very simple:

<!DOCTYPE html>

Note:

• The tag does not have an end tag.
• The declaration is NOT case sensitive.
• Always add the declaration to your HTML documents, so that the browser knows what type of document to expect.

The HTML Page Structure

The two main sections within a HTML document are the 'head' and the 'body' sections. The 'head' section will contain information about your page, none of which appears in the browser, and the 'body' contains all the content which will be displayed in the browser. Since HTML is nothing if not logical, the head (<head> and </head>) is on top of the body (<body> and </body>).

An empty HTML document is structure as shown below.

The structure on a HTML element

What are elements in HTML?

The foundations of HTML are elements. Elements give structure to a HTML document and tell the browser how you want your website to be presented. In this section we will learn what elements are, how they work and use a small sample of basic elements. Throughout this series of HTML notes we will be introduced to new elements in each section until we have an understanding of all the main HTML elements.

In general, elements consist of a start tag, some content, and an end tag. Tags are labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign '<' and end with a greater-than sign '>'.

Generally speaking, there are two kinds of tags - opening tags such <html> and closing tags like </html>. Notice that the only difference between an opening tag and a closing tag is the forward slash '/'. You label content by putting it between an opening tag and a closing tag. To learn HTML is to learn and use different elements and tags.

A HTML attribute can be part of a HTML element and is always followed by a value

HTML Attributes are effectively additional information for the html elements. Every attribute will also define a value to go with it. You will often use attributes in tags such as the body tag while you will rarely/never use attributes in, for example, a <br /> tag since a line break normally is a line break without any parameters to adjust.

Just as there are many different elements, so there are many different attributes. Some attributes are tailor made for one particular element while others can be used for many different elements. It also works the other way as some elements can only contain one kind of attribute while others can contain many. It may sound a bit confusing but once you get acquainted with the different attributes it is actually very logical and you will soon see how easy they are to use and how many possibilities they provide. See the example below.
<p align="right">Text text text text text text.</p>


The html code above will create text aligned to the right in the browser like this...



Attributes are always written within a start tag and are followed by an equals sign and the attribute value is written between inverted commas. Tables, for example, can be made more interesting using attributes (don't worry about the table code as we will come to that soon).

For now lets focus on two attributes commonly used with tables are border and cellpadding, see the example below.