Web Technologies - Lecture 2 HTML
Web Technologies - Lecture 2 HTML
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
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.
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
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 .
• Normally HTML will truncate spaces in your text.
20
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus
Next Lecture………
21
Lecturer Name
Chathurangi D. Weerasinghe – MSc(UCSC, Col) BSc(Ruh) Saegis Campus