Scribd
Upload
9 views

Class6th - Introduction HTML 2021

Uploaded by

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

Class6th - Introduction HTML 2021

Uploaded by

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

Class VI

COMPUTERS

DPS Vasant Kunj


Chapter 7
Introduction to
HTML

DPS Vasant Kunj


HTML

HTML Basics
• HTML stands for HYPER TEXT MARKUP LANGUAGE

• It is used to create webpages.

• Two basic tools to create an HTML document are :


➢ A text editor – For example Notepad
➢ A web browser- For example Microsoft Internet explorer, Google Chrome

• Every HTML file is saved with the extension .htm or .html


DPS Vasant Kunj
HTML

HTML Tags
An instruction in HTML is given in the form of tags.

Syntax: <Tag Name> String of text</Tag Name>


Example: <B> RAJAT </B> makes the word RAJAT bold.

Types of Tags :
➢ Container elements: The tags with opening and closing tags.
For example-<B> ,<HTML>,<Body> etc.
➢ Empty elements: The tags with only opening tag .
For example - <IMG>,<HR>,<BR>
DPS Vasant Kunj
HTML

Structural tags
 Tags which define the HTML document structure are called structural tags.
The main structural tags are:-
 <HTML> Tag
Every HTML document begins with a <HTML>tag.
 <HEAD>Tag
specifies the head section. It contains <Title> tag.
 <TITLE> tag
specifies the title of the web page and is displayed in the title
bar .
 <BODY> tag
contains the main content of the web page such as the text ,
images ,lists, forms etc. DPS Vasant Kunj
HTML

Writing HTML CODE


1. Open Notepad and write following code:

2. Save the above code as Firstpage.html on Desktop.


DPS Vasant Kunj
HTML

Viewing the Output


 An icon of web browser like or is created on
desktop.
 Click on it to view output.

DPS Vasant Kunj


HTML

HTML Attributes
 Attributes help in modifying the display properties like colour , background, images,
text alignment, fonts of a tag.

Syntax for giving attribute :-


<TAG NAME ATTRIBUTE = VALUE >……</TAG NAME>

DPS Vasant Kunj


HTML

Attributes of the <BODY> tag


ATTRIBUTE NAME EXPLANATION

BGCOLOR Changes the background color to the specified color given as its value.
e.g. < Body Bgcolor="Blue”>

Changes the text color to the specified attribute value


TEXT
e.g. < Body text="Red">

Specifies the name of the image file that will be used as the background
BACKGROUND
of web page
<Body Background=”Filename .jpg/.jpeg/.gif”>
e.g. < Body Background=”texture.jpg”>

DPS Vasant Kunj


HTML

Example of attributes of <Body> tag

DPS Vasant Kunj


Adding image as background

DPS Vasant Kunj


HTML

Formatting Tags
 Formatting tags or text tags are used to define the format and presentation of text
in the webpage.

 Text tags or formatting tags are written within <Body> tag.

DPS Vasant Kunj


HTML

<FONT>tag
 The font style, size and color of the text can be changed using <Font> tag.
Attributes of <Font> Tag

Explanation
Attribute Name

Changes the size of the text


SIZE
Default value of Size is 3.
Changes the color of the text to the specified value.
COLOR
Colour can be specified by giving colour name.
It specifies the type of the font
FACE
Font type can specified by giving Font name
DPS Vasant Kunj
HTML

FEW FORMATTING TAGS


 <BR>
 <CENTER>
 <Hn>
 <P>
 <FONT>
 <B><I><U>
 <HR>
 <SUP>,<SUB>
 <MARQUEE>
 <! …>
DPS Vasant Kunj
HTML

<BR>tag
 To display text in the new line <BR> tag is used.
 <BR> is empty tag.

<CENTER>tag
 To display text in the centre of the web page <CENTER> tag is used.
 It is container tag

DPS Vasant Kunj


HTML

Example of <Br> and <Center> tags

DPS Vasant Kunj


HTML

Heading levels in HTML


 In HTML six different sizes or levels of headings can be given.

 <Hn> is the heading tag ,where n is the number from 1 to 6.

 <H1> is the biggest heading level and <H6> is the smallest .

 All heading level tags are container tags.

DPS Vasant Kunj


HTML

Example of Heading levels

DPS Vasant Kunj


HTML

<P> tag
 To start a new paragraph in HTML <P> tag is used.
 Closing tag for <P> tag is optional.
Attribute of the <P> tag is Align.

ATTRIBUTE NAME EXPLANATION

Changes the alignment of the paragraph to left , right or center.


Align
By default Paragraph is aligned to left.

Syntax : <P align=center> Text</P>


DPS Vasant Kunj
HTML

Example of Align attribute of <P> tag

DPS Vasant Kunj


HTML

Example of attributes of <Font> tag

DPS Vasant Kunj


HTML

Style tags
 Style tags are used to make text highlighted by making it bold, italics or underlined.
Three style tags are: <B>,<I>and <U>.
 <B> tag
This tag makes the text appear in bold letters.<B> tag is container tag.
Syntax: <B>Text</B>
 <I>Tag
This tag makes text appear as italics.<I> is container tag.
Syntax:<I>Text</I>
 <U> Tag
This tag makes the text appear as underlined.<U> is container tag.
Syntax: <U>Text</U>
DPS Vasant Kunj
HTML

Example of Style tags <B>,<I>,<U>

DPS Vasant Kunj


HTML

<HR>tag and its attributes


 <HR> tag is used to draw horizontal line.
Attributes of <HR> tag are:
Sets the Alignment of the horizontal line on the browser screen, to
LEFT RIGHT or CENTER.
ALIGN By default it is aligned to the center of the screen.

Sets the thickness of the horizontal rule


SIZE
Sets the width of the horizontal rule on the screen. It can be set to a
WIDTH fixed number of pixels or as percentage

DPS Vasant Kunj


HTML

Example of <HR> tag and its attributes

DPS Vasant Kunj


HTML

<SUB> TAG
 This tag makes the enclosed text appear as subscript that is below the
line of text as compared to the rest of the text.
For example: Al<SUB>2</SUB> gives Al2

<SUP> TAG
 This tag makes the enclosed text appear as the superscript that is above
the line of text as compared to the rest of the text.
For example: x<sup>3</sup> gives x3

DPS Vasant Kunj


HTML

<MARQUEE> tag
 Marquee feature gives a moving text in the output.

Inserting Comments using <! … >


 Comments or remarks are the statements in the program which are written by the
programmer for his reference and are not visible in the output.
Syntax:<!comment text>
Example: <!this is a comment>

DPS Vasant Kunj


HTML

Example of
<Sub><Sup><Marquee>and Comment tags

DPS Vasant Kunj


Thank you
Stay safe and healthy

DPS Vasant Kunj

You might also like