Infotech Computer Institute: O level Notes

Showing posts with label O level Notes. Show all posts

Saturday, January 27, 2024

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push...

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push Button

My name is Satyam Trivedi, I live in Hardoi Up, I am graduate in Bsc. I have many other diploma's related to computer courses like:- Adctt, Doap, ccc, 'O' Level, Bca, Pgdca. I am a Blogger, Youtuber, Programmer and a Teacher by profession.I hold 10 years experiance of computer software training.

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>

<h1 align="center"><u>CURRICULUM VITAE</u></h1><br>

<h2 class="name">Divyansh Gupta</h2>

<p>House,129 New Rahat Market<br>

Railway Ganj Hardoi-241001<br>

Mob:-+91 xxxxxxxx10<br>

Email:-divyanshgupta14@gmail.com</p>

<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>

</ul>

<div class="border">PERSONAL DETAILS</div>
<ul>

<li>Father's Name         <b> : </b>   Pradeep Gupta</li>
<li>Date of Birth           <b> : </b>    11-10-2001</li>
<li>Nationality              <b> : </b>    Indian</li>
<li>Gender                     <b>:</b>     Male</li>
<li>Religion                  <b> : </b>   Hindu</li>
<li>Language Known   <b> :</b>    Hindi, English</li>
<li>Skills                       <b> : </b>  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>

Blogger :- Satyam Trivedi

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>

Blogger :- Satyam Trivedi

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>

Blogger :- Satyam Trivedi

Sunday, November 19, 2023

Excel Shortcut Keys

Microsoft Excel Shortcut Keys

Must Read All Libre Office Topics

Blogger :- Satyam Trivedi

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>

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>

<br>

</p>

</div>

</body>

</html>

Blogger :- Satyam Trivedi

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>

Blogger :- Satyam Trivedi

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>

Blogger :- Satyam Trivedi

Thursday, November 09, 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>

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>

<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.

</p>

</body>

</html>

Blogger :- Satyam Trivedi

Wednesday, November 08, 2023

Design Doctor Appointment Form with Html Css

How To Design Doctor Appointment Form with Html & Css

<!DOCTYPE HTML>

<head>

<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>

<tr>

<td colspan="3"><h1 align="center">Doctor Appointment Form</h1><hr color="red"size="5"/></td>

</tr>

<tr>

<td>Appointment Date</td>

</tr>

<tr>

<td>Appointment Time</td>

</tr>

<tr>

</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>

</tr>

<tr>

<td>Address</td>

</tr>

<tr>

<td>Your Query</td>

</td>

</tr>

<tr>

<td valign="top">Appointment Type</td>

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>

</tr>

</table><br>

<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>

Blogger :- Satyam Trivedi

Infotech Computer Institute

Labels

Information & Technology Computer Institution's
In front of Gandhi Bhawan, Numaish Chauraha Hardoi.
☎ +91 9026728220, +91 8423606968

Please Subscribe My YouTube Channel

Saturday, January 27, 2024

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push...

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push Button

Tuesday, December 05, 2023

How to make CV with Html & Css

Tuesday, November 28, 2023

Rules Attribute in Table

Monday, November 27, 2023

HTML Table with Frame Attribute(Program No 4)

Frame Attribute in Table

Watch Full Video That Given Below

Sunday, November 19, 2023

Excel Shortcut Keys

Sunday, November 12, 2023

Create Stopwatch with Html, CSS & JavaScript

How To Create Stopwatch with Html, CSS & JavaScript

Image Gallery with HTML & CSS

Saturday, November 11, 2023

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

Create OTP Verification Form

Thursday, November 09, 2023

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

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

Wednesday, November 08, 2023

Design Doctor Appointment Form with Html Css

How To Design Doctor Appointment Form with Html & Css

Labels

Information & Technology Computer Institution's In front of Gandhi Bhawan, Numaish Chauraha Hardoi. ☎ +91 9026728220, +91 8423606968

Please Subscribe My YouTube Channel

Saturday, January 27, 2024

Program No 3- Arduino Program to Sound Buzzer for 1 Second on Press Push Button

Tuesday, December 05, 2023

Tuesday, November 28, 2023

Monday, November 27, 2023

Frame Attribute in Table

Watch Full Video That Given Below

Sunday, November 19, 2023

Sunday, November 12, 2023

How To Create Stopwatch with Html, CSS & JavaScript

Saturday, November 11, 2023

Create OTP Verification Form

Thursday, November 09, 2023

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

Wednesday, November 08, 2023

How To Design Doctor Appointment Form with Html & Css

Information & Technology Computer Institution's
In front of Gandhi Bhawan, Numaish Chauraha Hardoi.
☎ +91 9026728220, +91 8423606968