KEMBAR78
HTML and CSS codes | PDF
Date: 28-Sep-2020
Subject: Information Technology
Class XII
Advanced Web Technology
1. INLINE CSS
Table 1
<!DOCTYPE HTML>
<html>
<body>
<h1 align="center" style="color: white; background-color: blue;">NARAYANA JR. COLLEGE</h1>
<marquee scrollamount=10 behavior="alternate">
<H1 style="font-weight: 200; font-style: italic; color: red;">IIT ACADEMY</H1>
</marquee>
<h1 style="font-style: oblique; text-decoration: overline;">Subjects</h1>
<div name="d1" style="border: dashed; border-color: green; background-color: lime;">
<ul type="square">
<li style="font-size: 20px; letter-spacing: 10pt; text-decoration: underline">COMPULSORY
SUBJECTS</li>
</ul>
<ol type="I">
<li style="font-family: fantasy; padding: 10pt;">MATHS</li>
<li>English</li>
<li style="font-family: cursive; padding: 10pt;">Physics</li>
<li>Chemistry</li>
</ol>
</div>
<br>
<!--<hr>-->
<div name="d2" style="border: groove; border-color: red; background-color: cyan; margin-left:
100px;">
<ul type="circle">
<li style="font-size: 20px; letter-spacing: 10pt; text-decoration: underline">OPTIONAL
SUBJECTS</li>
</ul>
<ol type="i">
<li>Geography</li>
<li>Economics</li>
<li>IT</li>
<li>CS</li>
</ol>
</div>
</body>
</html>
OUTPUT:
2. INTERNAL CSS
Table 2
<!DOCTYPE HTML>
<!--In this page, we are applying internal css, we will be using ID and CLASS concept here-->
<html>
<head>
<title>INTERNAL CSS</title>
<!--use style attribute to create internal css-->
<style>
h1 {color:pink}
h4 {
color: red;
text-decoration: underline;
}
p{font-style: italic;}
tr{
border-top-color: red;
}
</style>
</head>
<body>
<h1>Customer Testimonies</h1>
<table align="center" border=2 height=600 width=1000>
<tr>
<td><p>"They Provide Excellent Services."</p></td>
<td><p>"They have good staff"</p></td>
<td><h3>"Ontime Delivery"</h3></td>
</tr>
<tr>
<td><h4>"Damage return with money back policy"</h4></td>
<td><h5>"Happy to earn reward points"</h5></td>
<td><p>"Excellent Customer Services"</p></td>
</tr>
<tr>
<td><h4>"Good Replacement Policy"</h4></td>
<td><h5>"They provide valuable services."</h5></td>
<td><img src="D:SUBJECTSHTML 5cssan1.jpg" ></td>
</tr>
</table>
</body>
</html>
OUTPUT:
3. EXTERNAL CSS
Table 3 : CSS FILE (new2.css)
<style>
h1, p{
color: blue;
margin-left: 100px;
}
#feedback{
background-color: lime;
font-family: cursive;
}
.para{
text-decoration: underline;
font-family: fantasy;
font-style: italic;
}
*{
font-size: 25px;
color: orange;
margin-left: 100px;
}
</style>
Table 4: HTML FILE (new1.html)
<!DOCTYPE HTML>
<html>
<head>
<title>it</title>
<style>
h1{
color: red;
margin-left: 100px;
}
#feedback{
background-color: lime;
font-family: cursive;
}
.para{
text-decoration: underline;
font-family: fantasy;
}
*{
font-size: 25px;
color: purple;
margin-left: 100px;
}
</style>
</head>
<body>
<h1>Student Analysis Report</h1>
<h1 id="feedback">Students Feedback</h1>
<TABLE border=5 height=400 width=600>
<tr>
<td><h4>This college is good</h4></td>
<td><p class="para">Canteen is good</p></td>
<td></td>
</tr>
<tr>
<td><h4 class="para">This college is good in terms of building</h4></td>
<td><p>Computer Lab is good</p></td>
<td></td>
</tr>
<tr>
<td></td>
<td><p id="feedback">Principal is good</p></td>
<td><img src="an1.jpg"></td>
</tr>
</TABLE>
</body>
</html>
OUTPUT

HTML and CSS codes

  • 1.
    Date: 28-Sep-2020 Subject: InformationTechnology Class XII Advanced Web Technology 1. INLINE CSS Table 1 <!DOCTYPE HTML> <html> <body> <h1 align="center" style="color: white; background-color: blue;">NARAYANA JR. COLLEGE</h1> <marquee scrollamount=10 behavior="alternate"> <H1 style="font-weight: 200; font-style: italic; color: red;">IIT ACADEMY</H1> </marquee> <h1 style="font-style: oblique; text-decoration: overline;">Subjects</h1> <div name="d1" style="border: dashed; border-color: green; background-color: lime;"> <ul type="square"> <li style="font-size: 20px; letter-spacing: 10pt; text-decoration: underline">COMPULSORY SUBJECTS</li> </ul> <ol type="I"> <li style="font-family: fantasy; padding: 10pt;">MATHS</li> <li>English</li> <li style="font-family: cursive; padding: 10pt;">Physics</li> <li>Chemistry</li> </ol> </div> <br> <!--<hr>--> <div name="d2" style="border: groove; border-color: red; background-color: cyan; margin-left: 100px;"> <ul type="circle"> <li style="font-size: 20px; letter-spacing: 10pt; text-decoration: underline">OPTIONAL SUBJECTS</li> </ul> <ol type="i"> <li>Geography</li> <li>Economics</li> <li>IT</li> <li>CS</li> </ol> </div> </body> </html>
  • 2.
    OUTPUT: 2. INTERNAL CSS Table2 <!DOCTYPE HTML> <!--In this page, we are applying internal css, we will be using ID and CLASS concept here--> <html> <head> <title>INTERNAL CSS</title> <!--use style attribute to create internal css--> <style> h1 {color:pink} h4 { color: red; text-decoration: underline; } p{font-style: italic;} tr{ border-top-color: red; } </style> </head> <body> <h1>Customer Testimonies</h1> <table align="center" border=2 height=600 width=1000> <tr> <td><p>"They Provide Excellent Services."</p></td> <td><p>"They have good staff"</p></td> <td><h3>"Ontime Delivery"</h3></td> </tr>
  • 3.
    <tr> <td><h4>"Damage return withmoney back policy"</h4></td> <td><h5>"Happy to earn reward points"</h5></td> <td><p>"Excellent Customer Services"</p></td> </tr> <tr> <td><h4>"Good Replacement Policy"</h4></td> <td><h5>"They provide valuable services."</h5></td> <td><img src="D:SUBJECTSHTML 5cssan1.jpg" ></td> </tr> </table> </body> </html> OUTPUT: 3. EXTERNAL CSS Table 3 : CSS FILE (new2.css) <style> h1, p{ color: blue; margin-left: 100px; } #feedback{ background-color: lime; font-family: cursive; } .para{ text-decoration: underline; font-family: fantasy;
  • 4.
    font-style: italic; } *{ font-size: 25px; color:orange; margin-left: 100px; } </style> Table 4: HTML FILE (new1.html) <!DOCTYPE HTML> <html> <head> <title>it</title> <style> h1{ color: red; margin-left: 100px; } #feedback{ background-color: lime; font-family: cursive; } .para{ text-decoration: underline; font-family: fantasy; } *{ font-size: 25px; color: purple; margin-left: 100px; } </style> </head> <body> <h1>Student Analysis Report</h1> <h1 id="feedback">Students Feedback</h1> <TABLE border=5 height=400 width=600> <tr> <td><h4>This college is good</h4></td> <td><p class="para">Canteen is good</p></td> <td></td> </tr> <tr> <td><h4 class="para">This college is good in terms of building</h4></td> <td><p>Computer Lab is good</p></td> <td></td> </tr> <tr> <td></td>
  • 5.
    <td><p id="feedback">Principal isgood</p></td> <td><img src="an1.jpg"></td> </tr> </TABLE> </body> </html> OUTPUT