Introduction to HTML5

This page along with its examples and Exercise:s are designed to help you learn and understand the basics of HTML5 quickly. HTML5 is a programming language that is most commonly used in the production of webpages and is behind most of the pages that we see today.

An HTML document is made up of elements showing the content of the page. Almost all elements are written with a start, <>, and end , , tag with the content between the tags being the element.

Standard Elements

The very first thing that you write at the top of every HTML document is the <!DOCTYPE> declaration. This will tell the browser which version of HTML we are using. In the case of HTML5, we write <!DOCTYPE html>.The declaration isn’t the only component that must be included into every document. There is a set of standard elements that cannot be left out of a document. The first of which is the <html> element...

<!DOCTYPE html>
<html>
    <head><title>..</title></head>
     <body>
    </body>
</html>

NB. Notice how the first tag to open is the last to be closed.

Writing Text

The first thing we need to add to a webpage is its title (not the one within the <head> element, but one we can see!). To do this we need to add a header element in the main body of the document using <h></h> tags. We can also specify the size of the text within the element by adding a number from 1 to 5 within the tags.

e.g “<h1>HTML Introductory Page</h1>
<h4>HTML Introductory Page</h4>” will produce…

What this Shows on the Webpage

HTML Introductory Page

The next thing we need to add is the main body of text. This is done in paragraphs using the <p></p> tags. You can add as many paragraphs into the body of the document between the body tags as you want with each pair of tags representing a paragraph.

Exercise:

1) Create a document that represents a webpage that includes a header and two paragraphs. Make the title of the page “Exercise: 1”. Make the header size 3. Don’t forget to include the closing tags!

Pictures

Pictures are a great way of making everything look more inviting and they’re so easy to insert. We will use a <img/> tags for this, notice how it isn’t part of a pair? This means it is self-closing and so doesn’t have an end tag. It is written like this:

<img src=”Image URL here”/>

‘src’ refers to finding the source of the image, the URL. To find the URL of an image simple right-click it on a search engine image page and select ‘copy image URL’. Then paste this into the code.

Hyperlinks

One main features of a webpage is the ability to link it with another using hyperlinks. Yet another variety of tags is required here - <a></a> tags. Within the opening tag use must include (href=”website URL”) which stated the destination of the website that the link takes you to. The content of this element is the link ‘button’.

<a href=”www.google.com”>Take me to Google</a>

The ‘button’ itself can be anything from singular word in a sentence to a picture!

Exercise:

2) Can you make a picture into a link? Choose any picture and destination website you would like.

Tables

A very useful tool is the ability to create and format a table. Although still using pairs of tags, this is a little more complicated as requires the spacing to be right.
To create a table, we need multiple varieties of elements within different tags; <table> - Where all the table documentation goes
<tbody> - Where we write all the data
<tr> - This represents a row in the table
<td> - Table data. Put this element within the table rows, as many as required.
<th> - Table headings. Using these tags the content is printed bolder than the rest of the text.

Example code:

<!DOCTYPE html>
<html>
    <head> <title>Table</title></head>
    <body>
        <table border="1">
            <tr>
                <th colspan="3"><em>Table to Show World Population</em></th>
            </tr>
            <tr>
                <th>Rank</th>
                <th>Country</th>
                <th>Population</th>
            </tr>
            <tr>
                <td>1</td>
                <td>China</td>
                <td>1,355,692,576</td>
            </tr>
            ......
            ......
            <tr>
                <td>5</td>
                <td>Brazil</td>
                <td>202,656,788</td>
            </tr>
        </table>
    </body>
</html>

What this Shows on the Webpage

Table to Show World Population

Rank Country Population

1 China 1,355,692,576

5 Brazil 202,656,788

Exercise:

3) Using this code can you tell what the final outcome will be? Research the remaining countries missing from the list and sketch the final table. What do the <em> tags do?

HINT: “colspan” causes the element to be spread over multiple columns.

← Go back to Index Page Click Here!

Back to the Intro Page