Scribd
Upload
8 views

Web Technologies - Lecture 2 HTML

Uploaded by

kanchuka induranga
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
8 views

Web Technologies - Lecture 2 HTML

Uploaded by

kanchuka induranga
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/ 21

CS1215, SE2104,

CS2104, SE1215, IT1217


IT2104
Lecture 02
Web Technologies - HTML
03/12/2023
15/05/2024

Bachelor of Science (Hons) in Computer Science | Software Engineering | Information Technology


Department of Computing
Faculty of Computing and Technology
Saegis Campus
Nugegoda

1
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.
• HTML stands for Hyper Text Markup Language
• 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

2
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.

3
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Tags
What are HTML tags?
• HTML tags are used to mark-up HTML elements
• HTML tags are surrounded by the two characters < and >
• The surrounding characters are called angle brackets
• 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
• The text between the start and end tags is the element content
• HTML tags are not case sensitive, <b> means the same as <B>

4
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
HTML Elements

This is an HTML element: <b>This text is bold</b>


The HTML element begins with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>
The purpose of the <b> tag is to define an HTML element that should be displayed
as bold.
5
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Nested Tags
• You may have noticed in the example above, the <body> tag also contains other tags,
like the <b> tab.
• 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>

6
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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
4 recommendation, and XHTML (the next generation HTML) requires
lowercase tags.

7
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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">

8
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Tag Attributes (Cont.)
• 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.

9
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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='George "machine Gun" Kelly'

10
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Basic HTML Tags
The most important tags in HTML are tags that define headings, paragraphs and line
breaks.

11
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Headings
• Headings are defined with the <h1> to <h6> tags. <h1> defines
the largest heading while <h6> defines the smallest.

12
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Paragraphs
• Paragraphs are defined with the <p> tag.
• Think of a paragraph as a block of text.
• You can use the align attribute with a paragraph tag as well.

13
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Line Breaks
• The <br> tag is used when you want to start a new line, but don't
want to start a new paragraph.
• The <br> tag forces a line break wherever you place it. It is similar to
single spacing in a document.

The <br> tag has no closing tag.

14
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Horizontal Rule
• The <hr> element is used for horizontal rules that act as dividers between sections,
like this:

• The horizontal rule does not have a closing tag. It takes attributes such as align and
width. For instance:

15
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Horizontal Rule
• The <hr> element is used for horizontal rules that act as dividers between sections,
like this:

• The horizontal rule does not have a closing tag. It takes attributes such as align and
width. For instance:

16
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Comments in HTML
• The comment tag is used to insert a comment in the HTML source code.
• A comment can be placed anywhere in the document and the browser will ignore
everything inside the brackets.
• You can use comments to write notes to yourself or write a helpful message to
someone looking at your source code.

17
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Other HTML Tags

Character tags like <strong> and <em> produce the same


physical display as <b> and <i> but are more uniformly
supported across different browsers.

18
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
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.

19
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Non-breaking Space
• The most common character entity in HTML is the non-breaking space &nbsp;.
• Normally HTML will truncate spaces in your text.

20
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Next Lecture………

Hyper Text Markup Language (HTML)


Part II

21
Lecturer Name
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus

You might also like