Introduction to HTML
Dr. Anupama Jha
Assistant Professor, VSIT, VIPS
2 Topics
Programming and HTML
About the World Wide Web
About Hypertext Markup Language
How to create an HTML document
Dr. Anupama Jha
3 Programming HTML
The World Wide Web
Created in 1989 by Tim Berners-Lee
European Laboratory for Particle Physics (Geneva
Switzerland)
Purpose
Provide an easy way to access cross-referenced documents
that exist on the internet
Dr. Anupama Jha
4 Programming HTML
The World Wide Web
Hypertext links
Contain reference to locate and open specific documents
Hypertext Markup Language (HTML)
Language used to design web pages (documents)
Web Browser
Program that displays HTML documents
Dr. Anupama Jha
5 Programming HTML
The World Wide Web
Uniform Resource Locator (URL)
A type of Uniform Resource Identifier (URI)
Identifies names and addresses on the WWW
A unique identifier for a web document
e.g., a telephone number or mailing address
Dr. Anupama Jha
6 Programming HTML
The World Wide Web
Uniform Resource Locator (URL)
Consists of 4 parts:
Protocol → Hyper Text Transfer Protocol (HTTP)
Domain Name → or Internet Protocol (IP) address
Directory
Filename
Specific document filename
index.(s)htm(l) or default.(s)htm(l)
Dr. Anupama Jha
7
Dr. Anupama Jha
8 Programming HTML
JavaScript’s role on the Web
HTML
Purpose → tell the browser how a document should appear
Static → can view or print (no interaction)
Dr. Anupama Jha
9 Programming HTML
JavaScript’s role on the Web
JavaScript Programming Language
Developed by Netscape for use in Navigator Web Browsers
Purpose → make web pages (documents) more dynamic
and interactive
Change contents of document, provide forms and controls,
animation, control web browser window, etc.
Dr. Anupama Jha
10 Programming HTML
Hypertext Markup Language
HTML Document
Text document that contains:
Tags → formatting instructions
Text to be displayed
Document is parsed or rendered by browser
Dr. Anupama Jha
11 Programming HTML
Hypertext Markup Language
HTML Document
Tags
Enclosed in brackets <tag>
Generally consist of:
Opening tags <tag>
Closing tags </tag>
Text contained between the opening and closing tags are
formatted according to tag instructions
Dr. Anupama Jha
12 Programming HTML
Hypertext Markup Language
HTML Document
Tags
All HTML documents begin with <html> tag and end with </html>
HTML is not case sensitive
Dr. Anupama Jha
13 Programming HTML
Hypertext Markup Language
HTML Document
Tag Attributes
Used to configure tags
Placed before closing bracket of opening tag
<tag attribute=“value”>some
text</tag>
Dr. Anupama Jha
14 Programming HTML
Hypertext Markup Language
HTML Document
Web browser only acknowledges text and valid tags
Web browser ignores non-printing characters
Spaces, tabs, carriage returns
Dr. Anupama Jha
15 Document Structure Tags
This section describes the tags that indicate the basic
structure of a web page.
HTML
HEAD
TITLE
BODY
Dr. Anupama Jha
16 HTML (Outermost Tag)
The HTML tag identifies a document as an HTML
document. All HTML documents should start with the
<HTML> tag and end with the </HTML> tag.
Syntax
<HTML>...</HTML>
Dr. Anupama Jha
17 HTML (Outermost Tag)
Example:-
The following example begins and ends a short document
with the HTML tag.
<HTML>
<BODY>
This is a small HTML file.
</BODY>
</HTML>
Dr. Anupama Jha
18 HEAD (Document Header)
The HEAD tag defines an HTML document header. The
header contains information about the document
rather than information to be displayed in the
document. The web browser displays none of the
information in the header, except for text contained
by the TITLE tag. You should put all header information
between the <HEAD> and </HEAD> tags, which
should precede the BODY tag.
The HEAD tag can contain TITLE, BASE, ISINDEX, META,
SCRIPT, STYLE, and LINK tags.
Dr. Anupama Jha
19 HEAD (Document Header)
Syntax
<HEAD>...</HEAD>
Example
<HEAD>
<TITLE> Mozilla speaks out</TITLE>
<BASE HREF="http://www.mozilla.com">
</HEAD>
Dr. Anupama Jha
20 TITLE
(document header)
The TITLE tag defines the TITLE of the document. This is what is
displayed in the top of your browser window. In addition, many
search engines use this as their primary name of a document.
Syntax
<TITLE>...</TITLE>
Example
<HEAD>
<TITLE> Mozilla speaks out</TITLE>
</HEAD>
Dr. Anupama Jha
21 BODY (main content of
document)
The BODY tag specifies the main content of a document. You
should put all content that is to appear in the web page
between the <BODY> and </BODY> tags.
The BODY tag has attributes that let you specify characteristics for
the document.
We can specify the background color or an image to use as a
tiled background for the window in which the document is
displayed.
We can specify the default text color, active link color, unvisited
link color, and visited link color.
We can specify actions to occur when the document finishes
loading or is unloaded, and when the window in which the
document is displayed receives or loses focus.
Dr. Anupama Jha
22 BODY
Syntax
<BODY
BACKGROUND="bgURL"
BGCOLOR="color"
TEXT="color"
LINK="color"
ALINK="color"
VLINK="color"
ONLOAD="loadJScode"
ONUNLOAD="unloadJScode"
ONBLUR="blurJScode"
ONFOCUS="focusJScode"
CLASS="styleClass"
ID="namedPlaceOrStyle"
LANG="ISO"
STYLE="style"
>
...
</BODY>
Dr. Anupama Jha
23 BODY -Example
<html>
<head></head>
<BODY BGCOLOR=“green" TEXT="black“ LINK="blue"
VLINK="green“ ALINK="red">
<p> this is just <a href="a.htm"> For </a> testing. </p>
<h1 style="color:blue;text-align:center">This is a
header</h1>
<p style="color:green">This is a paragraph.</p>
</BODY>
</html>
Dr. Anupama Jha
24 Tags within BODY Tag
Paragraph Tag
The HTML <p> element (or HTML Paragraph Element) represents a
paragraph of text.
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
Dr. Anupama Jha
25 Tags within BODY Tag
Heading Tags
The <h1> to <h6> tags are used to define HTML
headings.
<h1> defines the most important heading. <h6>
defines the least important heading.
Dr. Anupama Jha
26 Heading Tags
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p><b>Tip:</b> Use the h1 to h6 tags only for headings. Do not use them just to make
something bold. Use other tags for that.</p>
</body>
</html>
Dr. Anupama Jha
27 Break Line Tag
BR
If the Paragraph element usually has white space around it, how do
you "carriage return" only one line? The BR element inserts a "line
break" in the text.
Example:-
<html>
<body>
<p>
I’d like to write some text<br>and then have the next bit on the line
below.
</p>
</body>
</html>
Dr. Anupama Jha
28 Horizontal rule tag: <hr>
hr tag produces a line across the screen, the hr tag is a block
level element which means it starts on a new line.
<html>
<body>
<p>Here’s part of my page.</p>
<hr>
<p>And here’s another bit, distinguished by the line
above.</p>
</body>
</html>
Dr. Anupama Jha
