Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
HTML – Part I
1
About HTML
2
HTML Tags
Some Points
3
Some Points (contd.)
<img src=“baby.jpg”>
<body text=“#FFFFFF”
bgcolor=“#0000FF”>
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 --->
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.
VIEW
6
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.)
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”>
9
Text Formatting in HTML
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
12
• <pre> ……. </pre>
¾Allows browser to display carefully laid
out text.
¾Used to display program listings.
¾Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
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.
VIEW
Example 2
<html>
<head><title>Demonstration of Headings </title></head>
15
Example 3
<html>
<head><title>Paragaph Aligning</title></head>
Example 4
<html>
<head><title>Layout Features 1</title></head>
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>
<br>
VIEW
17
Example 7
<html>
<head>
<title>Background Image</title>
</head>
VIEW
18
SOLUTIONS TO QUIZ
QUESTIONS ON
LECTURE 12
19
Quiz Solutions on Lecture 12
20
Quiz Solutions on Lecture 12
QUIZ QUESTIONS ON
LECTURE 13
21
Quiz Questions on Lecture 13
22
BACK
BACK
23
BACK
BACK
24
BACK
BACK
25
BACK
BACK
26