Namaskar dosto aaj mai is post me kuch web pages banana bataunga. So aap is aap is post ko carefully read kijiyega ye post Web developers ke liye beneficial hogi. jo student abhi se hi web development ka work start karke koi best website develop karna chahte hai vo bilkul sahi jagah aaye hai.
Aapko aaj mai Login Form, Registration Page, aur apni website ko better look dene ke liye navigation bar banana sikhaunga aaj is post me aapko better knowledge milega…..
Friends aap html css javascript ke bare me to jante hi honge agar na jante ho to aap hamare blog ke post me search karle html, css aur javascript ke bare me bahut jankari mil jayegi to vo cheeje aap vaha se padh lijiyega …..
Mai aapko yaha par login page banana aur uska output, registration page banana aur uska output, navigation banana aur uska output bhi is post me aapke sath share karunga.
Aap hamari other post me jakar database connectivity ko bhi sikh sakte hai jisase ki aap apni ID aur PASSWORD ko enter karke login par click karte hi vo database se match karke hi aapko next web page par pahuchaye.
Ab dosto bat kare ki registration page ki kya need hoti hai kisi bhi web application ko banana me … ha to dosto registration page ke dwara hi user yani aap apni details ko submit karenge aur usi details ke dauran user apni id aur password create karenge aur usi id password ka use karke hi aap login page dwara agle webpage me enter honge. Dosto ab sochte honge ki vo agla we page kaunsa hoga to dosto vo next webpage Profile page hoga joki user ke dwra enter kiye gaye id aur password se match hone ke bad hi open hoga. Agar user id aur password right hai to user apni profile par ja sakega otherwise use wrong user id and password ka ek alert message dikhayi dega.
To dosto ab aap sochte honge ki ye alert message kaise show hoga
To friends alert message ki coding ke liye aapko java script ko sikhna padega vo bhi aap hamari blog post se padh sakte hai lekin mai aapko short term me batau to java script ke through aap alert message print kar sakte hai jiska syntax mai aapko niche bata raha hu…
<script>
alert(“Invalid User id and Password”);
</script>
Aap is tarah ka bhi message display kara sakte hai jisme only alert hi ho lekin alert ko aap java script me function bana kar bhi display kara sakte hai.
<script>
function check( )
{
alert(“Invalid User id and Password”);
</script>
}
Aap function bana kar use kisi button par onclick event ke through call kara sakte hai.
To friends maine aapko niche login page registration page aur bhi bahut saare web pages banane sikhaye hai to aap unhe achche se padhe.
Create Login Page Using HTML & CSS
1. <html>
2. <head>
3. <style>
4. div
5. {
6. margin:140px;
7. background : rgba(1,192,192,0.5);
8. width:500px;
9. height:400px;
10. border:3px solid blue;
11. border-radius:10px;
12. }
13. lable
14. {
15. color:darkblue;
16. font-weight:bold;
17. font-size:15px;
18. }
19. button
20. {
21. color:snow;
22. font-weight:bold;
23. font-size:20px;
24. background-color:darkblue;
25. }
26. input
27. {
28. border-radius:4%;
29. }
30. </style>
31. </head>
32. <body >
33. <center>
34. <div>
35. <br>
36. <img style="height:90px;width:80px;" src="images\admin2.PNG"></img>
37. <font color="red"><h1>Login page</h1></font>
38. <hr size="2"noshade color="blue">
39. <table>
40. <tr><br>
41. <td><lable>Enter Username</lable></td><td><input type="text" placeholder="Username"></td>
42. </tr>
43. <tr>
44. <td><lable>Enter Password</lable></td><td><input type="Password"placeholder="Password"></td>
45. </tr>
46. </table><br><br>
47. <hr size="2"noshade color="blue">
48. <button type="button">Login</button>
49. </div>
50. </center>
51. </body>
52. </html>
OUTPUT
Create Registration Page Using HTML & CSS
1. <html>
2. <head>
3. <title>HTML Table</title>
4. </head>
5. <body>
6. <form method="" action="">
7. <table border="1" align="center" width="400" bgcolor="#CCCCCC" >
8. <caption>Registration form</caption>
9. <tr>
10. <th>Enter your first name</th>
11. <td><input type="text" name="fn" id="fn1" maxlength="10" title="enter your first name" placeholder="enter your first name" required/></td>
12. </tr>
13. <tr>
14. <th>Enter your last name</th>
15. <td><input type="text"/></td>
16. </tr>
17. <tr>
18. <th>Enter your password</th>
19. <td><input type="password"/></td>
20. </tr>
21. <tr>
22. <th>ReEnter your password</th>
23. <td><input type="password"/></td>
24. </tr>
25. <tr>
26. <th>Enter your email</th>
27. <td><input type="email"/></td>
28. </tr>
29. <tr>
30. <th>Enter your mobile</th>
31. <td><input type="number"/></td>
32. </tr>
33. <tr>
34. <th>Enter your address</th>
35. <td><textarea rows="8" cols="20"></textarea></td>
36. </tr>
37. <tr>
38. <th>Select your gender</th>
39. <td>
40. male<input type="radio" name="g" value="m"/>
41. female<input type="radio" name="g" value="f"/>
42. </td>
43. </tr>
44. <tr>
45. <th>Select your hobbies</th>
46. <td>
47. hobby1<input type="checkbox" name="x[]" value="h"/>
48. hobby2<input type="checkbox" name="x[]" value="h2"/>
49. hobby3<input type="checkbox" name="x[]" value="h3"/>
50. </td>
51. </tr>
52. <tr>
53. <th>Select your DOB</th>
54. <td><input type="date"/></td>
55. </tr>
56. <tr>
57. <th>Select your Country</th>
58. <td>
59. <select name="country">
60. <option value="" selected="selected" disabled="disabled">Select your country</option>
61. <option value="1">India</option>
62. <option value="2">Pakistan</option>
63. </select>
64. </td>
65. </tr>
66. <tr>
67. <th>Upload your pic</th>
68. <td><input type="file"/></td>
69. </tr>
70. <tr>
71. <td colspan="2" align="center"><input type="submit" value="Save My Data"/>
72. <input type="reset" value="Reset Data"/>
73. </td>
74. </tr>
75. </table>
76. </form>
77. </body>
78. </html>
OUTPUT
Create Navigation Using HTML & CSS
1. <html>
2. <head>
3. <style>
4. ul
5. {
6. background-color:darkblue;
7. padding:5px 10px;
8. visibility:none;
9. }
10. li
11. {
12. margin:20px;
13. display:inline;
14. }
15. details
16. {
17. display:inline;
18. font-weight:bold;
19. color:white;
20. }
21. a
22. {
23. text-decoration:none;
24. font-weight:bold;
25. color:white;
26. }
27. a:hover
28. {
29. text-decoration:none;
30. font-weight:bold;
31. color:#ADFF2F;
32. border-bottom:3px solid #ADFF2F;
33. }
34. </style>
35. </head>
36. <body>
37. <ul type="none">
38. <li><a href="">Home</a></li>
39. <li><a href="">Contact us</a></li>
40. <li><a href="">About us</a></li>
41. <li><a href="">Login</a></li>
42. </ul>
43. </body>
44. </html>
OUTPUT
Create Profile Using HTML & CSS
1. <html>
2. <head>
3. <style>
4. .navigation
5. {
6. background-color:darkblue;
7. list-style:none;
8. padding:10px;
9. margin:5px;
10. }
11. .navigation a
12. {
13. text-decoration:none;
14. color:snow;
15. font-weight:bold;
16. font-family:arial;
17. padding:10px;
18. transition:all 1.4ms linear;
19. }
20. .navigation a:hover
21. {
22. background-color:lightgreen;
23. color:blue;
24. font-size:19px;
25. border-bottom:solid blue;
26. }
27. .div1
28. {
29. background-color:lightblue;
30. padding:10px 20px;
31. width:60%;
32. border:10px solid darkblue;
33. }
34. .div2
35. {
36. text-align:center;
37. background-color:Blue;
38. width:30%;
39. border:5px solid lime;
40. box-shadow:10px 10px 9px 9px red;
41. }
42. .div3
43. {
44. border:1px solid ;
45. border-radius:50%;
46. }
47. table
48. {
49. width:100%;
50. }
51. h2
52. {
53. color:lime;
54. }
55. </style>
56. </head>
57. <body>
58. <marquee><i><b>Admin Position</b></i></marquee>
59. <div class="navigation">
60. <a href="Home.html">Home</a>
61. <a href="About.html">About Us</a>
62. <a href="Home.html">Logout</a>
63. <a href="Admission_Form.html">Admission Form</a>
64. </div>
65. <br>
66. <br>
67. <center>
68. <div class="div2">
69. <div class="div3">
70. <img style="width: 40%;
71. border-radius: 50%;"src="C:\Documents and Settings\Administrator\Desktop\Student Info. System\images\admin.PNG"></img>
72. </div>
73. <h2>||| Student Dashboard</h2>
74. </div>
75. </center>
76. <br>
77. <br><br>
78. <br>
79. </center>
80. </body>
81. </html>
OUTPUT
