Scribd
Upload
139 views16 pages

CL 6 LN 8 HTML

HTML an introduction

Uploaded by

Sivashankari Rajan
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
139 views16 pages

CL 6 LN 8 HTML

HTML an introduction

Uploaded by

Sivashankari Rajan
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/ 16

ICSE Board – Class 6

HTML
AN INTRODUCTION
AGENDA
01 Overview of HTML

02 Components of HTML

03 Basic Structure

04 HTML Tags & Elements


✓ HTML Stands for Hyper Text
Mark-up Language.
✓ Hypertext Means text which
contain a link to other text.
✓ Markup language is the style

HTML of writing and presenting the


information within the text

stands for document.


Components of HTML
Tags Elements Attributes

Tags are coded instructions Attributes are keywords that provide


Opening Tag/ON tag The opening tag, closing tag and the content
additional information about HTML tags.
Closing tag/OFF tag in between the tags together form an HTML
Each attribute is followed by an ‘=‘ sign and
element.
value
Two types of tag:
1. Container tags – has both ON and OFF Eg: <B> hello </B>
tag
2. Empty tags – Only ON tag , no OFF tag
STRUCTURE OF HTML
<html>
EXAMPLE It identifies the document type. Also known as root
element. It is a container tag
<html>
<head>
<head>
Contain information about the document.. It
<title>TITLE OF PAGE</title>
contain title tag
</head>
<body> <title>
………………. Title is displayed on the title bar. It is a container
……………….. tag
</body>
</html> <body>
It defines the document body which includes text,
image, links etc.
HTML EDITOR
01 02
WYSIWYG
It stands for What You See Is What TEXT EDITOR
You Get It use HTML tags to create a
It allows you to create a web page webpage. Example: notepad, word
without using HTML tag. pad, etc.
Eg: Microsoft Frontpage, Adobe
Dream Weaver, Microsoft
Expression
To create, save & view HTML
Step-1: O p e n t e x t e d i t o r N o t e p a d ( c l i c k
Document on Star t→ A l l Programs→ Accessories Notepad)
Step-2: Enter the following lines of code:
<HTML>
<HEAD>
<TITLE>
My first Page
</TITLE>
</HEAD>
<BODY>
WELCOME TO MY FIRST WEB PAGE
</BODY>
</HTML>

Step-3: Save the file as myfirstpage.html (go to File-Save As


give File name: myfirstpage.html-choose save as type: All
Files-click save)
Step-4: Viewing document in web browser (open Internet
Explorer-click on File-Open-Browse-select the file
myfirstpage.html-click open-click ok
HTML HEADING
HTML heading tags are used to display the text slightly bigger and
bolder than the normal body.
Syntax: <Hn> heading </Hn>
BODY TAG It is a container tag, consist of content and
the layout of a webpage.

To set background color.


bgcolor <body bgcolor = “ blue”>
<body bgcolor = “ #FFA%00”>

background Set an image in the background


<body background = “C:\art.jpeg>”

IDEA 1
Set the color of the text.
Text <body text = “black”>

Set the 4 margins


Margin <body leftmargin = “50”>
Line break tag
The empty tag <BR> is used, where the text needs to start from a new line and not
continue on the same line. To get every sentence on a new line, it is necessary to
use a line break.
Example:
<BODY>National Institute of Open Schooling <BR>
B-31B, Calipash Colony <BR>
New Delhi-110048</BODY>
Output:
National Institute of Open Schooling
B-31B, Calipash Colony
New Delhi-11004
Paragraph tag
The <p> tag marks the beginning of the new paragraph in a webpage. It leaves a
blank line after the paragraph. It is a container tag.
Syntax: <p align = “value”>
Example:
<p align = “left”>
<p align = “right”>
<p align = “center”>
<p align = “justify”>
FONT TAG the font tag is used to change the size, color and typeface
of the text on an HTML page

01 Face It sets font type. <font face = “arial”>

02 color
It sets the color of the text. <font color = “blue”>

03 size
Set the size of the text. The value lines between 1 to 7
<font size = “4”>
HORIZONNTAL RULE
Attribute Description Example

Size It sets the thickness of the horizontal <hr size = “6”>


line in pixels. Default value is 2 pixels

width It sets the widthof the horizontal line in <hr width = “60%”>
pixels/percentage. <hr width = “60”>

align It sets the alignment – left, right, center <hr align = “left”>
& justify

Color It sets the color of line <hr color = “green”>

noshade It displays a solid stripe across the page <hr noshade>


Bold, Italic, underline TAG

❑<b> tag makes the text appear bolder as


compared to normal text.
<b> helloworld </b>
❑<i> tag makes the text appear italicized
<i> helloword,/i>

❑<u> tag inderline the text

<u>01helloworld</u> Topic 02
Topic Topic 03 Topic 04
Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit Lorem ipsum dolor sit
amet, consectetur amet, consectetur amet, consectetur amet, consectetur
adipiscing elit. adipiscing elit. adipiscing elit. adipiscing elit.
QUESTIONS
Book back question 1-5
6.Describe HTML?
7. Write the steps to view HTML codes using webb
browser?
8. What is font tag and explain its attributes?
9. Explain the structure of HTML document?
10. Explain paragraph tag and its attributes?

OBSERVATION
Page no 138: B question.
THANK
YOU

You might also like