[go: up one dir, main page]
Scribd
Upload
40 views17 pages

HTMLFINAL

Uploaded by

Anand Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
40 views17 pages

HTMLFINAL

Uploaded by

Anand Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

1.Write HTML code to describe various text formatting.

<html>
<head>
<title>text formatting commands</title>
</head>
<body>
<b>This is bold</b><br>
<i>This is italic</i><br>
<u>This is underline</u><br>
<b><u><i>This is all in one</i></u></b><br>
This is <strike>strike</strike> tag.
<br>
h<sub>2</sub>o<br>
10<sup>3</sup><br>
This is <small>small text</small><br>
This is <big>big text</big>
</body>
</html>

Output :

1
2. Write HTML code to Insert an image to webpage.
<html>
<head>
<title>insert an image</title>
</head>
<body>
INSERT IMAGE TO WEBPAGE<br>
<img src="H:\html project\Tuning_Lamborghini_Aventador_LP700-4.jpg">
</body>
</html>

Output :

2
3.Write html code to display calendar of the current month.
<html>
<head>
<title>calender</title>
<style>
body {
background: gray;
}
.container {
max-width: 800px;
margin: auto;
font-family: sans-serif;
}
.month {
text-align: center;
background: purple;
font-size: 2.5em;
letter-spacing: 1px;
color: white;
padding: 25px;
border: 1px solid skyblue;
}
table,
th,
td {
width: 100%;
table-layout: fixed;
text-align: center;
font-size: 17px;
border-collapse: collapse;
border: 1px solid skyblue;
}

tr,
th,
td {
padding: 15px;
}
th {
background: red;
color: white;
}
td {
background: #3c8a4e;
}
td:hover {
background: orange;
}

3
</style>
</head>

<body>
<div class="container">
<div class="month">
<strong>January</strong><br>
<strong>2022</strong>
</div>
<table>
<tr>
<th>SUN</th>
<th>MON</th>
<th>TUE</th>
<th>WED</th>
<th>THU</th>
<th>FRI</th>
<th>SAT</th>
</tr>
<tr>
<th>30</th>
<th>31</th>
<th></th>
<th></th>
<th></th>
<th></th>
<th>1</th>
</tr>
<tr>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
</tr>
<tr>
<th>9</th>
<th>10</th>
<th>11</th>
<th>12</th>
<th>13</th>
<th>14</th>
<th>15</tr>
</tr>
<tr>
<th>16</th>
<th>17</th>
<th>18</th>

4
<th>19</th>
<th>20</th>
<th>21</th>
<th>22</th>
</tr>
<tr>
<th>23</th>
<th>24</th>
<th>25</th>
<th>26</th>
<th>27</th>
<th>28</th>
<th>29</th>
</tr>
</table>
</div>
</body>
</html>

Output :

5
4.Write HTML code to create a simple layout of webpage.
<!DOCTYPE html>
<html>
<head>
<title>simple layout</title>
</head>
<body>
<div style="border: 1px solid black; width: 98.7%; height: 80px;"></div>
<div style="border: 1px solid black; width: 20%; height: 500px; float: left;"></div>
<div style="border: 1px solid black; width: 78.5%; height: 500px; float: left;">
<div style="border: 1px solid black; width: 90%; height: 80px; margin-top: 20px; margin-left: 5%;"></div>
<div style="border: 1px solid black; width: 40%; height: 350px; margin-top: 10px; margin-left: 5%; float:
left;"></div>
<div style="border: 1px solid black; width: 40%; height: 350px; margin-top: 10px; margin-left: 55%;"></div>
</div>
<div style="border: 1px solid black; width: 98.7%; height: 80px; margin-top: 500px;"></div>
</body>
</html>

Output :

6
5.Write a HTML code to design a registration forn with appropriate input control.
<html>
<head>
<title>regsitration form</title>
</head>
<body>
<center>
<h1>Students information</h1>
</center>
<form>
Student Name : <br>
<input type="text" name="student name"><br> Father's Name : <br>
<input type="text" name="father's name"><br> contact no. : <br>
<input type="text" name="contact no."><br>
<br>
<input type="radio" name="Gender" value="male">Male<br>
<input type="radio" name="Gender" value="female">Female<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

Output :

7
6.Write HTML code to design a calculator using CSS.
<HTML>
<head>
<title>CALCULATOR</title>
<style>
body {
margin: 50px;
padding: 0px;
background-color: #011627;
color: #fdfffc;
text-align: center;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 100vh;
}
h1 {
font-size: 45px;
}
input {
width: 75px;
height: 50px;
font-size: 45px;
border-radius: 10px;
margin: 10px;
background-color: white;
color: black;
border-style: none;
}
.button:hover {
background-color: yelllow;
cursor: pointer;
}
</style>
</head>
<body>
<H1>CALCULATOR</H1>
<form action=" " name="clc">
<input type="text" name="display" style="width: 370PX;height: 70PX;background-color: #4C555C;color:
white;"><br>
<input type="button" type="button" value="0" onclick="clc.display.value +='0'">
<input type="button" type="button" value="1" onclick="clc.display.value +='1'">
<input type="button" type="button" value="2" onclick="clc.display.value +='2'">
<input type="button" TYPE="button" value="+" onclick="clc.display.value +='+'" style="background-color:
#CC5C11;">
<BR>
<input type="button" type="button" value="3" onclick="clc.display.value +='3'">
<input type="button" type="button" value="4" onclick="clc.display.value +='4'">

8
<input type="button" type="button" value="5" onclick="clc.display.value +='5'">
<input type="button" type="button" value="-" onclick="clc.display.value +='-'" style="background-color:
#BA55D3;">
<BR>
<input type="button" type="button" value="6" onclick="clc.display.value +='6'">
<input type="button" type="button" value="7" onclick="clc.display.value +='7'">
<input type="button" type="button" value="8" onclick="clc.display.value +='8'">
<input type="button" type="button" value="*" onclick="clc.display.value +='*'" style="background-color:
#7DB1B2;">
<BR>
<input type="button" type="button" value="9" onclick="clc.display.value +='9'">
<input type="button" type="button" value="C" onclick="clc.display.value +=' '" style="background-color:
#CC0000;">
<input type="button" type="button" value="=" onclick="clc.display.value=eval(clc.display.value)">
<input type="button" type="button" value="&#247" onclick="clc.display.value +='/'" style="background-color:
#1F80C9;">
</form>
</body>
</HTML>

Output :

9
7.Write HTML code to design an image gallery using CSS.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial</title>

<style>
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap
');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
margin: 40px 20px 0 20px;
}
.container .heading {
width: 50%;
padding-bottom: 50px;
}
.container .heading h3 {
font-size: 3em;
font-weight: bolder;
padding-bottom: 10px;
border-bottom: 3px solid #222;
}
.container .heading h3 span {
font-weight: 100;
}
.container .box {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.container .box .dream {
display: flex;
flex-direction: column;
width: 32.5%;
}
.container .box .dream img {

10
width: 100%;
padding-bottom: 15px;
border-radius: 5px;
}
.container .btn {
margin: 40px 0 70px 0;
background: #222;
padding: 15px 40px;
border-radius: 5px;
}
.container .btn a {
color: #fff;
font-size: 1.2em;
text-decoration: none;
font-weight: bolder;
letter-spacing: 3px;
}
@media only screen and (max-width: 769px) {
.container .box {
flex-direction: column;
}
.container .box .dream {
width: 100%;
}
}
@media only screen and (max-width: 643px) {
.container .heading {
width: 100%;
}
.container .heading h3 {
font-size: 1em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="heading">
<h3>Photo <span>Gallery</span></h3>
</div>
<div class="box">
<div class="dream">
<img src="C:\Users\kricshnacom\Desktop\gallery html\1.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\2.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\3.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\4.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\5.jpg">
</div>
<div class="dream">
<img src="C:\Users\kricshnacom\Desktop\gallery html\6.jpg">

11
<img src="C:\Users\kricshnacom\Desktop\gallery html\7.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\8.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\9.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\10.jpg">
</div>
<div class="dream">
<img src="C:\Users\kricshnacom\Desktop\gallery html\11.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\12.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\13.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\14.jpg">
<img src="C:\Users\kricshnacom\Desktop\gallery html\15.jpg">
</div>
</div>
<div class="btn">
<a href="#">More</a>
</div>
</div>
</body>
</html>

Output :

12
8.Write html code for ordered,unordered,definition and nested list.
Ordered and Unordered List :
<html>
<head>
<title>ordered and unordered list</title>
</head>
<body>
<h1>Fruits</h1>
<hr>
<ol>
<li>Mango</li>
<li>Grapes</li>
<li>Orange</li>
</ol>
<h1>Vegetables</h1>
<hr>
<ul>
<li>Tomato</li>
<li>Potato</li>
<li>Onion</li>
</ul>
</body>
</html>

Output :

13
Definition list :
<!DOCTYPE html>
<html>
<head>
<title>
Definition list
</title>
</head>
<body>
<dl>
<dt>College</dt>
<dd>A boring place</dd>
<dt>Library</dt>
<dd>Learn as much as you can</dd>
<dt>Railway station</dt>
<dd>Too much croweded</dd>
</dl>
</body>
</html>

Output :

Nested list :
<html>

14
<head>
<title>my computer components</title>
</head>
<body bgcolor=pink>
<h1>
<font color=white>
<marquee bgcolor=red>computer components</font>
</marquee>
</h1>
<br>
<hr>
<ul>
<font type=disc>
<font size=30%>
<font color=dark violet>
<li>software</li>
<ol type=1>
<li>ms office </li>
<li>ms dos </li>
</ol>
<br>
<li>hardware</li>
<ol type=1>
<li>mouse</li>
<li>keyboard</li>
<li>printer</li>
</font>
</ol>
</ul>
</body>
</html>

Output :

15
9.Write XML code that contains the information about five books and displaying
the XML file using CSS.
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="first.css"?>
<bookstore>
<book1>
<title>know your worth</title>
<isbn>9788180320231</isbn>
<publisher>general press</publisher>
<seller>google ireland ltd.</seller>
<price>101</price>
</book1>
<book2>
<title>the world as i see it</title>
<isbn>9789387550100</isbn>
<publisher>samaira book publisher</publisher>
<seller>google ireland ltd.</seller>
<price>101</price>
</book2>
<book3>
<title>rich dad poor dad</title>
<isbn>9789776666740</isbn>
<publisher>darelahrampublisher</publisher>
<seller>google ireland ltd.</seller>
<price>1845</price>
</book3>
<book4>
<title>the law of success</title>
<isbn>9789387550063</isbn>
<publisher>simon ans schuster</publisher>
<seller>google ireland ltd.</seller>
<price>115</price>
</book4>
<book5>
<title>my experiments with truth</title>
<isbn>9789380914619</isbn>
<publisher>general press</publisher>
<seller>google ireland ltd.</seller>
<price>115</price>
</book5>
</bookstore>

Output :

16
10.Write a DTD file for the XML file that contains nooks data.
<!ELEMENT bookstore (book1,book2,book3,book4,book5)>

<!ELEMENT book1 (title,isbn,publisher,seller,price)>

<!ELEMENT title (#PCDATA)>

<!ELEMENT isbn (#PCDATA)>

<!ELEMENT publisher (#PCDATA)>

<!ELEMENT seller (#PCDATA)>

<!ELEMENT price (#PCDATA)>

<!ELEMENT book2 (title,isbn,publisher,seller,price)>

<!ELEMENT book3 (title,isbn,publisher,seller,price)>

<!ELEMENT book4 (title,isbn,publisher,seller,price)>

<!ELEMENT book5 (title,isbn,publisher,seller,price)>

17

You might also like