Scribd
Upload
51 views27 pages

Web Design Basics and HTML5 Guide

The document provides an overview of web design, covering the basics of HTML5, web components, and the functioning of the World Wide Web. It explains key concepts such as webpages, websites, web browsers, and web servers, as well as various HTML tags and their uses for formatting text, creating tables, and inserting images. Additionally, it includes practical examples and exercises to reinforce learning about web development techniques.

Uploaded by

GAME Studioz
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
51 views27 pages

Web Design Basics and HTML5 Guide

The document provides an overview of web design, covering the basics of HTML5, web components, and the functioning of the World Wide Web. It explains key concepts such as webpages, websites, web browsers, and web servers, as well as various HTML tags and their uses for formatting text, creating tables, and inserting images. Additionally, it includes practical examples and exercises to reinforce learning about web development techniques.

Uploaded by

GAME Studioz
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

3 Impressive Web Designing

Let us Learn The internet is a powerful media


to transmit information. The pages of
 Working of web information displayed on the internet are
 Components of web referred to as webpages. The standards
 Introduction to HTML5 and formats for presenting text and
 Basics related to tags & graphics on the internet are developed
text-formatting tags and approved by WWW governing
authorities.
 Heading levels
 Inserting Images in a webpage & The growing demand for attractive
creating hyperlinks presentation of information using
electronic means gave rise to the invention
 Forms in HTML
of websites.
 Use of Scripting in HTML
 Basics of JavaScript 3.2 How does the web work ?
 Simple JavaScript programs WWW stands for world wide web
normally referred to as web. Fig. 3.1
3.1 Introduction describes the working of web.

Online resources have become a part


of our day to day life.
Step 1 : When you type domain name & click on browser, it
sends request to DNS server for finding WebServer IP

Step 2 : IP Address is [Link] DNS Server


It has mapping of URL &
Server IP Similar to
phonebook

Working of WWW
Client Machine
(YOU)
eg: [Link]

Step 3 : Request for EBalbharati Webpage

Step 4 : Response of actual Webpage


EBalbharti WebServer
Fig. : 3.1 Working of Web IP : [Link]

30
3.3 Components of web 3.4 Introduction to HTML5
Web uses the following Terms : HTML is a standard language for
 Webpage : A simple text file created developing and creating interactive
using HTML. websites, introduced by Tim Berners Lee.
HTML documents are created in any
 Website : A collection of interlinked
text editor for and can be run(executed)
web pages containing text, images,
on any computer that has a web browser.
audio and videos. For Example, www.
HTML is compatible with most of the
[Link]
web browsers.
 Web Browser : A web browser is a
Basic structure : HTML tags are
software used to view web pages or
keywords enclosed within angular
websites available on the internet For
brackets, that define how your web
Example Internet Explorer, Google
browser must format and display the
Chrome, Mozilla Firefox.
content. Tags are not case sensitive. Every
 Web Server : A Web server is an HTML page is enclosed within two tags
application or a computer that sends <html> and </html>. This page is divided
webpages over the internet using the into two sections internally, head section
HTTP protocol. The functionality of and body section. Head section contains
website is managed by web server. For title of the document which is enclosed
Example Apache, nginx, IIS, etc.. within <Title> and </Title> of <Head> and
 URL(Uniform Resource Locator) : </Head>. The actual text of the document
It is an address of a web page on the is written within <Body> and </Body>.
internet. The web pages are retrieved An attribute : An attribute defines a
from the original location with the property for an element, consists of an
help of URL. attribute/value, and appears within the
 HTTP : HTTP (HyperText Transfer element's start tag. Sometime we need
Protocol) is a protocol used by WWW additional information with a tag.
for client server communication.
 HTML : Hyper Text Markup <html>
Language, enables to write code for <head>
a webpage. All the webpages in a <title> First Page </title>
website are linked with one another, </head>
with the help of hypertext links. <body bgcolor = green >

 Do it yourself attribute value of attribute


This is my first web page
 A collection of webpages is called... </body>
 …………is an address of a webpage. </html>

31
Classification of HTML Tags
<!DOCTYPE html>
HTML tags are categorized as : <html>
1. Container tags 2. Empty tags <head> <title>Your Website</title>
1. Container Tags : Container Tags are </head>
also called paired tags. Container <body>
Tags have a beginning tag and an
<header>
end tag. The end tag is similar to the
beginning tag but with a ''/'' in front <nav>
of it. For Example <head> </head>, </nav>
<body> </body>. </header>
2. Empty Tags : Empty tags are <section>
standalone tags and do not have <article>
an end tag. <Br> is an example of </article>
singular tag/Empty tag. </section>
Basic structure of HTML <aside>
Purpose of tags : </aside>
 <html> and </html> : This tag <footer>
indicates that the document is an html </footer>
file. </body>
 <head> and </head> : It includes </html>
<Title> within it, the text within
<head> is not displayed on the <header>
webpage. This is used for search
engine optimization.
<nav>
 <title> and </title> : The content
within this tag is displayed on the title <section>
bar.
 <body> and </body> : This tag
<article> <aside>
includes all content which is to be
developed in the web browser. Most
of the tags are included in this tag.
Structure of web page using HTML5 : <footer>
The first line on the top, <!DOCTYPE
html>, is a document type declaration
and it lets the browser know the flavor of This is representation of HTML5
HTML. Document structure

32
 <header> - Defines a header for a Tag Name Description
document or a section. Displays text within it in Bold
<b>
 <nav> - Defines a container for like Hello.
navigation links. Displays text within it in
<i> italicized manner like
 <section> - Defines a section in a
Hello.
document.
Displays text with underline
 <article> - Defines an independent <u>
like Hello.
self-contained article. Displays text in small font
<small>
 <aside> - Defines content apart from size.
the content (like a sidebar). Displays text in subscript
<sub>
form.
 <footer> - Defines a footer for a
Displays text in superscript
document or a section. <sup>
form.
 <details> - Defines additional details. Anything that appears within
<ins> <ins>...</ins> element is
3.5 Text formatting element displayed as inserted text.
Text formatting is used to make Anything that appears within
a document look attractive thereby <del> <del>...</del> element, is
displayed as deleted text.
enhancing it’s appearance. The list of
different text level formatting tags are as The HTML <mark> element
<mark> defines marked or highlighted
shown in Table no. 1 :
text :
Table: 1 Text Formating Elements

Program 1 : Output 1 :
<!DOCTYPE html> This text is bold

<html><head> This text is italic


This text is marked
<title>Example of HTML5 text formatting tags</title>
</head><body> This is subscript and superscript

<b>This text is bold</b><br><br> This text is inserted to the document


<i>This text is italic</i><br><br> This text is deleted from the document
<mark>This text is marked</mark><br><br>
This is <sub>subscript</sub> and <sup>superscript
</sup><br><br>
<ins>This text is inserted to the document</ins><br><br> Note : <BR> tag is
<del>This text is deleted from the document</del><br><br> used to specify a line
</body> </html> break.

33
3.6 Heading levels Note : All the heading levels have
HTML provides six levels of heading attribute align with values left, right
tags. The range is from 1 to 6. These and center..
heading levels are represented as <H1> For Example : <h1 align="center">
Text content </H1>. The <H1> tag Largest heading size which is center
displays text in bold and with largest aligned. </h1>
heading level whereas <H6> tag displays
text in the smallest heading level.  Do it yourself
Program 2 :  Create a simple web page using
following features.
<!DOCTYPE html>  Largest heading level ‘Biodata’ text
<html> in centre.
<head>  Name in Bold.
<title>Heading levels</title>  Address in Italics.
</head>
 Standard with underline.
<body bgcolor=skyblue>
<H1>Heading level 1 Text is largest in size</H1>
Note : Use any text editor to type the
<H2>Heading level 2 </H2>
code and save it with ‘ filename. html’
<H3>Heading level 3</H3>
or ‘ filename. htm’. Use a browser to
<H4>Heading level 4</H4>
display the output.
<H5>Heading level 5</H5>
<H6>Heading level 6 Text is smallest in size</H6> 3.7 Inserting an image, a horizontal
</body> ruled line and a paragraph
</html>
 <IMG> tag is used to insert an image
within a webpage. It uses following
Output 2 : attributes :
 src : It is used to specify the path of
an image file. The popular extensions
of image file are png, jpg and gif.
 height : Specifies height of the image
in pixels.
 width : Specifies width of the image
in pixels.
 alt : It is referred as alternate text. It
specifies the description of the image.

34
<IMG> is a empty tag. The syntax used <td> : It specifies data within the table
in code is as : (cell content).
<IMG src="[Link]" height="400" The attributes of table are :
width="400" alt="Desert image"> 1. border : This attribute is required to
 <HR> tag : <Hr> tag is used to display display a border for the entire table.
horizontal ruled line. It is a singular It has a numbered value. If border
tag. The attributes with <hr> tag attribute is not specified, a table is
 color : Sets color for the horizontal created without the border for both
ruled line. table as well as columns.

 width : It specifies the length of the 2. bordercolor : It displays border in a


ruled line in % or pixels. specific color.

 size : It sets thickness of a ruled line. 3. align : It aligns the table either to the
left, right or center.
 <P> tag : It is used to define paragraphs.
It is a container tag. 4. bgcolor : Sets the background color
for the table.
3.8 Creating a table
The attributes of the <tr>, <th>, <td> :
A table is made up of rows and
1. align : It aligns the text horizontally.
columns. A table in a webpage is created
The values are aligned to the left, right
by using <table> tag, which is a container
or center.
tag. The tags and attributes used to create
a table are as follows : 2. colspan : This attribute is used within
<td> or <th>. It creates a single column
<table> : It is used to indicate creation of
spanning across the table. It takes a
a table.
numbered value, based on the number
<caption> : It is used to specify a table of columns to be spanned in a table.
heading. It has align attribute which can
3. rowspan : This attribute is used within
have 'top' or 'bottom' as it’s values. Top is
<td> or <th>. It creates a single row
the default value.
spanning across the table. It takes a
<tr> : This tag is used to create each numbered value, based on the number
row of the table. of rows to be spanned in a table.
<th> : It indicates table heading. <th>
is generally used for first row column <tr>, <th>, <td> tags can have bgcolor
content of the table. It displays content in attribute for specifying background
the bold format. It can be replaced with color to a row or a column respectively.
<td>.
35
Program 3 : Output 3 :
<!DOCTYPE html>
<html>
<head>
<title>Table with 4 rows and 3 columns
</title>
</head>
<body>  Do it yourself
<table border="2">  To insert your photograph in
<tr><th>Sr. No.</th> a webpage the required tag is
<th>Input Device</th> …………….
<th>Output Device</th> </tr>  Can the ruled line be coloured in
<tr> <td>1</td> <td>Keyboard</td> blue ?
<td>Monitor</td> </tr>  To display table without borders the
<tr> <td>2</td> <td>Mouse</td> syntax can be as ……………..
<td>Printer</td> </tr>  Which attribute spans two or more
<tr> <td>3</td> <td>Joystick</td> columns of the table ?
<td>Plotter</td> </tr>
</table>
</body>
</html>

Use of rowspan attribute in a table :

Program 4 : Output 4 :
<!DOCTYPE html>
<html> Red
Colors
<head><title> Table with rowspan attribute </title></head>
<body> Green
<table border="3">
<tr><td rowspan=2> Colors </td>
<td bgcolor=red>Red</td></tr> Note
bgcolor attribute is
<tr> deprecated in Html5
<td bgcolor=green>Green</td></tr> but supported by
browsers. The textbook
</table> uses it for presentation
</body> purpose. Html5
</html> recommends using
CSS.

36
Use of colspan attribute in a table : Output 5 :
Program 5 :
Colors
<!DOCTYPE html>
<html> Red Green
<head><title> Table </title></head>
<body>
<table border ="3">
Note
<tr><td colspan="2" align="center"> Colors </td></tr> bgcolor attribute is
<tr><td bgcolor=red>Red</td> deprecated in Html5
<td bgcolor=green>Green</td> but supported by
browsers. The textbook
</tr> uses it for presentation
</table> purpose. Html5
</body> recommends using
CSS.
</html>

Note : Html5 related <table> elements are described on page no. 54,55
3.9 Creating hyperlinks in a webpage HTML Link colours :
Hyperlinks are used to connect one  A hyperlink by default appears blue
document with another document. in colour with an underline.
In HTML, Links are created by using  It is not visited by any user.
<a> tag.
 A visited link is underlined and purple.
Note : When you open any website and  An active link is underlined and blue.
click on a text or an image it takes you
to that page. It is known as hyperlink. Image hyperlink :
Many websites have images as
Syntax : hyperlink. For example The previous
<a href = ''Mypage. htm''> Click here for arrow is an image which on clicking
my page </a> displays a previous webpage. The arrow
The href attribute in the above syntax is actually an image hyperlink.
is used to specify address of the file (URL) Syntax :
which needs to be opened on clicking. <a href = "[Link]"><Img src =
"arrow. gif" alt = "Click on arrow"></a>
37
3.10 Forms in HTML personal information. It does not have
Forms in HTML is used to accept size limitations as in GET method.
user input. The form in html is created by The <Input> tag
using <form> element as <form></form>. The <Input> tag is used to specify
Form controls the different types of controls by using
A form is a collection of different type attribute. Syntax of using <Input>
elements also called as controls like with type attribute is;
textbox, radio button, checkbox, submit Type of control Purpose
button and many more. <Input type = Creates a one line textbox
"text">
Attributes used with form element and
Creates a radio button.
Input element.
<Input type = The radio button allows one
<Form> tag can have following attributes "radio"> option selection against
 Name : It specifies a name to a form. multiple choices.
Creates a checkbox. It
 Action : The action attribute
<Input type = allows more than one
specifies the path where the form is
"checkbox"> selection against multiple
to be submitted. When user clicks on choices.
submit button if the action attribute Displays a button for
is committed, the action is set to the <Input type =
submitting the form data to
current page. "submit">
a server.
 Method : The method attribute The password input type is
specifies get or post method to be <Input type = used to create text
used when submitting the form data. "password"> contents in the form of '*'
Method of form are GET or POST. asterik or '•' disc.
The reset control clears the
i) GET method : The default method <Input type =
text content entered in the
of submitting form data is GET. The "reset">
form.
data submitted by using GET is visible <Input type = It displays push button
in the address bar. It is better for data "button"> which activates on events.
which is not sensitive. The number of
Table: 2 <Input> with values of type
characters in GET method depends on attribute
browser.
 Attributes of <Input> : Apart from
ii) POST Method : The POST method type attribute, there are attributes
of sending data does not display the which are specific to a particular
form data in the address bar. So it is type of controls. The following table
a secure method to submit sensitive or specifies the description.

38
Attribute Description <Textarea> tag :
It describes, the name of the The <textarea> is used to create a
Type control like text radio etc. eg textbox with multiple lines. The number
type = "radio" of lines and width of the textbox are
specified by using rows and cols attribute
Each input field must have
respectively. The <textarea> can have
a name. The name attribute
following attributes.
is a user defined value. If
Name the name attribute is not  name : It is used to specify name for
specified, the data of that
the textarea. For example name =
"ta1".
input field will not get
submitted.  rows : It specifies the number of lines
in a textarea. For example rows = "5"
This attribute is used with
text and password type.  cols : It specifies the width of a text
It specifies the maximum area.
Maxlength
number of characters which  maxlength : It specifies the maximum
can be entered in a text or number of characters allowed in the
password box. textarea.
The 'Size' attribute can be  placeholder : It specifies a short hint
used with text and password that describes the expected value of a
Size textarea. For example placeholder
type. It specifies the width of
the text box. = "your address"
 required : It specifies that textarea
The 'Checked' attribute
must be filled out. i.e. It can not be
specifies the default selection
Checked blank.
for options in a checkbox or
radio button. Syntax :

The 'Value' attribute can be <textarea name = "tal" rows = "5" cols
used with text, checkbox, = "30" placeholder = "your address"
radio, submit or reset. required> </textarea>
 When used with text type <Select> tag : <select> tag is used.
Value it specifies default value to create drop-down list.
in a text box. The attributes of <select> tag are :
 For checkbox and radio it 1) Name - Assigns name to the
defines value which is sent control.
on submit.
2) Multiple - It allows the user to
Table: 3 Attributes of <Input> select more than one value.
39
3) Size - The size attribute is used  Do it yourself
to specify the number of visible
Identify following form elements.
values.

The <option> tag inside the <select>

tag defines the available options in
the list.  ............
The attributes of <option> tag are : 

1) selected : To define preselected


option, 'selected' attribute is
added to the <option>
2) value : It assigns value to the
option specified in the dropdown
list.

Program 6 : Output 6 :

<!DOCTYPE html> use of form


<html> Enter your name
Enter your standard: 11th 12th
<head><title>Form with Input elements</title></head> Choose your optional subjects :
Hindi
<body bgcolor="orange"> German
<h1>use of form</h1> Biology
IT
<form > Submit

Enter your name <input type="text" Name="n1"


maxlength="20"><Br>
Enter your standard : <input type ="radio" name="r1"
value="11"> 11<sup>th</sup>
<input type="radio" name="r1" value="12">12<sup>th
</sup><br> Choose your optional subjects : <br>
<input type="checkbox" name="c1"
Value="Hindi">Hindi<br>
<input type="checkbox" name="c2"
Value="German">German<br>
<input type="checkbox" name="c3"
Value="Biology">Biology<br>
<input type="checkbox" name="c4" Value="IT">IT<br>
<input type="submit" value="Submit"><br>
</form></body></html>

40
Program 7 :

<!DOCTYPE html>
<html>
<head><title> Form elements and textarea </title></head>
<body bgcolor = "cyan" text ="Red">
<h1> Use of form elements </h1>
<form method = "post" action = "[Link]">
Enter your name: <input type = "text" name = "fn"> <br>
Select your city :
<select name=''ct''>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
</select><br>
Enter your address: <textarea name = "address" rows = "3" cols = "30"
placeholder = "your address" required> </textarea> <br>
<input type = "submit" value = "send">
</form></body> </html>

Output 7 :

Note : PHP is server side scripting [Link] the above program '[Link]' is
the name of PHP file which stores the accepted data.

41
Client Side Scripting Script Placed inside body section
(For Commerce and Science stream) <!DOCTYPE html>
3.11 Introduction <html>
There are a variety of scripting <head><title>First</title> </
languages used to develop dynamic web head>
pages. JavaScript was initially created <body>
to “make webpages alive”. They <script type="text/Javascript">
don’t need a special preparation or a // javascript statements
compilation to run. Using HTML one </script>
can only design a web page but cannot </body>
implement any logic on web browsers </html>
like addition of two numbers, check
any condition, looping statements Script Placed inside head section
(for, while), decision making statements <!DOCTYPE html>
(if-else) etc. This is possible by embedding <html>
JavaScript block into HTML.
<head><title> Second </title>
3.12 Scripting language <script type="text/Javascript">
A script is a list of commands that // javascript statements
are executed by a scripting engine. </script>
Scripts are used to generate dynamic </head>
Web pages on the Web. Scripts can <body></body>
be opened and edited by using a </html>
text editor.
Insertion of JavaScript in HTML : Note : It's best practice to
terminate JavaScript statements with
JavaScript can be use for client
semicolon(;). It's not required if you
side or server side scripting language. write each statement on a new line.
JavaScript code can be inserted in
HTML program between <script>
3.13 Variables
and </script> tag. type attribute is used
to set scripting language. You can The variable is a basic unit of storage
in a JavaScript program.
place any number of scripts in HTML.
There are two methods to insert Rules to declare variables :
JavaScript in the HTML. Scripts can be Variable name may consist of
placed in <body> or in <head> section alphabets, digits and underscore and
of an HTML or in both. dollar character with following rules :
42
1. They must start with an alphabet. 3.14 Data Types
2. Uppercase and lowercase are distinct. Computer is mainly used to
This means that variable ‘sum’ is not store information and to do complex
same as ‘SUM’. calculations. When we store information
it is in the form of alphabets, numbers or
3. It should not contain blank space or
alphanumeric values. JavaScript provides
special symbol except underscore.
data types to store and use different types
4. Standard keywords are not allowed of values that are :
as variable name. For Example
1. Number type : Numerical value
document, while.
specially belongs to the ‘number’
5. Variable name can be limited up to data type. Number data type stores
255 characters. (holds) both whole number (integer)
Variable name in javascript is or decimal point numbers which stores
declared with keyword ‘var’. fractional part of number (also called
as floating point numbers). Number
Syntax : data type can hold positive as well as
var variablename; negative values.

var variablename, variablename; Example :


//To declare more than one variable, var y=100000
variablenames are separated by a var z= -67.99
comma.
2. String Type : Strings are used for
Example : storing text. Strings must be inside of
var a //variable a has been declared. either double or single quotes.
var a,b,c // variables a, b and c have been Example :
declared. var x=‘‘Hello”
var z=40,y=100// declaring variables var str= ‘Information Technology’
with initialization
3. Boolean Type : It represents only two
values ‘true’ and ‘false’. All relation-
al, conditional and logical operators
 Do it yourself produce Boolean values true/false or
yes/no.
 Define five correct and five incorrect
variable names. 4. Infinity : Division by 0 gives you an-
other special value.
 List some scripting languages.
Example : a=3/0
Result: Infinity
43
5. null : In JavaScript null is, just a value require one operand is called as unary
which means “nothing”, ”empty”, operator and operators that require two ope
”unknown”. It is supposed to be rands are called as binary operator. Most
something that doesn’t exist. of the operators can be divided into groups :
6. undefined : JavaScript returns Arithmetic, Relational and Logical
‘undefined’ when variable which is operators.
declared but not assigned. Then java
3.15.1 Arithmetic operators :
interpreter shows that it is undefined.
Arithmetic operators are used in
Example : var age; alert(age); mathematical expressions in the same
way that they are used in algebra. For
3.15 Operators following example consider:
Operators are used to do arithmetic var a = 40, b = 4.5;
and logical operations. Operators that
Operator Definition Example Result
+ Addition a+b 44.5
- Subtraction a-b 35.5
* Multiplication a*b 180
/ Division a/b 8.89
Modulus
% a%b 4
(It returns remainder after division)
Table: 4 Arithmetical Operators in JavaScript

Note : - Type your Javascript program in editors and execute it in browser


similar to HTML programs.

Program 8 :
<!DOCTYPE html>
<html>
<head><title>multiplication</title> </head>
<body bgcolor="yellow">
<h1> Program to calculate multiplication of two numbers </h1>
<script type="text/Javascript">
var a,b,c;
a=76;
b=99.45;
c=a*b;
[Link]("<br><h1>multiplication of two numbers : " +c+"</h1>");
</script></body></html>
44
Output 8 :

Program to calculate multiplication of two numbers

Multiplication of two numbers : 7558.2

Here, document. write() is used to


Example :
display or write content on a web page.
var p=400; //assigns value to the variable p
3.15.2 ‘+’ operator in JavaScript : var e=457.930;//assigns value to the variable e
In JavaScript ‘+’ operator has two var a=a+7;// evaluates expression a+7 and
meanings, arithmetic addition and string assigns value to a
concatenation operator. var str=”Hello”; // assigns string value to
variable str
Example : var a=15+”Hello”
var c=d; //assigns value of d to c
Result : 15Hello
Example : var a=15+7+”Hello” Expression : There is a difference
Result : 22Hello between algebraic mathematical
equations and computer programming
 Do it yourself statements. Following statements
 Find the result of…. are valid expressions in algebraic
1. 20+‘20’ mathematics, but they are invalid in
2. 10+20+‘‘2” programming languages.
3. 10+‘2’+‘2’
a+b=10; //error
a+b=c+d; //error
3.15.3 Assignment Operators (=) : c+d=p; //error
It is important to know that assignment 10=x; //error
operator is not ‘equal to’ operator. X=10; //valid
Assignment operator is used to assign
value of an expression to a variable. This Note : Remember that in a programming
means that value of an expression on the statement = operator just evaluates
right hand side is assigned to the single right side expression and assigns it to
variable on the left hand side. Value of the left hand side variable so at the
variable may change during the next left hand side of = , operator always
programming instruction. contains a single variable.

45
 Do it yourself
 Which of the following arithmetic
expressions are valid in JavaScript.
a) A=25/3%2
b) X=12.67*-5.0
c) 21%45-34+12=a+x
d) (23/5)+4-7=c
e) c+f=45*5/5%12

3.15.4 Relational Operators :


Relational operators are used to check conditions or comparison of operands.
Result of relational operators is Boolean value ‘true’ or ‘false’. They are used in
looping and control structures. Following table shows JavaScript relational operators.
For result consider the values as : a=10 and b=30…
Operator Description Example Result
< Less than a<b True
> Greater than a>b False
<= Less than equal to a<=b True
>= Greater than equal to a>=b False
== Equal to a==b False
!= Not equal to a!=b True
Table: 5 Relational Operators in JavaScript
3.15.5 Logical Operators :
Logical operators are used to verify more than one condition at a time or to
negate the condition. JavaScript has three logical operators.
Operator Description Example Result
This operator evaluates var age=25; First condition evaluates to false and
&& to ‘true’ only when all var salary=50000; second condition evaluates to true, so
(and) its operands are ‘true’. if(age>55 && that whole expression returns Boolean
salary>25000) value as false.
This operator evaluates var number =-1; First condition evaluates to true and
|| to ‘true’ when any one if(number<0 || second condition evaluates to false, so
(or) of the operand is ‘true'. number>100) whole expression returns Boolean value
true.
! This unary operator var z=0; Expression returns Boolean value as
is used to invert the if(!(z==0)) false.
(not) Boolean expression.
Table: 6 Logical Operators in JavaScript
46
 Do it yourself
 Determine the Boolean value of each of the following logical expressions if
a=10, b=-5 and c=20
1. a<b && c>b 2. a==b || c==d
3. c>-24 && a<50 4. a<b && b==c && a==b
5. c<0.0 || a>-20 6. b<c && a==67
7. a<b || a<c || b<c

3.15.6 Increment (++) and Decrement (--)Operators :


Increment (++) operator in JavaScript is used to increment value of variable by one
and Decrement operator in JavaScript is used to decrement value of variable by one.
They can be used in two ways :
++x Pre- increment Value of variable x is incremented before it is used in
expression
x++ Post –increment Value of variable x is incremented after it is used in
expression
--x Pre- decrement Value of variable x is decremented before it is used in
expression
x-- Post –decrement Value of variable x is decremented after it is used in
expression
Table: 7 Increment and Decrement Operators in JavaScript

Example :
var a=100; var a=100;
b=++a b=a++;
output : b=101 and a=101 output : b=100 and a=101

Comments in JavaScript
Comments are non-executable statements in program. Comments are used
to provide information or explanation about your programming construct.
Statements added in comments are ignored by JavaScript. It supports two types
of comments.
1. Single line comment (//…………..) : Single line comment begin with //. The
JavaScript ignores everything from // to the end of the line.
2. Multiline comment : Multiline comments are used to comment on more than
one line. It starts with /* and end with */
47
3.16 Commonly used Built-In Functions in JavaScript
Function is used to perform repetitive tasks whenever required. It is reusable code-
block that will be executed when it is called.
Function Description Example
This function is used to parse Example Output
a string and convert it into parseInt(‘MH100’) NaN
parseInt() a number parseInt(‘100’) 100
parseInt(‘100MH’) 100
This function is used to parse a Example Output
string and convert it into parseFloat(‘MH100’) NaN
parseFloat() floating point representation parseFloat(‘100.00’) 100
parseFloat(‘100.2MH’) 100.2
This function displays alert popup Example
alert() box with ok button. This is also alert(“welcome to javascript ”)
called as a message box. or [Link](“Hello”)
This function is used when you Example:
want input value from user at var n;
the time of program execution. n=prompt(“Enter value for n”)
prompt() It displays ok and cancel but-
tons. Ok button returns input
value, Cancel button returns null
value.
This function displays Example:
confirmation message box with var ans;
confirm() ok and cancel button. Ok button ans=confirm(“Do you want to
returns ‘true’ and cancel returns continue”)
‘false’
This string function used to con- Example:
toLowerCase() vert the given string into lower case var str=”JavaSCRIPT”
alphabets str=[Link]()
This is string function is used to Example:
toUpperCase() convert given string into uppercase var str= “JavaSCRIPT”
alphabets str=[Link] Case()
It returns true'' if given value is not Example:
isNaN() a number. It returns 'false'if given isNaN(CP100)
value is number isNaN(100)
Table: 8 Built-in functions in JavaScript
Note : alert(), prompt() and confirm() are window functions we can use it without
the window prefix.

Note : length is a property of string object used to calculate length of string.

48
Program 9 : Output 9 :
Program to calculate area of circle you
<!DOCTYPE html> entered radius value: 5.5
<html> Area of circle is : 94.985
<head><title>Area of circle</title>
</head>
<body bgcolor=yellow>
<h1> Program to calculate area of circle </h1>
<script type="text/Javascript">
var r,area;
r=prompt("Enter the radius of circle");
area=3.14*r*r;
[Link]("<h1>you entered radius value:</h1>" +r);
[Link]("<h1>Area of circle is :</h1>" +area);
</script>
</body></html>

3.17 Decision Making Statements 2) if else statement :


Syntax :
1) if statement :
Syntax : if(condition)
{
if(condition)
{ statement block;
statement block; }
} else
{
If the conditional expression given in
statement block;
the parenthesis is true, then the statements
within the block will be executed, followed }
by execution of the remaining program. If the conditional expression
If the conditional expression evaluates evaluates to true, then true block
to false, then the statement block will not be statements will be executed otherwise
executed. Note that if statement block false block that is the else part will be
constitutes a single statement, then executed. At a time either true block or
drawing curly brackets is optional. false block will be executed, not both.

49
3.18 User Defined Functions
Note : - if…..else if ladder is used to
check multiple conditions, at a time A function in any scripting and
only one condition is true. if not, then programming languages is small part
else part is executed. of program that we require again and
again. It helps to make program smaller,
A function is a subprogram designed to
Program 10 : perform a particular task. Functions can
be called either by an event or by giving
<!DOCTYPE html>
call to that function.
<html>
<head><title>Even Odd</title></head> Function definition :
<body bgcolor="green"> Rules to declare function name is
<h1> Program to check number is even or similar to variable
odd </h1>
<script type="text/Javascript"> function functionname(argument1,argu
var a,b ment2…)
a=prompt("Enter your value:-");
{
b=parseInt(a) ;
// input is converted into number data type statement block;
if(b%2==0) }
alert("Number is even"); Values to be passed to the function
else for further processing
alert("Number is odd");
</script>
Program 11 :
</body></html>
<!DOCTYPE html>
<html>
<head><title>Function program</title>
Output 10 :
<script type="text/Javascript">
function show()
{
alert("Welcome to function");
}
</script></head>
<body bgcolor="green">
<h1> Use of Function in Javascript </h1>
<script language="javascript">
show();//calling of function
</script> </body></html>
50
Output 11: Event Handler Description
Mouse Events
onMouseOut When user moves the
mouse away from an
element
onClick When user clicks an
element
onMouseOver When user moves
the mouse over an
element
3.18.1 Event Handling :
onMouseUp When user releases a
JavaScript is an event-driven mouse button over an
language. Event is an action done by element
the user or an application. JavaScript's Keyboard Events
interaction with HTML is handled through onKeyDown When user presses a
events that occur when user or browser key
manipulates page. When the page loads, onKeyUp When user releases
key.
it is called an event, When the user clicks
Table: 9 Event Handler in JavaScript
a button, that click is also an event. Other
examples include events like pressing
Features of JavaScript
any key, closing a window, resizing a
window, etc. Perform input It is light weight
JavaScript lets you execute a code data validation scripting languge
when events are detected. You can respond
to any event using an Event Handler,
Features of
which is just a function that’s called JavaScript
when an event occurs. This event handler
may cause button to close windows, It is case It makes web pages
messages to be displayed to users, data sensitive language more interactive
to be validated and virtually any other
type of response. Some commonly used
It can handle date and
events are :
time effectively

51
Program 12 : Output 12:
<!DOCTYPE html> Enter your age:- 22

SUBMIT
<html><head><title>conditional statement</title>
<script type="text/Javascript">
function check()
{ Qualifies for driving

var age;
OK
age=[Link];
if(age>=18)
alert("Qualifies for driving"); Enter your age:- 15

SUBMIT
else
alert("Does not qualifies for driving");
}
</script></head> Does not qualifies for driving

<body>
OK

<form name="form1">
<center>
Enter your age:-
<input type="text" name="t1"><br><br>
<input type="button" value="SUBMIT" onClick="check()">
</form></body></html>

Program 13 : Output 13:


<!DOCTYPE html> Enter string value:- India

<html><head><title>Uppercase function</title> Press button

<script type="text/Javascript"> Uppercase String is:- INDIA

function display()
{
var a;
a=[Link]
[Link]=[Link]()
}
</script></head>
<body><form name="form1">
Enter string value:-
<input type="text" name="t1"><br><br>
<input type="button" value="Press button"
onKeyPress="display()">
Uppercase String is:-
<input type="text" name="t2"></form></body></html>
52
Program 14 :
<!Doctype Html>
<html>
<head><title> Html 5 </title>
</head>
<body bgcolor=yellow>
<header>
<h1>HTML5 includes new semantics</h1>
<p >It includes semantic tags like header, footer, nav
</header>
<header>
<h1>Example of complete HTML5 Basics</h1>
<h2>The markup of the future under development.</h2>
</header>
<nav><h1><p>The nav element represents a section of navigation links. It is suitable for
either site navigation or a table of contents.</p></h1>
<a href="/">[Link]
<a href="[Link] website</a><br>
</nav>
<aside>
<h1>Other education based websites of State</h1>
<a href="[Link] Board website</a><br>
<a href="[Link] Exam website</a><br>
</aside>
<section>
<h1>Impressive Web Designing</h1>
<p>The aside element is for content that is tangentially related to the content around it, and
is typically useful for marking up sidebars.</p>
</section>
<section>
<h1>Articles on:Article tag</h1>
</section>
<article>
<p>The article element represents an independent section of a document,
page or site. It is suitable for content like news or blog articles, forum posts or
individual comments.</p>
</article>
<footer>© 2018 Balbharti.</footer>
</body></html>

53
Output 14:
HTML5 includes new semantics
It includes semantic tags like header,footer,nav
Example of complete HTML5 Basics
The markup of the future under development. The nav element represents a section of
navigation links. It is suitable for either site navigation or a table of contents.
[Link]
Balbharti website
Other education based websites of State
State Board website
Online Exam website
Impressive Web Designing
The aside element is for content that is tangentially related to the content around it, and is
typically useful for marking up sidebars.
Articles on:Article tag
The article element represents an independent section of a document, page or site. It is
suitable for content like news or blog articles, forum posts or individual comments.
© 2018 Balbharti.

Use of colspan attribute in a table one or more columns. This eliminates the
<colgroup> and <col> Tags need to apply theses styles at individual
<colgroup> <TD> level. The <colgroup> tag is written
as <colgroup>… </colgroup>
The <colgroup> (short for column
group) tag specifies a group of one or more <Col>
columns in a table for formatting. The <Col> tag is used within <colgroup>
<colgroup> tag is used to apply styles to tag. The <col> tag has no end tag.

Attribute of <col> tag


Attribute Values Meaning
span <col span= “2” Span=2 means the styling of red color
style="background-color:red" > will be applied to first two columns

Note : bgcolor attribute is deprecated in HTML5 instead it recommends the use of


CSS style which will be discussed in XII standard. The browsers still do support
bgcolor attribute.

Example : Set the background color of the three columns with the <colgroup> and
<col> tags :

54
Program 5.1: Tag sequence
<thead> <tbody> <tfoot>
<!DOCTYPE html> used <table> <table> <table>
<html><head> after <caption> <caption> <caption>
<Title> Use of colgroup</Title></head> <colgroup> <colgroup> <colgroup>
<body><table border="2"><colgroup>
(optional) (optional) (optional)
<col span="2" bgcolor="red"> <!-- here
span =2 is given so that the background color <thead> <thead>
effect will be continued for first two columns.--> <tbody>
<col bgcolor="yellow"> <!-- here span used <tbody> <tfoot>
is not used but after first two columns all the before <tfoot>
remaining columns will be displayed in yellow The example below shows the
color--></colgroup> <thead>,<tbody>and <tfoot> tags.
<tr><th>Sr</th><th>Topic Name</th>
<th>Weightage</th> </tr><tr><td>1</td> The above code shows like :
<td>Basics of IT</td><td>20</td> </tr>
Program 5.2:
<tr><td>2</td>
<td>Introduction to DBMS</td> <!DOCTYPE html>
<td>15</td> </tr><tr><td>3</td> <html><head>
<td>Impressive Web Designing</td> <title>Example of HTML tfoot tbody and
<td>30</td></tr></table></body></html>
thead Tag</title>
Output 5.1: </head><body><table border>
<thead><tr><th>No.</th>
<th>Name</th><th>Email</th>
</tr></thead><tfoot><tr>
<td colspan="3">Copyright &copy;
2019Balbharti publisher</td>
</tr></tfoot><tbody><tr>
<td>1</td>
HTML <tbody>, <thead>, <tfoot>Tag : <td>Rajesh pandey</td>
Table rows may be grouped into a <td>rajesh@[Link]</td></tr>
table head, table foot and one or more <tr><td>2</td>
table body sections, using the <thead>, <td>Peter Parker</td>
<tfoot> and <tbody> tags, respectively. <td>peterparker@[Link]</td>
Browsers can use these elements to enable </tr><tr><td>3</td>
scrolling of the table body independently <td>John D'souza</td>
of the header and footer. Also, when <td>johndsouza@[Link]</td>
printing a large table that spans multiple </tr></tbody></table></body></html>
pages, these elements can enable the table
header and footer to be printed at the top Output 5.2:
and bottom of each page.
<thead> tag is used in conjuction with
<tbody>&<tfoot>tag. <tr>&<td>tags are
used inside<thead>, <tbody>&<tfoot>tag
to create data item of respective section.
<thead>,<tbody>&<tfoot>helps in search
engine optimization.
55
Summary
 WWW stands for world wide web normally referred to as web.
 Web Browser: A web browser is used to view web pages or websites on the
internet For Example Internet Explorer, Google Chrome, Mozilla Firefox.
 Protocol : A protocol is a set of communication standards used for transferring infor-
mation between computers in a network.
 <Html> and </Html>: This tag indicates that the document is an html file.
 <Head> and </Head>: It includes <Title> within it, the text within <head> is not dis-
played on the webpage.
 <title> and </title> : The content within this tag is displayed in a title bar.
 <body> and </body>: This tag includes all content which is to be developed in the web
browser. Most of the tags are included in this tag.
 Text formatting element <b>,<I>,<u>,<small>,<sup>,<Sub>,<mark>,<del>, <ins>
 HTML provides six levels of heading tags. The range is from 1 to 6
 <IMG> this tag is used to insert an image within a webpage
 <Hr> this tag is used to display horizontal ruled line
 <table>: It is used to indicate creation of a table.
 <caption>: It is used to specify table heading. It has align attribute which
can have top or bottom as it’s values. Top is the default value.
 <tr> : This tag is used to create each row of the table.
 <th> : It is generally used for first row content of the table. It displays content in the
bold format. It can be replaced with <td>.
 <td> : It specifies data within the table.(cell content)
 <Form> : It is used to accept users' entry . It has a collection of different elements
or controls .
 <input> : It is used to create different controls .
 Type attribute of<input > can have values like text, password, radio, checkbox, sub-
mit, reset.
 <textarea> It is used to create text with multiple lines.
 JavaScript is scripting language which can be used to develop dynam-
ic webpages. It is an event based scripting language; It is a platform
independent language.
 Variables are the basic units of storage.
 JavaScript supports different types of operators such as arithmetic (+,-,*,/,%), rela-
tional (<,>,<=,>=,==), logical (&&,||,!) etc.
 if, if…else, are control statements in JavaScript.
 Javascript supports built-In functions like parseInt(), parseFloat(), prompt(), con-
firm(), alert() etc.
 Javascript supports user defined functions also that can be called either by an event or
by giving call to that function.
56

You might also like