BEC112
Internet Programming
CHAPTER 2: HTML
What is Markup language?
• A markup language is a programming language that is used to make text more interactive and dynamic.
• It can turn a text into images, tables, links etc.
2024 LECTURER: TAPIWA J MUDHARA 2
What is Hyper Text Markup Language (HTML)?
• It is the standard markup language for creating Web pages.
• It is a language for describing web pages.
• HTML documents contain HTML tags and plain text
• HTML documents are also called web pages
• It consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements are represented by tags
• HTML tags label pieces of content such as heading, paragraph, table, and so on
• Browsers do not display the HTML tags, but use them to render the content of the page
2024 LECTURER: TAPIWA J MUDHARA 3
What is an html File?
HTML is a format that tells a computer how to display a web page. The documents themselves are plain
text files with special "tags" or codes that a web browser uses to interpret and display information on your
computer screen.
• An HTML file is a text file containing small markup tags
• The markup tags tell the Web browser how to display the page
• An HTML file must have an htm or html file extension
2024 LECTURER: TAPIWA J MUDHARA 4
HTM or HTML Extension?
When you save an HTML file, you can use either the .htm or the .html extension. The .htm extension comes
from the past when some of the commonly used software only allowed three letter extensions. It is
perfectly safe to use either .html or .htm, but be consistent. mypage.htm and mypage.html are treated as
different files by the browser.
2024 LECTURER: TAPIWA J MUDHARA 5
What is HTML Tag?
• HTML tags are element names surrounded by angle brackets:
<tagname> content goes here...</tagname>
• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted before the tag name
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>
2024 LECTURER: TAPIWA J MUDHARA 6
Logical vs. Physical Tags
In HTML there are both logical tags and physical tags. Logical tags are designed to describe (to the browser) the
enclosed text's meaning. An example of a logical tag is the <strong> </strong> tag. By placing text in between
these tags you are telling the browser that the text has some greater importance. By default all browsers make
the text appear bold when in between the <strong> and </strong> tags.
Physical tags on the other hand provide specific instructions on how to display the text they enclose.
Examples of physical tags include:
• <b>: Makes the text bold.
• <big>: Makes the text usually one size bigger than what's around it.
• <i>: Makes text italic.
Physical tags were invented to add style to HTML pages because style sheets were not around, though
the original intention of HTML was to not have physical tags. Rather than use physical tags to style
your HTML pages, you should use style sheets.
2024 LECTURER: TAPIWA J MUDHARA 7
Nested Tags
When you enclose an element in with multiple tags, the last tag opened should be the first tag closed. For
example:
<p><b><em>This is NOT the proper way to close nested tags.</p></em></b>
<p><b><em>This is the proper way to close nested tags. </em></b></p>
NOTE: It doesn't matter which tag is first, but they must be closed in the proper order.
2024 LECTURER: TAPIWA J MUDHARA 8
Why Use Lowercase Tags?
You may notice we've used lowercase tags even though I said that HTML tags are not case sensitive. <B>
means the same as <b>. The World Wide Web Consortium (W3C), the group responsible for developing
web standards, recommends lowercase tags in their HTML 5 recommendation, and XHTML (the next
generation HTML) requires lowercase tags.
2024 LECTURER: TAPIWA J MUDHARA 9
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML elements on your
page. The <tag> tells the browser to do something, while the attribute tells the browser how to do it. For
instance, if we add the bgcolor attribute, we can tell the browser that the background color of your page
should be blue, like this: <body bgcolor="blue">.
This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the
table should have no borders: <table border="0">. Attributes always come in name/value pairs like this:
name="value". Attributes are always added to the start tag of an HTML element and the value is
surrounded by quotes.
2024 LECTURER: TAPIWA J MUDHARA 10
Quote Styles, "red" or 'red'?
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but
single style quotes are also allowed. In some rare situations, like when the attribute value itself contains
quotes, it is necessary to use single quotes:
name=‘Tapiwa “Johannes" Mudhara’
For a complete list of tags, visit W3C.org.
2024 LECTURER: TAPIWA J MUDHARA 11
The structure of an HTML element
2024 LECTURER: TAPIWA J MUDHARA 12
The minimal structure of HTML documents
1. Identifies the document as written in HTML.
2. The head provides information about the document.
3. A descriptive title is required.
4. The body contains the content that displays in the browser.
2024 LECTURER: TAPIWA J MUDHARA 13
HTML Element
• The <!DOCTYPE html> declaration defines this document to be HTML version 5
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
2024 LECTURER: TAPIWA J MUDHARA 14
Heading Tags
• Any document starts with a heading. You can use different sizes for your headings.
• HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>. While displaying any heading, browser adds one line before and one line after that heading.
2024 LECTURER: TAPIWA J MUDHARA 15
Heading Tags : Example
Example
<!DOCTYPE html>
<html>
<head> <title>Heading Example</title> </head>
<body>
<h1>this is heading 1</h1>
<h2>this is heading 2</h2>
<h3>this is heading 3</h3>
<h4>this is heading 4</h4>
<h5>this is heading 5</h5>
<h6>this is heading 6</h6>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 16
Paragraph Tag
• The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of text should go in
between an opening <p> and a closing </p> tag as shown below in the example:
<!DOCTYPE html>
<html>
<head> <title>Paragraph Example</title> </head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 17
Line Break Tag
Whenever you use the <br /> element, anything following it starts from the next line. This tag is an example of an empty element, where
you do not need opening and closing tags, as there is nothing to go in between them. The <br /> tag has a space between the characters
br and the forward slash. If you omit this space, older browsers will have trouble rendering the line break.
<!DOCTYPE html>
<html>
<head> <title>Line Break Example</title> </head>
<body>
<p>Hello<br />
You delivered your assignment on time. <br />
Thanks<br />
Mudhara</p>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 18
Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title> </head>
<body> <p>This text is not in the center.</p>
<center> <p>This text is in the center.</p> </center>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 19
Horizontal Lines
Horizontal lines are used to visually break-up sections of a document.
The <hr> tag creates a line from the current position in the document to the right margin and breaks the line
accordingly. For example, you may want to give a line between two paragraphs as in the given example below:
<!DOCTYPE html>
<html>
<head> <title>Horizontal Line Example</title> </head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 20
…Cont.
Again <hr /> tag is an example of the empty element, where you do not need opening and closing tags,
as there is nothing to go in between them. The <hr /> element has a space between the characters hr and
the forward slash. If you omit this space, older browsers will have trouble rendering the horizontal line.
2024 LECTURER: TAPIWA J MUDHARA 21
Nonbreaking Spaces
In cases, where you do not want the client browser to break text, you should use a nonbreaking space entity
instead of a normal space.
For example, when coding the "12 Angry Men" in a paragraph, you should use something similar to the following
code:
<!DOCTYPE html>
<html>
<head> <title>Nonbreaking Spaces Example</title> </head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 22
Other HTML Tags
• As mentioned before, there are logical styles that describe what the text should be and physical styles
which actually provide physical formatting.
• It is recommended to use the logical tags and use style sheets to style the text in those tags.
2024 LECTURER: TAPIWA J MUDHARA 23
Logical Tags
Tag Description
<abbr> Defines an abbreviation <kbd> Defines keyboard text
<acronym> Defines an acronym <pre> Defines preformatted text
<address> Defines an address element <q> Defines a short quotation
<cite> Defines a citation <samp> Defines sample computer code
<code> Defines computer code text <strong> Defines strong text
<blockquote> Defines a long quotation <var> Defines a variable
<del> Defines text <ins> Defines inserted text
<dfn> Defines a definition term <em> Defines emphasized text
2024 LECTURER: TAPIWA J MUDHARA 24
Physical Tags
Tag Description • Character tags like <strong> and <em> produce the
<b> Defines bold text same physical display as <b> and <i> but are more
uniformly supported across different browsers.
<big> Defines big text
<i> Defines italic text
<small> Defines small text
<sup> Defines superscripted text
<sub> Defines subscripted text
<tt> Defines teletype text
<u> Deprecated. Use styles instead
2024 LECTURER: TAPIWA J MUDHARA 25
HTML Character Entities
Some characters have a special meaning in HTML, like the less than sign (<) that defines the start of an
HTML tag. If we want the browser to actually display these characters we must insert character entities in
place of the actual characters themselves.
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & &
“ quotation mark " "
' apostrophe ' (does not work in IE) '
2024 LECTURER: TAPIWA J MUDHARA 26
HTML Character Entities
• A character entity has three parts: an ampersand (&), an entity name or an entity number, and finally a
semicolon (;).
• The & means we are beginning a special character, the ; means ending a special character and the
letters in between are sort of an abbreviation for what it's for.
• To display a less than sign in an HTML document we must write: < or <
• The advantage of using a name instead of a number is that a name is easier to remember.
• The disadvantage is that not all browsers support the newest entity names, while the support for entity
numbers is very good in almost all browsers.
2024 LECTURER: TAPIWA J MUDHARA 27
Comments
• You can add comments to your code that will not be seen by the browser, but only visible when viewing
the code.
• It is a good practice to add comments into your HTML code, especially in complex documents, to
indicate sections of a document, and any other notes to anyone looking at the code.
• Comments help you and others understand your code and increases code readability.
• Comments can be used to: -
• organize your code into sections
• 'comment out' large chunks of code to hide it from the browser.
HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!-- ... --> tags will
be treated as comment and will be completely ignored by the browser.
2024 LECTURER: TAPIWA J MUDHARA 28
Examples
In HTML there are three types of comments those are described as follows:
1. Single comment Example
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts --> <title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
2024 LECTURER: TAPIWA J MUDHARA 29
Examples
2. Multiline Comments
So far we have seen single line comments, but HTML supports multi-line comments as well. You can comment
multiple lines by the special beginning tag
<html>
<head> <title>Multiline Comments</title> </head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like. -->
<p>Document content goes here.....</p>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 30
Examples
3. Conditional Comments
Conditional comments only work in Internet Explorer (IE) on Windows but they are ignored by other browsers. They are
supported from Explorer 5 onwards, and you can use them to give conditional instructions to different versions of IE.
<html>
<head> <title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>
2024 LECTURER: TAPIWA J MUDHARA 31
HTML Colours
Colour Values
Colours are defined using a hexadecimal notation for the combination of red, green, and blue colour values (RGB). The
lowest value that can be given to one light source is 0 (hex #00). The highest value is 255 (hex #FF). This table shows
the result of combining red, green, and blue:
Colour Colour HEX Colour RBG
#000000 rgb(0,0,0)
#FF0000 rgb(255,0,0)
#00FF00 rgb(0,255,0)
#0000FF rgb(0,0,255)
#FFFF00 rgb(255,255,0)
#00FFFF rgb(0,255,255)
#FF00FF rgb(255,0,255)
#C0C0C0 rgb(192,192,192)
#FFFFFF rgb(255,255,255)
2024 LECTURER: TAPIWA J MUDHARA 32
HTML Colours
Colour Names
About 147 colour names are supported by the W3C HTML 5.0 standard. For all other colours you should use the
Colour HEX value.
2024 LECTURER: TAPIWA J MUDHARA 33
HTML Links
• HTML links are defined with the <a> tag: <a href="url">link text</a>. The link’s destination is specified
in the href attribute. Attributes are used to provide additional information about HTML elements.
• Example: -<a href="https://www.hit.ac.zw/sbms/e_commerce_dpt.php">Visit our Department Page</a>
2024 LECTURER: TAPIWA J MUDHARA 34
Thank you
Tapiwa J Mudhara
[email protected]
www.hit.ac.zw
