Scribd
Upload
9 views

Module 6 HTML - Eng

Uploaded by

Lucia Venter
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Module 6 HTML - Eng

Uploaded by

Lucia Venter
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

HTML

Basic concepts of web design

Most activities you enjoy on the Internet are made up of web pages. These web pages are
made possible using a computer language called HTML (HyperTextMarkupLanguage)
A web page is a text file.
It must be a text file because we want to access web pages from many different computers
and devices – even from our smartphone.
All these devices use different operating systems and web browsers but all of them can
read text files.
HTML is the language used to give instructions on how web pages should be displayed in a
browser. It is called a markup language because it uses markup tags to describe how the
text on a web page should be formatted.

To open a HTML-file in Notepad++, right click / open


To open a HTML-file in a browser, just double click
HTML
Basic concepts of web design

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:
HTML
Basic concepts of web design

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.
HTML
HTML elements
HTML
Basic concepts of web design
HTML markup tags are codes enclosed with angle brackets e.g. < />.
Each tag describes the type of formatting which should be done to the text on a web page.

An example is:
<i> My hobbies </i>
Which will be displayed on a web page as:
My hobbies

To create a web page, the text that should be displayed on the web page as well as all the markup tags are placed
in a text file.
This file has the extension .html and is called an HTML file, e.g. dogs.html
All Web browsers are able to read HTML files.
The browser interprets the HTML markup tags and then displays the content (the text between the markup tags) as
‘instructed’ by the markup tags.

Note:
Markup tags are codes enclosed within angle brackets, for example <i>.
Markup tags normally come in pairs like <b> and </b>. Opening Closing
tag tag
HTML
The structure of an HTML file

Text for a web page

<b> hello world </b> - this is my first <i> formatted </i> web page!
Start of End of Start of End of
bold bold italic italic
formatting formatting formatting formatting

A browser will interpret and display this as:


Hello world - this is my first formatted web page!
HTML
Basic structure
HTML files should be created according to a specific structure.
The diagram that follows provides a layout of the main elements of an HTML file and explains the function of each element.

HTML element
<html> Shows where an HTML file begings and ends and contains all the other elements
<head> HEAD element
Contain elements that give instructions to a browser
<title>
TITLE element
Title Title that will appear in the web browser
</title>
</head>

<body> BODY element


Contents All the text and images that must be displayed on the web page
</body>
</html>
HTML
HTML ATTRIBUTES

Various tags can be used to structure a web page and format text. These tags can be
customised by making use of attributes.
Attributes are always written in the format NameOfAttribute = “value”
The name and value of the attribute are always added in the start tag.
Many attributes are available BUT certain attributes can only be used with certain tags e.g.
the bgcolor attribute can be used with the body tag but no with the paragraph tag.
More than one attribute can be used with a tag e.g.: <body bgcolor = “yellow” text =
“darkblue”
Start tag Attribute “value” End tag
=
<font color “red”> </font>

<font color = “red”> Hello world </font> Hello world


HTML Structural markup tags

Tag Description
<html></html> Creates an HTML document – starts and ends a
web page
<head></head> Contains information about the web page
<title></title> Defines a title for the web page shown in
browser TAB
<body></body> Defines the body of the web page where code
will be placed
<body bgcolor="pink"> Sets the background colour of the web page
<body text="black"> Sets the colour of the body text
<br/> {no end tag} Inserts a line break
<hr/> {no end tag} Horizontal line across the window
<!-- --> {no end tag} Comment from designer
HTML Formatting markup tags

Tag Description
<p> <p/> Start and end of an paragraph
<hl></hl> Creates the largest heading
. .
. .
. .
<h6></h6> Creates the smallest heading
<b></b> Creates bold text
<i></i> Creates italic text
<u></u> Creates underlined text
<font size="3"></font> Sets size of font, from "1" to "7"
<font color="green"> </font> Sets font colour
<font face="Times New Roman"></font> Sets font type
TAG nests {tags inside of tags} must be in reverse order
<b><i><u> my dog </u></i></b> will be displayed as my dog
HTML
HTML ATTRIBUTES
center
Heading <hl> allign left <hl align = "center">
right
center
Paragraph <p> align left <p align = "left">
right
<hr align = "right">
center
align <hr color = "red"/>
left
width <hr size = "3"/>
Horizontal line <hr/> right
<hr size = "3" width = "80%"
color
50
size color = "cyan" align = left"/>
50%
Page color <body> bgcolor name / number of color <body bgcolor = "yellow">
Text on page color text name / number of color <body text = "blue">
<body background =
background Picture.extention
"logo.jpg">
color actual color→"red" <font color = "red">
Parts of Text <font> face fonttype→"calibri" <font face = "comic sans">
size size→"12" <font size = "14">
HTML
HTML BODY ATTRIBUTES EXAMPLE

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 in on the webpage.
Example: <body text = "green"> </body>
HTML Bulleted list markup tags

Tag Description
<ol></ol> Creates a numbered list
<ol type="A" or "a" or "I" or "i" or "1"></ol> Defines the type of numbering used
<ul></ul> Creates a bulleted list
<ul type="disc" or "square" or "circle"> </ul> Defines the type of bullets used
<li> </li> At the start and end of each item in
the list
Unordered Lists Ordered Lists
An unordered list is a bulleted list. The tags <ul> and An ordered list is a numbered list. The tags <ol> and
</ul> indents a list and adds bullets to it. </ol> indents a list and adds automatic numbering to it.
The <li> and </li> tags define every item on the list. The <li> and </li> tags define every item on the list.
HTML HTML ATTRIBUTES IMAGES & LISTS
<ul>
disc (default bullet) <li>bullet 1</li>
Bulleted
<ul> type circle <li>bullet 2</li>
list
square <li>bullet 3</li>
</ul>
<ul type = "circle" >
"1" →1,2,3,4,5,….. <ol>
"a"→a,b,c,d,………(lowercase) <li>number 1</li>
Numbered
<ol> type "A"→A,B,C……→(uppercase) <li>number 2</li>
list
"i"→i,ii,iii,iv…….small roman <li>number 3</li>
"I"→I,II,III,IV→upper roman </ol>
name of URL of image that
Images <img> src <img src = "prettydog.jpg" alt = "pretty dog picture">
must be displayed
text that will appear when <img src = "prettydog.jpg" alt = "pretty dog picture" align =
<img> alt
image is not shown "left"/>
<img src = "prettydog.jpg" alt = "pretty dog picture" align =
<img> width width of image in pixels
"left" width = "300" />
<img src = "prettydog.jpg" alt = "pretty dog picture" align =
<img> height height of image in pixels
"left" height = "250"/>
<img src = "prettydog.jpg" alt = "pretty dog picture" align =
<img> align center / left / right
"left" />
HTML Bulleted list markup tags + attributes

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.

You may define the bulleted list


type by using the Type attribute.

<ul type = "circle"> will bullet the


list with circle ○ bullets.
<ul type = "square"> will bullet
the list with square ▪ bullets.
HTML Hyperlinks tags & attributes

Tag Description
<a href= "URL"></a> creates a hyperlink
<a href = "URL"><img src = "name"></a> Creates an image link
<a name = "NAME"></a> Creates a target location in the document
<a href = "#NAME"></a> Links to a target location created somewhere else in the document

Anchor tags <a> </a> can be used to


link:
A web page on the WWW
A web page or file in the same folder as
where the website’s files are all stored
A bookmark on the same web page

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>
HTML Images and hyperlinks tags

Tag Description
<img src = "name"> Adds an image

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.
HTML Images and hyperlinks

Tag Description
<img src = "name"> Adds an 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" />
HTML Table tags

Tag Description
<table></table> Table element
Creates and add a table to a webpage
<th></th> Table header element
Creates a table header (a cell with bold, centred text)
<tr></tr> Table row element
Creates and indicate a row in a table
<td></td> Table data element
Creates a cell in a table
HTML
TABLE ATTRIBUTES
center
Allignment of text in table <table> allign left <table align = "center">
right
If there is no attribute the borders
<table> border number <table border = "5">
won't be visibe

Colour of the border <table> bordercolor actual colour <table bordercolor = "green">

Background colour of the table <table> bgcolor actual colour <table bgcolor = "purple">

Distance between text and border of


<table> cellpadding number <table cellpadding = "7">
the cell

Distance in pixels between cell


<table> cellspacing number <table cellspacing = "7">
borders

Total width of the table


<table width = "5">
can be in pixels <table> width number
<table width = "10%">
can be in percentage
HTML TABLE ATTRIBUTES
tr settings → specify settings only for current row & td and th settings → specify settings only for curent cell
only this cell will have green
<th> bgcolor actual colour <th bgcolor = "green">
background"
<th> and <td> but not
width number
<tr>
<tr>
set the number of columns a cell
<th colspan = "2" > Heading of
should span (→table with 2 <th> and <tr> colspan number
table</th>
columns)
</tr>
<tr>
<th rowspan = "2" > Heading of
table</th>
<td> cell1</td>
<th> & <tr> & <td> rowspan
</tr>
<tr>
<td>cell2</td>
</tr>
<th> and <tr> bgcolor actual colour
horizontal alignment <td> allign center / left / right <td align = "left">
vertical alignment <td> valign top / middle / bottom <td valign = "middle">
horizontal alignment <tr> allign center / left / right <tr align = "right">
vertical alignment <tr> valign top / middle / bottom <tr valign = "top">
HTML Table example

<table border = "1"


<tr>
<th>TOUR</th>
<th>DAYS</th>
<th>DEPART</th>
</tr>
<tr>
<td> game reserve</td>
<td> 5 </td>
<td>12 MARCH </td>
</tr>
<tr>
<td> Karoo</td>
<td>10 </td>
<td>5 JUNE </td>
</tr>
</table>
HTML Table example

Rows:
The table row tags <tr> </tr>are used to define a new row in the table.
Headings:
The table heading tags <th> </th> will automatically bold the text and are used to define the first row of the
table.
Data:
The table data tags <td> </td> will insert data into the cells in the table.
HTML Table example
HTML Table example

Text in a table is usually kept in the same font, colour and size, with the exception of the header row which is
displayed in BOLD and CENTRED.

To change font colour / size / type in a table it should be done like this:

<table>
<tr>
<th><font color = “red” FOR SALE </font><th>
<th><font color = “blue” Number of stands </font><th>
</tr>
<tr>
<td>………..</td>
<td>………..</td> FOR SALE NUMBER OF STANDS
</tr>
<tr>
<td>………..</td>
<td>………..</td>
</tr>
</table>
HTML
CREATING A WEBSITE

• A single web page can be created using structural, text


formatting and list tags.
• A website can be created by linking different web pages
together using hyperlinks to branch from one web page to
another.
• All the pages and linked images or files must be in the same
folder.
• You need to save your images in the same folder as the
webpage, otherwise, you need to add the full path of the
image, which can get complicated.
HTML
PLANNING A WEBSITE

The best way to plan a website consisting of more than one page is to think of
the site as an organisational diagram, with the Home Page at the top and the
other pages arranged below it.

HOME PAGE
All about me

My interests My gadgets

Interest 1 Interest 2 Software I


recommend
HTML
PLANNING A WEBSITE

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. Don’t:
• Use clear fonts and font sizes. • Use inappropriate fonts.
• Make sure your layout reflects the target market you are going to • Use large images or animations
reach. that will take a long time to load.
• Check the layout of your webpage on multiple different devices, such • Use multiple colours that are
as desktops and smartphones. confusing to the visitor.
• Check the layout of your webpage on multiple web browsers. • Use dark fonts on dark
• Use graphics to enhance your page. backgrounds or light fonts on light
• Choose a colour scheme that fits your branding. backgrounds.
• Use bullet or numbered lists.

You might also like