HTML NOTES – Miss Paulin
1) INTRODUCTION TO HTML
HTML stands for HyperText Markup Language.
• HyperText refers to the fact that HTML allows you to click on links on the web page so you
can move from one place to another in a web page (like the hyperlinks in a standard
Microsoft Word document).
• Markup Language simply means that normal English is marked to indicate things in a way
that web browsers understand.
WHAT IS AN HTML EDITOR?
An HTML editor is a text editor (that is, a program on your computer) to help make writing HTML
easier. The HTML editor Notepad+ is commonly used for writing HTML. Notepad+ can be
downloaded and used for free.
BASIC HTML TAGS
OPENING AND CLOSING TAGS:
Tags are enclosed by angle brackets and the opening and closing tags look the same. The only
difference is that the closing tag has an added forward slash (/) after the first angled bracket.
BASIC DOCUMENT TAGS:
TAGS FUNCTION
<!DOCTYPE html> tells the web browser that
<!DOCTYPE html> you are using HTML 5. It is not required for
CAT and can be omitted.
<html> </html> Tells the browser that this is an HTML page.
This element contains meta information about
the document. This can include a page title,
<head> </head>
keywords, the author of the document, when
the document was last updated, etc.
Specifies a title for the document. The title will
be displayed on the
<title> </title>
browser tab. These tags must be written inside
the <head> </head> tags.
Defines the body of the web page; contains all
the visible page content. Tags to display text,
<body> </body> images, backgrounds and videos on the page
are all found between the
tags.
Guided Activity:
In Chapter 15, Activity GAct15.1, I want you follow the instructions below:
1. Type the following in the document.
2. Save this web page as HelloWorld.html.
3. You will not be able to open it in a browser if you have not saved the file as a *.html file.
HEADING ELEMENTS:
Heading tags are used to display text as headings. These tags are like heading styles used in a
word processor. The table below shows the heading tags:
TAG FUNCTION
Displays a level 1 heading. This is the main
<h1></h1> heading of your web page and should only be
used once on each web page.
Displays a level 2 heading. These, and the
other heading levels, are used to display sub-
<h2></h2>
headings. They can be used more than once on
each web page.
<h3></h3> Displays a level 3 heading.
Guided Activity:
In Chapter 15, Activity GAct15.2, I want you follow the
instructions below:
1. Type the following in the document. Make use of
the TAB key to indent your code correctly.
2. Save the file as Headings.html.
3. Open the file Headings.html in a web browser
such as Google Chrome or Microsoft Edge. Right-
click on the file name, click on Open With and
select the browser of your choice.
4. Your browser display should look the figure below:
TEXT ELEMENTS:
Text elements are used to display all text on your web page other than
headings. The table below shows the text elements that you need to know:
TAG FUNCTION
Displays a paragraph of text. A line
is left open after each paragraph.
<p></p> Most text on a web page is
displayed using
tags.
This is a line break tag. It displays
the next line of text on a new line
but without a space above it. This
</br>
tag is one of the few tags that does
not come in pairs. The closing tag
forms part of the opening tag.
This tag displays a horizontal line.
(hr stands for horizontal rule.) This
tag is used to separate sections of
your web page or underneath
</hr>
heading tags to make them stand
out more. This tag also does not
come in pairs as is never used to
display text.
Guided Activity:
In Chapter 15, Activity GAct15.3, I want you follow the instructions below:
1. Type the following in the document. Make use of the TAB key to indent your code correctly.
2. Save the file as text.html.
3. Open the file text.html in a web browser.
4. Your browser display should look like the figure below:
TEXT FORMATTING:
There are two tags that are used to make parts of a paragraph stand out. These tags are explained
in the table below:
TAG FUNCTION
<b></b> Used to display text in bold.
<i></i> Used to display text in italics.
<u></u> Used to underline text.
Guided Activity:
In Chapter 15, Open the file text.html which you saved after the last Guided Activity in Notepad+.
1. Make the following changes to the HTML code:
a. Display all occurrences of the word “fox” in bold.
b. Display all occurrences of the word “dog” in italics.
2. Your code should now look like this.
3. Save the file as text2.html.
4. Display the file in a web browser. Notice how all the words “fox” appear in bold and all the
words “dog” appear in italics.
HTML COMMENTS:
When you want to make a note to yourself in your HTML, you can use the comments tag.
Comments allow you to keep track of what you have done or to remind you to do something
without displaying that information on the website. Comments tags can be inserted anywhere in
the HTML source code. You can also use comments to find errors in your code (this process is
called debugging), by commenting out one line of code at a time to see which one is actually
causing the problem. You can add comments by using this tag:
Independent Activity:
In Chapter 15, You are going to create a web page where you will display information about
yourself. Type the HTML code in Notepad+. Save the file as Act 15.4.html. It is a good idea to save
your file after each step. View what you have done in a browser to check that you have not made
any mistakes. Do not close the browser. Save any changes you have made in Notepad+ and then
refresh the browser window to update the display.
1. Create the basic structure of the web page using the correct document tags. Give the web
page the title “Personal Information”.
2. In the body of the web page do the following:
a. Display the text “All about me!” as the main heading on the page.
b. Display the text “Favourite sports” as a level 2 heading. Display a horizontal line
under this heading.
c. Write the names of two sports you enjoy doing or watching under this heading. The
name of the sports must be in a paragraph but each one must display on a new line.
d. Display the text “Favourite subject” as a level 2 heading. Display a horizontal line
under this heading.
e. Write two short paragraphs explaining why the subject is your favourite.
f. Include the name of the teacher who teaches this subject in one of the paragraphs.
The teacher’s name should be displayed in bold.
g. At the end of the document, just before the closing tag, type in “Created by [your
name]”. Use a tag to ensure that this text is NOT displayed in the browser.
3. Save and close the file Act 15.4.html.
8. TEXT FORMATTING
ANATOMY OF AN ATTRIBUTE:
An attribute is made up of two parts:
• The attribute name
• The attribute values
Note the following:
• Attributes are ONLY added to opening tags. You should NEVER include an attribute in a
closing tag.
• Attribute values should be enclosed in quotes.
• Sometimes attribute values use American spelling, for example center (not centre) and color
(not colour).
ALIGNMENT ATTRIBUTES:
Alignment attributes are used with text and heading tags to control where the text is displayed on
the page. The table below shows the different values that can be used:
ATTRIBUTE VALUE FUNCTION
Aligns the text on the left side of the page. This is the
Left default alignment for most HTML elements, so it is seldom
used.
Align
Aligns the text in the centre of the page. (Note the
Center
spelling.)
Right Aligns the text on the right side of the page.
The align attribute is used with the <p> tag as well as the <h1> to <h6> tags.
Example:
Guided Activity:
In Chapter 15, in Activity GAct 15.5, follow the instructions below:
1. Type the following into NotePad.
2. Save the file as align.html.
3. View the file in a web browser.
WORKING WITH FONTS:
<font></font> The font tag is always used in combination with a <p> or <h*> tag. The font tag is
written inside theses tags. This is known as nesting. Example:
ATTRIBUTE VALUE FUNCTION
Changes the font that is displayed. The
correct name for the font can be found
Any valid font name such as
Face by looking at the Font dropdown in
Arial or Comic Sans MS
the Font group on the Home tag in MS
Word.
Displays the text in a different colour
Any valid colour name such as
Color to the default black. There are 140
red, blue or green.
standard colour names in HTML.
Size Values ranging from 1 to 6 Changes the size of text.
Sets the default colour of text for
Body text Any valid colour.
whole document.
Guided Activity:
In Chapter 15, in Activity GAct 15.6, follow the instructions below:
1. Type the following code in Notepad and save the file as fonts.html.
2. View the file in a web browser.
3. Your web page should look like this:
HORIZONTAL LINES:
There are two attributes that can be used for the horizontal lines’ appearance. The attributes are
added to the <hr/> tag. They are described in the table below:
ATTRIBUTE VALUE FUNCTION
A number measured in pixels.
The unit for pixels (px) does
Changes the height (thickness) of the
not need to be used. Pixels are
Size horizontal. Browsers display a hollow
the size of the picture
line which can be difficult to see
elements on the screen. 1 cm is
approximately 37,8 pixels.
Changes the length of the line. If the
width of the line is given in pixels, the
width will stay the same even if the
Either a number in pixels, for browser window is resized. If the width
Width example 100 or a percentage, is given as a percentage, the length of
for example 50%. the line changes to that percent of the
available space. If the browser window
is resized, the width of the line will
change.
Changes the color of the horizontal
Color Any valid colour name.
line.
Guided Activity:
In Chapter 15, in Activity GAct 15.7, follow the instructions below:
1. Type the following code in Notepad and save the file as lines.html.
2. View the file in a web browser. You page should look this:
BODY BACKGROUND COLOUR:
ATTRIBUTE VALUE FUNCTION
Changes the background colour of the
page to the one selected. Choose your
Bgcolor Any valid colour name background colour carefully. People
must always be able to read the text
on the page.
Guided Activity:
In Chapter 15, in Activity GAct 15.8, follow the instructions below:
1. Type the following code in Notepad and save the file as background.html.
2. View the page in a web browser.
3. Your page should display with a light yellow background colour.
It is also possible to use a suitable image as the background of a web page. This is done using the
background attribute. See the example below:
PUTTING IT ALL TOGETHER:
Revision Activity:
In Chapter 15, in Activity GAct 15.9, follow the instructions below:
1. Study the screenshot of a web page below carefully. Open a activity 5.9 and save the file as
Act 15.9.html.
2. Add the basic document tags to create a web page. The text “Labrador Retriever” must
appear on the browser tab.
3. Using the screenshot as a guide, add tags and attributes to the body to create a web page
which is the same as the one in the screenshot.
4. The background colour of the page should be light yellow.
5. There is only one level 1 heading on the page.
6. The main heading uses the Comic Sans MS font.
7. The other headings use the Arial font.
8. Save your work regularly and preview it in a browser as you are working.
Written Revision Activity:
In Chapter 15, in Activity GAct 15.10, follow the instructions below:
1. Study the following code:
2. Based on the code, answer the following questions in your own words.
a. What is the title of the page? (1)
b. How many headings are there on the page? (1)
c. How many paragraphs of text are there? (1)
d. What information should be placed in the body section? (1)
e. Are there any lines of code that should be moved to the body section? (1)
3. Name two elements of an HTML document. (2)
4. Explain the difference between the World Wide Web and a website. (4)
5. Why would you use comments in a web page? (2)
6. Name three advantages of using formatting and structural elements in a web page. (3)
Continue to practical
7. Use a text editor to create a web page using your knowledge of html elements and tags to
give some info about South African School Sports. Follow the following guidelines to create
a web page: (20)
a. Use Notepad to create a document. Save it as an HTML document.
b. The title of the web page is ‘School Sports’.
c. Create the following headings:
i. Heading 1: Popular sport codes
ii. Heading 2: Summer sports
iii. Heading 2: Winter sports
iv. Heading 3: School policy with regards to sport
v. All headings must be formatted in bold.
vi. All headings must have a horizontal line in between.
d. Write the following paragraphs after each heading:
e. P1: The most popular sports in South African schools are; rugby, netball, athletics,
soccer and cricket.
f. P2: In South Africa athletics and cricket are played during the summer months.
g. P2: In South Africa netball, rugby and soccer are played during the winter months.
h. P3: Learners must be accompanied by an educator when they compete against
learners from other schools.
i. Save the web page and view it in a browser.
Total: 36 Marks
HTML LISTS:
TAG FUNCTION
Displays a bulleted (unordered) list on the
<ul></ul> page. Example: <ul type=”square”> or circle or
disc.
Displays a numbered (ordered) list on the
<ol></ol>
page. Example: <ol type=”1”> or a, A, I, i.
Each item in the list must be enclosed in a pair
<li></li>
of <li></li> tags.
Guided Activity:
In Chapter 15, in Activity GAct 15.11, follow the instructions below:
1. Type the following below into the activity and save the file as lists.html.
2. View the file in a web browser
3. Note how the <li> tags are nested inside the <ul> tags as well
as the use of indentation. This is done to ensure that the HTML
is easy to read.
4. Replace the <ul>tags with <ol> tags. Save the file and view
the results in a browser.
There is an attribute, called type which can be used to change the type of bullet or the type of
number used in a list. The values which can be used with the type attribute are described in the
table below:
UNORDERED LISTS <ul>
ATTRIBUTE VALUE FUNCTION
Disc Changes the bullet to an open circle
Square Displays a square bullet
Display a bullet which is a solid circle.
Type
This is the default value which is
Circle
displayed if the type attribute is not
used.
ORDERED LISTS <ol>
ATTRIBUTE VALUE FUNCTION
Displays a list numbered from 1
1 onwards. This is the default attribute
which does not have to be used.
Displays an alphabetical list with
A
uppercase letters, e.g. A., B., C., …
Type Displays an alphabetical list with
a
lowercase letters, e.g. a., b., c., …
Displays a list using uppercase Roman
I
numbers, e.g. I, II, III, …
Displays a list using lowercase Roman
i
numerals, e.g. i, ii, iii, …
Guided Activity:
In Chapter 15, in Activity GAct 15.11, follow the instructions below:
1. Make the changes below to the HTML code and save the file:
2. View the code in a web browser. Notice how the bullet has changed to a square shape.
3. Change the value of the type to “disc”. Save the file and view the results in a browser.
Notice how the bullet has changed to an open circle.
4. Change the unordered list to and order list.
5. Change the type attribute to display a numbered list like the one below. Save the file before
viewing in a browser.
HTML LINKS:
The ability to use hyperlinks to move easily from one place in a document to another or from one
document to another is one of the reasons the HTML markup language was created. In this section
we will show how to:
• Link to another website or another page in a website
• Link to a file
• Link to a different place in the same document.
All HTML links are hyperlinks, meaning that they allow you to jump from page to page in a
document or to another document entirely. When you move your mouse over a link, the cursor
changes from an arrow into a small hand with a pointing finger. Regardless of what type of link it
is, all links follow the same basic structure, for example
The tag for links is called the anchor tag and it does have an opening tag and a closing tag, it just
looks slightly different than all the other tags you have seen so far. Without the destination
address and the reference in it the anchor tag is <a></a>.
The text between the tags is called the anchor text. This text should be highlighted in some way so
that users of the page know where to click. The following are the default colours used in all
browsers:
• Blue and underlined for an unvisited link
• Purple and underlined for a visited link
• Red and underlined for an active link (this happens when you click on the link
Guided Activity:
In Chapter 15, in Activity GAct 15.12, follow the instructions below:
1. Type the following in Notepad and save the file as links1.html.:
2. View the page in a browser.
3. Click on the word link, which should be blue and underlined. Make sure the W3 Schools
webpage opens correctly. If not, check that you did not making a typing error.
CREATING AN INTERNAL LINK IS DONE IN TWO STEPS.
1. Create the place you want to jump to by making a bookmark:
The id attribute is used to give the bookmark a name. The bookmark name should be a single
word and must not contain spaces. In older versions of HTML the attribute name was used instead
of id. You can replace the id attribute with name without affecting your webpage.
2. Add a hyperlink to the bookmark at the place you wish to jump from:
The bookmark name has a # in front of it. “Go to Place” will be the anchor text and will be blue
and underlined.
Guided Activity:
In Chapter 15, in Activity GAct 15.12, follow the instructions below:
1. Go into the existing activity you created links2.html, which you will find in your data folder,
in Notepad.
2. Change the level 2 heading “Part Two” as follows:
3. Save the file and view it in a browser. You should not notice any change.
4. Make the following changes to the top of the document.
5. Save the file and view it in a browser. Click on the hyperlink “Part 2” which you have just
created and observe what happens. You might need to make the browser window smaller
to better see what happens.
6. Add a bookmark to the level two heading “Part Three”. Call the bookmark id “Part3”.
7. Add the paragraph with text “Go to Part 3” under the paragraph you added in Question 4.
Hyperlink this paragraph to the “Part3” bookmark.
8. Save the file in the browser and ensure that the hyperlink works correctly.
HTML IMAGES:
Images are defined with the <img> tag. This tag is empty, meaning it does not have a closing tag.
To see how an image is specified in HMTL, look at the example below:
There are two attributes that should be used for every image:
• Source (src)
• Alternate text (alt)
The source attribute indicates where an image is stored. This is either the folder on the website
or another website or server. You need to specify where the image is stored in order for it to
display. You also must give the correct file extension, e.g. jpg or bmp. For example, the src
attribute below indicates the pictures folder on a website:
The alt attribute gives alternate text for an image. This is a short description of what the image
shows so that if a user cannot view the image because the file is no longer available, or they are
using a screen reader, they can still know what the image looks like.
ATTRIBUTE VALUE FUNCTION
Allocates the size needed for the height of the image
A number (in
Height before
pixels)
it is loaded.
A number (in Allocates the size need for the width of the image before
Width
pixels) it is loaded.
ATTRIBUTE VALUE FUNCTION
Aligns the image on the left of the page. This causes text
Left (and other elements) to wrap around the right-hand side
of the image.
Aligns the image on the right of the screen. The causes
Right text (and other elements) to wrap around the left-hand
side of the image.
Align
Top Aligns the top of the image with surrounding elements
Aligns the middle of the image with surrounding
Middle
elements
Aligns the bottom of the image with surrounding
Bottom
elements
Note that the value “center” does not work with an image. An image can, however, be centred
using the <center> tag introduced in Chapter 15. See the example below:
Guided Activity:
In Chapter 15, in Activity GAct 15.13, follow the instructions below:
1. Open the activity and save the file as images.html.
2. Type in the following code underneath the heading “Images”:
3. Save the file and view it in a browser. The image should appear under the heading and the
following paragraph starts under the image.
4. Add align=”left” to the image tag:
5. Now change the value of the align attribute to “right”. Save the file and view in browser.
Take note of the result.
6.
