Scribd
Upload
46 views

Unit 1.2 HTML - Basic

The document discusses HTML and its components. It introduces HTML, the World Wide Web, and how they were created in 1989 by Tim Berners-Lee. It describes HTML documents which use tags to define formatting and contain text to display. The main tags discussed are HTML, HEAD, TITLE, and BODY, with BODY being where the main content of the document appears. It provides examples of how to use these tags to structure an HTML document.

Uploaded by

Priyanshu Mohta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
46 views

Unit 1.2 HTML - Basic

The document discusses HTML and its components. It introduces HTML, the World Wide Web, and how they were created in 1989 by Tim Berners-Lee. It describes HTML documents which use tags to define formatting and contain text to display. The main tags discussed are HTML, HEAD, TITLE, and BODY, with BODY being where the main content of the document appears. It provides examples of how to use these tags to structure an HTML document.

Uploaded by

Priyanshu Mohta
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 28

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

You might also like