Scribd
Upload
8 views

Web Technologies - Lecture 2 HTML

Uploaded by

kanchuka induranga
Copyright
© © All Rights Reserved
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
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