Scribd
Upload
12 views

Class 7 Computer Science Hyper Text Markup Language Notes

HTML (Hypertext Markup Language) is used to structure and present content on the web. An HTML file uses tags to tell a web browser how to display text, images, and other content. Common HTML tags include headings, paragraphs, line breaks, and bold/italic text. Images can be inserted into a webpage using the <img> tag. HTML code can be written in a plain text editor and saved with an .html file extension.

Uploaded by

rakeshkumarsingh1403
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
12 views

Class 7 Computer Science Hyper Text Markup Language Notes

HTML (Hypertext Markup Language) is used to structure and present content on the web. An HTML file uses tags to tell a web browser how to display text, images, and other content. Common HTML tags include headings, paragraphs, line breaks, and bold/italic text. Images can be inserted into a webpage using the <img> tag. HTML code can be written in a plain text editor and saved with an .html file extension.

Uploaded by

rakeshkumarsingh1403
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Downloaded from https:// www.studiestoday.

com

Lesson-2
Hyper Text Markup Language (HTML)

m
co
HTML:
You will learn

.
HTML is the building block for web pages.

ay
Prerequisites: You will need a text editor,

d
such as Notepad and an Internet browser,  Heading (H1 to H6)
 <Br>, <hr>

to
such as Internet Explorer or Netscape. ,<comment>
 Background Color
es
,font tag(size, face,
What is an html File? color)
di
i. HTML is a format that tells a computer  Text alignment
(center, left , right)
tu

how to display a web page.


ii. An HTML file is a text file containing
.s

small markup tags


w

iii. The markup tags tell the Web browser


w

how to display the page


//w

iv. An HTML file must have an htm or html


file extension
s:
tp

What are HTML tags?


ht

i. HTML tags are used to mark-up HTML elements.


ii. HTML tags are surrounded by the two characters < and >.
iii. HTML tags normally come in pairs like <b> and </b>.
iv. The first tag in a pair is the start tag, the second tag is the end tag.
v. HTML tags are not case sensitive, <b> means the same as <B>.

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com

Tag Description

<html> This tag marks the start of an html document

m
co
<head>...</head>This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.

.
ay
<title> The <title>tag is used inside the <head> tag to mention the document title.

d
to
<body> This tag represents the document's body which keeps all the contents of a web page- text,
es
images, sound etc.
di

<Hn> This tag represents the heading tags of different sizes.


tu

Where n is the number start from 1…6


.s

Like <H1>,<H2>……..<H6>
w
w

<center> This tag is used to write a line or text in center


//w

<p> This tag represents a paragraph.


s:

<p align=left/right/center>This tag is used to write paragraph alignment in html.


tp

<br> This tag is used to insert new line or insert enter in html
ht

Bold, Italics, Underline :<b> tag is used to make a text bold in html.

<i>tag is used to make a text italics in html.

<u>tag is used to make a text underlined in html.

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com
Background color and text color: <body bgcolor ="yellow" > tag is used to change the
background color of an html page and <body text=”red”> changes text color.

How to create webpages?

m
1.click Start-> All Programs->Accessories. Open notepad and type the code given below

co
<html>

.
ay
<head>

d
<title>My First Webpage

to
</title> es
</head>
di
<body>
tu

<center><h1> Webpage </h1></center>


.s

This is my first homepage.


w

<b>This text is bold</b>


w

<i> This line is in italics text. </i>


//w

<u> This line is in underline text. </u>


s:

<br>This is the 1st line.


tp

<br>This is the 2nd line.


ht

</body>

</html>

2. Click File, Click Save as


3.Type a Name of your webpage dot html.e.g.: -mypage.html

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com
4. Open the Place where you saved your file. Double click on the file.

Assignment Question

Q. Write the code to create the following Webpage with background color ‘green’ and text color ‘red’

m
co
My School

.
ay
Im a student of K.V,NFR Maligaon. I read in class 7.

d
to
es
di

<html>
tu

<head>
.s
w

<title>My Webpage
w

</title>
//w

</head>
s:

<body bgcolor ="yellow" text=”red”>


tp

<center><h1> My School </h1></center>


ht

<p align=left>Im a student of K.V,NFR Maligaon. I read in class 7. </p>

</body>

</html>

Q. Write an html code to show the working of various Paragraph alignment tags

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com
<html>

<head>

<title>

Paragraph in html

m
</title>

co
</head>

.
<body>

ay
This is an html document.

d
to
<p align=left>This is a left paragraph in html </p> es
<p align=right>This is a right paragraph in html </p>
di
<p align=center>This is a center paragraph in html </p>
tu

</body>
.s

</html>
w

Inserting Images in Webpage:


w
//w

We can insert images to our Html pages to make it look more beautiful. <img> tag is used to insert
images in webpage. There are two ways to insert images in a webpage:
s:

1. Internal:
tp

Steps: 1. Open My Pictures or Sample Pictures or any folder containing pictures Copy the
ht

picture you want

2. Create a folder on the Desktop or in My Documents

3.Open the Folder, and paste the Picture.

4.Right click, and click new and click text document.

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com
5.Open the text document and type the code given below.

<html>

<head>

<title>

m
Webpage with Pictures

co
</title>

.
</head>

ay
<body bgcolor="yellow">

d
to
<img src=Name of image.jpg> es
</body></html>
di
4.Save the file giving a name with dot html(mypage.html).
tu

5.Open the webpage using browser


.s

2. External: Here we type the location or address of the picture where it is, instead of simply
w

writing the name of the picture.


w
//w
s:
tp
ht

Steps:

1.Open a text document and type the code given below.

<html>

<head>

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com
<title>

Webpage with Pictures

</title>

</head>

m
<body bgcolor="yellow">

co
<img src=c:\Windows\Web\Wallpaper\Name of image.jpg>

.
</body>

ay
</html>

d
to
2.Save the file giving a name with dot html(mypage.html).

3.Open the webpage using browser


es
di
To insert images with adjusted height and width: We can change the width and height of the
inserted image in our webpage by simply writing the ‘width’ and ‘height’ options inside the <img> tag
tu

<img src=Name of image.jpg width=50 height=50>


.s
w

SUMMARY
w
//w

1. HTML is a format that tells a computer how to display a web page; it is the building block for
web pages.
s:

2. HTML tags normally come in pairs like <b> and </b>.


tp

3. <html> This tag marks the start of an html document


4. <head>...</head>This tag represents the document's header which can keep other HTML tags
ht

like <title>, <link> etc.


5. <title> The <title>tag is used inside the <head> tag to mention the document title.
6. <body> This tag represents the document's body which keeps all the contents of a web page-
text, images, sound etc.
7. <h1> ,<h2>,……<h6>This tag represents the heading tags of different sizes.

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com
8. <center> This tag is used to write a line or text in center
9. <p> This tag represents a paragraph.
10. <img> tag is used to insert images in webpage

m
EXERCISES

. co
A. Fill in the blanks

ay
i. _____________ is the building block of HTML

d
ii. HTML document must have .html or ___________ extensions.

to
iii. _____________tag is used to write line or text in center.
es
iv. _____________tag is used to set paragraph.
v. To insert image ___________tag is used.
di
tu

B. Find true or false


.s

i. HTML tags are case sensitive.


ii. <h1><h2>……..<h6> tags represent heading tags of different size.
w

iii. <p> tag is used to insert new line or insert enter in HTML.
w

iv. <img> tag is used to insert images in webpage.


//w

v. <B> tag is used to make text italics.


s:

C. Short answer question


tp
ht

i. What is HTML?
ii. Name any two attributes used with the BODY tag.?
iii. Write the HTML code to set the background color to yellow.?
iv. How would you insert image in an Html document?
v. What does the ‘n’ in the <Hn> tag indicate?

Downloaded from https:// www.studiestoday.com


Downloaded from https:// www.studiestoday.com

m
. co
ay
In the lab

d
to
1. Ankita has made the HTML document shown below, which displays headings in different
es
Sizes. Write the HTML code for creating a similar document.
di
tu
.s
w
w
//w
s:
tp
ht

2. Anita wants to create simple Web page on Input devices. Help her by listing the steps required
for creating the web page.

Downloaded from https:// www.studiestoday.com

You might also like