HTML NOTES

HTML Language

1 html is called hyper text mark up language

2 what is hyper- representing next location

text - text is collection of number, symbol, words

ex.- amit@001

3 mark up - mark up is libarary is used to operate html program

4 language- mediater

HTML istructured

is called tag

tag is representing- <>

ex B tag- this is wrong concept

-<B>

ex. U tag = <U>

ex. I tag = <I>

P tag = <P>

types of tag in HTML:-

there are two types of tag used in HTML

1- open tag

2- close tag

1- open tag= in this tag only used 1 time in program

ex.<B>, <U>, <I>,

2- close tag= in this type of tag is used two time in program and tag is to be closed / symbol

ex. quw. B is close tag

ans.<B> </B>

U is close tag

I is open tag = <I>

D is close tag= <D> </D>

H is open tag = <H>

HTML syntext:- (format)

1)<HTmL> (representing browser) (all HTML program is to be run web browser)

<BODY> represting output window.

create all logic

</BODY>

</HTML>

<HTML>

<BODY>

all logic

</BODY>

</HTML>

How to create HTML file:-

1) step :- create your folder

HTML LISTS:-

list is collection of data items

there are two of lists.

1)order list

2)unorder list

1) order lists:- this type of lists is represent a specific order.

1,2,3,A,B,C,i,II,III,

2) unordered Lists:-in this types of lists can not used any order it only used bullet symbol.

ordered list to be created <OL> </OL>.

unordered lists to be created <UL> </UL>.

all list ellment (Item) is repsenting <LI> </LI> yes

<HTML>

<BODY>

ordered lists:-

<BR>

<OL Type="i">(type="A" start a,b,c,d)

<LI>Nagpur </LI>

<LI>Mumbai </LI>

</OL>

<BR>

unorderd lists:-

<BR>

<UL>

</UL>

</BODY

</HTML>

HTML LINKING:-

1)Linking is concepts for used to connect one page to an other page

2)there some types of concepts used in linking

1)page to page linking.

2)page to URL linking.

3)page to document linking.

4)page to API linking.

all types of linking to be create with the help of <A> </A>.

A is called anchor tag.

<HTML>

<BODY>

(PAGE TO PAGE LINKING)

<BR>

<A HREF="FIRST.HTML"> Visit my page </A>

<BR>

(PAGE TO URL LINKING)

<BR>

<A HREF="http://www.nrsolution4u.com"> VISIT MY WEBSITE </A>

<BR>

(PAGE TO DOCUMENT LINKING)

<BR>

<A HREF="RESUME.PDF"> DOWNLOAD MY RESUME</A>

<BR>

(PAGE TO API LINKING)EX. Post, youtube

<BR>

<A HREF="https://www.youtube.com/watch?v=wnHW6o8WMas"> VISIT MY MOTIVATIONAL VIDEO </A>

</BODY>

</HTML>

HTML EMBEDING:-

1)embedding is process is used to display social media information in our web page.

2) embedding is used to <Iframe>.

<HTML>

<BODY>

EMBEDING PROCESS

<BR>

</BODY>

</HTML>

ASSIGMENT:- 1

create a web page in following instructions

1) centre of the screen-biodata.

2) centre of the screen-your name

3) centre of the screen-your Email.

4) centre of the screen-your mobile.

5) Display horizontal line.

6) centre of the screen-educational details.

7) display your education detail in following format.

1. school

.name of school

.your percentage

2. college

.name of college

.branch

.percentage

8)display horizontal line

9) centre of the screen-work experience

10) display your experience in following format

company name-highlight

company ADDRESS- ADDRESS TAG

DATE OF JOINING-BOLD LETTER

11) DISPLAY HORIZONTAL LINE

12) DISPLAY ANY ONE MOTIVATIONAL VIDEO IN A PAGE.

13) DISPLAY ANY ONE LINKEDN POST IN A WEB PAGE.

14) DISPLAY HORIZPNTAL LINE

15) CRETE A LINKING-VISIT MY FACEBOOK PAGE

16) CENTRE OF THE SCREEN- DEVELOPED BY YOUR NAME

HTML FORMS:-

1)forms is communication between user to web page

2) all form used to created inside the <form> tag3) there are following control used in form.

1. textbox control

2. password box control

3. redio button control

4. checkbox control

5. text area control

6. drop down list control

7. button control

<HTML>

<BODY>

<FORM>

ENTER YOUR NAME

<BR>

<BR>

enter your password

<BR>

<BR>

select your gender

<BR>

Male-<input type="radio"> ( single selection)

<BR>

select your course

<BR>

MBA-<input type="checkbox">

MCA-<input type="checkbox">

<BR>

select your city

<BR>

<option>Nagpur </option>

<option> Mumbai </option>

</select>

<BR>

write your query:-

<BR>

<textarea> comment now </textarea>

<BR>

<BR> ( or )

</FORM>

</BODY>

</HTML>

ASSIGMENT-2

1.creat a admission form in following

enter roll no.( TB textbox)

enter name -(TB)

enter e-mail -TB

mobile- TB

gender:-

mail- radiobutton

female - radiobutton

horizontal line

selct degree-

UG-radiobutton

PG- radiobutton

horizontal line

select your course

cSe - checkbox

IT- checkbox

Civil- checkbox

horizontal line

select your city - dropdown list (any 5 cities)

horizontal line

write your massage- textarea

crate button - submit

HTML TABLE:-

1.Table is representing data and information in row and column format.

2.there are following parts used in table.

roll name city- (heading)- <TH> </TH>

101 Ramesh Nagpur

102 umesh pune

103 Mahesh nashik- (data)- <TD> </TD>

ROW= <TR> </TR>

3.Table used to be created inside the <table>.

<HTML>

<BODY>

<TR>

</TR>

<TR>

<TD> RAMESH </TD>

<TD> NAGPUR </TD>

</TR>

<TR>

<TD> UMESH </TD>

</TR>

<TR>

<TD> MAHESH </TD>

<TD> NASHIK </TD>

</TR>

</TABLE>

</BODY>

</HTML>

CONTAINT MANAGMENT:-

1.In conraint management concept open multiple page in single window.

2. in this concept we have to use <IFRAME>.

3. There are following attribute used in <IFRAME>.

1.Height

2.width

3.name

WHAT IS TARGET ATTRIBUTE:-

(In this attribute is used to locate the link)

<HTML>

<BODY>

<a href="first.html" target="F1"> first</a>

<a href="table.html" target="F1"> table </a>

<br>

</BODY>

</HTML>

ASSIGMENT 3

tassk=1

1.create a table in following format

sno college website department

1 raisoni raisoni.com 1 MBA

2 MCA

3 BBA

2 KDK Kdk.com 1.BSE

2.CSE

3.IT

1. LOGIC ( user can click college website then open website)

2. logic (department name should be ordered format.)

task=2

create your biodata in following format-

create a page biodata.html

about education experience contact

create Iframe (600*600)

about.html- write your brief introduction

eduction.html- write your education details in table format

experience.html- write your experience in table format

contact.html- create a contact form

(name-textbox-) i frame

(email-textbox-)

(mobile-textbox-)

(massage-textarea)

(submit)

BODY ATTRIBUTES :-

there are some types of attributes used in a body tag.

1.BG color <BODY BGcolor="red">

IMAGE HANDLING IN HTML :-

1.in the concept we have to used image in html page.

2.image is used <IMG>

<IMG SRC="P1.JPG" HEIGHT="200" WIDTH="200" BORDER="5">\

BACKGROUND IMAGE:-

MARQUEE :-

this tag is used to move data on computer screen.

marquee height="200" width="500" bgcolor="yellow" direction="up" scrolldelay="1" scrollamount="1"> welcome to my program </marquee>

REVIEW POINT:-

1. basic html

2. <mark>

3. <del>

4. <address>

5. <BR>

6. <hr>

7. <center>

8. bold <b>

9. <i>

10. <U>

11. <P>

12.Heading <h1>to <h5>

13.<form>

14.<ol>

14.<ui>

15.ebedding- youtube

16. <table>

17. <iframe>

18. &nbsp

19. image handling - <img>

20. background color

21. background image

22.marquee

TASK=1

create your idea and developed a web page including all topic.

-----------------------------------------------------------------

22/1/25

CSS (CASCADING STYLE SHEET)

1.css is collection of attribute ( colour, height, width)

2.CSS can not used tag symbol<>

3.CSS only used tag name ( font, B, Center )

TYPES OF CSS:-

there are some types of CSS.

1.internal CSS:- Create inside HTML file.

2.external CSS.:- create outside HTML file.

3.Inline CSS.:- this CSS direct used with Tag.

DIFFERENT BETWEEN HTML ATTRIBUTE AND CSS ATTRIBUTE:-

1.HTML attribute is represting =

ex. height="100", width="100"

2.CSS attribute is representing :

ex. height:100, width:100

3.in CSS all numerical value is represent PX

ex. height:100PX , width:100PX

CSS REPRESENTETOR:-

CSS IS to be represented (style)

WHAT IS INLINE CSS:-

inline CSS is used inside HTML tags.

HTML>

<BODY>

<font style="color:red">welcome</font>

<BR>

<H1 style="color:red"> welcome </H1>

</BODY>

</HTML>

DIVISION CONCEPTS :- (IMP)

1.Division is provide a concept for creating Cell in computer screen.

2.division is basically used to create a web page in proper format.

3.division is used <div> </div>.

there are following attributes used in <div> </div>

1.background - color

2.height

3.width

4.top

5.left

6.position

POSITION ATTRIBUTES:-

position attribute is provide flexibility of <div>.

= by default all div is used to fixed position.

=if user can required flexible div than using position attributes with the value of "absolute".

<div id="box1" style="background-color:yellow; height:100px; width:100px; top:1px; left:1px;"> welcome </div>

<div id="box2" style="background-color:red; height:100px; width:100px; top:500px; left:1px; position:absolute;"> Nagpur </div>

<div id="box3" style="background-color:blue; height:100px; width:100px; top:1px; left:1100px; position:absolute;"> MUMBAI </div>

INTERNAL CSS:-imp

1. internal css is used to create inside html page.

2. internal css is to be saved DOT HTML.

structure of internal CSS.:-

<HTML>

<HEAD>

LOGICS======{ }

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

METHOD OF INTERNAL CSS:- imp

there are two method is used to internal CSS

1. tag name method

2. class method

1. TAG NAME METHOD:- imp

tag name method only used name of the Tag.it can not used tag symbol. < >

NOTE:- in tag name menthod can not used similar tag name.

syntax :-

tagname

{

attribute;

}

ex.:=

font

{

color:red;

}

ex.:-

<html>

<head>

font

{

color:red;

}

</style>

</head>

<body>

<font> welcome </font>

<br>

<font> NAGPUR </font>

<br>

<font> MUMBAI </font>

</body>

</html>

2. CLASS METHOD:- imp

1. in class method user can create multiple CSS.

2. all class is to be created using (.) operators

SYNTEX:-

.classname

{

attributes:

}

ex.:-

<html>

<head>

font

{

color:red;

}

</style>

</head>

<body>

<font> welcome </font>

<br>

<font> NAGPUR </font>

<br>

<font> MUMBAI </font>

</body>

</html>

EXTERNAL CSS:-

1.in this type of CSS is used to create outside the HTML the page

2.external CSS is to saved .css extention

3.external CSS can not used tag symbol

.myone

{

color:red;

}

.mytwo

{

color:yellow;

}

.mythree

{

color:blue;

}

NOTE:- 1.CSS FILE CAN NOT EXECUTED

2.CSS FILE ONLY CONNECT TO HTML PAGE.

HOW TO CONNECT EXTERNAL CSS TO HTML PAGE:-

1.in this concept using <link>

there are following attributes used in <Link>.

1.href

2.rel

3.type

1]]]] EXAMPLE NO.1

CSS FILE :-

.myone

{

color:red;

}

.mytwo

{

color:yellow;

}

.mythree

{

color:blue;

}

HTML FILE:-

<html>

<head>

</head>

<body>

<font class="myone">welcome </font>

<br>

<font class="mytwo"> NAGPUR </font>

<br>

<font class="mythree"> MUMBAI </font>

</body>

</html>

2]]]] EXAMPLE NO.2

CSS FILE:-

.my1

{

color:red;

}

.my2

{

color:blue;

}

.my3

{

color:yellow;

}

.my4

{

background-color:red;

height:100px;

width:100px;

top:1px;

left:1px;

}

HTML FILE:-

<HTML>

<HEAD>

</HEAD>

<BODY>

<FONT CLASS="MY1">WELCOME </FONT>

<BR>

<FONT CLASS="MY2"> NAGPUR </FONT>

<BR>

<FONT CLASS="MY3"> MUMBAI </FONT>

<br>

</BODY>

</HTML>

ASSIGMENT:-

convert all div assignment into external CSS.

DOUBT POINTS FOR MONDAY

1] repeat external & internal css

2] CSS kyu use hota hai = page arrangement

3] jaise div mei image add hoti thi yaha nahi add hoti ya fhir word center mei aata tha vaisa word center mei nahi aata

4] asigment 3 mei checked

tASK :1

developed any CLONE = koi bhi ek website

1. externl & internal CSS :-

<html>

<head>

.myone

{

color:red;

}

</style>

</head>

</html>

2. EXTERNAL CSS:-

if the css is outside is CSS html then its called external CSS

.MYONE

{

Color:red;

}

JAVA SCRIPT :-

1.Java script is provide programming fundamental in HTML language.

2.java script is case sensitive language. (different between upper case letter or lower case letter

3.all scripting is used inside the <Head>

structure:-

<html>

<head>

[create your logics]

</script>

</head>

</html>

JAVASCRIPT STATEMENT:-

note:-java script can not used any type of HTML tag

programming mei statement ke last me ; jaruri hai

there are following statement used in JAVA SCRIPT:-

1.output statement

2. Alert statement

3. Input statement

4. confirm statement

html>

<head>

document.write("welcome to Nagpur");

document.write("<br>");

document.write("Pune");

alert("this is alert box");

confirm("this is confirm box");

prompt("this is input box");

</script>

</head>

</html>

JAVA SCRIPT VARIABLE:- IMP

variable is name of location where user can store all type of data element.

ex.

a=10

b=10.5

c=Ramesh

( a,b,c called variables)

TYPES OF VARIABLES:-

there are two types of variables.

1. variant variables

2. non variant variables

1) VARIANT VARIABLES:-

10-intezer (any type of number)

10.5-float ( Decemal word)

Nagpur-string (any type of mssg)

In programming Language variable is representing there type is called variant Variable.

ex. int a;

float b;

2) N0N VARIANT:-

non variant variable is depend on data value.

ex. a=10

b=10.5

c=nagpur

HOW TO CREATE VARIABLE IN JAVASCRIPT:-

in java script variable is to be created using 'var' keyword

syntax:-

note:- variable can not used "" inverted couma.

VAR NAME;

ex.:-

var city;

var college;

var country;

var a=10;

document.write(a);

var city="Nagpur";

document.write(city);

HOW TO DISPLAY VARIABLE DATA WITH MASSAGE:-

result is

the value of a-10

note :- in java script using variable with massage (+) operator)

var a=10;

document.write("the value of a" + a);

HOW TO INPUT DATA FROM THE USER USING PROMPT STATMENT:-

var a;

a=prompt("enter any number");

document.write(1);

HOW TO DISPLAY VARIABLE VALUE INSIDE THE TAG:-

var a;

a=prompt("enter any number");

document.write("<h1>" + a +"</h1>");

How to accept numerical data value:-

-In javascript accept numerical data using parseInt() method

var a,b,c;

a=parseInt(prompt("Enter any number"));

b=parseInt(prompt("Enter any number"));

c= a + b;

document.write("The value of c is " + c);

-----------------------------------------------

Program management:-

- All types of programming langauge is used to two types of method for managing the program

1) condition management

2)flow management

1) condition management:-

if-else,else-if,

else-otherwise ke jagh pe else = if =condition

IF & ELSE:-

<html>

<head>

var age;

age=parseInt(prompt ("enter your age"));

if(age>18)

{

document.write("you can vote");

}

else

{

document.write("you can not vote");

}

</script>

</head>

</html>

ELSEIF:-

-elseif=multiple condition pe elseif

- last mei single else complusory

var per;

per=parseInt(prompt("enter your percentage"));

if(per>=60)

{

document.write("A grade");

}

else if(per>50 && per<60)

{

document.write("B grade");

}

else if(per>40 && per<50)

{

document.write("C grade");

}

else

{

document.write("fail");

}

2) flow management:-

-It is called looping statement

while loop, do while loop,for loop

- if-else use only single condition

var a,b,c;

a=parseInt(prompt("Enter any number"));

b=parseInt(prompt("Enter any number"));

c= a + b;

document.write("The value of c is " + c);

Else if statement:-

-else-if is used to check multiple conditions in a program

Q-input percent from the user and check the fallowing condition-

percent > 60 then display 'A' grade

percent > 50 and < 60 'B' grade

percent > 40 and <30 "c" grade otherwise fail\

Task:-

1) write a program to generate fallowing result:

input fallowing information from the user

name

city

branch

subject

Logic:

1) calculate total if all subject marks greater then 40

2) If total is generated then check the fallowing condition-

total>250 -A grade and provide 100 grace mark in total

total >150 and < 250 -B grade and provide 50 grace mark in total otherwise fail

3)print all the student information on computer screen only if total generated

Task2:

input amount from the user and calculate 18% GST of given amount and display total amount

result- amount -5,000

Gst 18% -690

total amount -5,690

Task3:-

input fallowing information from the user

product name

cost

quantity

logic:

1) calculate total amount

2) check the fallowing condition

total >5,000 then provide 10% discount of given total and display final amount

total >2,000 and <5,000 then provide 5% discount of given total and display final amount

3) if user can enter 0 quantity then total can't generated and display massage "please input valid quantity " in alert box

Task4:-

create any ideas excluding task

CHOICE BASED PROGRAMMING:-

1)in this concept user can create option based program.

2)choice based programming is used to switch case fundamental.

syntax:-

switch()

{

case 1: statement

break;

case 2: statement

break;

case 3: statement

break;

default: statement (if choice can not match than returning default statement)

break;

}

<html>

<head>

var ch;

ch=parseInt(prompt("enter your choice"));

switch (ch)

{

case 1: document.write("one");

break;

case 2: document.write("two");

break;

case 3: document.write("three");

break;

case 4: documenr.write("four");

break;

default: document.write("invalid choice");

break;

}

</script>

</head>

</html>

LOOPING FUNDAMENTAL:-

1) looping is process for using repeatation of a statement.

2) in programming concept using twe types of loops.

1. define loop - specified the condition.

ex. display 1 to 10 numbers

display 1 to 10 even numbers

-in defined loop using while, dowhile and for loop.

2. undefined loop -

- in this types of loop is not specified the condition, this types of loops is contiously execute in a program.

EX. for(;;)

TASK 1:-

input 2 number from the user and perform the following operation in given choice.

if choice=1 than perform addition operation

choice=2 than perform substraction of 2 numbers

choice=3 than perform multiplication of 3 numbers

than

default= invalid choice

1) DEFINED LOOPS:-

1) WHILE LOOP:-

-While loop is called define loop

-while loop is continuously execute the program as long as the condition is true.

-looping is used to counter variable.

-while loop also called as entry loop.

<html>

<head>

var i=1;

while(i <=10)

{

document.write(i + "<br>");

i=i+1;

}

</script>

</head>

</html>

que= write a program to display 1 to 10 even number 2,4,6,8,10,12,14,16,18,20

<html>

<head>

var i=2;

while(i <=10)

{

document.write(i);

i=i+2;

}

</script>

</head>

</html>

que-2

write a program to display 1 to 10 odd number.

<html>

<head>

var i=1;

while(i <=10)

{

document.write(i);

i=i+2;

}

</script>

</head>

</html>

DO WHILE LOOP:-

in this loop is also called exist loop because in this loop first execute the statement than check the condition.

<html>

<head>

var i=1;

{

document.write(i);

i=i+1;

}

while(i<=10);

</script>

</head>

</html>

FOR LOOP:-

-while and do while loop is required multiple line.

-we have to use and other type of loops is called for loop, it is also called single line loop.

-for loop is dividing into 3 sections.

1)variable loop

2)condition loop

3)increment or decrement

<html>

<head>

var i;

for(i=1; i<=10; i=i+1)

{

document.write(i);

}

</script>

</head>

</html>

HOW TO USE N NUMBER OF LOOPS:-

(N= user input)

<html>

<head>

var i=1,N;

N=parseInt(prompt("enter any number"));

for(i=1; i<=N; i=i+1)

{

document.write(i);

}

</script>

</head>

</html>

TASK 1:-

-convert all looping concept into N number of program.

(10 ki jagah N)

JAVA SCRIPT STRING HANDLING CONCEPT:-

-in this concept we have to use some string handling function for managing string data.

1) length function.

var msg="welcome";

document.write(msg.length);

2) uppercase function.

var msg="welcome to nagpur";

document.write(msg.toUpperCase());

3) lowercase function.

var msg="WELCOME NAGPUR";

document.write(msg.toLowerCase());

4) concat function.(dono word ko marge karna ):-

note:- blank space dene ke liye (" ",)

var s1="nagpur";

var s2="city";

var s3=s1.concat(" ",s2);

document.write(s3);

5) replace function.

var s1="nagpur is a good city, nagpur is big city";

var s2=s1.replace("nagpur","pune")

document.write(s2);

6) replaceall function.

var s1="nagpur is a good city, nagpur is big city";

var s2=s1.replaceAll("nagpur","pune")

document.write(s2);

7) padstart function.

-(for ex. bank mei account number ke 1st letter blank hote *ke sath)

var s1="5";

var s2=s1.padStart(4,"*");

document.write(s2);

8) padend function.

var s1="5";

var s2=s1.padEnd(4,"*");

document.write(s2);

TASK 1:-

- convert all string handling method to user input and generate the following result.

enter any massage

result is - length

2- generate the result

enter your massge

result is - uppercase or lowercase result

3- generate the result

enter massage one

enter massage two

result is concate massage.

4-genrate the result

enter any massage

enter find word

enter replace word

result is replace all

5- generate the result

enter digit

enter number of *

result is - display * starting of the digit

6- generate the result

enter digit

enter number of *

result is - display * ending of the digit

Task1:-

write a program to generate the fallowing result

input any massage from the user

and perform fallowing operations in user choice

if user can press 1 then display length of massage

if user can press 2 then convert all massage to uppercase

if user can press 3 then convert all massage to lowercase

if user can press 4 then input find word and replace the existing word with massage

Task2:-

write a program to generate fallowing result

input fallowing information from the user

name,company,salary

check the fallowing logic

salary > 5000 then display manager and calculate 5% da of given salary

salary >2000 and <5000 then provide 2% da of given salary

otherwise display existing salary

Task3:-

calculate electricity bill process in javascript

input fallowing info

customer name, meterNo

city

previousUnit

currentUnit

totalUnit

rateOfUnit

TotalBill

eg-

customerName -Ramesh

meterNo - 1254

city - Nagpur

prviousUnit- 1000

currentUnit - 1500

currentUnit - previousUnit 1000 - 1500 = 500

condition

if totalUnit > 100 then rateOfUnit 4.5

if totalUnit > 50 and < 100 then rateOfUnit 2.5

500 * 4.5 = 2250

total amount = amount + tax(200) + service charges(60) + consumption rate(100)

print all information on computer screen

JavaScript Function:-

- Function is a small job program.

- function separator (display)

- Function terminology

1)function Defination:-

create a function is called function defination

2) function calling:-

when user can use the function is called function calling

- how to create a function in javascript:-

Inside javascript all function is to be created using function keyword

function name()

{

statement

}

all statement inside the function is called container statement

function display()

{

}

How to access function:-

-Access function inside the javascript using button control

-Inside the button control we have to use on click event

<html>

<head>

function display()

{

document.write("Welcome");

}

</script>

</head>

<body>

<button onclick="display()">Submit</button>

</body>

</html>

How to access multiple function in single button:-

<html>

<head>

function display()

{

document.write("Welcome");

document.write("<br>");

show();

}

function show()

{

document.write("Nagpur");

}

</script>

</head>

<body>

<button onclick="display()">Submit</button>

</body>

</html>

Task1:-

salary program into function

function display()

{

}

FUNCTION PARAMETER:-

-parameter is special types of data used inside function().

Ex.

function display(A)

-A is called parameter.

Ex.

function show(name,city)

-name,city called parameter.

TYPES OF PARAMETER:-

there are two types of parameters used in function:-

1)receivers parameter

2)senders parameter

1) RECEIVERS PARAMETER:-

- IN this parameters only create at the time of functions creations.

Ex.

function display(Name,city) -(it is called receivers parameter.)

{

}

2) SENDER PARAMETER:-(argument)

-in this parameter only used at the time of function calling inside the onclick event.

Ex.

-((10) called sender parameter)

<html>

<head>

function display(roll,name)

{

document.write(roll);

document.write("<br>");

document.write(name);

}

</script>

</head>

<body>

</body>

</html>

TASK 1

- write a program to generat following functions

create a function display()

create a parameter- roll,name,city,state,country,branch

display all the information on computer screen.

TASK 2

-write a program to perform addition of two number using function

TASK 3

- write a program to display 1 to 10 number using functions.

TASK 4

-implementation of length concept using function.

TASK 5

- Implmentation of to uppercase() function using function concept

TASK 6

- implementation of lowercase using function.

TASK 7

Pperform concat method using function.

- all program is to be created using function parameter.

DOUBT POINT:-

1. sir jo aapne assignment diya woh proper nahi hua addition aur baki chize ismei nahi kar paye like

2.input parameter kaise use hota hai

ans= using get element concept.

3. logic

ans= koi bhi function

i=0 < SIR mujhe ye topic 100 clear nahi hai

LOCAL AND GLOBAL VARIABLE :-

1) local variable:- (1 se jyada function program mei local logic use hoga)

-local variable only used inside the block.

EX.

Display(b) - B is called local.

{

var a [A IS CALLED LOCAL VARIABLE]

}

-local variable can not access outside the program.

2) global variable:-

- global variable used in outside the program.

Ex.

SINTEX:-

var a [a is called global]

function show()

{

}

-global variable is to access whoal program.

<html>

<head>

var n;

function input(num)

{

n=num;

display();

}

function display()

{

document.write(n);

}

</script>

</head>

<body>

</body>

</html>

TASK 1:-

write a program to generate following result

create a function input()

create a parameter-roll,name,M1,M2,M3,M4,M5,

create a function-grade()

create a parameter total

-create a function-display()

logic 1- grade function is used to display student grade

total < 250-A grade otherwise B grade

logic 2- all student information is to display inside display function.

the result is generated in this format.

roll-101

name-Ramesh

M1-50

M2-62

M3-70

M4-90

M5-92

total-280

grade-A

-------------------------------------------------------------------

dt= 3/2/25

HOW TO ACCESS <HTML> TAG INSIDE JAVASCRIPT:-

-In this concept using two specific methods

1)using control ID method.

2)getelement by ID method.

1)CONTROL ID METHOD:-

-in this method provides ID attribute in <HTML>.

EX.

2)GETELEMENT BY ID METHOD:-

- in this method Access all Tag using specific ID.

SYNTAX:-

getElementById("id")

EX.

getElementById("p1")

getElementByID("f1")

<html>

<head>

function display()

{

document.getElementById("p1").innerHTML="Welcome";

}

</script>

</head>

<body>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

----------------------------------------------

DISPLAY VARIABLE VALUE INSIDE THE TAG:-

<html>

<head>

function display()

{

var a=10;

document.getElementById("p1").innerHTML=a;

}

</script>

</head>

<body>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

------------------------------------

HOW TO DISPLAY EXPRETION INSIDE THE TAG:-

<html>

<head>

function display()

{

var a=10;

document.getElementById("p1").innerHTML=10+20+30/2;

}

</script>

</head>

<body>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

--------------------------------------------------

TASK 1:-

-write a program to generate following result.

create a function-input

create a parameter-id,name,salary,designation

logic 1:- check the following condition

if salary > 5000 and designation is manager than display company remark "goodstaff " inside paragraph tag with blue color.

if salary> 2000 and <5000 and designation is "clerk" than display company remark "Avaragestaff" inside <b> with red color.

Logic 2:- display all the information inside the <table> in following format.

id name designation salary remark

101 Ramesh manager 7000 goodstaff(blue color)

TASK 2:- Create a function-input

create a parameter-roll,name,branch,M1,M2,M3,M4,M5

LOGIC 1:-calculate total

logic 2:-calculate grade(total>250)

display result in following format

roll name branch m1 m2 m3 m4 m5 total grade

101 Ramesh mba 50 60 70 80 90 350 A-bold letter blur c

B grade-bold letter green color

fail-red color

doubts:-

condition management (if, else, elseif, switch)

flow management (loop, do while loop,for loop)

thread

looping fundamental

salray wala kaise kareneg

var level; kyu lagta hai

-----------------------------------------------------

dt-5/3/25

WORKING OF TEXTBOX:-

-In javascipt all textbox accepting data in a form of value.

(input box jab bhi aayega tab getelement mei value lagega)

<html>

<head>

function addition()

{

var a,b,c;

a=parseInt(document.getElementById("T1").value);

b=parseInt(document.getElementById("T2").value);

c=a+b;

document.getElementById("T3").value=c;

}

</script>

</head>

<body>

enter first number

<br>

<br>

enter second number

<br>

<br>

result is

<br>

<br>

<button onclick="addition()"> submit </button>

</body>

</html>

-----------------------------------------------------

HOW TO GET DATA FROM TAG ELEMENT:-

1)in this concept using name attribute in form control.

EX.

2)insight form tag using two special attribute.

1.NAME

2.ONSUBMIT

<html>

<head>

function display()

{

var name=document.myform.M1.value;

document.write(name);

}

</script>

</head>

<body>

<br>

</form>

</body>

</html>

TASK 1:-

generate the following result.

-enter your name-textbox

-create a button-length,lowercase,uppercase

all result display in paragraph tag.

TASK 2:-

-Enter massage-tb

-enter find word-tb

-enter replace word-tb

-create a button-replace all

all result display in paragraph tag.

TASK 3:-

write a program to generate following result.

-create a function-input

-create a parameter-roll,name,city,total

-check the condtion

total>250-A grade otherwise B Grade

-create a form

roll-textbox

name-tb

city-tb

total-tb

button-submit

SYNTEX:-

<html>

<head>

function input(name)

{

document.write(name);

}

</script>

</head>

<body>

Enter Your Name

<br

<br>

<button onclick="input(T1.value)">submit</button>

</body>

</html>

----------------------------------------

dt 7/3/25

HOW TO CHECK TEXT BOX DATA VALUE IS BLANK OR NOT:-

- check the blank data value usmei "" or null bhi chalta hai.

<html>

<head>

function display()

{

var name;

name=document.getElementById("T1").value;

if (name=="")

{

alert("please input proper data");

}

else

{

alert("your data is valid");

}

</script>

</head>

<body>

<br>

<button onclick="display()"> submit </button>

</body>

</html>

-------------------------------------

EXCEPT NUMERICAL DATA VALUE:-

<html>

<head>

function input()

{

var num;

num=document.getElementById("T1").value;

if(isNaN(num))

{

alert("please accept only number");

}

else

{

alert(num);

}

</script>

</head>

<body>

<br>

<button onclick="input()"> submit </button>

</body>

</html>

- jab bhi hum num use krte hai to"num" nhi lagate only num

screen text including following concept:-

1- function

2- condition statement(if else elseif)

3- control text box

4- basic html

5- gateElementById

6- check the blank data value

7- logical expression.

---------------------------------------------

shayam que

condition

4. total amt>10000 than increment of 5% in given amount. in given amt and total amt display in red colour.

total amt >5000 and <10000 provide 7%incriment. amt display in blur color

user can click result button than display all information on computer screen.

-----------------

create calculate function

create a variable-cost,gst,amount

formula gst formula gst= cost*18/100

amount=cost+gst;

<font color="blue"><p id="p1"> </p> </font> body tag

result=

enter name=jhbdqgj

enter mobile= 123

email=a@gmail.com

tender number=T123

tender cost=5000

18 gst = 18

caluaclate button

gst amount=690

total amount=5690

7% incriment=5690*7/100 =350

final amount=5690+350 ===final

----------------------------------------------------------------

dt:-18/3

DOM:- (Document object model)

-document object model is representing all types of document process.

-document object model is used to document keyword.

-there are following implementation used in document object model

1)display title of the document:-

2)display URL of the document:-

3)display number of the link of the document:-

4)display number of the image of the document:-

1)display title of the document:-

-title print karana ho tb

<html>

<head>

<title> THIS IS MY FIRST APPLICATION </title>

function display()

{

document.getElementById("P1").innerHTML=document.title;

}

</script>

</head>

<body>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

2)display URL of the document:-

-link print karane ke liye use hota hai

<html>

<head>

function display()

{

document.getElementById("p1").innerHTML=document.URL;

}

</script>

</head>

<body>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

3)display number of the links of the document:-

- number of links show hojayega agr jitney bhi page hai utne link count karega.

- number of link ko findout karte hai.

<html>

<head>

function display()

{

document.getElementById("p1").innerHTML=document.links.length;

}

</script>

</head>

<body>

<br>

<br>

<br>

<br>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

4)display number of the image of the document:-

- imges number of images ko findout karte hai.

<html>

<head>

function display()

{

document.getElementById("p1").innerHTML=document.images.length;

}

</script>

</head>

<body>

<br>

<br>

<br>

<br>

<br>

<button onclick="display()"> SUBMIT </button>

</body>

</html>

ASSIGMENT:-

combined all document implementation inside single program.

---------------------------------------------------------------

dt:-24/3

CSS:-

html:- (only for designing concept)

JavaScript:- (event handling concept)

CSS:- (page arrangement)

CSS:- (CAS CADING style sheet)

(cas cading style sheet)

1. cas cading:-

- cas cading is process for code sharing approche.

2.style- attributes (height,width,etc.)

3.sheet-file.

- css is collection of attributes (height,width,color,)

- css can not used (<>)tag symbol.

- html attributes is used to (=) operators.

- css attributes is used to (:) operators.

EX.

html- height="100"

css- height:100;

- all numerical element in css is used to (px) symbol.

EX.

height:100px;

- In html file is called page.(about,contact,etc)

- In Css the file is called (sheet).

- types of CSS:-

1-Internal CSS

2-External CSS

3-Inline CSS

4-cross CSS

1) INLINE CSS:-

- inline CSS is directly used with Tag(<>).

-css is representing style attributes.

SYNTEX:-

EX.

<font style="color:red"> WELCOME </font>

<html>

<body>

<font style="color:red"> WELCOME </font>

</body>

</html>

2) DIVISION:-

- division is called cell.

-div is used to create a cell on web browser each cell contain a specific information.

-division is used to create <div>.

-there are following attributes used in <Div>

1)background-color

2)height-

3)width-

4)top-

5)left-

6)position (by default fix)-

position=absolute (flexible position)

SYNTEX:-

<html>

<body>

<div id="box1" style="background-color:red; height:100px; width:100px; top:1px; left:500px; position:absolute"> WELCOME </div>

</body>

</html>

---------------------------------------------------------------------

Search This Blog

Mahesh Bangde

HTML NOTES

Comments

Post a Comment

Popular posts from this blog

flow management:- While loop/*Do while loop/for loop/

C# PROGRAM MANAGEMENT/ 1) condition management

condition management IF, ELSE, ELSEIF