SUBJECT

COMPUTER APPLICATIONS
TECHNOLOGY

COURSE
GETTING STARTED WITH
HTML WEB DEVELOPMENT

COMPILED BY
MICHELLE MEYER
 Page 2 of 19

Contents

Creating a New Web Page in Notepad .......................................................... 3

Webpage Structure ..................................................................................... 4
Text and Paragraph Formatting ................................................................... 5
Basic Text Editing .................................................................................... 5
Paragraph Formatting and Breaks ............................................................ 5
Font Types and Colours ........................................................................... 6
Horizontal Lines ....................................................................................... 6
Heading Styles ......................................................................................... 7
Page Setup .................................................................................................. 8
Bullet and Numbered Lists .......................................................................... 8
Ordered Lists ........................................................................................... 8
Unordered Lists........................................................................................ 9
Multi-level Lists........................................................................................ 9
Adding Images .......................................................................................... 10
Hyperlinks ................................................................................................ 11
Links to Websites ................................................................................... 11
Links to Files ......................................................................................... 12
Using an Image as a Link ....................................................................... 12
Link to Top of Webpage .......................................................................... 13
Tables ....................................................................................................... 13
Basic Tables ........................................................................................... 13
Merging Cells ......................................................................................... 14
Cell Alignment........................................................................................ 15
Adding an Image in a Table .................................................................... 15
Basic Animations ...................................................................................... 15
Marquee Scrolling Text ........................................................................... 15
Animated GIFs ....................................................................................... 15
HTML Colours and Codes .......................................................................... 16
Common Fonts ......................................................................................... 17
Comments ................................................................................................ 17
Good Practices when Creating a Webpage ................................................. 18
HTML Tag Sheet........................................................................................ 19

Getting Started with HTML Compiled by: Michelle Meyer

 Page 3 of 19

Creating a New Web Page in Notepad

Create a folder and give it an appropriate name, for example, I am going to

create a website about Rottweilers. My folder will therefore be called
RottweilerWebsite for this example. All web pages and images relating to my
website will be saved in this single folder.

Open a new text file in Notepad. Click File > Save as. Give your web page an
appropriate name and add the extension .html manually. I will name the page
home.html.

home.html

file name extension manually added

Now you are ready to begin coding. Make use of the HTML Tag Sheet on page
19 to help you with your tags and attributes.

First open the file in Notepad or any other text-based editor. You need to right
click and use the open with option. Also open the file in any web browser,
such as Google Chrome or Firefox. Fit the windows, so you can see both
windows at the same time. See the screenshot below:

Getting Started with HTML Compiled by: Michelle Meyer

 Page 4 of 19

Webpage Structure

The basic structure of a webpage will look like this:

<html>

<head>
<title> Rotti Home </title>
</head>

<body>
A Rottweiler is a dog….
</body>

</html>

Note that for every opening tag, a closing tag must be provided. The closing
tag has a / before the tag. Angle brackets are used to indicate a tag. The
<head> and <title> tags are used to indicate what should appear in the tab at
the top of the webpage. In this case, the words Rotti Home will appear.

▪ Type the text above (from <html> to </html>) in your new text document
that you created.
▪ Save the file (<Ctrl><S> is the shortcut).
▪ Click anywhere on the web browser window.
▪ Press the F5 key or click on the webpage refresh button. This should
happen:

Everything you do in the text editor (right) will appear in your browser (left)
after you saved the file and refreshed the browser. I suggest you do this after
every change you make – it is easier to find a mistake and fix it if you do this.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 5 of 19

Text and Paragraph Formatting

Basic Text Editing

The following basic tags can be used:

<b> This will bold the text </b>

<u> This will underline the text </u>
<i> This will italicize the text </i>

<b><i><u> This will bold, italicize and underline text </u></i></b>

Take note that whatever the order of the opening tags is, the closing tags must
mirror them – they must be in reverse order.

<mark> This will highlight the text in yellow </mark>

Paragraph Formatting and Breaks

Pressing enter to create a new paragraph in your HTML document will not
work. You must therefore use the opening and closing paragraph <p> </p>
tags to indicate the start and end of a paragraph. Note how the paragraph,
bold, italics and underline tags are used in the screenshot below and how it
affects the text.

The paragraph tag has one common attribute, Align, which will change the
alignment of the paragraph (left, centre or right). The attributes follow the tag
inside the angle brackets and is then defined with an = equal sign and the
instruction in quotation marks (" "). Example: <p align = "center"> </p> - note
the American spelling of centre is used.

The self-closing break <br/> (note the / is at the end) is equivalent to pressing
the enter key once. Therefore <br/><br/> will have the same effect as the
paragraph tags.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 6 of 19

Font Types and Colours

The Font tag has two attributes.

Face will change the font type, for example Arial, Bookman Old Style,
Jokerman, etc. Note that you must use fonts that are commonly found on
most computers – if a font is not installed on someone else’s computer, they
will not be able to view the webpage as you have created it.

Color (note the American spelling) will change the colour of the font. Colours
are defined by the name or colour code of the colour, example: yellow or
#FFFF00.

Example:

<font face = "Jokerman"> Affectionately called Rotties or Rotts </font>, the

breed originated in <font color = "green"> Germany </font>, where it was used
to <font face = "Arial Black" color = "yellow"><b> drive cattle and pull carts
</b></font> for farmers and butchers.

Horizontal Lines

You can create a line by using the self-closing horizontal rule <hr/> tag. This
tag has four common attributes:

Width, measured in percentage (of the window) or pixels, will indicate how
long the line must be.

Align will indicate if the line must be left or right aligned. The default value is
centre, and therefore doesn’t need to be specified.

Size will indicate how thick the line must be in pixels.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 7 of 19

Examples:

Note the difference between the four lines, especially the difference between a
width of 50 pixels and 50 percent. Line 3 fills half (50%) of the window.

Heading Styles

You get six different heading style tags, namely <h1></h1>, <h2></h2> …
<h6></h6>. You can apply the align attribute to left, centre or right align the
headings.

Note how the heading styles are bold and left aligned by default.

You need to add the <font> tag to change the type or colour of the font. Once
again, notice the reverse order of the opening and closing tags.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 8 of 19

Page Setup

The Body tag is used to define the pre-set rules for your page. The following
attributes are applicable to the <body> tag.

Bgcolor will change the page background colour.

Example: <body bgcolor = "yellow"> </body>

Background will allow you to use an image as a background. Note that your
image must have the correct file name and file extension in quotation marks.
The image must also be in the same folder as your HTML file – if not, the full
path of the image must be provided.
Example: <body background = "logo.jpg"> </body>

Text will change the colour of all the text on the webpage.
Example: <body text = "green"> </body>

Bullet and Numbered Lists

Ordered Lists

An ordered list is a numbered list. The tags <ol> and </ol> indents a list and
adds automatic numbering to it. The <li> and </li> tags define every item on
the list. See the example below:

Getting Started with HTML Compiled by: Michelle Meyer

 Page 9 of 19

You may define the numbered list type by using the Type attribute.

<ol type = "a"> will number the list with lowercase letters.
<ol type = "A"> will number the list with uppercase letters.
<ol type = "i"> will number the list with lowercase Roman numerals.
<ol type = "I"> will number the list with uppercase Roman numerals.

Unordered Lists

An unordered list is a bulleted list. The tags <ul> and </ul> indents a list and
adds bullets to it. The <li> and </li> tags define every item on the list. See the
example below:

You may define the bulleted list type by using the Type attribute.

<ol type = "circle"> will bullet the list with circle ○ bullets.
<ol type = "square"> will bullet the list with square ▪ bullets.

Multi-level Lists

A multi-level bulleted / numbered list can be created by adding the <ul> or

<ol> tags where you want the next level of bullets/numbering to start.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 10 of 19

Adding Images

You can add an image to your webpage by using the self-closing image <img/>
tag. The attribute that follows is the Source (src – note the letter order)
attribute.

You need to save your image in the same folder as the webpage, otherwise,
you need to add the full path of the image, which can get complicated. Also
make sure you know the correct file name and extension of your image.

The following attributes can be added:

Height will change the height of the image in pixels or percentage.

Example: <img src = "banner.png" height = "50"/>

Width will change the width of the image in pixels or percentage.

Example: <img src = "banner.png" width = "50%"/>

Border will add a border to the image, defined in sizes 1, 2, 3, etc.

Example: <img src = "banner.png" border = "1"/>

Alt provides alternative text that will appear if the image doesn’t load on the
webpage.
Example: <img src = "banner.png" alt = "Rottweiler Banner"/>

Align will set the alignment of an image.

Example: <img src = "banner.png" align = "right"/>

Getting Started with HTML Compiled by: Michelle Meyer

 Page 11 of 19

Hyperlinks

The opening and closing tags associated with hyperlinks is <a> and </a>. The
attribute to define the destination of the link is Href. You can link any file on
your computer or create a link to another webpage. Once again, insert the
files you wish to link in the same folder as your HTML webpage – otherwise,
you must use the whole file path in your webpage.

Links to Websites

In order to create a link to a webpage on an existing website, you need to

follow these steps:

Copy the complete URL at the top of the webpage.

Enter your tag using the example below:

<a href = "https://www.hillspet.co.za/dog-care/dog-breeds/rottweiler">

Click here for tips how to care for your Rottweiler </a>

The words between the opening and closing tags

become the link on your webpage.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 12 of 19

Links to Files

If you want to create a multiple page webpage,

you can link the pages using hyperlinks. Make
sure all the files you wish to link are in the same
folder.

In this example, I will link the file contact us.html to the home.html page.

<a href = "contact us.html"> Contact us here </a>

The words between the opening and

closing tags become the link to the file.
Include the full (correct) file name, including the extension.

Using an Image as a Link

Instead of using text, you can use any image as a link to another website or
file. As an example, the Hills Pet Nutrition logo is going to be used to link to
their webpage. Example:

<a href = "https://www.hillspet.co.za/"> <img src = "hills.png"/> </a>

Getting Started with HTML Compiled by: Michelle Meyer

 Page 13 of 19

Link to Top of Webpage

Use the following tag (example) to create a link that will take you back to the
top of your webpage:

<a href = "#top"> Back to top </a>

Tables

To create a table in an HTML webpage, you need to use the opening and
closing tags <table> and </table> at the start and end of your table. The
following attributes are associated with the table tag:

Border will add a border to your table and defined in sizes 1, 2, 3, etc.

Width will define the size of the window your table should stretch across and
is given in percentages, for example 50% will fill half the window.

Bgcolor will add a background colour to your table only.

Align will align your table horizontally.

The table row tags (<tr> </tr>) are used to define a new row in the table.

The table heading tags (<th> </th>) will automatically bold the text and are
used to define the first row of the table.

The table data tags (<td> </td>) will insert data into the cells in the table.

Basic Tables

The following example is a basic table code:

<table border = "2" width = "50%" align = "center" bgcolor = "yellow">

<tr>
<th> Gender </th>
<th> Weight </th>
</tr>

<tr>
<td> Male </td>
<td> 50 - 60kg </td>
</tr>

Getting Started with HTML Compiled by: Michelle Meyer

 Page 14 of 19

<tr>
<td> Female </td>
<td> 35 - 48kg </td>
</tr>

</table>

Merging Cells

Here are two examples how the Colspan and Rowspan attributes are used
with the table row <tr> tag. It is defined in numbers of columns or rows that
it should stretch the data across, i.e. 1, 2, 3, etc.

Column span example:

<table border = "2" width = "50%" align = "center" bgcolor = "lightblue">

<tr>
<td colspan = "2" align = "center"> Male </td>
</tr>

<tr>
<td> Weight: 50 - 60kg </td>
<td> Size: 61 - 69cm </td>
</tr>

</table>

Row span example:

<table border = "2" width = "50%" align = "center" bgcolor = "lightgreen">

<tr>
<td rowspan = "2" align = "center"> Female </td>
<td> Weight: 35 - 48kg </td>
</tr>

<tr>
<td> Size: 56 - 63cm </td>
</tr>

</table>

Getting Started with HTML Compiled by: Michelle Meyer

 Page 15 of 19

Cell Alignment

The height of rows can be changed in the <td> tag using the Height attribute
and defined in pixels. The vertical alignment can be set using the Valign
attribute and defined as top and bottom. It is centred by default.

Example:

<td colspan = "2" align = "center" height = "50" valign = "top"> Male </td>

Adding an Image in a Table

You can add an image in a cell in a table by inserting the image tag instead of
the text data, for example:

<td> <img src = "rottie.gif"/> </td>

Basic Animations

Marquee Scrolling Text

To make text scroll from left to right across the page:

<marquee> I love Rottweilers! </marquee>

Animated GIFs

Download any animated GIF image from the Internet and insert it like any
other image: <img src = "rottie.gif"/>

Getting Started with HTML Compiled by: Michelle Meyer

 Page 16 of 19

HTML Colours and Codes

The following table provides some colour names with their codes that can be
used. The full list can be obtained from the following website:

https://www.rapidtables.com/web/color/html-color-codes.html

Colour Colour Name Code

lightsalmon #FFA07A
salmon #FA8072
crimson #DC143C
firebrick #B22222
red #FF0000
coral #FF7F50
orangered #FF4500
gold #FFD700
orange #FFA500
darkorange #FF8C00
khaki #F0E68C
darkkhaki #BDB76B
yellow #FFFF00
lime #00FF00
green #008000
yellowgreen #9ACD32
springgreen #00FF7F
seagreen #2E8B57
olive #808000
olivedrab #6B8E23
cyan #00FFFF
turquoise #40E0D0
darkcyan #008B8B
skyblue #87CEEB
deepskyblue #00BFFF

Getting Started with HTML Compiled by: Michelle Meyer

 Page 17 of 19

Colour Colour Name Code

royalblue #4169E1
blue #0000FF
darkblue #00008B
violet #EE82EE
blueviolet #8A2BE2
darkmagenta #8B008B
indigo #4B0082
pink #FFC0CB
deeppink #FF1493
gray #808080
black #000000
goldenrod #DAA520
peru #CD853F
chocolate #D2691E
saddlebrown #8B4513
sienna #A0522D
brown #A52A2A
maroon #800000

Source: https://www.rapidtables.com/web/color/html-color-codes.html

Common Fonts

The following is a list of some common fonts that can be used:

▪ Verdana ▪ Arial Black

▪ Georgia ▪ Impact
▪ Comic Sans MS ▪ Jokerman
▪ Trebuchet MS ▪ Bookman Old Style
▪ Arial

Comments

Any text added between the tags <!-- and --> will not be shown on the page.

Getting Started with HTML Compiled by: Michelle Meyer

 Page 18 of 19

Good Practices when Creating a Webpage

Do 

▪ Use a consistent layout.

▪ Minimize text – use short sentences.
▪ Simplify your navigation – links or buttons should be obvious.
▪ Make sure there are no broken links.
▪ Use clear fonts and font sizes.
▪ Make sure your layout reflects the target market you are going to reach.
▪ Check the layout of your webpage on multiple different devices, such
as desktops and smartphones.
▪ Check the layout of your webpage on multiple web browsers.
▪ Use graphics to enhance your page.
▪ Choose a colour scheme that fits your branding.
▪ Use bullet or numbered lists.
▪ Make use of the F layout.

Don’t 

▪ Use inappropriate fonts.

▪ Use large images or animations that will take a long time to load.
▪ Use multiple colours that are confusing to the visitor.
▪ Use dark fonts on dark backgrounds or light fonts on light
backgrounds.

Page title
URL

Links to other
webpages within
website

Logo

Banner

Body

Getting Started with HTML Compiled by: Michelle Meyer

 Page 19 of 19

HTML Tag Sheet

The following list contains some useful tags for quick referencing.

Opening Attributes associated with

Name Closing tag
tag tag
Outline of document
HTML <HTML> </HTML>
Document
Head <HEAD> </HEAD>
Title <TITLE> </TITLE>
Body <BODY> </BODY> BGCOLOR, TEXT,
BACKGROUND
Document Structure
Heading <H1> </H1> ALIGN
Paragraph <P> </P> ALIGN
Break <BR/> Self-Closing
Horizontal <HR/> Self-Closing COLOR, WIDTH, SIZE, ALIGN
Rule
Text Formatting and Font Attributes
Comments <!-- -->
Bold <B> </B>
Italics <I> </I>
Highlighting <MARK> </MARK>
Font <FONT > </FONT> COLOR, FACE
Link
Link <A> </A> HREF
Image
Image <IMG/> Self-Closing SRC, ALIGN, HEIGHT, WIDTH,
ALT, BORDER
Lists
Ordered List <OL> </OL> TYPE
Unordered List <UL> </UL> TYPE
List Item <LI> </LI>
Tables
Table <TABLE> </TABLE> BORDER, WIDTH, BGCOLOR
ALIGN
Table Row <TR> </TR> HEIGHT, BGCOLOR
Table <TD> </TD> BORDER, WIDTH, ALIGN,
Data/Cell VALIGN, COLSPAN, ROWSPAN,
BGCOLOR
Table Heading <TH> </TH> BORDER, WIDTH, ALIGN,
VALIGN, COLSPAN, ROWSPAN,
BGCOLOR
Table Caption <CAPTION> </CAPTION> ALIGN
Centre <CENTER> </CENTER>
Animations
Marquee Scroll <MARQUEE> </MARQUEE>

Source: Adapted from: IEB Practical Examination Tag Sheet

Getting Started with HTML Compiled by: Michelle Meyer