Scribd
Upload
7K views10 pages

7-Advanced Features of HTML 1

The document provides information about advanced HTML features used in class 7 computer science at St. Joseph's Boys High School. It discusses HTML tags like <html>, <head>, <title>, and <body> that make up the basic structure of an HTML document. It also describes various text formatting tags (e.g. <b>, <i>, <u>), heading tags (<H1>-<H6>), the font tag, unordered lists (<ul>), ordered lists (<ol>), and the marquee tag. Attributes like bgcolor, text, and background are presented that can customize tags like <body>.

Uploaded by

learnkid s
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
7K views10 pages

7-Advanced Features of HTML 1

The document provides information about advanced HTML features used in class 7 computer science at St. Joseph's Boys High School. It discusses HTML tags like <html>, <head>, <title>, and <body> that make up the basic structure of an HTML document. It also describes various text formatting tags (e.g. <b>, <i>, <u>), heading tags (<H1>-<H6>), the font tag, unordered lists (<ul>), ordered lists (<ol>), and the marquee tag. Attributes like bgcolor, text, and background are presented that can customize tags like <body>.

Uploaded by

learnkid s
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/ 10

ST JOSEPH’S BOYS HIGH SCHOOL

COMPUTER SCIENCE
CLASS 7
ADVANCED FEATURES OF HTML

 HTML
 HTML stands for Hyper Text Markup Language.
 It is a standard markup language for creating web pages that contain both text and
graphics.
 It is written in the form of HTML elements.
 It describes the structure of a web page.
 Basic Structure of a HTML document
<html>
<head>
<title>
Title of the web page
</title>
</head>

<body>
Text, which you want to show on your web page will be given here.
</body>
</html>

 Head Section: It provides general information about the document. It contains the title
tag which defines a title for the page or the browser’s title bar.

 Body Section: It contains the text that gets displayed on the web page along with the
other tags and attributes.

 Every HTML document contains the four primary tags.


<html>,<head>,<title>,<body>

 Tags: Tags are the building blocks of a web page. They have elements that define how
the information on a web page is displayed.

 Attributes: It is the property that provides additional information about an HTML


element. It enhances the functionality of a tag.

1
Attributes consists of two parts, a name and value.

Eg: bgcolor = “blue”

Name value

 Elements: An HTML element consists of an ON tag, the content, and an OFF tag.
a) Container elements: These elements include both ON and OFF tags.
Eg: <html>…</html>
<head>…</head>
<title>…</title>
<b>…….</b>
<center>….</center> and so on.
b) Empty elements: These elements have only ON tags. They do not have OFF
tags.
Eg: <br>

 <body> tag has following attributes namely,


a) bgcolor - used to change the background color of the web page.
b) text - Change the color of the text.
Eg: <body bgcolor = black text = white>
c) Background - used to insert an image as a background wall paper to a
web page.
Eg: <body background = “path (address) of the image/URL” text = “red”>
Where, URL: Uniform Resource locator is the address of a given unique
resource on web.

 HTML tags and attribute names are not case-sensitive, so <HEAD>, <Head> and <head>
have the same meaning.

 Creating an HTML Document


Follow the given steps:
1. Open Notepad text editor.
2. Type the HTML code.
3. Save the document with a suitable name and with extension .HTML.
4. Open the saved document using any web browser (Eg: Google chrome/ Mozilla
Firefox/ Microsoft edge) application.

 Text Formatting tags


<b> - bold tag: Used to make the text bold.
Eg : <b>logix</b>
O/P: logix
2
<i> - italic tag: Used to make the text appear in italic format.
Eg: <i>logix</i>
O/P: logix

<u> - Underline tag: Used to underline the text.


Eg: <u>logix</u>
O/P: logix

<center> - places the text towards the center of the webpage.


Eg: <center>logix</center>

 Heading Tags
They are used to define heading levels in an HTML document.

<H1> Text </H1> - displays the text in the largest size.


<H2> ……<H2> - lower levels are used for sub headings.
.
.
.
<H6> ……<H6>

 Font Tag: It is used to display the text in the user desired style of font.
Eg: <font face = “calibri” size = “4” color = “green”>
Computer Science
</font>
O/P: Computer Science
Font tag has 3 attributes namely,
1. Face : used to specify the font type(name of the font).
2. Size: specifies the size of the font.
3. Color: specifies the font color
 Basic Program

<html>
<head>
<title> Success </title>
</head>

<body bgcolor = “blue” text = “yellow”>


Success is a ladder, you cannot climb with your hands in the pockets.
</body
</html>

3
1. LISTS
 A list is the most efficient way of presenting information.
 Lists are used to display list of items/information in an organized manner.
 A list can be defined as the Unordered List and Ordered List.

 UNORDERED LIST
 Unordered list is used to display data in any random format.
 Unordered list is called as bulleted list.
 <ul> is used to implement unordered list.
 TYPE attribute of <ul> is used to specify the shape of bullet.
Shape can be circle - , square - or disc -
 The default shape of the list will be disc.
Syntax :
<ul type = “square”> Where
<lh> List Heading </lh> <ul> - specifies Unordered list.
<li> List item1 <lh> - is used to specify list heading.
<li> List item2 <li> - is used to specify list item. It is
</ul> an empty tag.

Program 1- Unordered List

<html>
<head>
<title> LIST1 </title>
</head>

<body bgcolor = blue text = white >


<ul type= "square">
<center> <h2> Unordered List </h2> </center>
<font face="algerian" size="3" color="yellow">
<lh>Continents</lh>
<li> Asia
<li> Africa LIST1
<li> North America Unordered List
<li> South America Continents
<li> Antarctica  Asia
<li> Europe  Africa
<li> Oceania  North America
</ul> </font>  South America
</body>  Antarctica
 Europe
</html>
 Oceania

4
 ORDERED LIST
 Ordered list is used to display data in specific numbering format.
 Ordered list is called as numbered list.
 <ol> is used to implement Ordered list.
 The Type attribute of <ol> is used to specify the type of numbering format as
follows :

Number Style Result Description


<OL Type = “A” A,B,C Upper case letters
<OL Type = “a” a,b,c Lower case letters
<OL Type = “I” I,II,III Upper case Roman
numbers
<OL Type = “i” i, ii, iii Lower case Roman
numbers
<OL Type = “1” 1,2,3 Sequence of numbers
(default)

Syntax:
<ol type = “A”>
<lh> List Heading </lh>
<li> List item1
<li> List item2
</ol>

Where
<ol> - specifies Ordered list.
<lh> - is used to specify list heading.
<li> - is used to specify list item. It is an empty tag.

Program 2 - Ordered List

<html>
<head>
<title> LIST2 </title>
</head>

<body bgcolor = yellow text = red >


<ol type= "A">
<center> <h1> Ordered List </h1> </center>
<font face="algerian" size="3" color="blue">
<lh>Continents</lh>
<li>Asia

5
<li> Africa
<li> North America LIST2
<li> South America Ordered List
<li> Antarctica Continents
A. Asia
<li> Europe
B. Africa
<li> Oceania C. north America
</ol> D. south america
</font> E. Antarctica
</body> F. Europe
G. Oceania
</html>

 Start Attribute of Ordered List <ol>


The start attribute is used to begin the list numbering from a specific value.
Eg: Output:
<ol type = “1” start = “5”> LIST2
<lh> Continents </lh> Unordered List
<li> Asia Continents
<li> Europe 5. Asia
6. Europe
<li> Africa 7. Africa
<li> Antarctica 8. Antarctica
9. Oceania
<li> Oceania
</ol>

 Reversed Attribute of Ordered List <ol>


The reversed attribute is used to display the list numbering in the reversed order as
per type value.
Eg: Output:
<ol type = “1” reversed> LIST2
<lh> Continents </lh> Unordered List
<li> Asia Continents
<li> Europe 5. Asia
4. Europe
<li> Africa 3. Africa
<li> Antarctica 2. Antarctica
1. Oceania
<li> Oceania
</ol>

6
2. Marquee
The marquee tag helps in displaying the scrolling text on the web page.

Program 3 - Marquee

<html>
<head>
<title> MARQUEE </title>
</head>

<body bgcolor = black >


<center>
<marquee behavior = “scroll” direction = “right” scrollamount = “20”
height= “100%” width= “150%” hspace = "50">
</center>
<font face="algerian" size="6" color="yellow">
CHANDRAYAAN-3
</marquee>
</font>
</body>
</html>

 Attributes of marquee

Attributes Values Description


Bgcolor Color name Defines the background
color of the marquee.
Behavior Scroll, slide, alternate Defines scrolling type.
Direction Top, down, left, right Defines the direction of
scrolling the content.
Loop Number Specifies how many times
the content moves, The
default value is infinite.
Scrollamount Px Defines the scroll speed
Height Px or % Defines the height of
marquee.
Width Px or % Defines the width of the
marquee.
hspace Px Specifies horizontal space
around the marquee
vspace Px Specify vertical space
around the marquee
7
3. Inserting Image

 Image tag - <img> is used to insert an image into a webpage.

Syntax: <img src= “Name or path of the image file/URL” height= “value”
width= “value”>

Where,
src (source): It is an attribute of image tag, used to specify the address of the
image.
URL: Uniform Resource locator is the address of a given unique resource on web
Height and width: alters the size of the image either in the form of integer or a
percentage value.

Program 4 - Inserting image

<html>
<title> INSERT IMAGE </title>
</head>

<body bgcolor = black text = yellow>


<center>
<h1> CHANDRAYAAN-3 </h1>
<img src = “Chandrayaan-3.jpg” style= height:70%;width:50%>
<p>
Chandrayaan-3 is the third Indian lunar exploration mission under the<br> Indian
Space Research Organisation’s (ISRO) Chandrayaan programme.<br> It consists
of a lander name Vikram and a rover named Pragyan.
</p>
</center>
</body>
</html>

 Note:

 By default image will be always inserted to the left of the web page.
 To align an image to the right of the text.
Float property is used.

Eg: <img src= “Chandrayaan-3.jpg” style = float:right;height:70%;width:50%>

8
O/P: The image will appear to the right of the text.

 Alt attribute : It will specify the text as an alternate to the image.

Eg: <img src= “Chandrayaan-3.jpg” alt= “Image of Chandrayaan-3”


style= float:right;height:70%;width:50%>

4. Creating Paragraphs
Attributes of paragraph :
<p style=text-align:center;color:red > …. </p> paragraph will be aligned to
the center of the web page.
<p style=text-align:right;color:red > …. </p> paragraph will be aligned to
the right of the web page.
<p style=text-align:justify;color:red > …. </p> paragraph will be justified

Program 5 - Creating Paragraphs

<html>
<title> Creating Paragraphs </title>
</head>

<body bgcolor = yellow>


<p style=text-align:center;color:blue >
<b> <h1>THOUGHT OF THE DAY</h1> </b>
</p>

<p style=text-align:justify;color:red>
<b> To be successful, you need to follow the path of honesty, truthfulness<br>
and hardwork. The path to success is never so easy and has no alternative.<br>
A person will have to cross all the hurdles and still be strong enough to
walk through the path.</b>
</p>
<p style=text-align:right;color:green>
<b> KIPS TEAM</b>
</p>
</BODY>
</HTML>
9
Creating Paragraphs

THOUGHT OF THE DAY


To b To be successful, you need to follow the path of honesty, truthfulness
and hardwork. The path to success is never so easy and has no
alternative. A person will have to cross all the hurdles and still be
strong enough walk through the path.
KIPS TEAM

**********************

10

You might also like