Please Subscribe My YouTube Channel

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