Please Subscribe My YouTube Channel

Showing posts with label CSS O LEVEL. Show all posts
Showing posts with label CSS O LEVEL. Show all posts

Tuesday, December 05, 2023

How to make CV with Html & Css

Make CV with Html & CSS

<!DOCTYPE html>

<html>
<head>
    <title>Resume</title>
    <style>
        .outborder{width:800px;height:1150px;border:1px solid silver;margin:0px auto;}
        p{font-size:20px;margin-left:8px;}
        hr{padding:0;margin:0;}
        .border{width:99%;padding:5px;background:lightblue;border:1px solid black;font-weight:bold;}
        ul{font-size:20px;margin-left:20px;}
        h2{margin-right:18px;}
        .name{margin-left:10px;font-family:;font-weight:bold;}
    </style>
</head>
<body>
  <div class="outborder">
    <h1 align="center"><u>CURRICULUM VITAE</u></h1><br>
    <h2 class="name">Divyansh Gupta</h2>
    <div style="border:2px solid;height:120px;width:100px;float:right;margin-top:-30px;margin-right:20px;"><img src="C:\Users\2023\Desktop\my photo.png"height="120"width="103"></div>
        <p>House,129 New Rahat Market<br>
        Railway Ganj Hardoi-241001<br>
        Mob:-+91 xxxxxxxx10<br>
        Email:-divyanshgupta14@gmail.com</p>
        <hr><hr>
        <div class="border">CAREER  OBJECTIVE</div>
        <p>Aiming to achieve a challenging and professional position from where I can make a significant contribution to the organization in the form of my dedication by using all my skills.</p>
    <div class="border">EDUCATIONAL QUALIFICATION</div>
        <ul>
            <li><b>10<sup>th</sup></b> Passed from UP Board</li>
            <li><b>12<sup>th</sup></b> Passed from UP Board</li>
            <li><b>B.Com Passed from Kanpur University</li></b>
        </ul>
     <div class="border">TECHNICAL QUALIFICATION</div>
        <ul><b>
            <li>Tally ERP 9.0</li>
            <li>CCC</li>
            <li>ITI DM</li>
            <li>ADCA</li></b>
        </ul>
     <div class="border">PERSONAL DETAILS</div>
<ul>


        <li>Father's Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b> &nbsp;&nbsp;Pradeep Gupta</li>
        <li>Date of Birth &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b> &nbsp;&nbsp;         11-10-2001</li>
        <li>Nationality &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b>   &nbsp;&nbsp;&nbsp;Indian</li>
        <li>Gender &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>:</b> &nbsp;&nbsp;&nbsp; Male</li>
        <li>Religion &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b>&nbsp;&nbsp;&nbsp;Hindu</li>
        <li>Language Known &nbsp;&nbsp;<b> :</b>&nbsp; &nbsp; Hindi, English</li>
        <li>Skills &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b> : </b>&nbsp; Good Communications Skills</li>
    </ul>
  <div class="border">DECLARATION</div>
  <p>I hereby declare that every information is true and I am solely responsible for its authenticity.</p>
  <b><p>Date.......<br>
     Place.......</p></b>
     <h2 align="right">(Divyansh Gupta)</h2>
  </div>
</body>
</html>


Tuesday, November 28, 2023

Rules Attribute in Table




Rules Attribute in Table






<html>
    <head>
<title>Rules Attribute in Table</title>
</head>
<body>
<!--Rules="none / rows / cols /  groups /all"-->
<h1>Rules Attribute</h1>
<table border width="80%"cellpadding="18"rules="cols">
<tr>
<th>Student's Name</th>
<th>Batch Time</th>
<th>Course</th>
</tr>
<tr>
<td>Ram</td>
<td>10Am</td>
<td>10Am</td>
</tr>
</table>
</body>
</html>






Monday, November 27, 2023

    HTML Table with Frame Attribute(Program No 4)


Frame Attribute in Table 

                                     

                 Watch Full Video That Given Below




<html>
    <head>
        <title>Frame Attribute in Table</title>
        <style>
th{color: white; background:brown;}
</style>
</head>
<body>
<!--frame="void / lhs / rhs / box / vsides
 / hsides / above / below / border"-->
<h1>Farme Attribute</h1>
<table border width="80%"cellspacing="15"frame="vsides">
<tr>
<th>Student's Name</th>
<th>Batch Time</th>
<th>Course</th>
</tr>
<tr>
<td>Ram</td>
<td>10Am</td>
<td>10Am</td>
</tr>
</table>
</body>
</html>





Sunday, November 12, 2023

Create Stopwatch with Html, CSS & JavaScript



How To Create Stopwatch with Html, CSS & JavaScript





<!doctype html>
<html>
<head>
<title>Stop Watch</title>
<style>
#counter
{
margin:auto;
width:120px;
height:100px;
    font-family:fantasy;
font-size:80px;
border-left:14px solid red;
border-right:14px solid blue;
border-top:14px solid green;
border-bottom:14px solid black;
text-align:center;
padding:25px;
border-radius: 100%;

}
[type="button"]{padding:10px;background: green;color:white;font-size:large;font-weight: bold;}
[value="Start"]:focus{background: red;}
[value="Pause"]:focus{background: maroon;}
[value="Reset"]:focus{background: blue;}
</style>
<script>
var count=0,interval;
function increase()
{
count++;
document.getElementById("counter").innerHTML=count;
}
function start_watch()
{
interval=setInterval("increase()",1000);
}
function stop_watch()
{
clearInterval(interval);
}
function reset()
{
document.getElementById("counter").innerHTML=0;
count=0;
}
</script>
</head>
<body>
<div style="border:4px solid green;width:20%;margin-left:550px;margin-top:200px;padding:20px;border-radius:30px;">
<div id="counter">
0
</div>
<br>
<p align="center">
<input type="button" value="Start" onclick="start_watch()">
&nbsp;&nbsp;<input type="button" value="Pause" onclick="stop_watch()">
&nbsp;&nbsp;<input type="button" value="Reset" onclick="reset()">
</p>
</div>
</body>
</html>

Image Gallery with HTML & CSS

Create an Image Gallery with HTML & CSS





<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{margin-left:100px;}
img:{padding:4px;}
img:hover {box-shadow: 0 1px 18px 10px rgba(255, 0, 0);opacity: 0.8;transform: rotate(15deg);border-radius: 20px 0px 20px 0px;}

div.a{float:left;padding:10px;}
div.about {
  text-align: center;margin-left:1px;margin-top:15px;border:2px solid black; border-bottom:none;border-left:none;border-right:none;}
  span{box-shadow:1px 1px 6px 15px red;background:rgb(255,0,0,1);margin-left:-75px;}
  pre{margin-top:-86px;}
  hr {
  width: 100px;
  height: 7px;
  background: red;
  transition: width 1s;   

}

hr:hover {
  width: 900px;
}
pre::first-letter{color:red;font-size: 38px;font-family: cursive;}
pre:hover{color:green;text-shadow: 1px 1px 6px whitesmoke;}
</style>


</head>
<body>
<div style="background: rgb(21,3,87);color:white;height:150px;border-radius: 20px;margin:auto;"><br><br><h1 align="left"><span>Images Gallery</span><pre><h2>                Created By:- Infotech Computer Institute</h2></pre><hr></h1></div>
<br><br>
<div style="border:2px;filter:drop-shadow(5px -2px 6px black);">
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Center Hardoi</div></div>

<div class="a"><a href="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"target="_blank"><img src="D:\milki\bollywood-actors-aamir-khan-hat-bollywood-wallpaper-preview.jpg"width="200"height="300"></a><div class="about">Actor:- Amir Khan</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">Nature</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">Actor:- Salman Khan</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">Peacock</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">Sunflower</div></div>
<div class="a"><a href="D:\download\pexels-min-an-1629216.jpg"target="_blank"><img src="D:\download\pexels-min-an-1629216.jpg"width="200"height="300"></a><div class="about">Lord Buddha</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"target="_blank"><img src="C:\Users\2023\Pictures\Screenshot 2023-08-20 200834.png"width="200"height="300"></a><div class="about">ITCI Computer Institutions</div></div>
<div class="a"><a href="C:\Users\2023\Downloads\doc.png"target="_blank"><img src="C:\Users\2023\Downloads\doc.png"width="200"height="300"></a><div class="about">Dr. Menka Singh</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-o1go1RVs9F8-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"target="_blank"><img src="D:\download\sonika-agarwal-oDmQkXyzzfE-unsplash.jpg"width="200"height="300"></a><div class="about">Lord Ganesha</div></div>
<div class="a"><a href="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"target="_blank"><img src="D:\download\green-field-tree-blue-skygreat-as-backgroundweb-banner-generative-ai.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\wallpaperflare.com_wallpaper (1).jpg"target="_blank"><img src="D:\download\wallpaperflare.com_wallpaper (1).jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\peacock-with-purple-flower-middle.jpg"target="_blank"><img src="D:\download\peacock-with-purple-flower-middle.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"target="_blank"><img src="D:\download\stephanie-klepacki-1Z8sLekEftk-unsplash.jpg"width="200"height="300"></a><div class="about">This is the----</div></div>
<div class="a"><a href="C:\Users\2023\Pictures\pik.jpg"target="_blank"><img src="C:\Users\2023\Pictures\pik.jpg"width="200"height="300"></a><div class="about">M D:- Satyam Trivedi</div></div></div>


</body>
</html>

Saturday, November 11, 2023

Create OTP Verification Form (Popup Box) with HTML & CSS

Create OTP Verification Form











<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OTP Verification Form</title>
    <style>
.form {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 300px;
  background-color: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow:0.5px 1px 10px 0px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: black
}

.message {
  color: darkgray;
  font-size: 14px;
  margin-top: 4px;
  text-align: center
}

.inputs {
  margin-top: 10px
}

.inputs input {
  width: 32px;
  height: 32px;
  text-align: center;
  border: 2px solid blue;
  margin: 0 10px;
}

.inputs input:focus {
  border-bottom: 1px solid red;
  border-top: 1px solid green;
  outline: none;
}

.action {
  margin-top: 34px;
  padding: 12px 16px;
  border-radius: 8px;
  border:none;
  background-color: royalblue;
  color: white;
  align-self: end;
}</style>
</head>
<body>
    <div align="center"style="margin:200px;">
    <form class="form">
 <div class="title">OTP</div> 
 <div class="title">Verification Code</div>
<p class="message">We have sent a verification code to your mobile number</p> <div class="inputs">
<input id="input1" type="text" maxlength="1"> 
<input id="input2" type="text" maxlength="1"> 
<input id="input3" type="text" maxlength="1"> 
<input id="input4" type="text" maxlength="1"> </div>
 <button class="action">Verify Me</button> </form>
</div>

</body>
</html>

Thursday, November 09, 2023

HTML & CSS Paragraph Borders (O level Practical) July 2023

HTML & CSS Paragraph Borders (O level Practical) July 2023




<html>
<head>
<title>Apply Paragraph Borders</title>
<style>
#a{background:black;color:white;border:5px solid aqua;padding:30px;font-size:20px;margin:50px;}
#b{background:rgb(255,235,65);font-family:'Monotype Corsiva';color:red;border:5px dotted green;border-radius:20px;padding:20px;font-size:20px;margin:50px;}
#c{background:rgb(255,235,65);font-family:'Monotype Corsiva';color:blue;border:5px dashed green;border-radius:20px;padding:20px;font-size:20px;margin:50px;}
#d{background:rgba(00,80,00);font-family:'Monotype Corsiva';padding:40px;border:5px groove red;border-radius:40px 0;color:white;font-size:20px;box-shadow:4px 5px 5px 5px white;margin:50px;}
#e{background:rgba(255,80,00);font-family:'Monotype Corsiva';padding:40px;border:5px inset blue;border-radius:40px 0;color:white;font-size:20px;box-shadow:4px 5px 5px 5px white;margin:50px;}
</style>


</head>
<body>
<h1 style="border:4px solid green;color:white;margin:50px;padding:30px;background:maroon;text-align:center;"> Paragraph Borders </h1>
<p id="a">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
</p>
<p id="b">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>
<p id="c">
To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
</p>
<p id="d">
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.
You can easily change the formatting of selected text in the document text by choosing a look for the selected text from the Quick Styles gallery on the Home tab. You can also format text directly by using the other controls on the Home tab. Most controls offer a choice of using the look from the current theme or using a format that you specify directly.</p>

<p id="e">To change the overall look of your document, choose new Theme elements on the Page Layout tab. To change the looks available in the Quick Style gallery, use the Change Current Quick Style Set command. Both the Themes gallery and the Quick Styles gallery provide reset commands so that you can always restore the look of your document to the original contained in your current template.
On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document. You can use these galleries to insert tables, headers, footers, lists, cover pages, and other document building blocks. When you create pictures, charts, or diagrams, they also coordinate with your current document look.</p>
</p>
</body>
</html>

Wednesday, November 08, 2023

Design Doctor Appointment Form with Html Css

How To Design Doctor Appointment Form with Html & Css





<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Doctor Appointment Form</title>
<style>
input:checked{accent-color:blue;}
textarea:hover{background:blue;opacity:0.3;}
textarea,img{filter:drop-shadow(6px 10px 12px red);}
[type="submit"]{background:teal;color:white;}
</style>
</head>
<body> 
<table align="center" width="70%" cellpadding="10px" cellspacing="0">
<tr>
<td rowspan="10"><img src="C:\Users\2023\Downloads\doc.png" align="left" width="500px" alt="Doctor Appointment Form"></td>
<td colspan="3"><h1 align="center">Doctor Appointment Form</h1><hr color="red"size="5"/></td>
</tr>
<tr>
<td>Appointment Date</td>
<td colspan="2"><input type="date"/></td>
</tr>
<tr>
<td>Appointment Time</td>
<td colspan="2"><input type="time"/></td>
</tr>
<tr>
<td>Name</td>
<td><input type="text" placeholder="First"/></td>
<td><input type="text" placeholder="Last"/></td>
</tr>
<tr>
<td>Gender</td>
<td colspan="2">Male<input type="radio" name="gender"/>Female<input type="radio" name="gender"/></td>
</tr>
<tr>
<td>Phone</td>
<td colspan="2"><input type="text" maxlength="10" placeholder="####"/></td>
</tr>
<tr>
<td>Address</td>
<td><input type="text" placeholder="city"/></td>
<td><input type="text" placeholder="state"/></td>
</tr>
<tr>
<td>Your Query</td>
<td colspan="2">
<textarea cols="40" rows="4"></textarea>
</td>
</tr>
<tr>
<td valign="top">Appointment Type</td>
<td colspan="2">
Select which appointment type(s) you require<br/>
<input type="checkbox"/> Cervix checkup<br/>
<input type="checkbox"/> Heart checkup<br/>
<input type="checkbox"/> Eye check-up<br/>
<input type="checkbox"/> Hearing Test<br/>
</td>
</tr>
<tr>
<td></td>
<td colspan="2"> 
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;<input type="submit" value="Appointment"/> &nbsp; &nbsp;<input type="submit" value="Reset"/>
</td>
</tr>
</table><br>
<div style="width:740px;padding:10px;margin-top:-900;">
<marquee behavior="alternate"><h1>Infotech Computer Institute</h1></marquee>
<address align="center"><b>Auther:- Satyam Trivedi</b><br>Near SBI Bank, Head Post Office Road Hardoi.<br>Classes By <a href="#">Satyam Sir</a></address><br></div>
</body>
</html>


    HTML Table with Html & CSS (Program No 3)

Create a Table with Html & CSS





<html>
<head>
<title>Table Assignment 2 | Complex Table Example in HTML | row-span and Col-span in  html table</title>
<meta name="description" content="HTML Assignment Two For Table row span colspan, Basic Table in HTML">
<meta name="keywords" content="HTML Assignment 2,Table Assignment 2 , Merge Cell in Table">
<base href="https://itcicomputerhardoi.blogspot.com/">
<!-- Favicons-->
<link rel="shortcut icon" href="C:\Users\2023\Downloads\Screenshot 2023-10-01 150821.png" type="image/x-icon"sizes="72x72">
<style>
th[colspan]{background: teal;color:white;}
th{background: red;color:white;opacity: 0.8}
td{background: orangered;opacity: 0.8;}
img{filter:drop-shadow(10px 10px 12px teal);}
</style>
</head>
<body topmargin="50px">
<br>
<br>

<h1 align="left"style="margin-left:900;"><span style="background: blue;color:white;">&#8621;Lab Assignment&#8621;</span></h1></div>
<img src="C:\Users\2023\Downloads\st-3.png"height="500"width="400">
<table border="1" align="right" width="70%" cellpadding="15px"cellspacing="9"topmargin="1500">
<tr bgcolor="red">
<th colspan="6">Time Table</th>
</tr>
<tr>
<th rowspan="6">Hours</th>
<th>Mon</th>
<th>Tue</th>
                                                  
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
</tr>
<tr>
<td>Science</td>  
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td>Arts</td>
</tr>
<tr>
<th colspan="5" align="center">LUNCH</th>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
<td rowspan="2">Project</td>
</tr>
<tr>
<td>Science</td>
<td>Maths</td>
<td>Science</td>
<td>Maths</td>
</tr>
</table>
    <marquee direction="alternate"><h1>Infotech Computer Institute</h1></marquee>
<address align="right"><b>Auther:- Satyam Trivedi</b><br>Near SBI Bank, Head Post Office Road Hardoi.<br>Classes By <a href="#">Satyam Sir</a></address><br>
</body>
</html>

Create Doctor Appointment Form

Create a Model Question Paper with Html

Create a Model Question Paper with Html

<html>
<head>
<title>HTML Assignment 3</title>
</head>
<body topmargin="40px" leftmargin="200px">

<center>
<h1>Infotech Computer Institute</h1>
<address>Near SBI Bank, Head Post Office Road Hardoi.<br>Classes By <a href="#">Satyam Sir</a></address><br>
<u>
<b>
MODEL  QUESTION PAPER FOR SUMMATIVE TEST<br/>
O Level (M2.R5)
</b>
</u>
</center>
<p>
Maximum Marks: 20
</p>
<h4>
General instructions: &#8628;
</h4>
<p>
&#128992; All questions are compulsory<br/>
&#128992; The question paper consist of 4 questions divided in to 2 sections A and B<br/>
&#128992; Section A contains 2 question of 2 marks each<br/>
&#128992; Section B contains 2 questions of 2 marks each<br/>
&#128992; <del>Cutting is Not Allowed</del> Select Only one Option </del>

</p>


<p align="center"><b><u>SECTION A</u></b></p>
<p><b>Q1- What is the extension of web file ?</b></p>
<p>(a) .htmlfile <br/> (b) .xml<br/>  (c) .web<br/> (d) .html</p>
<p><b>Q2- Who is the father of an HTML Language ?</b></p>
<p>(a) Tim ray Linson <br/> (b) Tom Ray Linson<br/> (c) Tim Bearners Lee<br/> (d) None of These </p>

<p align="center"><b><u>SECTION B</u></b></p>



<p><b>Q3- What is the extension of JavaScript file ?</b></p>


<p>(a) .htmlfile <br/> (b) .xmJsl<br/>  (c) .js<br/> (d) .JavaScript</p>
<p><b>Q2- What is the full form of HTMl ?</b></p>
<p>(a) Hyper Text Markup Language <br/> (b) Hyper Text Mark Language<br/> (c) Hyper Text Transfer Language<br/> (d) None of These </p>
</body>
</html>

-:Output:-




Saturday, November 04, 2023

Front End और Back End क्या होता है?

Front End और Back End क्या होता है?

 

Front End (क्लाइंट साइड स्क्रिप्टिंग प्रोग्रामिंग)

 

Front End और Back End यह वेबसाइटस्, प्रोग्रामिंग और Applications के दो महत्वपूर्ण भाग होते है. Front End वह भाग होता है जिसमे की एक यूजर Interact होता है या यूजर उसे देख सकता है और उस पर कार्य कर सकता है, जैसे उदाहरण के लिए हम Facebook जो की एक प्रसिद्ध Social network है जब हम इसकी वेबसाइट पर जाते है तब हमें दिखाई देने वाला सारा Content जैसे Pictures, Menu, Buttons यह सब प्रोग्राम का Front End है।

Frond End प्रोग्राम का वह भाग होता है जो की ब्राउजर पर चलता है, इसे हम प्रोग्राम का डिजाइन भी कह सकते है मतलब Front End के तहत यह Decide किया जाता है की प्रोग्राम यूजर को किस तरह दिखाई देगी, जैसे की एक बाइक है जिसमे Gear, Horn, Lights, Sheets यह सब बाइक के Front end होता है जो की यूजर के साथ Interact करता है।

इस प्रकार कह सकते हैं कि वेबसाइट मे Menu, Font Style,Home Page Buttons, Slider, Text  फील्ड आदि डिजाइन करना  वेब डिजाइनर का कार्य होता है और यह Front End Development कहलाता है .

कई सारी Front End प्रोग्रामिंग भाषाये और फ़्रेमवर्क्स जैसे :- HTML, CSS, DHTML, XML, Java Script , Swift, React, SASS और Typescript, फ्रेमवर्क (W3CSS, Angular JS, React JS) जिन्हें सीख कर कोई भी वेब डिज़ाइनर बन सकता है और वेबसाइट डिजाईन कर सकता है.

 

Back End (सर्वर साइड स्क्रिप्टिंग प्रोग्रामिंग)

प्रोग्राम का वह भाग होता है जो की ब्राउजर पर नहीं चलता बल्कि Server पर चलता है और यूजर को दिखाई नही देता और न ही यूजर उसके साथ Interect होता है, इसके तहत प्रोग्राम के Processing का कार्य होता है जैसे की जब हम Facebook मे पासवर्ड और मोबाइल नंबर डालकर जब लॉग इन करते है तब इसमे Server का उपयोग होता है। जब आपने पासवर्ड और मोबाइल नंबर डालकर लॉगिन पर क्लिक किया तब वह Server पर स्टोर Data के साथ Match होता है जिसके बाद ही लॉगिन की प्रक्रिया सफल हो पाती है।

 

बैक एंड प्रोग्रामिंग भाषाये जो कि निम्न हैं जैसे :- पाइथन, C & C++, SQL, PHP, JAVA, C#, Ruby, .NET आदि.

 

Full Stack Development किसे  कहते है?

Full Stack Development Front End और Back End Development का Combination है, मतलब इसके तहत प्रोग्राम के सभी भागों को Develop करना सिखाया जाता है। यदि किसी भी व्यक्ति को फ्रंट एंड और बैक एंड दोनों प्रकार का ज्ञान है तब वह फुल स्टैक डेवलपर कहलाता है.

Thanks‼