Scribd
Upload
26 views21 pages

Chap 4 - HTML

Chapter 4 introduces HTML, the standard markup language for creating web pages, and provides a simple HTML program example. It explains the structure of HTML documents, including elements, headings, and how to link web pages. Additionally, it includes exercises for practicing HTML coding and creating hyperlinks.

Uploaded by

Rizwan Khan
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
26 views21 pages

Chap 4 - HTML

Chapter 4 introduces HTML, the standard markup language for creating web pages, and provides a simple HTML program example. It explains the structure of HTML documents, including elements, headings, and how to link web pages. Additionally, it includes exercises for practicing HTML coding and creating hyperlinks.

Uploaded by

Rizwan Khan
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/ 21

Chapter 4

HTML
HTML Introduction
• HTML stands for Hyper Text Markup Language
• It is the standard markup language for
creating Web pages
• HTML describes the structure of a Web page
• There are different versions of HTML, latest
one is HTML5
A Simple HTML Program
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Output

My First Heading
My first paragraph
<!DOCTYPE>
• <!DOCTYPE> is called declaration
• It represents the document type, and helps
browsers to display web pages correctly.
• It must only appear once, at the top of the
web page.
• The <!DOCTYPE> declaration is not case
sensitive i.e. you can also use <!doctype> but
it is recommended to use in upper-case.
• The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
Elements
• Other instructions under <!DOCTYPE> are
called Elements, i.e.
<html>, <head>, <title>, </title>, </head>,
<body>, <h1>, </h1>, <p>, </p>, </body>,
</html>
Elements cont…
• <html> is called Root Element of html page
and shows the start of an html program.
• </html> is also Root Element of html page and
shows the end of an html program.
• Between the elements <head> and </head>,
the program has Meta Information of the html
page for our understanding e.g.
<title>My first web page</title>
It is not displayed on output when we run our
program but shown in browser’s title bar.
Elements cont…
• Between <body> and </body> elements, are
all executable instructions of the html
program i.e. when program is run, the output
is shown.
• Within <body> element are the contents like
headings, paragraphs, images, hyperlinks,
tables, lists, etc.
• <h1> element defines a large heading
• <p> element defines a paragraph
Closing an Element
• When an Element starts, it must be closed by
a /
• E.g. <html> and </html>
<head> and </head>
etc.
Heading Levels
• There are 6 levels of headings h1, h2,….h6
• Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Output

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Exercise 1
Write an HTML code which displays the following output:
-------------------------------------------------------------------------------------
XYZ CORPORATION  heading level 3
History  heading level 5
Our company was formed in the year 2005 by  paragraph 1
Mr. Shahid Hussain.
The company started its business with gents  paragraph 2
ready-made garments but introduced ladies garments in 2010. The
company at that time had assets of around 25 million rupees.
Mr. Shahid died in 2015 and his son Mr. Javed Hussain  paragraph 3
took over the business and increased company’s assets by 45 million
rupees at the end of 2023.
How to run HTML programs
• Write your html program in an editor e.g.
Notepad, Visual Studio etc.
• Save the program with extension .html
e.g. myprog.html
• Double-click on this file name.
• The default browser will run the program and
give results on monitor.
tag
• tag is a set of angle brackets that provides
instructions to a web browser.
• <a> tag defines a hyperlink.
• <a> must be closed as </a>
• Html has a large number of tags.
Linking a Webpage with a Website
General Form:
<a href=“website URL”>Website title</a>
where, href: hyper reference
e.g.
<a href=http://www.ssuet.edu.pk/>Sir Syed University</a>
When we run it, it will show a hyper reference
Sir Syed University
When we click on it, the computer will load
Sir Syed University website
Exercise 2
Write an html code which displays:

Suzuki Pakistan
Pakistan Steel
Pakistan Cricket Board

When click on each of them, will display


appropriate website.
Find out their URLs from NET yourself.
Linking Web Pages - Example
<!DOCTYPE html>
<html>
:
:
<body>
<h3> ABC STATIONERS </h3>
<p>
<a href = “about.html”> About Us </a>
</p>
</body>
</html>
----------------------------------------
Save this page as home.html
Linking Web Pages - Example
<!DOCTYPE html>
<html>
:
:
<body>
<p>
ABC Stationers was formed in the year 2000.
The founder of the company was Mr. A.J. Williams.
</p>
</body>
</html>
----------------------------------------
Save this page as about.html
Linking Web Pages - Example
• When we run “home.html”, it will display:
ABC STATIONERS

About Us

• When we click on “About Us”, will display:

ABC Stationers was formed in the year 2000.


The founder of the company was Mr. A.J. Williams.
Assignment 1
• Write an html code which displays:
ABC STATIONERS
==============
About Us
Our Products
Announcements
Careers
Contact Us

• About Us, Our Products, ….. are other


web pages which are linked with this “home”
page.
• Fill-up appropriate information in these pages.
.

End of Chap 4

You might also like