Professional Documents
Culture Documents
Prepare A Project For HTML Codes
Prepare A Project For HTML Codes
AMARAVATHINAG
AR
PROJECT REPORT
HTML/CSS
Name: S.Tamizharasan
2022-2023
Page Number
A Blog on Plagiarism
3-8
Forms
9-12
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
border-radius: 10px;
}
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 2vmin;
background: #e7e6e6;
}
/* Header/Blog Title */
.header {
padding:1vh;
font-size: 125%;
text-align: center;
background: #faaeae79;
border-radius: 40px;
}
/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {
float: left;
max-width: 75%;
}
/* Right column */
.rightcolumn {
float: left;
}
.Virus{
background-image: url("./Virus.jpg");
max-width: 100%;
background-size: cover;
padding:40px;
max-height: 210px;
}
.Anti-Virus{
background-image: url("./AntiVirus.webp");
max-width: 100%;
background-size: cover;
padding:40px;
max-height: 180px;
}
.computer{
background-image: url("./Computer.jpg");
max-width: 100%;
background-size: contain;
padding:40px;
}
/* Add a card effect for articles */
COMPUTER APPLICATIONS Page 4
TAMIZHARASAN S [6937]
.card {
background-color: #dfafaf79;
padding: 20px;
margin-top: 20px;
}
/* Footer */
.footer {
padding: 2vh;
text-align: center;
background: #dfafaf79;
margin-top: 20px;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top
of each other instead of next to each other */
@media screen and (max-width: 800px) {
.leftcolumn, .rightcolumn {
width: 100%;
padding: 0;
}
}
</style>
</head>
<body>
<div class="row">
<div class="leftcolumn">
<div class="card">
<h3 style="text-align:center;font-weight:bolder;">Types of Plagiarism</h3>
<div class="footer">
<h2>You can avoid allegations plagiarism through awarness and honest effort...</h2>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8/">
<title>Forms</title>
<style>
body{background-color: #ffc2d1 }
th, td {
border: 1px solid black;
border-radius: 40px;
}
p{ font-family:monotype Corsiva;}
input,textarea,select{ font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-
serif;}
textarea{float:right;}
</style>
</head>
<body><center><form>
<table ><table cellpadding="20px">
<tr>
<td><h3 align="center" style="font-family:'algerian' ;margin-bottom: -20px" >Sainik
School Amaravathinagar</h3>
<h4 align="center" style="font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida
Grande', 'Lucida Sans', Arial, sans-serif ;margin-bottom: -10px" > Dress Order Form</h4><br>
<p>Name of the Cadet: 
<input type="text" maxlength="25" placeholder="Cdt.(Your name)" required></p>
<p> Date of Birth: 
<input type="date" required>
<p>Roll Number: <input type="textbox" type="number" maxlength="4"
placeholder="Enter Roll number" required></p>
<p>ID number of the Cadet: 
<input type="password" placeholder="Enter Id number" maxlength="9" aria-required="true"></p>
<p>Date of Admission: 
<input type="date" min="2017-04-01" aria-required="false"></p>
<p>Current Address:<textarea width="50px" placeholder="Your address is used for
delivery purposes" required></textarea></p>
<p>Nationality: <select required>
<option disabled selected>--None--</option><option>Indian</option></select> </p>
<p>State: <select><option disabled selected>--Select your state--</option>
COMPUTER APPLICATIONS Page 9
TAMIZHARASAN S [6937]
<option>Andhra Pradesh</option>
<option>Arunachal Pradesh</option>
<option>Assam</option>
<option>Bihar</option>
<option>Chhattisgarh</option>
<option>Goa</option>
<option>Gujarat</option>
<option>Haryana </option>
<option>Himachal Pradesh </option>
<option>Jharkhand </option>
<option>Karnataka </option>
<option>Kerala </option>
<option>Madhya Pradesh </option>
<option>Maharashtra </option>
<option>Manipur </option>
<option>Meghalaya </option>
<option>Mizoram </option>
<option>Nagaland </option>
<option>Odisha </option>
<option>Punjab </option>
<option>Rajasthan </option>
<option>Sikkim </option>
<option>Tamil Nadu </option>
<option>Telangana </option>
<option>Tripura </option>
<option>Uttar Pradesh </option>
<option>Uttarakhand </option>
<option>West Bengal </option>
<option>Puducherry </option>
<option>Ladakh </option>
<option>Jammu and Kashmir </option>
<option>Delhi </option>
<option>Dadra and Nagar Haveli and Daman and Diu </option>
<option>Chandigarh </option>
<option>Andaman and Nicobar Islands </option>
</select></p>
<p>Class: <input type="radio" name="class" required><label>X</label>
<input type="radio" name="class"><label>XI</label>
<input type="radio" name="class"><label>XII</label></form>
</p>
<p> Clothes required:<br>
<input type="checkbox" name="Clothes" ><label>Prep. dress</label>
<input type="number" step="1" max="10" min="0"/><br>
<input type="checkbox" name="Clothes"><label>PT dress</label>
</html>
<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>
Computer Project
</title>
<style>
div.heading{position:static;
font-weight: bold;font-family: Arial, Helvetica, sans-serif;font-style: normal;font-size:
200%;object-fit: contain;}
h2{position:static;
font-weight: bold;font-family: 'monotype Corsiva';font-style: normal;font-size: 170%;object-
fit: contain;}
h3{position:static;
font-weight: bold;font-family: Arial, Helvetica, sans-serif;font-style: normal;font-size:
120%;object-fit: contain;}
img{position:static; float:left; width: 20%; height:19%; object-fit:contain;}
.table{position:static; object-fit:contain;}
div.paragraph{text-align:center;position:static;font-family: Arial, Helvetica, sans-serif;font-
style: normal;font-size: 100%;}
.paragraph1{position:static;font-family: Arial, Helvetica, sans-serif;font-style: normal;font-
size: 100%;}
</style>
</head>
<body background="Background.jpg"> <img src="logo.png" alt="logo">
<div class="heading" align="center" style="font-family:'Trebuchet MS', 'Lucida Sans
Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif"> SAINIK SCHOOL
AMARAVATHINAGAR</div>
<div class="paragraph"><p>“The safety, honour and welfare of your country comes
first, always and every time.<br> The honour, welfare and comfort of the men you command come
next. Your own ease, comfort and safety comes last, always and every time.”<br></p>
<b>- Field Marshal Philip Chetwood</b></p></div>
<h2 calss="h2" align="center"><b><u>Mark List</b> of Class
<strong>X</strong>students</u></h2>
<br>
<h3 class="h3" align="center" ></b><u>Class-X Midterm examiation results</h3>
</u><center><div class="table"><table border="1px" cellpadding="4" bgcolor=#EAEAEA >
<thead>
<tr>
<td>English</td>
<td>Civics</td>
<td>Economics</td>
<td>History</td>
<td>Geography</td>
<td>Physics</td>
<td>Chemistry</td>
<td>Botany</td>
<td>Zoology</td>
<td>Computer Applications</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Liam</td>
<td>6396</td>
<td>70</td>
<td>72</td>
<td>34</td>
<td>28</td>
<td>36</td>
<td>27</td>
<td>25</td>
<td>34</td>
<td>40</td>
<td>36</td>
<td>38</td>
</tr>
<tr>
<td>2</td>
<td>James</td>
<td>6375</td>
<td>78</td>
<td>66</td>
<td>34</td>
<td>40</td>
<td>32</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>Daniel</td>
<td>6391</td>
<td>75</td>
<td>68</td>
<td>25</td>
<td>85</td>
<td>15</td>
<td>35</td>
<td>25</td>
<td>35</td>
<td>27</td>
<td>24</td>
<td>40</td>
</tr>
<tr>
<td>4</td>
<td>Asher</td>
<td>6591</td>
<td>76</td>
<td>60</td>
<td>26</td>
<td>14</td>
<td>29</td>
<td>35</td>
<td>16</td>
<td>19</td>
<td>20</td>
<td>40</td>
<td>49</td>
</tr>
<tr>
<td>5</td>
<td>Julian</td>
<td>6593</td>
<td>68</td>
<!DOCTYPE html>
<html>
<head>
<title>Sainik Blog</title>
<meta charset="utf-8" content="width=device-width" >
<style>
*{
box-sizing: border-box;
border-radius: 5px;
}
body {
font-family: Arial;
padding: 20px;
background: #f8d5d5;
}
.header {
padding: 1px;
font-size: 40px;
text-align: center;
background: white;
}
.leftcolumn {
float: left;
width: 50%;
}
.rightcolumn {
float: left;
width: 50%;
padding-left: 20px;
}
.fakeimg {
background-color: #aaa;
width: 100%;
padding: 20px;
}
.Spam{
background-image: url("./Spam.jpg");
width: 100%;
background-size: cover;
height: 230px;
padding:40px;
color: rgb(0, 204, 255);
text-align: center;
}
.Virus{
background-image: url("./Virus.jpg");
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
border-radius: 5px;
}
/* Add a gray background color with some padding */
body {
font-family: Arial;
padding: 20px;
background: #f8d5d5;
}
/* Header/Blog Title */
.header {
padding: 1px;
font-size: 35px;
text-align: center;
background: white;
}
.Spam{
background-image: url("./Spam.jpg");
width: 100%;
background-size: cover;
height: 30px;
padding:40px;
color: rgb(0, 204, 255);
text-align: center;
}
.Virus{
background-image: url("./Virus.jpg");
width: 100%;
background-size: cover;
height: 30px;
padding:40px;
text-align: center;
color: rgb(0, 204, 255);
}
.Anti-Virus{