Your Aim ©
to learn about
© Introducin
. iareducing HTML © HTML tags and attributes
ules for writing HTML Codes © HTML document structure
«ating and saving an HTML document © Basic HTML tags
esigning a web page © Editing an existing HTML document
Computers connected to the network (Internet) are either servers or clients and communicate
with each other through networking protocol. The clients send requests to the servers and the
servers respond immediately with the required data.
The server stores the files and information in the form of websites. A website is a collection of
web pages. A web page is a document that contains text, graphics, videos, audios and links to
other pages. Every web page of a website has a unique address called Uniform Resource Locator
(URL). We can use this URL to access any web page from anywhere in the world. Have you ever
wondered how these web pages are created? HTML is the most widely used language to design
web pages.
#2 INTRODUCING HTML
HTML stands for Hypertext Markup Language. Itis a markup language that describes the structure
of the web page. It allows us to create web pages “hat contain paragraphs, headings, links and
block quotes. The output of HTML web pages is same on any type of computer and on any
operating system, ie., Mac, Windows, etc.
HTML language was redesigned by Tim Berner Lee in 1989. It is @ subset of Standard
Generalized Markup Language (SGML).
Key Features of HTML
Some of the important features of HTML are:
> Itisa platform independent language.
2 Itis not case sensitive language.
jem
5 go Touchpad iPRIME (Version 1.1)}-VI + Ttallows us to build tables
Xk Itisa very easy and simple language.
{&_Itallows us to add a link on the web page.
xt
ides a flexible way to design web pages along with the te
Itprov
Hypertext gto other documents oF
Hypertext is a piece o
web pages.
Markup Language
It is a language that uses 5
the browser how to display the text.
5 ordinary text that has special feature of linkin:
pa text document and instructs
pecial symbols called Tags to mark u
Tools Needed
We require two basic tools for working with HTML:
+ HTML editor for creating and saving the HTML documents.
& Aweb browser for viewing the HTML documents. A web browse
that allowsus to access the web pages on our computer. Some commonly used web brow
are Google Chrome, Mozilla Firefox, Internat Explorer, et
1 is an application software
ers
Types of HTML Editor
There are mainly two types of HTML editors named WYSIWYG editor and Text editor. Let us
now discuss these editors.
WYSIWYG Editor
WYSIWWG stands for What You See Is What You Get. This type of editors allow the developer
to see what the end result will look like when the document is created. These editors provide
various tools and graphical interface where the web pages are designed. Examples of WYSIWYG
editors are Adobe Dreamweaver, Amaya, Google Web Designer.
Text Editor
We can create HTML documents using normal text editors like Notepad or Wordpad. The user
should have a proper knowledge of the HTML commands to develop a web page.
#1 HTML TAGS AND ATTRIBUTES,
‘As we know that HTML is a markup language. It uses tags to markup the content of the web
pages. These tags also have their attributes.
Let us learn more about tags and attributes.
Tags :
Tags are the basic building blocks of a web page. They tell the browser how the information is
e cee ‘on the web page. Tags do not appear in the browser window but they affect the
lisplay of the text and non-text items in it. Each tag in HTML follows specifi
HTML tags are not case sensitive. eae eeel
HTML—An Introduction 2 83 _
Na an
(TML document, a tag name begins with an opening angular bracket (<) and ends with
losing angular bracket (>). For example,
content
Opening tag Closing tag
Both opening and closing tags are same. The only difference is that the closing tag contains a
forward slash in front of the tag name. Most of the tags in HTML have opening and closing tags.
A combination of opening tag, content, and closing tag is called an element.
‘The HTML tags can be categorised as:
*
Container Tags: The tags that have both opening and closing tags are called Container
Tags.
For example
tags do not enclose any data.
Empty Tags: Empty tags contain only opening tag. They do not have a closing tag. These
For example
,
, etc,
HTML tags can also be further classified as:
* “Block Level Tags: The block level tags take up the full width available and by default begin
on a new line. Some of the block level tags are Paragraph
, headings
to ,
Horizontal Rule
, etc,
Text Level Tags: The text level tags are used to mark up parts of text. These tags do not
start with new line. Some of the text level tags are Bold , Superscript , Italic ,
Subscript , etc
Nesting of Tags
Nesting of tags means that you can start a new tag before closing the previous tag. The only
Point to remember is that tags are nested on LIFO principle, that is, Last In First Out. This means
that the tag that has been opened last needs to be closed first.
Attribute
An attribute is a property that provides some additional information about a tag. It enhances the
functionality of a tag. It is always specified inside the opening tag. All attributes consist of two
parts ~ a name and a value.
The ‘name’ is the property that you want to set.
The ‘value’ is what that you want for the respective property.
For example
The BGCOLOR attribute of the tag is used to add a background colour to the body of
the web page.
Geiprmcres IPRIME (Version 1.1)-VI oc pg
y ag Tog
‘
the width of the horizontal line in
For example
The WIDTH is the attribute of the
tag which specifies
pixels or percentage. By default, the width is 100%.
47 RULES FOR WRITING HTML CODES
Container tags should always be closed properly:
Values given to the attributes should be enclosed within the double quotes
Tag name should not contain spaces.
There should be no spacs between < and > ina tag.
Tags must be nested correctly.
#2 HTML DOCUMENT STRUCTURE,
A HTML document is a text file containing markup tags. The markup tags tell the Web browser
how to display the web page. A HTML file is saved with .htm or .html extension.
Basic Structure of HTML Document is as follows:
HH KH
Title of the web page
Content of the page
A HTML page is divided into. two sections called Head and Body.
‘which is not to be shown on the web page.
2 Head contains the information
3 Body contains the information which is te be shown on the web page.
&g CREATING AND SAVING AN HTML DOCUMENT
Let us start with the designing of first web page by using the basic tags and follow these steps
Open the Notepad and write the following
Step 1
HTML code:
snes [EGE SST ne neh weer,
Besreat
FIRST WEB PAGE
l
HTML code in Notepad
L
of HTML
2
ant,
HTML—An Introduction ¢ 95 43
wad
re hick On File menu,
Click On Save
©
te SP en Save As diatog
Select ay Fil
es tron,
drop-down list ieee te
Step 5 Cho ;
as ie a location where you
the file. In this cas cia
poe) Se, Desktop is
tep 6
Enter name for the file "Fi
Page-htmr, cette
Step 7
FE Desktop,
8 Downlonds
35 Recent Places
© Creative Cloud F
Ur Adobe Acrobat9 Pro tended
a 2h avast tree anivius set, onine
| Sy tioranes WceFerce Eiperience
[3 Documents © Google chrome
oP Mose + Adobe.crestive Suites Master Collection-P20
1 Pictures =!
Hy bare Chap trom Nahe mar
Fie name: "Fist Web Pagchinl
Seve attype
i ote Ga) CES ee)
Save As dialog box
Press Ctrl + S key to open the Save As dialog box
Viewing a Web Page
After creating and saving a HTML document, you need to open it into a web browser to view it.
To open a HTML document into web browser, perform the following steps:
Step 1 Open the web browser such as Internet Explorer.
Step 2 Click on the File menu.
deci
86 } Touchpad IPRIME (Version 1.1)-VI Step 3
= a Select the Open option. The Open dialog box appears.
: ‘ep. 4 Click on the Browse button.
tep SL
D ocate the file and double-click it. Web page opens in your web browser winclow.
Let's explore the wondetful world of HTML
Web page in web browser
If the menu bar is not visible in the Internet Explorer, press the Alt key
from the keyboard. You can also open the web page by double-clicking
it from the folder where you have saved it.
4¥ BASIC HTML TAGS
HTML provides various tags such as , , , <BODY>, and many more
Let's discuss these tags in detail.
The <HTML> Tag
The <HTML> tag tells the web browser that the text contained between <HTML> and </HTML>
is a web page and can be viewed using a web browser. Every web page coding must starts with
the <HTML> tag and ends with the </HTML> tag.
The <HEAD> Tag
The <HEAD> tag defines header area of your web page. The information given in <HEAD> tag
tells the computer that this information is not to be shown on the web page. The <HEAD> is
a container tag used in pair as <HEAD> and </HEAD>. Every web page coding must have its
header tag.
The <TITLE> Tag
The <TITLE> tag tells the web browser that the text contained between <TITLE> and
does not form part of the web page. It will be shown on the Title Bar of your web browser. The
use of tag is not mandatory. If you do not want to give title to your web page, you can
its path as title of your web page
skip it. Your web browser will show file name an
HTML—An Introduction } 87 rc <BODY> Tag
The <BODY> tag tells the web brows
ser that the te,
tags Is to be shown on thy ai i
ie wi
; i eb page, It is
* BGCOLOR: This
used as under:
xt Contained boty, 2
1 tween <BODY> and <, -
4 container lag, "he fli
the <BODY> tag has the following
attribute eS ac
bule defines a colour to the background of your web page. It can b
a je. It can be
SBODY BGCOLOR=" regu
TEXT: This attri in 7 he
; ribute defi
es a colour to the text
Te xt of your web p:
age. It can be used as under:
web page:
ed simultaneously like this:
<BODY BGCOLOR=" red" TEx, “white">
The Heading Tag
tags.have ALIGN attribute.
The ALIGN attribute allows you to align your heading to left side, center or right side of your web
Page. It can be used as under:
<hl align=*
left"> aligns towards left of webpage </hi>
sh2 align =*center”
> aligns towards center of webpage </n2>
<h3 align="right"> aligns towards right of webpage </h3>
The <P> Tag
The Paragraph tag is written as <P>. This tag defines start and end of a paragraph in the text. Itis
both a container as well as an empty tag. Whenever you want to start a new paragraph, you can
start the paragraph tag using <P> without closing the previous paragraph tag. In order to avoid
Confusion, itis advised to use this tag as a container tag starting with the <P> tag and ending with
the </P> tag. The paragraph tag automatically inserts a blank line between two paragraphs.
The <P> tag use the ALIGN attribute.
The ALIGN attribute can take three values:
ok Left: It ali
ins the text to the left of the web page. For example,
<p align="left”> Animation </p>
> Right: It aligns the text to the right of the web page. For example,
<p align="right”> Animation </p>
_ 88 $ Touchpad iPRIME (Version 4.1)-VI ee
ample,
a
age. For ex
> Center: It aligns the text to the center of the web pag
start a new line, but
<p aligne"center”> Animation </P?
line
t to i
to come in next
ed when you war
place it. It
ur tex!
The <BR> Tag
is us
hnerever you will
The Line Break tag is written as <BR>. This tag ae
do not want to start a new paragraph. This means that you ae
without leaving a blank line in between. This tag forces ¢ line bre
new lint
is an empty tag. It is used as under: .
<p align="center"> You use Line <br> break tag to start @ <br?
It will be shown on your web page as under:
You use line
break tag to start a
new line
yur web
The <HR> Tag
The Horizontal ruler tag is written as <HR>. This tag is used when you want to divide you i
page into different sections. It is also used when you want to draw a line between two paragraphs.
Itis an empty tag. It gives a horizontal ruler (line) on the page and then
the next element will be
shown in a new line after the ruler.
The <HR> tag has following attributes:
WIDTH: It displays the horizontal ruler of the specified width in pixels or in percentage.
<hr width="550"> or <hr width="60%">
+ SIZE: It controls the height or the thickness of the horizontal ruler.
<hr size="4">
+ COLOR: It is used to apply the background color.
<hr color="pink">
2 ALIGN: It is used to align the horizontal ruler left, right and center.
<hr align="right">
The <B> Tag
The Bold tag is written as <B>. This tag is used to give bold effect to your text. You need to tell
the web browser when to start using the bold effect and where to stop using the bold effect. It
is a container tag and used in pair as <B> and </B>.
The <I> Tag
he Italic tag is written as <I>. This tag is used to give italic effect to your text. You need to tell
te web browser when to start using the italic effect and where to stop using the italic effect. It
also a container tag and used in pair as <I> and </>.
Z
HTML—An Introduction ¢ g jhe <U> Tag ee se ae
The Underline ta
19 is written a
S <U>. This tag is used to Underline y
Our text. You need to tell the
web browser wr
hen to start u
ho nderl
99 and used in pair as cys and ning and where to stop underlining the tear It
and </u> ing the text. It is a container
The <Sups Tag
The superser
riptt r
For exampig et ta9 is writtenas <sups. 7
le, E=me? is coded as bm,
The <SUB> Tag
The subseri
ipt tag is written as «sy
. B>
For example, HO ie cnn eee ae iad to turn the enclosed text into a subscript.
The <FONT> Tag
HTML provid
a pe 7 beta! ee a Change the certain properties such as font size, face and
on a web page. To do this, the <FON ic ibute
which you can use in the following way: en
MC<sup>2</sup>
> FACE: It allows you to set the font family such as Times New Roman, Verdana.
<font face="Times New Roman"> Animation </font>
> SIZE: It allows you to set the font size,
"4"> Animation </font>
<font size=
> COLOR: It allows you to set the font color.
<font color="green"> Animation </font>
The <CENTER> Tag
In the previous sections, we have used the ALIGN attribute to align the text to center. HTML also
provide the <CENTER> tag which allows us to align the text in center. The <CENTER> does not
have any attribute.
We can use the <CENTER> tag in the following way:
<center> text to be align in center </center>
82 DESIGNING A WEB PAGE,
You have now learnt some of the basic HTML tags. Let us now create the next web page by using
some of these tags.
Type the following HTML code in the Notepad window and save the file with the name
Environment.html:
<html> <head>
<title> Note on Environment
=
=~ 90
oe iPRIME (Version 1.1)-VI
FF ne. DALLA
f 8
eb>teb Page on environment
Environment¢/b> is everything that i
c¢/u>) things.
be living (cusbiotie) or non-living (abiot
ical, chemical and other natural forces
They constantly interact with
>Liv
in their environment
and adapt themselves to conditions in their environment.
This web page has been created by
(enter your name here)
Locate your file in Windows Explorer and double-click on the file icon. The browser window will
chow all the effects given in the HTML code for web page like this:
| aera | Hs erent Sem = Ben six tey
| : Boe tate Hye te O°
Web Page on Environment |
Environment
|
Environment is everyting tals around us ht oan be iving (bot) or norsiving ablote) hings, MIncludes
physical, chemical and other natural foroee,
Using things five in thelr envronment, They constanty interact wit Hand adapl themselves to conditions in
heir environment,
|
el
|
(enter your name bere) ||
ae
HTML—An Introduction {a4 = to foll
docu low as
iment: Pecial procedure. Follow these steps to edit a HTML
Step 1 Locate your file. |
Step 2 Right-click
‘on the file ic
appears pow
3 pop-up |
Ho on
ver mouse pointer over Open with | meen
option to open a sub-menu Serene
Step 4 Click on Notepad, -
This will open your HTML document in Notepad so &
that you can make changes in the file. After making} Ss
required changes, you need to save the file by | “"™
pressing the Ctrl+S keys. ag AT
iting =
If your web page is already opened in web browser, you need to press the FS Key to see the
changes you have done
Reb@@t- - - - ---------------------
> The server stores the files and information in the form of websites.
> HTMLis the most widely used language to design web pages.
Hypertext is a piece of ordinary text that has special feature of linking to o
documents or web pages.
Step 3
ther
2k HTML stands for Hyper Text Markup Language.
2& Tags are the basic building blocks of a web page.
2 The tags that include both opening and closing tags are called Container Tags.
The tag is the container tag and the outermost tag in HTML document.
An attribute is a property that provides some additional information about a tag.
> HTML document is a text file containing markup tags.
. 2 The tag defines header area of your web page.
One | Touch | Learn Section A (Objective)
-Z3A. Tick (Y) the correct option.
1, All HTML tags are enclosed in
ao 2
b. # i i
ie 2. Which program do you need to view an HTML document?
c. Web browser
a. Text editor
d._ None of these
b, graphics
Touchpad iPRIME (Version 1.1}-Vi
