HTML 3

1
A tutorial on
Prepared by:- Shilpa Jackson

2
Course outline
 Course Introduction
Course Software
History of HTML
How to save and view web pages
Basic HTML structure
HTML tags
Demonstration
HTML Exercise

3
Introduction to HTML

4
5
What is the full form of HTML?

1) High-level text markup language.
2) Hyper text markup languagep
3) Hi-text markup language.
4) None of these
6
What is a Markup Language?

• A markup language is a
computer language that uses tags to define
elements within a document. It is human-readable,
meaning markup files contain standard words,
rather than typical programming syntax. While
several markup languages exist, the two most
popular are HTML and XML
7
HTML definition
• HTML stands for Hyper Text Markup
Language. HTML is the standard markup
language for creating Web
pages. HTML describes the structure of a Web
page.
8
Course Software
Web browser
Text Editor

9
History of HTML

10
Save and view HTML files

11
What does an HTML tag look like?

12
HTML Tags
Empty/Non-
Container
Container
Tags
Tags

13

14
Basic HTML structure

15
HTML Tags
<HTML> These tags enclose the entire Web page document.
…………
</HTML>
<HEAD> These tags enclose the Head part of the document

.............
</HEAD>
<TITLE> These tags enclose the title of the document. This text
…………… appears in the title bar in the browser and on the
</TITLE> bookmark list if someone bookmarks your web page.
<BODY>…… Contains all the contents of html document such as

</BODY> text,image,table,list etc

16
Sample HTML coding

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd"> <html>
<head>
<title>Example page</title> <meta http-
equiv="Content-Type" content="text/html;
charset=windows-1252">
</head>
<body> <h1>This is a heading</h1> <p>This is an
<b>example</b> of a basic HTML page.</p>
</body>
</html>
17
• The DOCTYPE line describes what version of HTML the

page was written in so that an Internet browser can
interpret the text that follows.
• The <html> opening tag lets the browser know that it is
reading HTML code.
• The <head> section contains information about the page,
such as its title, meta tags, and where to locate the CSS file.
• The <body> section contains everything that's viewable on
the browser. For example, all the text seen here is
contained in the body tags.
• The <h1> tag is the visible heading of the page.
• The <p> tag is a paragraph of text. Most web pages (like
this one) have several paragraph tags.
• Contained in the paragraph is the <b> tag that bolds the
word example in the paragraph.
• Finally, the closing tags wrap each of the above tags.
18
19
The <title> element must be located inside
a) The <body> element

b) The <head> element
c) The <title> element
d) None of these
20
Header Tags
<H1>Header 1 -- Giant-sized and bold </H1>

<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>

21
Header tags (Output)
H1 = Giant-sized and bold

H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold
H6 = Tiny and bold

22
Text Formatting Tags

Tags Results
<I>..</I> These tags enclose the entire Web page document.Italics
<B>…..</B> These tags enclose the Head part of the document.BOLD
<U>...</U> These tags enclose the title of the document. Underline

This text appears in the title bar in the browser and on the
bookmark list if someone bookmarks your web page.
<P> …</P> Paragraph
……<br>…. Line break

23
Text Formatting Tags
Tags Result
<FONT FACE = “fontname”> … </FONT> To change the font of the enclosed
text
<FONT SIZE=n> …. </FONT> To change the size of text
<FONT COLOR=“red”>…. </FONT> To change the font color

TEXT.html Browser output 24
<HTML>
<HEAD>
<TITLE>TEXT SAMPLE</TITLE>
</HEAD>
<BODY BGCOLOR="CYAN">
<MARQUEE>WEB TECHNOLOGY</MARQUEE>
<H1 ALIGN="CENTER">INTRODUCTION TO
WEB TECHNOLOGY</H1>
<H2 ALIGN="CENTER">HYPER TEXT MARKUP

LANGUAGE</H2>
<P> <FONT face="arial" COLOR="RED"

size="3">The web has gone through many
changes over the past few decades, but HTML
has always been the fundamental language used
to develop webpages.</FONT></P>
<P ALIGN="JUSTIFY"> Interestingly, while

websites have become more advanced and
interactive, HTML has actually gotten simpler. If
you compare the source of an <B>HTML5</B>
page with a similar page written in <I>HTML 4.01
or XHTML 1.0</I>, the HTML5 page would
probably contain less code. <BR>This is because
modern HTML relies on <U>cascading style
sheets</U> or <U>JavaScript</U> to format
nearly all the elements within a page.</P>"
<H6>VISIT AGAIN</H6>
</BODY>
</HTML>
25
HTML EXERCISES

26
Thank
You

HTML 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML 3

Uploaded by

Copyright:

Available Formats

1

Prepared by:- Shilpa Jackson

Prepared by:- Shilpa Jackson

Prepared by:- Shilpa Jackson

What is the full form of HTML?

What is a Markup Language?

Prepared by:- Shilpa Jackson

Prepared by:- Shilpa Jackson

Save and view HTML files

Prepared by:- Shilpa Jackson

What does an HTML tag look like?

Prepared by:- Shilpa Jackson

Prepared by:- Shilpa Jackson

Basic HTML structure

Prepared by:- Shilpa Jackson

<HEAD> These tags enclose the Head part of the document

<BODY>…… Contains all the contents of html document such as

Prepared by:- Shilpa Jackson

Sample HTML coding

• The DOCTYPE line describes what version of HTML the

The <title> element must be located inside

a) The <body> element

<H1>Header 1 -- Giant-sized and bold </H1>

Prepared by:- Shilpa Jackson

Header tags (Output)

H1 = Giant-sized and bold

H6 = Tiny and bold

Prepared by:- Shilpa Jackson

Text Formatting Tags

<I>..</I> These tags enclose the entire Web page document.Italics

<B>…..</B> These tags enclose the Head part of the document.BOLD

<U>...</U> These tags enclose the title of the document. Underline

Prepared by:- Shilpa Jackson

Text Formatting Tags

Prepared by:- Shilpa Jackson

<H2 ALIGN="CENTER">HYPER TEXT MARKUP

<P> <FONT face="arial" COLOR="RED"

<P ALIGN="JUSTIFY"> Interestingly, while

Prepared by:- Shilpa Jackson

You might also like