Sahel G

Hello Friends
Here we added more than 100+ Whatsapp group links you can easily add to any given group
We recommend you that use these groups for informational and other suitable use only because there are many services and other type of groups

Android and PC
some people started earning from websites and others like freelance market places
You can also share your experiences in your own blog or social media accounts and share them in WhatsApp groups
I have posted some whats app links
You can join and share your web links

Tiktok
https://chat.whatsapp.com/BqjEIYWqPh62KehrMt4VdN

Tiktok Videos

https://chat.whatsapp.com/CEOcGYyWAIf9cBk9IDk3bV

MS Excel shortcuts

2020-09-10T08:44:00.007+05:00

MS Excel

Ms excel is the part of Microsoft Office, Ms. Excel is used

to make or create a spreadsheet Document they are commonly used in Offices

, Schools, University’s and others like Business work,

If you want to use Ms. Excel then you should follow these Shortcuts After that, you will be able to edit or make a new Excel sheet

Shortcuts

All shortcuts that are commonly used in MS Excel You Read them and Grow your skill

Shortcuts	Description
Tab		Move to next cell, to the right of the currently selected cell
Ctrl+A		To select all.
Ctrl+B		Bold.
Ctrl+C		To Copy.
Ctr+F		Search/Find (if you need to find any word/words in the file)
Ctrl+G		Go to a certain area(certain area)
Ctrl+H		Find and replace (find any word/words in a file and replace it)
Ctrl+I		Puts ‘italics’ style on the highlighted section. (like as italics )
Ctrl+K		Hyperlink(add a link in a word such as Click here. )
Ctrl+L		Create a new Table dialog box cells
Ctrl+N		Create a new sheet.
Ctrl+O		Open a sheet.
Ctrl+P		To Print the sheet.
Ctrl+R		Fill multiple cells. (first, fill one cell and hold the right courser at end of the cell and moves to any other the cell in the only Row)
Ctrl+S		Save. (save the sheet in a given location)
Ctrl+U		Underlines all cells in the selected section(like as Welcome)
Ctrl+V		Paste here.
Ctrl+W		Close.
Ctrl+X		Cut the mentioned part.
Ctrl+Y		Redo repeat the previous work.
Ctrl+Z		‘Undo’ remove the mention work.
Ctrl+1		Correction of the mention cells
Ctrl+2		The selected section will Bold.
Ctrl+3		show italics style
Ctrl+4		Shows Underlined style.
Ctrl+5		shows strikethrough style like as; ~~strikethrough~~
Ctrl+6		shows objects. (Hides or unhide)
Ctrl+7		shows toolbar(hide or show)
Ctrl+8		the outline symbols “Toggles”
Ctrl+9		Show the hides rows.
Ctrl+0		Show the hides columns.
Ctrl+SHIFT+:		The current time will be entered.
Ctrl+;		The current date will be entered.
Ctrl+'		Shows formula copied.
Ctrl+Shift+"		Copy values in the cell.
Ctrl+-		Column or row will be deleted.
Ctrl+Shift+=		Insert.
Ctrl+Shift+~		Mentioned the values or formulas.
Ctrl+Shift+@		Time formatting.
Ctrl+Shift+!		Comma formatting.
Ctrl+Shift+$		Currency formatting applies.
Ctrl+Shift+#		Date formatting applies.
Ctrl+Shift+%		Percentage formatting applies.
Ctrl+Shift+^		Expand formatting.
Ctrl+Shift+*		Mentions current region.
Ctrl+Shift+&		The border will be placed around selected cells.
Ctrl+Shift+_		Take out a border.
Ctrl++		Put a border.
Ctrl+-		Remove.
Ctrl+Shift+(		Striking.
Ctrl+[		Pressing to select all cells that are connected with the mentioned formula.
.Ctrl+]		Selects.
Ctrl+Shift+{		Selects The cell directly to highlight input formula.
Ctrl+Shift+}		Mention all the cells (which contain formulas ) inactive form.
Ctrl+Shift+\| (pipe)		You try pease, hmmm
Ctrl+Spacebar		Select the whole column.
Ctrl+Shift+ Spacebar		Select all the worksheet cells.
Ctrl+Home		Goes to the first cell of the sheet.
Ctrl+End		Goes to the last cell of the sheet.
Ctrl+Tab		Goes to other opened tab of excel file.
Ctrl+Shift+Tab		Last Activates.
Ctrl+Shift+A		Name into a formula.
Ctrl+Shift+F		Foants_menu_popup.
Ctrl+Shift+O		Mention (the cells that have) comments.
Ctrl+Shift+P		Foants+other_menu_popup.
Shift+Insert		Paste here.
Shift+Page Up Shift+Page Down		Indicates all the upper column cells(from selected cell).
Shift+Home		Indicate all the right side cells (right to left).
Shift+End		Active the -End Mode.
Shift+Up Arrow		Selecting cells to upwards direction.
Shift+Down Arrow		Selecting cells to downwards direction.
Shift+Left Arrow		Choosing cells in row one by one right to left.
Shift +Right Arrow		Choosing cells in row one by one left to right.
Alt+Tab		Goes to another open window.
Alt+Spacebar		Selecting the top menu.
Alt+Backspace		Backward
Alt+Enter		Missing
Alt+=		Create a sum formula all for above.
Alt+'		Formatting on a dialog box.
F1		The help menu.
F2		Edit the all highlighted cell.
F3		F3 will paste names after creating a name.
F4		Repeat the last action.
F5		Goes to a selected cell. For example, click to type C6 it goes to the C column and its 6^th row.
F6		Move to next pane(Appears the menu bar in shortcuts)
F7		Check the spelling of selected text or document.
F8		Extended selection (Enters Extend Mode).
F9		Recalculation of every workbook.
F10		Appears the menu bar in shortcuts.
F11		Create a chart from selected data in opened sheet.
F12		Save the file as an option .
Shift+F1		Open the "???" window.
Shift+F2		Open a sell comment (Allows the user to edit a cell comment).
Shift+F3		Excel formula window open.
Shift+F5		Appears a search box.
Shift+F6		Move to the previous page.
Shift+F8		Add to selection.
Shift+F9		Performs calculate function on the active sheet.
Ctrl+F3		Excel Name Manager Open.
Ctrl+F4		the current window closed.
Ctrl+F5		window size Restored
Ctrl+F6		Go to the Next sheet.
Ctrl+Shift+F6		Go to the Previous sheet.
Ctrl+F7		Window moved
Ctrl+F8		Window resized
Ctrl+F9		Minimize.
Ctrl+F10		(window)Maximized
Ctrl+F11		New macro sheet.
Ctrl+F12		File open.
Ctrl+Shift+F3		using those of either row or column labels to Creates names
Ctrl+Shift+F6		Move to the previous worksheet. ( the previous worksheet window)
Ctrl+Shift+F12		printed.
Alt+F1		A new chart
Alt+F2		Save As file.
Alt+F4		Exit.
Alt+F8		macro dialog box.
Alt+F11		Visual Basic editor.
Alt+Shift+F1		Create a new sheet.
Alt+Shift+F2		Save as.

HTML/ CSS / JAVASCRIPT

2020-08-12T10:31:00.003+05:00

HTML/ CSS / JAVASCRIPT

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

<html>

<head>

</head>

<body>

<b><font face="Verdana"><font size=+1>Form Validation Example:

Feedback Form</font></font></b>

<!—

function ValidateForm(form){

ErrorText= "";

if (form.username.value == "") {ErrorText= "\nPlease enter your name"}

if ((form.email.value== "" || form.email.value.indexOf('@', 0) == -1) || form.email.value.indexOf('.') == -1){

ErrorText+= "\nPlease enter a proper value for your email"}

if (form.feedback.value== "") {ErrorText+= "\nPlease enter your feedback"}

if (ErrorText!= "")

{ alert("Error :" + ErrorText); return false; }

if (ErrorText= "") { form.submit() }

ErrorText= "";

if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked ==

false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; }

if (ErrorText= "") { form.submit() }

ErrorText= "";

if ( form.age.selectedIndex == 0 ) { alert ( "Please select your Age." );

return false; }

if (ErrorText= "") { form.submit() }

alert ( "Thank u" ) }

-->

</script>

<dl>

<dt>///////////////

<pre> Please enter the following(To test form validation,

skip entering one of the fields and click 'Submit' button): </pre>

</font>

</dt><br>

</dt><br>

<br><dt><font face="Verdana">Your Gender:</font>

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female </dt>

<font face="Verdana, Arial, Helvetica, sans-serif">Your Age</font>:

<select name="age"> <option value="">Please Select an Option:</option>

<option value="0-18 years">0-18 years</option>

<option value="18-30 years">18-30 years</option>

<option value="30-45 years">30-45 years</option>

<option value="45-60 years">45-60 years</option>

<option value="60+ years">60+ years</option>

</select> <br>

<br><font face="Verdana">Feedback:</font>

<dt>

</dt>

</dl>

</form> <pre><font face="Verdana"><font size=+0>   </font>

</font> </pre>

</form>

</body>

</html>

(This is a complete HTML & JAVASCRIPT & CSS project,

Properly read all tags and write it into your Notepad++ or other software)

Exercise NO>10

2020-08-12T10:26:00.011+05:00

HEADER MENU WITH CONTACT FORM (HTML/ CSS)

Project NO.12

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

Start with <HTML >tags

<!DOCTYPE html>

<head>

<style>

body{

margin:0;

padding:0;

background-image:url(123/453.jpg);

background-size:cover;

background-position

height:100vh;

}

.menu {

width:950px;

margin:0 auto;

}

.menu ul{

list-style:;

margin-top:2%;

}

.menu ul li{

background:green;

width:170px;

margin:0px;

border: 1px solid #fff;

height:50px;

height-line:50px;

text-align:center;

float:left;

color:#fff;

font-size:20px;

position:relative;

font-family:big john;

}

.menu ul li:hover{

background:crimson;

}

.menu ul ul {

display:none;

margin-top:30px;

}

.menu ul li:hover > ul{

display:block;

}

.menu ul ul ul{

margin-left:130px;

top:-5px;

position:absolute;

}

</style>

</head>

<body>

<ul>

<li>About</li>

<li>Services

<ul>

<li>Marketing</li>

<li>design

<ul>

<li>graphic</li>

<li>interior</li>

</ul>

</li>

<li>Brading</li>

</ul>

</li>

<li>Portfolio</li>

<li>Contact</li>

</ul>

</div>

<div>

</fieldset>

</div>

</body>

</html>

MENU WITH CONTACT FORM Exercise NO>09

2020-08-12T10:25:00.010+05:00

MENU WITH CONTACT FORM (HTML/ CSS)

Project NO.09

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

<!DOCTYPE HTML>

<html>

<head>

</head>

<h1 align="center" color="red"><b>Now! We want to build a New website you can partispate every time...</b></h1>

<h3><b>Register</b></h3>

<p>

<label for="fname">First Name:<input size="20" maxlength="10"

id="fname" name="fname"/></label>

</p>

<p>

<label for="lname">Last Name:

<input size="10" maxlength="5"

id="lname" name="lname"/></label>

</p>

<button type="submit">Submit</button>

</form>

</body>

</html>

Dropdown Menu ¶graph style Exercise NO>08

2020-08-12T10:24:00.002+05:00

Dropdown Menu &paragraph style (HTML / CSS)

Project NO.08

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

<!DOCTYPE html>

<head>

<style>

body{

margin:0;

padding:0;

background-image:url(123/453.jpg);

background-size:cover;

background-position

height:100vh;

}

.menu {

width:950px;

margin:0 auto;

}

.menu ul{

list-style:;

margin-top:2%;

}

.menu ul li{

background:green;

width:170px;

margin:0px;

border: 1px solid #fff;

height:50px;

height-line:50px;

text-align:center;

float:left;

color:#fff;

font-size:20px;

position:relative;

font-family:big john;

}

.menu ul li:hover{

background:crimson;

}

.menu ul ul {

display:none;

margin-top:30px;

}

.menu ul li:hover > ul{

display:block;

}

.menu ul ul ul{

margin-left:130px;

top:-5px;

position:absolute;

}

</style>

</head>

<body>

<ul>

<li>About</li>

<li>Services

<ul>

<li>Marketing</li>

<li>design

<ul>

<li>graphic</li>

<li>interior</li>

</ul>

</li>

<li>Brading</li>

</ul>

</li>

<li>Portfolio</li>

<li>Contact</li>

</ul>

</div>

<div>

</fieldset>

</div>

</body>

</HTML>

HEADER MENU Exercise NO>07

2020-08-12T10:21:00.007+05:00

HEADER MENU WITH CONTACT FORM (HTML/ CSS)

Project NO.12

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

Loading Buttons;

<!DOCTYPE html>

<html>

<head>

<style>

.buttonload {

background-color: #4CAF50; /* Green background */

border: none; /* Remove borders */

color: white; /* White text */

padding: 12px 24px; /* Some padding */

font-size: 16px; /* Set a font-size */

}

/* Add a right margin to each icon */

.fa {

margin-left: -12px;

margin-right: 8px;}

</style>

</head>

<body>

<h2>Three type of Loading Buttons</h2>

<i class="fa fa-spinner fa-spin"></i>Loading

</button>

<i class="fa fa-circle-o-notch fa-spin"></i>Loading

</button>

<i class="fa fa-refresh fa-spin"></i>Loading

</button>

</body>

</html>

Next /Previous Buttons;

<!DOCTYPE html>

<html>

<head>

<style>

a {

text-decoration: none;

display: inline-block;

padding: 8px 16px;}

a:hover {

background-color: #ddd;

color: black;}

.previous {

background-color: #f1f1f1;

color: black;}

.next {

background-color: #4CAF50;

color: white;}

.round {

border-radius: 50%;}

</style>

</head>

<body>

<h2>Next & Previous Buttons</h2>

<a href="#" class="previous">« Previous</a>

</body>

</html>

Make a Notification Button ;

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, Helvetica, sans-serif;}

.notification {

background-color: #555;

color: white;

text-decoration: none;

padding: 15px 26px;

position: relative;

display: inline-block;

border-radius: 2px;}

.notification:hover {

background: red;}

.notification .badge {

position: absolute;

top: -10px;

right: -10px;

padding: 5px 10px;

border-radius: 50%;

background-color: red;

color: white;}

</style>

</head>

<body>

<h1>Simple Notification Button</h1>

<span>Inbox</span>

</a>

</body>

</html>

HEADER MENU WITH CONTACT FORM Exercise NO>06

2020-08-12T10:19:00.009+05:00

HEADER MENU WITH CONTACT FORM (HTML/ CSS//javascript)

Project NO.06

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

Alert Box;

<!DOCTYPE html>

<html>

<head>

<style>

.btn {

border: none;

color: white;

padding: 14px 28px;

font-size: 16px;

cursor: pointer;

}

.success {background-color: #4CAF50;} /* Green */

.success:hover {background-color: #46a049;}

.info {background-color: #2196F3;} /* Blue */

.info:hover {background: #0b7dda;}

.warning {background-color: #ff9800;} /* Orange */

.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */

.danger:hover {background: #da190b;}

.default {background-color: #e7e7e7; color: black;} /* Gray */

.default:hover {background: #ddd;}

</style>

</head>

<body>

<h1>Alert Buttons</h1>

<button class="btn success">Alert!</button>

<button class="btn warning">caution </button>

<button class="btn danger">section</button>

<button class="btn default">sections</button>

</body>

</html>

Split Buttons with Dropdowns;

<!DOCTYPE html>

<html>

<head>

<style>

.btn {

background-color: pink;

color: white;

padding: 16px;

font-size: 16px;

border: none;

outline: none;

}

.dropdown {

position: absolute;

display: inline-block;

}

.dropdown-content {

display: none;

position: absolute;

background-color: #f1f1f1;

min-width: 160px;

z-index: 1;

}

.dropdown-content a {

color: black;

padding: 12px 16px;

text-decoration: none;

display: block;

}

.dropdown-content a:hover {background-color: #ddd}

.dropdown:hover .dropdown-content {

display: block;}

.btn:hover, .dropdown:hover .btn {

background-color: #0b7dda;}

</style>

</head>

<body>

<h2>Split Button with Dropdowns</h2>

<p>Click on the dropdown menu and click on one link.</p>

<button class="btn">Button</button>

</button>

<a href="#">putlink</a>

<a href="#">putlink 2</a>

<a href="#">putlink 3</a>

</div>

</body>

</html>

Social media Buttons;

<!DOCTYPE html>

<html>

<head>

<style>

.fa {

padding: 20px;

font-size: 30px;

width: 50px;

text-align: center;

text-decoration: none;

margin: 5px 2px;

}

.fa:hover {

opacity: 0.7;

}

.fa-facebook {

background: #3B5998;

color: white;

}

.fa-twitter {

background: #55ACEE;

color: white;

}

.fa-google {

background: #dd4b39;

color: white;

}

.fa-linkedin {

background: #007bb5;

color: white;

}

.fa-youtube {

background: #bb0000;

color: white;

}

.fa-instagram {

background: #125688;

color: white;

}

.fa-pinterest {

background: #cb2027;

color: white;

}

.fa-snapchat-ghost {

background: #fffc00;

color: white;

text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;}

.fa-skype {

background: #00aff0;

color: white;}

.fa-android {

background: #a4c639;

color: white;}

.fa-dribbble {

background: #ea4c89;

color: white;

}

.fa-vimeo {

background: #45bbff;

color: white;}

.fa-tumblr {

background: #2c4762;

color: white;}

fa-vine {

background: #00b489;

color: white;}

.fa-foursquare {

background: #45bbff;

color: white;}

.fa-stumbleupon {

background: #eb4924;

color: white;}

.fa-flickr {

background: #f40083;

color: white;}

.fa-yahoo {

background: #430297;

color: white;}

.fa-soundcloud {

background: #ff5500;

color: white;

}

.fa-reddit {

background: #ff5700;

color: white;

}

.fa-rss {

background: #ff6600;

color: white;}

</style>

</head>

<body>

<h2>Social Buttons(Social Media Buttons)</h2>

</body>

</html>

Exercise NO>05 (TABLE & LIST )

2020-08-12T10:15:00.003+05:00

TABLE & LIST (HTML/ CSS)

Exercise/Project NO.5

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

Table

<!DOCTYPE html>

<html>

<head>

<style>

table {

font-family: arial, sans-serif;

border-collapse: collapse;

width: 100%;

}

td, th {

border: 1px solid #dddddd;

text-align: left;

padding: 8px;

}

tr:nth-child(even) {

background-color: #dddddd;}

</style>

</head>

<body>

<h2>simple HTML Table</h2>

<table>

<tr>

<th>services</th>

<th>contact us</th>

</tr>

<tr>

<td>inform 1 </td>

<td>inform 2 </td>

<td>inform 3</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td> Example 1</td>

<td>Example 2 </td>

<td>Example 3</td>

</tr>

<tr>

<td>secLast 2 </td>

<td>secLast 3 </td>

</tr>

<tr>

<td>Midpoint 1 </td>

<td>Midpoint 2 </td>

<td>Midpoint 3 </td>

</tr>

</table>

</body>

</html>

List style

<!DOCTYPE html>

<html>

<body>

<h2>Learn with SahelG( unorderd List)</h2>

<ul>

<li>Learn HTML</li>

<li>Learn CSS</li>

<li>Learn JAVASCRIPT </li>

</ul>

<h2>Hardware(An Ordered List)</h2>

<ol>

<li>Keyboard</li>

<li>Mouse</li>

<li>Printer</li>

</ol>

</body>

</html>

Unordered list

<!DOCTYPE html>

<html>

<body>

<h2>You should learn for web Designing ( unordered HTML list)</h2>

<ul>

<li>JAVASCRIPT </li>

</ul>

</body>

</html>

HEADER TOP MENU Exercise NO>04

2020-08-12T10:11:00.005+05:00

HEADER TOP MENU (HTML / CSS )

Project NO.04

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

<!DOCTYPE html>

<html>

<head>

<title>Tameer-NU-Academy</title>

<style>

body{

background-image:url(123/2244.png);

background-blend-mode: lighten;

background-size:cover;

margin:0;

padding:0;

}

<!--.menu{

width:950px;

margin:0 auto;

width:20px;

border:2pz solid blue;

position:absolute;

}-->

.menu{

width:100%;

background:#157DEC;

border-radius:10px;

border:2px groove #157DEC;

height:100px;

margin-top:70px;

opacity:0.8;

}

.list {

list-style:none;

padding-left:10;

margin:0;

position:absolute;

}

li {

float:left;

margin-top:20px;

}

a {

width:60px;

color:red;

display:block;

text-decoration:none;

text-align:center;

font-size:25px;

font-family:century gothic;

padding:25px;

border-radius:10px;

font-weight:bold;

}

a:hover {

background:#6C2DC7;

transition:0.6;

opacity:0.5;

color:white;

}

</style>

</head>

<body>

<header class="header">TAmeer-e-nu Academy</header>

<li><a href="#">Classes</a></li>

<li><a href="#">contact</a></li>

<li><a href="#">login</a> </li>

</ul>

</div>

</body>

</html>

………………………………..,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,…

Listwise selection form Exercise NO>03

2020-08-12T10:09:00.005+05:00

Listwise selection form (HTML/ CSS/JAVASCRIPT)

Project NO.03

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

steps

1. Create an HTML page including some form elements.

2. Inside the <form> tag, for the action attribute, specify the full pathname of the .jsp file.

3. Create a .java file that imports javax.http.servlet.*;

4. Create a class that extends HttpServlet.

5. This will request some information by filling out a form containing a link to a servlet when the Submit button is clicked.

6. The server locates the requested servlet

7. Define the doPost function to process the data obtained from the HTML

file.

8. The servlet then gathers the information needed to satisfy the user's

request and constructs a Web page containing the information.

9. That Web page is then displayed on the user's browser .

Program:

<html>

<head>

<title> online exam </title> </head>

<body>

<form action="http://localhost:8080/examples/servlet/source_servlet" method="get">

<h3> 1.Who invented mainframe system? </h3>

<input type="radio" name="s1" value="IBM"> ibm <br>

<input type="radio" name="s1" value="MICROSOFT"> microsoft <br>

<input type="radio" name="s1" value="INFOSYS"> infosys <br>

<input type="radio" name="s1" value="CISCO"> cisco <br>

<h3> 2.What is the capital of Sri Lanka? </h3>

<input type="radio" name="s2" value="MADRID"> madrid <br>

<input type="radio" name="s2" value="COLOMBO"> colombo <br>

<input type="radio" name="s2" value="DELHI"> delhi <br>

<input type="radio" name="s2" value="MOSCOW"> moscow <br>

<h3> 3.What is the national game of India? </h3>

<input type="radio" name="s3" value="HOCKEY"> hockey <br>

<input type="radio" name="s3" value="CRICKET">cricket <br>

<input type="radio" name="s3" value="FOOTBALL"> football <br>

<input type="radio" name="s3" value="VOLLEYBALL"> volleyball <br>

<h3> 4.What is the NATO name of SUKHOI jets? </h3>

<input type="radio" name="s4" value="FLANKERS"> flankers <br>

<input type="radio" name="s4" value="FOXBOAT"> foxboat <br>

<input type="radio" name="s4" value="FISHBOAT"> fishboat <br>

<input type="radio" name="s4" value="FOXTROT"> foxboat <br>

<h3> 5.What was the first name of graphical browser? </h3>

<input type="radio" name="s5" value="NETSCAPE"> netscape <br>

<input type="radio" name="s5" value="IE"> ie <br>

<input type="radio" name="s5" value="MOZILLA"> mozilla <br>

<input type="radio" name="s5" value="OPERA"> opera <br>

<input type="submit" value="submit">

</form>

</body>

</html>

CONTACT FORM Exercise NO> 02

2020-08-12T10:06:00.003+05:00

HEADER MENU WITH CONTACT FORM (HTML/ CSS)

Project/Exercise NO.2

{ Sahelg.com }

Note); If you have any type of question, comment us or contact>>> imtaizbaloch38@gmail.com)

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-88591">

</head>

<body>

<b><font face="Verdana"><font size=+1>Form Validation Example:

Feedback Form</font></font></b>

<br><script LANGUAGE="JavaScript">

<!—

function ValidateForm(form){

ErrorText= "";

if (form.username.value == "") {ErrorText= "\nPlease enter your name"}

if ((form.email.value == "" || form.email.value.indexOf('@', 0) == -1) || form.email.value.indexOf('.') == -1){

ErrorText+= "\nPlease enter a proper value for your email"}

if (form.feedback.value == "") {ErrorText+= "\nPlease enter your feedback"}

if (ErrorText!= "")

{ alert("Error :" + ErrorText); return false; }

if (ErrorText= "") { form.submit() }

ErrorText= "";

if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked ==

false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; }

if (ErrorText= "") { form.submit() }

ErrorText= "";

if ( form.age.selectedIndex == 0 ) { alert ( "Please select your Age." );

return false; }

if (ErrorText= "") { form.submit() }

alert ( "Thank u" ) }

-->

</script>

<dl>

<dt>

<pre> Please enter the following(To test form validation,

skip entering one of the fields and click 'Submit' button): </pre>

</font>

</dt><br>

</dt><br>

<br><dt><font face="Verdana">Your Gender:</font>

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female </dt>

<font face="Verdana, Arial, Helvetica, sans-serif">Your Age</font>:

<select name="age"> <option value="">Please Select an Option:</option>

<option value="0-18 years">0-18 years</option>

<option value="18-30 years">18-30 years</option>

<option value="30-45 years">30-45 years</option>

<option value="45-60 years">45-60 years</option>

<option value="60+ years">60+ years</option>

</select> <br>

<br><font face="Verdana">Feedback:</font>

<dt>

</dt>

</dl>

</form> <pre><font face="Verdana"><font size=+0>   </font>

</font> </pre>

</form>

</body>

</html>

Animation hover buttons Exercise NO.01

2020-08-12T10:01:00.004+05:00

Animation hover buttons (HTML/CSS)

Exercise/project NO.01

This is an HTML and CSS project,

In this project, you will learn how to make Animation with

hover effects Buttons

<!DOCTYPE html>

<html>

<head>

<title>sahel.com</title>

<Style>

body{

margin:0;

padding:0;}

.container {

text-align:right;

margin-top:0px;

}

.btn {

border:1px solid blue;

background:none;

padding:10px 20px;

font-size:20px;

font-family:"montserrat";

cursor:pointer;

margin:10px;

transition:0.8s;

}

.btn1,.btn2{

color:blue;

}

.btn3,.btn4{

color:#fff;

}

.btn1:hover,.btn2:hover{

color:#fff;

}

.btn3:hover,.btn4:hover{

color:blue;

}

.btn::before{

content: "";

position:absolute;

left:0;

width:100%;

height:100%;

background:blue;

z-index:-1;

transcition:0.8s;

position:relative;

overflow:hidden;

}

.btn1::before,.btn3::before{

top:0;

border-radius:0 0 50% 50%;

}

.btn2::before,.btn4::before{

bottom:0;

border-radius:50% 50% 0 0;}

.btn3::before,.btn4::before{

height:180%;}

.btn1:hover::before,.btn2:hover::before{

height:180%;

}

.btn3:hover::before,.btn4:hover::before{

height:0%;

}

</style>

</head>

<body>

<button class="btn btn1">Rashid</button>

<button class="btn btn2">Jameel</button>

<button class="btn btn3">Bilal</button>

<button class="btn btn4">Waqar</button>

</div>

</body>

</html>

Next >>

Learn JAVASCRIPT Servlet program using HTTP Servlet

2020-08-12T09:09:00.008+05:00

Servlet program using HTTP Servlet

To write a servlet program using HTTP Servlet.

ALGORITHM:

1. Create an HTML page including some form elements.

2. Inside the <form> tag, for the action attribute, specify the full pathname of the .jsp file.

3. Create a .java file that imports javax.http.servlet.*;

4. Create a class that extends HttpServlet.

5. This will request some information by filling out a form containing a link to a servlet when the Submit button is clicked.

6. The server locates the requested servlet

7. Define the doPost function to process the data obtained from the HTML

file.

8. The servlet then gathers the information needed to satisfy the user's

request and constructs a Web page containing the information.

9. That Web page is then displayed on the user's browser.

Program:

<html>

<head>

<title> online exam </title> </head>

<body>

<form action="http://localhost:8080/examples/servlet/source_servlet" method="get">

<h3> 1.Who invented mainframe system? </h3>

<input type="radio" name="s1" value="IBM"> ibm <br>

<input type="radio" name="s1" value="MICROSOFT"> microsoft <br>

<input type="radio" name="s1" value="INFOSYS"> infosys <br>

<input type="radio" name="s1" value="CISCO"> cisco <br>

<h3> 2.What is the capital of Sri Lanka? </h3>

<input type="radio" name="s2" value="MADRID"> madrid <br>

<input type="radio" name="s2" value="COLOMBO"> colombo <br>

<input type="radio" name="s2" value="DELHI"> delhi <br>

<input type="radio" name="s2" value="MOSCOW"> moscow <br>

<h3> 3.What is the national game of India? </h3>

<input type="radio" name="s3" value="HOCKEY"> hockey <br>

<input type="radio" name="s3" value="CRICKET">cricket <br>

<input type="radio" name="s3" value="FOOTBALL"> football <br>

<input type="radio" name="s3" value="VOLLEYBALL"> volleyball <br>

<h3> 4.What is the NATO name of SUKHOI jets? </h3>

<input type="radio" name="s4" value="FLANKERS"> flankers <br>

<input type="radio" name="s4" value="FOXBOAT"> foxboat <br>

<input type="radio" name="s4" value="FISHBOAT"> fishboat <br>

<input type="radio" name="s4" value="FOXTROT"> foxboat <br>

<h3> 5.What was the first name of graphical browser? </h3>

<input type="radio" name="s5" value="NETSCAPE"> netscape <br>

<input type="radio" name="s5" value="IE"> ie <br>

<input type="radio" name="s5" value="MOZILLA"> mozilla <br>

<input type="radio" name="s5" value="OPERA"> opera <br>

<input type="submit" value="submit">

</form>

</body>

</html>

#Online examination

import java.io.*; import javax.servlet.*;

import javax.servlet.http.*;

import java.net.*; public class source_servlet extends HttpServlet

{ public void doGet(HttpServletRequest request,HttpServletResponse response)throws ServletException,IOException

{ response.setContentType("text/html");

PrintWriter out=response.getWriter();

BufferedReader br=request.getReader(); int score=0; String str;

try {

str=request.getParameter("s1");

if(str.equals("IBM")) score++; str=request.getParameter("s2");

if(str.equals("COLOMBO"))

score++; str=request.getParameter("s3");

if(str.equals("HOCKEY"))

score++; str=request.getParameter("s4");

if(str.equals("FLANKERS"))

score++; str=request.getParameter("s5");

if(str.equals("MOZILLA"))

score++; out.println("<html>

<head><title>result</title>

</head>

<body> Your score");

out.println(Integer.toString(score)+"</body></html>");

out.flush(); out.close();

} catch(Exception e) {} } }

Result;

Thus servlet program using http servlet has been completed successfully and thus output is verified.

(html/css)Online Applications using JavaScript Exe 06.

2020-08-12T09:03:00.006+05:00

Online Applications using JavaScript

Note): develop Online Applications for displaying student’s mark list using java server pages and MS-Access database.

ALGORITHM:

Step 1: Start the program.

Step 2: Create an MS-Access database table named student for storing student’s marks.

Step 3: Create an HTML form for entering the register number of the student

. Step 4: Open the control panel and make the database connectivity settings.

Step 5: Create a JSP coding for processing the student’s marks from the database.

Step 6: Deploy the JSP and the HTML page in the Netbeans 6.8 IDE to create the application package.

Step 7: Run the application in the IDE.

Step 8: The student’s mark list for the corresponding register number will be displayed.

Step 9:Stop the program.

PROGRAM:

mark.html

<html>

<center><font color=blue><h2>LOGIN FORM</h2>

</font></center>

<tr><td>REG NUMBER</td>

</form>

</body>

</html>

mark.jsp

<%@ page session="false" %>

<%@page import="java.sql.*" %> <% try

{ Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");

System.out.println("JDBC driver loaded"); }

catch(ClassNotFoundException e)

{ System.out.println(e.toString());} %>

<html>

<head>

<title>Display All Users</title>

</head>

<% int reg=Integer.parseInt(request.getParameter("login"));

String sql="select *from student";

try { Connection con=DriverManager.getConnection("jdbc:odbc:student");

Statement s=con.createStatement();

ResultSet rs=s.executeQuery(sql);

while(rs.next())

{ out.println("<tr>");

out.println("<td>"+ rs.getString(2)+"</td>");

out.println("<td>"+rs.getString(3)+"</td>");

out.println("<td>" +rs.getString(4)+"</td>");

out.println("<td>"+rs.getString(5)+"</td>");

out.println("<td>"+rs.getString(6)+"</td>");

out.println("<td>"+rs.getString(7)+"</td>");

out.println("</tr>");

}

rs.close();

s.close();

con.close(); }

catch(SQLException e){} catch(Exception e){

} %> </table>

</center>

</body>

</html>

RESULT:

Thus a 3-tier application for displaying student’s mark list using java server pages and MS-Access the database has been developed

<< previous Next >>

Learn HTML/CSS/JAVASCRIPT Exe 05.

2020-08-12T08:46:00.004+05:00

HTML/CSS (with javascript)

Ex. No. : 5

Client-Side Programming

Form Validation

To write a Java script program for Form Validation including

text field/ radio buttons/ check boxes/ list box and others.

ALGORITHM:

Client-Side Programming - Form validation

1. Create a form by including all the elements of javascript.

Ex: <input type=”button” value=”OK”>

<input type=”text”> etc.

2. Create a button in such a way that when the button is clicked the form has to be validated (i.e. it has to check whether all fields in the form are filled and the data entered are valid).

PROGRAM:

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-88591">

</head>

<body>

<b><font face="Verdana"><font size=+1>Form Validation Example:

Feedback Form</font></font></b>

<br><script LANGUAGE="JavaScript">

<!—

function ValidateForm(form){

ErrorText= "";

if (form.username.value == "") {ErrorText= "\nPlease enter your name"}

if ((form.email.value == "" || form.email.value.indexOf('@', 0) == -1) || form.email.value.indexOf('.') == -1){

ErrorText+= "\nPlease enter a proper value for your email"}

if (form.feedback.value == "") {ErrorText+= "\nPlease enter your feedback"}

if (ErrorText!= "")

{ alert("Error :" + ErrorText); return false; }

if (ErrorText= "") { form.submit() }

ErrorText= "";

if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked ==

false ) ) { alert ( "Please choose your Gender: Male or Female" ); return false; }

if (ErrorText= "") { form.submit() }

ErrorText= "";

if ( form.age.selectedIndex == 0 ) { alert ( "Please select your Age." );

return false; }

if (ErrorText= "") { form.submit() }

alert ( "Thank u" ) }

-->

</script>

<dl>

<dt>

<pre> Please enter the following(To test form validation,

skip entering one of the fields and click 'Submit' button): </pre>

</font>

</dt><br>

</dt><br>

<br><dt><font face="Verdana">Your Gender:</font>

<input type="radio" name="gender" value="Male"> Male

<input type="radio" name="gender" value="Female"> Female </dt>

<font face="Verdana, Arial, Helvetica, sans-serif">Your Age</font>:

<select name="age"> <option value="">Please Select an Option:</option>

<option value="0-18 years">0-18 years</option>

<option value="18-30 years">18-30 years</option>

<option value="30-45 years">30-45 years</option>

<option value="45-60 years">45-60 years</option>

<option value="60+ years">60+ years</option>

</select> <br>

<br><font face="Verdana">Feedback:</font>

<dt>

</dt>

</dl>

</form> <pre><font face="Verdana"><font size=+0>   </font>

</font> </pre>

</form>

</body>

</html>

RESULT:

Thus the Java script program for Form Validation including text field, radio buttons, check boxes, list box, and other controls have been successfully written and output is verified.

<<previous Next>>

HTML&CSS with JavaScript Exe 04.

2020-08-12T08:33:00.009+05:00

HTML / CSS / JAVASCRIPT

Ex. No. : 4(A)

Client-Side Programming

Java script for Displaying and Comparing Date

To write a Javascript program for displaying and comparing two dates.

ALGORITHM:

Java script program for displaying date

1. Create a variable for DATE object as shown below,

var currentTime = new Date()

2. Obtain the current date from it using getDate() as shown below,

Var d=currentTime.getDate()

3 Display the value of d.

Java script program for comparing two dates

1. Get two dates to be compared from the user in string format.

2. Convert the obtained string into DATE objects as shown below,

var todate = new Date(todatestring);

var fromdate = new Date(fromdatestring);

3. Compare these two dates using ‘<’ operator.

PROGRAM:

<html>

function Compare() {

if (document.frmTest.startDate.value > document.frmTest.endDate.value){ alert ("Start Date is greater");

}

if (document.frmTest.startDate.value < document.frmTest.endDate.value){ alert ("End Date is greater");

}

if (document.frmTest.startDate.value == document.frmTest.endDate.value){ alert ("Dates are the same");

}

</script>

<body>

Start Date: <b><input type="text" name="startDate" size="14"></b> <br> <br>

End Date: <b><input type="text" name="endDate" size="14"></b>

<a href="javascript:Compare();">Compare</a>

</form>

</body>

</html>

<< previous Next >>

APPLYING STYLE TO AN HTML PAGE USING CSS Exe03.

2020-08-12T08:21:00.005+05:00

APPLYING STYLE TO AN HTML PAGE USING CSS

Ex. No. : 03

To create an HTML page, and to apply style formatting using external Cascading Style Sheet.

Algorithm:

Step 1: Start the program.

Step 2: Create an HTML page.

Step 3: Create an external CSS (Cascading Style Sheet).

Step 4: Link the external style sheet page with the main HTML page.

Step 5: Load the main page.

Step 6: The style formatting will be applied to the main HTML page.

Step 7: Stop the program.

PROGRAM:

Style.html

<html>

<head>

.class1 A:link {text-decoration: none}

.class1 A:visited {text-decoration: none}

.class1 A:active {text-decoration: none}

.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:link {text-decoration: underline overline}

.class2 A:visited {text-decoration: underline overline}

.class2 A:active {text-decoration: underline overline}

.class2 A:hover {text-decoration: underline; color: green;}

</style>

<title>My first styled page</title>

</style>

</head>

<body>

<!—site navigation menu-->

<li><a href="home.html">Inform</a>

<li><a href="home.html">Contact us</a>

</ul> </span>

<h1>This is My first Internal styled page</h1>

<p> My name is WAQAR AHMAD I live in Punjab Pakistan, some people knows about PakistanHere, I tell you that you are learning HTML/CSS may join other programming languages, I will provide you html projects you will be Expert >>Thanks<<.

<p><address class="style2" >Pakistan <br> 10-08-2020</address></p>

</body>

</html>

Mystyle.html:

<html>

<head>

<title>My first styled page</title>

</head>

<body>

<li><a href="About.html">About us</a>

<li><a href="home.html">Department</a>

<li><a href="home.html">Contact us</a>

</ul>

<h1>My first External styled page</h1>

<p> Tameer-e-nu Academy Taunsa Sharef Punjab Pakistan <br> Taunsa<br> <p> An IO 9001:2020 institution<br>NA Accredited<br>

<p>

<address>August 10th <br> Dept. of I.T.</address>

</body>

</html>

/* CSS Document */

BODY {

PADDING-LEFT: 11em;

COLOR: purple;

FONT-FAMILY: Georgia, "Times New Roman", Times, serif;

BACKGROUND-COLOR: #d8da3d }

UL.navbar {

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

LEFT: 1em;

PADDING-BOTTOM: 0px;

MARGIN: 0px;

WIDTH: 9em;

PADDING-TOP: 0px;

LIST-STYLE-TYPE: none;

POSITION: absolute; TOP: 2em }

H1 { FONT-FAMILY: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }

UL.navbar LI {

BORDER-RIGHT: 1em solid;

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

BACKGROUND: white;

PADDING-BOTTOM: 0.3em;

MARGIN: 0.5em 0px;

PADDING-TOP: 0.3em }

<< Previous Next >>

HTML & CSS Exe 02

2020-08-10T08:08:00.019+05:00

HTML and CSS

Exercise 02.

Frame3.html

<html>

<head>

</head>

<h2> <center>GROW YOUR SKILLS AND BECOME FREELANCER</center></h2>

</body>

</html>

Intro.html

<html>

<head>

<title>intro</title>

</head>

<p>This is dummy paragraph if you have any issue you can contact us we reply in fast Thanks dear. <br> <br>

“The concerns of technology/SCIENCE causing mass unemployment, due to machines replacing life’s, hardly new in history. (it’s a dummy paragraph for an example)In fact, the idea of “technological unemployment” as a disease was already highlighte by John Maynard in 1930. Some years ago...” </p>

</font>

</body>

</html>

Ad.html

<html>

<head>

<title>ADDRESS</title>

</head>

<p> <font color=red> Name ؛WAQAR AHMAD ' College of Engineering and Technology<br> TAUNSA SHAREF<br> Contact No: +923247033237<br> Gmail : imtaizbaloch38@gmail.com<br> </font> </p>

</body>

</html>

Dept.html

<html>

<head>

<title>Departments</title>

</head>

<body>

</table>

</div>

</body>

</html>

Feed.html

<html>

<head>

</head>

<p> <font color=green>To give your feedback mail to imtaizbaloch38@gmail.com </font> </p>

</body>

</html>

Gall.html

<html>

<head>

<p> <font color=blue> College Front structure</font> </p>

</body>

</html>