Indian Institute of Technology Kharagpur
HTML – Part I
Prof. Indranil Sen Gupta
Dept. of Computer Science & Engg.
I.I.T. Kharagpur, INDIA
Lecture 13: HTML – Part I
On completion, the student will be able to:
1. Explain the basic concepts of HTML tags and
attributes.
2. Illustrate the basic structure of a HTML document.
3. Demonstrate the use of basic document structure,
headings, and document layout tags.
4. Demonstrate various ways of character formatting
in a HTML document.
1
About HTML
• Hyper Text Markup Language.
¾Constitutes a collection of platform
independent styles that define the
various components of a web document.
¾Styles indicated by markup tags.
• What is HTML really?
¾Plain-text documents can can be created
using any text editor.
¾WYSIWYG editors are also available.
• What is a markup language?
¾One where we can embed special tags
or formatting commands in the text.
¾To describe how the text should be
displayed / printed.
• HTML is a markup language
¾Special formatting codes (called tags)
to adjust fonts, create bulleted lists,
create forms, display images, create
tables, etc.
2
HTML Tags
• The left and right angle brackets are used to
enclose all special instructions, called tags.
• Two classes of tags:
¾Those which appear in pairs.
<i> Good morning </i>
¾Those which appear individually.
<img src=“baby.jpg”>
• Browsers interpret the tags to display a HTML
page in properly formatted form.
Some Points
• Most of the tags belong to the first category.
<tag-name> …… directives …… </tag-name>
• Tags are case insensitive
<HEAD>, <Head> and <head> are all equivalent.
• Tags may be nested
<html> <head>…</head> <body>…</body> </html>
• Most browsers have a VIEW SOURCE menu
option.
¾ The HTML version of the page can be displayed.
3
Some Points (contd.)
• Browsers ignore all extra spaces and carriage
returns within a HTML document.
• Why?
¾Browsers have to reformat the document to
fit in the current display area.
• It is good practice to use white spaces in a
HTML document.
¾Improves readability.
Some Points (contd.)
• Some tags can have one or more (named)
attributes to define some additional
characteristics of the tag.
<img src=“baby.jpg”>
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
<body text=“white” bgcolor=“blue”>
4
Some Points (contd.)
• Unrecognized tags
¾Browsers normally ignore tags it does
not recognize.
• Comment lines
¾Comments are included between <!---
and --->.
¾Comments cannot be nested.
<!--- A comment here --->
<!--- Another comment in
two lines --->
HTML Document Structure
• A HTML document consists of two major
portions:
¾Head
Contains information about the
document, like the title and “meta” data
describing the contents.
¾Body
Contains the actual matter of the
document.
Gets displayed within the browser
window.
5
A Simple HTML Document
<html>
<head>
<title> Title of the Document </title>
</head>
<body text=“white” bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font.
</body>
</html>
VIEW
Structural HTML Tags
• <html> …….. </html>
¾Used to bracket an entire HTML document.
¾Optional for most browsers.
¾Attributes:
lang = language code
Language code indicates the primary
language of the document.
bn – Bengali, hi – Hindi, en – English
6
Structural HTML Tags (contd.)
• <head> ……. </head>
¾Used to provide information about a
web page.
¾Nests within itself other tags like
<base>, <meta> and <title>.
• <base>
¾Attribute: href=url
¾Specifies the base pathname for all
relative URLs in the document.
¾No end tag.
Structural HTML Tags (contd.)
• <meta>
¾Used to provide information about a
document.
¾Keywords or descriptions to aid search
engines.
• <title> ……. </title>
¾Specifies the title of a HTML document.
¾Usually appears on the title bar of the
browser window.
7
Structural HTML Tags (contd.)
• <body> ……. </body>
¾Used to bracket the body of a HTML
document.
¾Attributes:
background=url Î specifies an image
file to be used as tiling background.
bgcolor=color Î Sets the
background color of the document.
text=color Î Sets the default color
for the normal text in the document.
Structural HTML Tags (contd.)
alink=color Î Sets the color of active
links.
link=color Î Sets the default color for
all the links in a document.
vlink=color Î Sets the color for the
visited links.
8
How to specify colors?
• Two ways:
¾By specifying the red, green, blue or
RGB components.
Each color encoded in 8 bits.
00 means that the color is turned off;
FF means fully turned on.
Example:
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
How to specify colors? (contd.)
¾By specifying the color name.
Some of the colors that are supported
by browsers are:
aqua black blue fuchsia
gray green lime maroon
navy olive purple red
silver teal yellow white
Many other colors are possible.
Example:
<body text=white>
<body bgcolor=“yellow”>
9
Text Formatting in HTML
Paragraphs and Headings
• <Hn> ……. </Hn>
¾Used to generate headings, 1 ≤ n ≤ 6.
¾Six different levels of headings.
<H1> is the largest, <H6> is the smallest.
• <P>
¾Paragraph marker, used to separate text
into paragraphs.
¾End tag </P> is optional.
¾A series of paragraph tags <p><p>…<p>
with no intervening text is treated as a
single <p>.
10
• <BR>
¾Used to indicate that the text following
<BR> should begin on the next line.
¾The amount of line spacing is less than
that of a <P> break.
¾Example:
This is the first line. <br>
This is the second line. <br>
This is the third.
• <HR>
¾Produces a horizontal line, which can be
used to delimit sections.
¾Length of the line can be specified.
¾Examples:
<hr>
<hr size=“20”> [ noshade option possible ]
<hr width=“75%”>
<hr align=“right” width=120>
Across full width of browser, 20 pixels
thick, 75% of available page width, and
120 pixels right-justified.
11
• <address> ……. </address>
¾Supplies the contact information of the
author.
¾Generally formatted in italics, with a line
break above and below.
¾Example:
<address>
Prof. Indranil Sen Gupta <br>
Dept. of Computer Science & Engg. <br>
I.I.T. Kharagpur, INDIA <br>
Email: isg@hotmail.com
</address>
Appearance of Text
• <b> ……. </b>
¾Displays the enclosed text in bold.
• <i> ……. </i>
¾Displays the enclosed text in italics.
• <cite> ……. </cite>
¾Tells the browser that this is a citation.
Usually displayed in italics.
12
• <pre> ……. </pre>
¾Allows browser to display carefully laid
out text.
¾Used to display program listings.
¾Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
• <sub> ……. </sub>
¾Displays the enclosed text as subscript.
• <sup> ……. </sup>
¾Displays the enclosed text as superscript.
• <font> ……. </font>
¾Specifies the style of the enclosed text.
¾Attributes:
color = color name
face = typeface
size = value [1 to 7; 3 is the default]
[can also specify as +n or –n]
13
• <center> ……. </center>
¾Centers the enclosed elements
horizontally on the page.
• <P align=option> ……. </P>
¾Used to align a paragraph.
¾Option can be left, right or center.
Some Examples
14
Example 1
<html>
<head>
<title> Title of the Document </title>
</head>
<body text="white" bgcolor=“blue”>
This is the content of the document.
This is an <i> italic </i> font,
and this is <b> bold </b>.
</body>
</html>
VIEW
Example 2
<html>
<head><title>Demonstration of Headings </title></head>
<body text="#FFFFFF" bgcolor="#0000FF">
<h1>This is a first level heading. </h1>
<h2>The second level</h2>
<h3>The third level</h3>
<h4>Fourth level. </h4>
<h5>Fifth level.</h5>
<h6>And, finally, the sixth .</h6>
A small amount of plain non-heading text.
</body>
</html>
VIEW
15
Example 3
<html>
<head><title>Paragaph Aligning</title></head>
<body text=white bgcolor=blue>
<h3>
<P ALIGN=CENTER> This paragraph will be aligned
at the center. Even as the browser window
size changes, the alignment remains the same. </P>
<P ALIGN=LEFT>This demonstrates left alignment. </P>
<P ALIGN=RIGHT>How about aligning by the right
margin? </P>
</h3>
</body>
</html>
VIEW
Example 4
<html>
<head><title>Layout Features 1</title></head>
<body text=yellow bgcolor=blue>
<h2> <pre>
begin
if (a > b)
then max := a;
else max := b;
end;
</pre> </h2>
<hr size=8 width=50%>
<hr>
<hr size=20 width="75%" noshade>
</body>
</html> VIEW
16
Example 5
<html>
<head><title>Layout Features 2</title></head>
<body text=yellow bgcolor=blue>
<h3>Extended Quotations</h3>
<blockquote>
<P>This is the first paragraph within
the BLOCKQUOTE environment. </P>
<P>Another paragraph starts here. </P>
We type some text here without explicitly
giving paragraph break.
</blockquote>
</body>
</html> VIEW
Example 6
<html>
<head><title> Superscript and Subscript </title></head>
<body text=white bgcolor=blue>
<h1> y = x <sup> 3 </sup> + 2 x <sup> 2 </sup> + 4 </h1>
<br>
<h2> W <sub> total </sub> = x <sup> 2 </sup> - 5 <h2>
</body>
</html>
VIEW
17
Example 7
<html>
<head>
<title>Background Image</title>
</head>
<body text="#FFFFFF" background="starwars.jpg">
<h2><center>
This page illustrates how a background image
can be specified.
</center></h2>
</body>
</html>
VIEW
18
SOLUTIONS TO QUIZ
QUESTIONS ON
LECTURE 12
Quiz Solutions on Lecture 12
1. Which HTTP commands can result in the
execution of server side scripts?
GET and POST.
2. What are the differences between root
directory and home directory in a web server
installation?
All web server files are stored under the
root directory. Home directory is where the
web pages get stored.
19
Quiz Solutions on Lecture 12
3. What are the main purposes behind the use
of proxy servers?
Request forwarding, access control,
caching.
4. Name two web servers, and one proxy
server that are widely used.
Web servers: Apache, Tomcat
Proxy server: Squid
5. In static NAT, on what factors do number of
registered IP addresses depend on?
Number of hosts in the private network.
Quiz Solutions on Lecture 12
6. For NAT overloading, what are the typical
entries in the fields of the address
translation table (ATT)?
Source computer name, source IP
address, source port, NAT IP address,
NAT assigned port.
7. Which of the fields would not be required if
it is only required to implement dynamic
NAT?
The port number fields would not be
required.
20
Quiz Solutions on Lecture 12
8. Can a machine with a private IP address
communicate with a public host in the
outside world?
A packet from a host with a private IP
address can reach a registered
destination host, but not the reverse.
QUIZ QUESTIONS ON
LECTURE 13
21
Quiz Questions on Lecture 13
1. What is a markup language?
2. Give one example each for the two classes
of tags.
3. What is a tag attribute? Give an example.
4. What does the “title” tag specify?
5. How do you specify color using red, green,
blue components?
6. What is the difference between <BR> and
<P> tags?
7. How do you specify a solid horizontal rule
spreading across 60% of the window, and
having a width of 10 pixels?
Quiz Questions on Lecture 13
8. How do you display pre-formatted text
document like a table of numbers?
9. How do you specify that a given image
file be used as the background in the
browser window?
22
BACK
BACK
23
BACK
BACK
24
BACK
BACK
25
BACK
BACK
26
