Information Technology CAPE
HTML is a language for describing web pages.
HTML stands for Hyper Text Markup Language
HTML is not a programming language, it is a markup language
HTML uses markup tags to describe web pages
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags
In this tutorial we use a plain text editor (like Notepad) to edit HTML. I believe this is the best way to
learn HTML.
You save the document ALWAYS with whatever name you chooses ending with “.html”
HOW TO MAKE A WEB PAGE
To make a web page you can type the following codes using note pad or any text editor of your choice
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
The code <html> </html> tells us that you want to create a web page. Please note a webpage must
have an open and a close tag.
The code <body></body> defines what will be shown on the web page. Please note the body must have
an opening and a closed tag
HTML headings are defined with the <h1> to </h1> code. Heading is what we call the title. You can
change the number to different sizes. <h1> is the largest while <h6> is the smallest. All header tags
should have an opening and a closed tag.
HTML paragraphs are defined with the <p> tag.
Whenever you want to start a new paragraph <p> is what you can use. Paragraph tag should have an
opening and a closed tag.
HOW TO ALIGN THE TEXT
This is called text aligning where you can choose for the words to be left, right or centre. We can do this
from within the “h” tags. For instance if I wanted to centre the title I would use the following codes.
<h1 style="text-align:center">
Similarly if I wanted to centre the paragraph I would use the following codes.
<p1 style="text-align:center">
HOW TO GIVE THE PAGE SOME COLOUR
We use the following codes when we want to give the web page some life.
<body style="background-color:yellow">
We write the code within the body tag. Also noticed that the word colour is spelt the American way
color as that is the way the computer understands it.
HOW TO CHANGE THE STYLE OF THE FONT
We use the following codes to change the style of the writing. We do this in the <body> tag, the <p> tag
or the <h> wherever you would like to change the style of the writing.
<p style="font-family:courier new”>
<body style=”font-family:arial”>
<h1 style= “font-family:times new roman”>
Note that you must type the code “font-famly:” before the name of the font you would like to use.
HOW TO CHANGE THE COLOUR OF THE FONT
We use the following codes to change the colour of the writing. We do this in the <body> tag, the <p>
tag or the <h> wherever you would like to change the colour of the writing.
<p style="color:red”>
<body style=”color:blue”>
<h1 style= “color:green”>
Note that you must type the code “color:” before the name of the colour you would like to use. If you
want a particular paragraph to have a different colour you use the <p> tag or if you want the whole
page to have a particular colour you use the <body> tag and similarly if you want your title to have a
different colour you use the <h> tag.
HOW TO CHANGE THE FONT SIZE
We use the following codes to change the size of the words. We do this in the <body> tag or the <p>
wherever you would like to change the side of the words.
<p style="font-size:10px”>
<body style=”font-size:15px”>
Note that you must type the code “font-size:” before how big you would like your words to look. If you
want a particular paragraph to have a different size you use the <p> tag or if you want the whole page to
have a particular font size you use the <body> tag.
HOW TO MAKE A TABLE IN YOUR WEB PAGE
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is
divided into data cells (with the <td> tag). The letters td stands for "table data," which is the content of a
cell. A data cell can contain text, images, lists, paragraphs, forms, horizontal rules, tables, etc.
You use the following codes to make a table
<table>
<tr>
<th>Day</th>
<th>Subject</th>
</tr>
<tr>
<td>Monday</td>
<td>Information Technology</td>
</tr>
</table>
The table has an opening and a closed tag. The rows and columns are defined within these tags <table>
</table>
If you would like to make more rows and column simply copy the <tr> to </tr> code.
Notice in the code above there are some codes called <th></th>. Within this code is the table header or
what gives the title for each of the column.
HOW TO INSERT A PICTURE
A web page would not be a web page without pictures
To put pictures onto your webpage you write the following codes
<img src="mypicture.jpg"/>
You can place the image anywhere you prefer on your web page. However you must ensure that the
picture and the web page are in the same folder for the picture to show on the page.
The name of the image must be the same as that in the code.
