weblearning

code: <style> ul { list-style-type: none; padding: 0px; margin: 0px; overflow:hidden; } ul li { border: 1px solid black; width: 200px; text-align: left; background-color:#CCC; } ul li a { display: block; padding: 10px; text-decoration: none; font-size:20px; color:#000; } ul li a:hover { background-color:#F00; color:#FFF; } #act { background-color: #F00; color:#FFF; } </style> <ul> <li><a href="#" id="act">Home</a></li>     <li><a href="#">About Us</a></li>     <li><a href="#">Contact</a></li> </ul>

Code: <style> ul { list-style-type: none; padding: 0px; margin: 0px; overflow:hidden; background-color:#CCC; } ul li { float: left; border-right: 1px solid black; width: 200px; text-align: center; } ul li a { display: block; padding: 10px; text-decoration: none; font-size:20px; color:#000; } ul li a:hover { background-color:#F00; color:#FFF; } #act { background-color: #F00; color:#FFF; } </style> <ul> <li><a href="#" id="act">Home</a></li>     <li><a href="#">About Us</a></li>     <li><a href="#">Contact</a></li> </ul>

Code: <style> #one { position:absolute; height: 200px; width: 200px; background: red; z-index: 102; } #two { position:absolute; height: 200px; top: 30px; left: 30px; width: 200px; background: yellow; z-index: 103; } #three { position:absolute; height: 200px; width: 200px; top: 60px; left: 60px; background: black; z-index: 100; } </style> <div id="one"></div> <div id="two"></div> <div id="three"></div>

Code: <style> #one { position:absolute; height: 200px; width: 200px; background: red; z-index: 102; } #two { position:absolute; height: 200px; top: 30px; left: 30px; width: 200px; background: yellow; z-index: 103; } #three { position:absolute; height: 200px; width: 200px; top: 60px; left: 60px; background: black; z-index: 100; } </style> <div id="one"></div> <div id="two"></div> <div id="three"></div>

code: <style> ul li { display: inline; } p { display: inline; } div { display: inline; } span { display: block; } #inblk { display:inline-block; padding: 10px; background:red; } #inblk span{ display:inline-block; padding: 100px; background:yellow; } h2 { display: none; } </style> <ul> <li>USA</li> <li>UK</li> <li>CANADA</li> <li>FRANCE</li> </ul> <h2>CSS Display</h2> <p>We are learning CSS</p> <p>Today We are learning CSS Display property</p> <div>We are learning CSS</div> <div>Today We are learning CSS Display property</div> <br /> <span>We are learning CSS</span> <span>Today We are learning CSS Display property</span> <div id="inblk"> <span>We are learning inline block of display property</span...

Code: <script> var email = prompt("Enter the email"); if((email.indexOf('@')>0)&&(email.indexOf('.')>0)){ alert("Valid Email"); } else { alert("Invalid Email"); } </script>

Code: <script> var email = prompt("Enter the email"); if((email.indexOf('@')>0)&&(email.indexOf('.')>0)){ alert("Valid Email"); } else { alert("Invalid Email"); } </script>

Code: <script> var flag = 0; var prime = ""; for(var i=3;i<=100;i++) { for(j=3;j<i;j++){ if(((i%2)==0)||((i%j)==0)){ flag = 1; } } if(flag==0){ prime += i+","; } var flag = 0; } document.write(prime); </script>

Code: <script> var flag = 0; var prime = ""; for(var i=3;i<=100;i++) { for(j=3;j<i;j++){ if(((i%2)==0)||((i%j)==0)){ flag = 1; } } if(flag==0){ prime += i+","; } var flag = 0; } document.write(prime); </script>

Code: <style> p { text-indent: -100px; width: 500px; border: 1px solid red; padding-left: 200px; } div { letter-spacing:-1px; padding-left: 200px; border: 1px solid red; } span { line-height: 35px; padding-left: 200px; border: 1px solid red; } </style> <p>We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.</p> <div>We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.</div> <span>We are learning line-height.We are learni...

Code: <style> p { text-indent: -100px; width: 500px; border: 1px solid red; padding-left: 200px; } div { letter-spacing:-1px; padding-left: 200px; border: 1px solid red; } span { line-height: 35px; padding-left: 200px; border: 1px solid red; } </style> <p>We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.</p> <div>We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.</div> <span>We are learning line-height.We are lear...

Code: <style> p { text-indent: -100px; width: 500px; border: 1px solid red; padding-left: 200px; } div { letter-spacing:-1px; padding-left: 200px; border: 1px solid red; } span { line-height: 35px; padding-left: 200px; border: 1px solid red; } </style> <p>We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.</p> <div>We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.</div> <span>We are learning line-height.We are lear...

Code: <style> p { text-indent: -100px; width: 500px; border: 1px solid red; padding-left: 200px; } div { letter-spacing:-1px; padding-left: 200px; border: 1px solid red; } span { line-height: 35px; padding-left: 200px; border: 1px solid red; } </style> <p>We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.We are learning CSS. Today we will discuss text-indent property.</p> <div>We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.We are learning letter-spacing property.</div> <span>We are learning line-height.We are learn...

Code: <style> div { height: 200px; width: 200px; border: 1px solid red; overflow: auto; } </style> <div> We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. </div>

Code: <style> div { height: 200px; width: 200px; border: 1px solid red; overflow: auto; } </style> <div> We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. We are learning CSS today. We are learning overflow property. </div>

code: <script> function fn(){ var arr = new Array("India","America","Canada","France"); arr.reverse(); alert(arr); } </script> <input type="button" value="Sort" onClick="fn()" />

Code: <script> function fn(){ var arr = new Array(10,5,3,12,7); arr.sort(function (a,b){ return a-b; }); alert(arr); } </script> <input type="button" value="Sort" onClick="fn()" />

code: <style> body { /*background-color: red;*/ background-image: url(3068.jpg); background-repeat: no-repeat; } </style> <body> <div>We are learning css background property</div> </body>

code: <style> div { /*border-width: 2px; border-color: red; border-style: solid; border-radius: 20px; */ width: 250px; border: 2px solid red; border-radius: 20px; } </style> <div> we are learning css border </div>

Code: <style> div { /*border-width: 2px; border-color: red; border-style: solid; border-radius: 20px; */ width: 250px; border: 2px solid red; border-radius: 20px; } </style> <div> we are learning css border </div>

Code: <style> body { border: 1px solid black; margin: 20px; } #container { border: 1px solid red; margin: 20px; padding: 30px; } #one { border: 1px solid black; background:red; height:100px; width: 100px; } #two { border: 1px solid black; background:green; position: fixed; height:100px; width: 100px; top: 50px; left: 50px } #three { border: 1px solid black; background:yellow; height:100px; width: 100px; } </style> <body>     <div id="container">         <div id="one"></div>         <div id="two"></div>         <div id="three"></div>     </div> <p>we are learning css. Now we are discussing about position property of CSS</p>    <p>we are learning css. Now we are discussing about position property of CSS</p>...

code: <style> div { border: 2px solid red; padding: 20px 50px 100px 100px; } </style> <div> We are learning CSS Padding property today </div>

Code: <style> #one { float: right; } #two { float: right; } </style> <div id="one"> <img src="76753203173.jpg" height="250px" width="250px" /> </div> <div id="two"> <img src="pic.jpg" height="250px" width="250px" /> </div>

Code: <style> div { border: 1px solid red; margin: 50px 50px; } p { margin: inherit; } </style> <div>We are learning auto and inherit value of margin property <p>We are learning css. We are learning margin property</p> </div>

Code: <style> div { border: 1px solid red; margin: 50px 50px; } p { margin: inherit; } </style> <div>We are learning auto and inherit value of margin property <p>We are learning css. We are learning margin property</p> </div>

Code: <style> div { /* margin-top: 50px; margin-left: 50px; margin-right margin-bottom */ margin: 50px 50px 100px 50px; } </style> <div>We are learning CSS. We are learning margin today.</div>

Code: <script language="javascript"> /*  maximum and minimum number within given number  */ var arr = new Array(10,5,20,7,18); var maxnum = 0; for(var i=0;i<arr.length;i++){ if(arr[i]>maxnum){ maxnum = arr[i]; } } alert("The Heighst number is: "+maxnum); for(var i=0;i<arr.length;i++){ if(arr[i]<maxnum){ maxnum = arr[i]; } } alert("The Lowest number is: "+maxnum); </script>

Code: <script language="javascript"> function xyz(){ var ch = document.frm.char.value; if(ch=='a'||ch=='e'||ch=='i'||ch=='o'||ch=='u'){ document.getElementById('rst').innerHTML = "Character is Vowel"; } else{ document.getElementById('rst').innerHTML = "Character is Consonant"; } } </script> <div id="rst"></div> <form name="frm"> <label>Enter the character</label>     <input type="text" name="char" />     <br />     <input type="button" value="Submit" onClick="xyz()" /> </form>

Code: <script language="javascript"> function xyz(){ var ch = document.frm.char.value; if(ch=='a'||ch=='e'||ch=='i'||ch=='o'||ch=='u'){ document.getElementById('rst').innerHTML = "Character is Vowel"; } else{ document.getElementById('rst').innerHTML = "Character is Consonent"; } } </script> <div id="rst"></div> <form name="frm"> <label>Enter Character</label>     <input type="text" name="char" />     <br />     <input type="button" value="Submit" onClick="xyz()" /> </form>

Code: <script language="javascript"> function xyz(){ var ch = document.frm.char.value; if(ch=='a'||ch=='e'||ch=='i'||ch=='o'||ch=='u'){ document.getElementById('rst').innerHTML = "Character is Vowel"; } else{ document.getElementById('rst').innerHTML = "Character is Consonent"; } } </script> <div id="rst"></div> <form name="frm"> <label>Enter Character</label>     <input type="text" name="char" />     <br />     <input type="button" value="Submit" onClick="xyz()" /> </form>

Code: <script language="javascript"> function xyz(){ var yr = document.frm.year.value; if(yr%4==0){ document.getElementById('rst').innerHTML = "The givenyear is learyear"; } else{ document.getElementById('rst').innerHTML = "The givenyear is not learyear"; } } </script> <form name="frm"> <label>Enter the year</label>     <input type="text" name="year" />     <br />     <input type="button" value="Submit" onClick="xyz()" /> </form> <div id="rst"></div>

Code: <style> p { text-shadow: -2px -2px 4px red; } </style> <p>We are learning text shadow</p>

Code: <style> p { text-shadow: -2px -2px 4px red; } </style> <br /> We are learning text shadow</div>

Code: <style> p { text-transform: uppercase; } </style> <p> "i'm sure there are a few sore heads in Iceland this morning," Eidur Gudjohnsen, the country's record goalscorer, told CNN. "It was an amazing night -- historic for us, historic for world football. "Obviously we enjoyed going to the Euros in France 2016, our first major tournament, and the party seems to continue." Trinidad & Tobago, which has a population of 1.3 million, was the previous smallest country to reach a World Cup back in 2006. </p>

Code: <style> p { text-transform: uppercase; } </style> <p> "i'm sure there are a few sore heads in Iceland this morning," Eidur Gudjohnsen, the country's record goalscorer, told CNN. "It was an amazing night -- historic for us, historic for world football. "Obviously we enjoyed going to the Euros in France 2016, our first major tournament, and the party seems to continue." Trinidad & Tobago, which has a population of 1.3 million, was the previous smallest country to reach a World Cup back in 2006. </p>

Code: <style> a{ text-decoration: none; cursor: crosshair; } a:focus { color: red; } </style> <a href="#">USA</a><br /> <a href="#">UK</a><br /> <a href="#">CANADA</a>

Code: <style> a{ text-decoration: none; cursor: crosshair; } a:focus { color: red; } </style> <a href="#">USA</a><br /> <a href="#">UK</a><br /> <a href="#">CANADA</a>

Code: <style> a:link { color: red; } a:hover { color: green; } a:active { color: pink; } a:visited { color: yellow; } </style> <a href="#">USA</a><br /> <a href="#">UK</a><br /> <a href="#">CANADA</a>

Code: <style> a:link { color: red; } a:hover { color: green } a:active { color: pink; } a:visited { color: yellow; } </style> <a href="#">USA</a><br /> <a href="#">UK</a><br /> <a href="#">CANAD</a><br />

 code: <script language="javascript"> var url = window.location.protocol; alert(url); function fwd(){ window.history.forward(); } </script> <a href="nxt.html">Page</a> <br /> <input type="button" value="Next" onclick="fwd()" /> nxt.html: <script language="javascript"> function prv(){ window.history.back(); } </script> <input type="button" value="Previous Page" onClick="prv()" />

 code: <script language="javascript"> var url = window.location.protocol; alert(url); function fwd(){ window.history.forward(); } </script> <a href="nxt.html">Page</a> <br /> <input type="button" value="Next" onclick="fwd()" /> nxt.html: <script language="javascript"> function prv(){ window.history.back(); } </script> <input type="button" value="Previous Page" onClick="prv()" />

Code: <script language="javascript">  var num = prompt("Enter The Number");  if(num<=100 && num>=80)   {    alert("A+");     }  else if(num>=75 && num<80)  {   alert("A");  }  else if(num>=65 && num<75)  {   alert("A-");  }  else if(num>=55 && num<65)  {   alert("B");  }  else if(num>=45 && num<55)  {   alert("C");  }  else if(num>=33 && num<45)  {   alert("D");  }  else {   alert("FAIL");  } </script></div>

Code: <script language="javascript"> var num = prompt("Enter The Number"); if(num<=100 && num>=80) { alert("A+"); } else if(num>=75 && num<80) { alert("A"); } else if(num>=65 && num<75) { alert("A-"); } else if(num>=55 && num<65) { alert("B"); } else if(num>=45 && num<55) { alert("C"); } else if(num>=33 && num<45) { alert("D"); } else { alert("FAIL"); } </script>

Code: <body> <div style="color:red;" >We are learning</div> <p class="wpsi">CSS is used for styling web page</p> <p id="sep" style="color:yellow;">JavaScript is used for responsive web page</p> <p>PHP is server side language</p> <span class="wpsi">We will learn</span> </body>

Code: <link href="style.css" rel="stylesheet" media="all" /> <body> <div>We are learning</div> <p class="wpsi">CSS is used for styling web page</p> <p id="sep">JavaScript is used for responsive web page</p> <p>PHP is server side language</p> <span class="wpsi">We will learn</span> </body> style.css @charset "utf-8"; /* CSS Document */ body { color: green; } #sep { color: red; } .wpsi { color: blue; }

Code: <style> body { color: green; } </style> <body> <div>We are learning</div> <p>CSS is used for styling web page</p> <span>We will learn</span> </body>

Code: <style> body { color: green; } </style> <body> <div>We are learning</div> <p>CSS is used for styling web page</p> <span>We will learn</span> </body>

Code: <script language="javascript"> function xyz(){ document.getElementById('st').style.color = 'red'; document.getElementById('st').style.fontSize = 50; } </script> <p id="st">We are leaning how to style web page using JavaSCript</p> <input type="button" value="style" onClick="xyz()" />

Code: <script language="javascript"> function xyz(){ var x = "We are learning java script"; confirm(x); } </script> <input type="button" value="Confirm Box" onClick="xyz()" />

Code: <script language="javascript"> var a = true; var b = typeof(a); //alert(b); var c = new String(); var d = new Date(); if(c instanceof Date){ alert("Yes it is object of String"); } else { alert("No it is object of String"); } </script>

Code: <script language="javascript"> var x = 11; var y = "javascript"; var sum = 20; //alert(x+" "+y); sum %= x; alert(sum); /* -= *= /= %= */ </script>

Code: <script language="javascript"> var x = 11; var y = "javascript"; var sum = 20; //alert(x+" "+y); sum %= x; alert(sum); /* -= *= /= %= */ </script>

Code: <script language="javascript"> function sel(){ var txt = document.frm.x.value; document.getElementById('msg').innerHTML = txt; } function sel1(){ var txt = document.frm.y.value; document.getElementById('msg1').innerHTML = txt; } </script> <div id="msg1" name="msg1"></div>  <form name="frm"> <input type="text" name="x" onselect="sel()" /> <input type="text" name="y" onchange="sel1()" /> </form> <div id="msg" name="msg"></div>  

Code: <script language="javascript"> function xyz(){ alert("The key is up"); } function xyz1(){ alert("The key is down"); } function xyz2(){ alert("Yor are changing the size of window"); } </script> <body onResize="xyz2()">     <form name="frm">         <input type="text" name="x" onkeyup="xyz()" />         <input type="text" name="y" onkeydown="xyz1()" />                 <input type="button" value="Button" />         </form> </body>

Code: <script language="javascript"> var m = 20; var n = 50; var sum = eval("n+m"); var x = eval("m + 40"); alert(x); </script>

Code: <script language="javascript"> function xyz(){ var input = document.forms[0].name.value; alert("Hi !"+input); } </script> <body onLoad="alert('The page is loaded');" > <form onSubmit="xyz()">     <label>Your Name</label>         <input type="text" name="name" />         <br>         <input type="submit" value="Submit" />         </form> </body>

Code: <script language="javascript"> function xyz(){ var data = document.frm.search.value; var arr = new Array("USA","UK","Canada","Italy","France","China"); var flag = 0; for(var i=0;i<arr.length;i++){ if(data.toLowerCase()==arr[i].toLowerCase()){ flag = 1; break; } } if(flag==0){ document.write("The given input is not found in the array"); } else { document.write("The given input is found in the array"); } } </script> <form name="frm"> <label>Enter data that you search</label> <input type="text" name="search" />     <br />     <input type="button" value="Search" onClick="xyz()" /> </form>

Code: <script language="javascript"> function xyz(){ //var arr = new Array('Italy','France','Bangladesh','UK','USA'); var arr = new Array(50,70,10,20,30); arr.sort(); alert(arr); } </script> <input type="button" value ="Sort Array" onClick="xyz()" /> 

Code: <script language="javascript"> function xyz(){ document.frm.name.value="Enter Name"; } function abc(){ document.frm.name.value=""; } function cd(){ var sl = document.frm.lang.value; alert(sl); } </script> <form name="frm"> <label>Enter Your Name</label>     <input type="text" name="name" id="name" onFocus="xyz()" onBlur="abc()"/>         <label>Select Language</label>     <select name="lang" id="lang" onChange="cd()">     <option value="bangla">Bangla</option>     <option value="english">English</option>     <option value="spanish">Spanish</option>     <option value="frence">Frence</option>         </select> </form>

Code: <script language="javascript"> var num = prompt("Enter the number"); var flag = 0; for(var i=2;i<num;i++){ if(num%2==0){ flag = 1; break; } } if(flag==0){ alert("The number is prime"); } else { alert("The number is not prime"); } </script>

Code <script language="javascript"> function xyz(){ var username = document.frm.username.value; var password = document.frm.password.value; var cnfpass = document.frm.cnfpass.value; if(username.length<6 || username.length >12){ //document.write("Username should be within 6 to 12 character"); document.getElementById('err').innerHTML = "Username should be within 6 to 12 character"; } if(password!=cnfpass){ //document.write("Password and confirm password should be same"); document.getElementById('err_pass').innerHTML = "Password and confirm password should be same"; } } </script> <form name="frm" id="frm"> <label>User Name</label>     <input type="text" name="username" id="username" />     <span id="err"></span>     <br>     <la...

This video will introduce you with Arithmetic Operator. You will get here easy examples of Arithmetic operator using JavaScript.