Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
20 views

Programs in HTML and CSS

Uploaded by

rehna
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

Programs in HTML and CSS

Uploaded by

rehna
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Programs in HTML and CSS

1. Program to describe various text formatting commands.


2. Program to create an Unordered list.
3. Program to create an Ordered list.
4. Program to create a Table.
5. Program to create a simple form.
6. Program to create a Hyper link.
7. Program to add an image to Web page.
8. Program to insert scrolling text using Marquee tag.
9. Program to divide a page into Frames.
10. Program to create a simple layout of Webpage.
11. Creating Horizontal menu using CSS.
12. Creating a Webpage Layout using CSS
13. Aligning three boxes side by side using CSS.
14. CSS3 box-shadow and border-radius example.
15. CSS3 text-shadow example.
16. CSS3 scale() example.
17. CSS3 skew() example.
18. CSS3 transition example.
19. CSS3 Multiple columns Example.
20. CSS3 rotateY example.
21. Web Page Photo Album
22. Button Design Creation
23. Create a webpage banner

1. Program to describe various text formatting commands.


<html>
<head>
<title>Text formatting tags</title>
</head>
<body>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<strong>Strong text</strong>
<sup>Super script</sup>
<sub>Sub script</sub>
</body>
</html>
Output :

Bold text Italic text Underlined text Strong text Super script Sub script

2. Program to create an Unordered list.


<html>
<head>
<title>Unordered List</title>
</head>
<body>
Unordered list
<ul>
<li>Peacock</li>
<li>Parrot</li>
<li>Sparrow</li>
<li>Swan</li>
<li>Pigeon</li>
</ul>

<ul type="circle">
<li>Peacock</li>
<li>Parrot</li>
<li>Sparrow</li>
<li>Swan</li>
<li>Pigeon</li>
</ul>

<ul type="square">
<li>Peacock</li>
<li>Parrot</li>
<li>Sparrow</li>
<li>Swan</li>
<li>Pigeon</li>
</ul>

</body>
</html>
Output :

Unordered list
 Peacock
 Parrot
 Sparrow
 Swan
 Pigeon
o Peacock
o Parrot
o Sparrow
o Swan
o Pigeon
 Peacock
 Parrot
 Sparrow
 Swan
 Pigeon

3. Program to create an Ordered list.


<html>
<head>
<title>Ordered list</title>
</head>
<body>

Ordered list

<ol>
<li>Car</li>
<li>Bicycle</li>
<li>Aeroplane</li>
<li>Bus</li>
</ol>

<ol type="a">
<li>Car</li>
<li>Bicycle</li>
<li>Aeroplane</li>
<li>Bus</li>
</ol>
<ol type="A">
<li>Car</li>
<li>Bicycle</li>
<li>Aeroplane</li>
<li>Bus</li>
</ol>

<ol type="i">
<li>Car</li>
<li>Bicycle</li>
<li>Aeroplane</li>
<li>Bus</li>
</ol>

<ol type="I">
<li>Car</li>
<li>Bicycle</li>
<li>Aeroplane</li>
<li>Bus</li>
</ol>

<ol start="6">
<li>Car</li>
<li>Bicycle</li>
<li>Aeroplane</li>
<li>Bus</li>
</ol>

</body>
</html>
Output :

Ordered list
1. Car
2. Bicycle
3. Aeroplane
4. Bus
a. Car
b. Bicycle
c. Aeroplane
d. Bus
A. Car
B. Bicycle
C. Aeroplane
D. Bus
i. Car
ii. Bicycle
iii. Aeroplane
iv. Bus
I. Car
II. Bicycle
III. Aeroplane
IV. Bus
6. Car
7. Bicycle
8. Aeroplane
9. Bus

4. Program to create a Table.


<html>
<head>
<title>Table</title>
</head>
<body>
<table border="1" width="200" height="200">
<caption>Invoice</caption>
<tr>
<th>Sno</th>
<th>Item</th>
<th>Price</th>
</tr>
<tr>
<td>1</td>
<td>Apple</td>
<td>Rs. 20</td>
</tr>
<tr>
<td>2</td>
<td>Mango</td>
<td>Rs. 15</td>
</tr>
<tr>
<td>3</td>
<td>Banana</td>
<td>Rs. 3</td>
</tr>
</table>
</body>
</html>
Output :

Invoice
Sno Item Price
1 Apple Rs. 20
2 Mango Rs. 15
3 Banana Rs. 3

5. Program to create a simple form.


<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h3>Registration Form</h3>
<form action="" method="get">
Name <input type="text" name="uname"><br>
Sex <input type="radio" name="m"> M <input type="radio" name="f"> F<br>
Date of Birth <input type="text" name="dob"><br>
Ph.No. <input type="text" name="phno"><br>
<input type="submit" value="Register">
</form>
</body>
</html>
Output :

6. Program to create a Hyper link.


<html>
<head>
<title>Hyperlink</title>
</head>
<body>
Rose bud using HTML5
<a href="HTML_faqs.php">click here</a>
<br>Test your skills in Banking exams
<a href="http://www.testyourskils.in">click here</a>
</body>
</html>
Output :

Rose bud using HTML5 click here


Test your skills in Banking exams click here

7. Program to add an image to Web page.

<html>
<head>
<title>Linking Image object</title>
</head>
<body>
Tim Berners Lee
<img src="TimBernersLee.jpg" width="150" />
</body>
</html>

Output :

Tim Berners Lee

8. Program to insert scrolling text using Marquee tag.

<html>
<head>
<title>Marquee tag</title>
</head>
<body>
<marquee direction="right">Scrolling right</marquee>
<marquee direction="left">Scrolling left</marquee>
<marquee direction="down">Scrolling down</marquee>
<marquee direction="up">Scrolling up</marquee>
<marquee behavior="slide"><img src="2.jpg" width="100"></marquee>
<marquee behavior="alternate" scrollamount="20"><img src="4.jpg" width="100"></marquee>
</body>
</html>

9. Program to divide a page into Frames.


<html>
<head>
<title>Frames</title>
<frameset rows="30%,70%">
<frame src="frame1.html" />
<frameset cols="20%,80%">
<frame src="frame2.html" />
<frame src="frame3.html" />
</frameset>
</frameset>
</head>
</html>

10. Program to create a simple layout of Webpage.

<html>
<head>
<title>Basic layout of web page</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" width="200" height="50" align="center">Header</td>
<tr>
<td colspan="2" width="200" height="15" align="center">Menu items</td>
</tr>
<tr>
<td width="50" height="200">Left<br />Navigation</td>
<td width="150" height="200">Main Content Area</td>
</tr>
<tr>
<td colspan="2" width="200" height="15" align="center">Footer</td>
</tr>
</table>
</body>
</html>

Output :

Header

Menu items

Left
Main Content Area
Navigation

Footer

CSS
11. Creating Horizontal menu using CSS.
style.css
#menubar{
width:680px;
height:40px;
background-color:#333;
}
#menubar ul{
list-style-type:none;
padding-left:0;
}
#menubar ul li{
display:inline;
}
#menubar ul li a{
width:136px;
color:#FFF;
text-decoration:none;
float:left;
text-align:center;
line-height:40px;
}
#menubar ul li a:hover{
color:#39F;
background-color:#000;
}
css_menu.html
<html>
<body>
<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>

12. Creating a Webpage Layout using CSS.

style.css

*{
margin:0;
}
body{
background-color:#09F;
}
#wrapper{
width:980px;
height:768px;
background-color:#CC9;
margin-left:auto;
margin-right:auto;
}
#banner{
width:960px;
height:130px;
background-color:#630;
color:#FFF;
font-size:36px;
padding:20px 0 0 20px;
}
#menubar{
width:980px;
height:40px;
background-color:#333;
}
#menubar ul{
list-style-type:none;
padding-left:0;
}
#menubar ul li{
display:inline;
}
#menubar ul li a{
width:196px;
color:#FFF;
text-decoration:none;
float:left;
text-align:center;
line-height:40px;
}
#menubar ul li a:hover{
color:#39F;
background-color:#000;
}
#container{
width:980px;
height:538px;
background-color:#FC9;
}
#footer{
width:980px;
height:40px;
background-color:#333;
color:#fff;
text-align:center;
line-height:40px;
}
#content{
width:740px;
height:528px;
background-color:#FFF;
float:left;
margin:5px;
}
#sidebar{
width:225px;
height:528px;
background-color:#660;
float:left;
margin:5px 5px 5px 0;
}

layout1.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div id="wrapper">
<div id="banner">
MyCollege.com
</div>

<div id="menubar">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

<div id="container">
<div id="content">
</div>
<div id="sidebar">
</div>
</div>

<div id="footer">
© 2015
</div>
</div>
</body>
</html>

Output :

13. Aligning three boxes side by side using CSS.

style.css

#box1{
width:200px;
height:200px;
background-color:#09F;
float:left;
margin-right:20px;
}
#box2{
width:200px;
height:200px;
background-color:#F96;
float:left;
margin-right:20px;
}
#box3{
width:200px;
height:200px;
background-color:#6C6;
float:left;
margin-right:20px;
}

boxmodel.html

<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>

Output :

14. CSS3 box-shadow and border-radius example.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
.rnd{
border-radius:10px;
text-align:center;
border-color:#63C;
height:30px;
width:200px;
}
#form1{
width:250px;
height:200px;
background-color:#00CCFF;
box-shadow:10px 10px 1px #999999;
text-align:center;
padding-top:20px;
border-radius:10px;
}
</style>
</head>

<body>
<div id="form1">
<input type="text" class="rnd" placeholder="User name" />
</div>
</body>
</html>
Output :

15. CSS3 text-shadow example.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
#box{
text-align:center;
text-shadow:5px 5px 3px #999999;
font-size:36px;
font-family:"Times New Roman", Times, serif;
}
</style>
</head>

<body>
<div id="box">
Welcome to CSS3
</div>
</body>
</html>
Output :
16. CSS3 scale() example.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
#box{
width:100px;
height:100px;
font-size:18px;
background-color:#0CF;
border-radius:5px;
box-shadow:10px 10px 2px #999999;
text-align:center;
padding-top:20px;
text-shadow:2px 2px 2px #666666;
}
#box:hover{
transform:scale(2,1.5);
-webkit-transform:scale(2,1.5);
-ms-transform:scale(2,1.5);
}
</style>
</head>

<body>
<div id="box">
Mouse over me
</div>
</body>
</html>

Output:

17. CSS3 rotation example


<!DOCTYPE html>
<html>
<head>
<style>
#box{
width:150px;
height:150px;
font-size:26px;
background-color:#0CF;
border-radius:5px;
box-shadow:10px 10px 2px #999999;
text-align:center;
padding-top:20px;
text-shadow:2px 2px 2px #666666;
transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
}
</style>
</head>
<body>
<div id="box">
2D rotation
</div>
</body>
</html>
Output :

17. CSS3 skew() example.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
#box{
width:200px;
height:100px;
font-size:26px;
background-color:#0CF;
border-radius:5px;
box-shadow:10px 10px 2px #999999;
text-align:center;
padding-top:20px;
text-shadow:5px 5px 2px #666666;
transform:skew(130deg,10deg);
-webkit-transform:skew(130deg,10deg);
-ms-transform:skew(130deg,10deg);
position:relative;
top:50px;
left:200px
}
</style>
</head>

<body>
<div id="box">
Welcome to CSS3
</div>
</body>
</html>

Output :

.
18. CSS3 transition example.
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
#box{
width:100px;
height:100px;
font-size:20px;
background-color:#0CF;
border-radius:5px;
box-shadow:10px 10px 2px #999999;
text-align:center;
padding-top:20px;
text-shadow:5px 5px 2px #666666;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, left 2s, -webkit-transform 2s;
position:relative;
top:50px;
left:100px;
}
#box:hover{
width:150px;
height:150px;
left:400px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
}
</style>
</head>

<body>

<div id="box">
Welcome to CSS3
</div>

</body>
</html>
Output :

19. CSS3 Multiple columns Example.


<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
#box{
width:700px;
text-align:justify;
column-count:3;
column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
}
</style>
</head>

<body>
<div id="box">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
of letters, as opposed to using 'Content here, content here', making it look like readable English.
Many desktop publishing packages and web page editors now use Lorem Ipsum as their default
model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
versions have evolved over the years, sometimes by accident, sometimes on purpose (injected
humour and the like).
</div>
</body>
</html>

Output :

20. CSS3 rotateY example.

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style>
#box{
width:150px;
height:100px;
font-size:26px;
background-color:#0CF;
border-radius:5px;
box-shadow:10px 10px 2px #999999;
text-align:center;
padding-top:20px;
text-shadow:2px 2px 2px #666666;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-ms-transform:rotateY(180deg);
position:relative;
top:50px;
left:200px;
}
</style>
</head>

<body>
<div id="box">
3D rotation
</div>
</body>
</html>

Output :
21. WEB PAGE PHOTO ALBUM
styles.css
/* styles.css */

body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}

.photo-album {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
text-align: center;
color: #333;
}

.gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}

.photo {
margin: 10px;
text-align: center;
}

.photo img {
width: 100%;
max-width: 300px;
height: auto;
border-radius: 8px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

album.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Photo Album</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="photo-album">
<h1>My Photo Album</h1>
<div class="gallery">
<div class="photo">
<img src="logo.jpg" alt="Description of Image 1">
<p>Caption for Image 1</p>
</div>
<div class="photo">
<img src="pic2.jpg" alt="Description of Image 2">
<p>Caption for Image 2</p>
</div>
<div class="photo">
<img src="pic1.jpg" alt="Description of Image 3">
<p>Caption for Image 3</p>
</div>
</div>
</div>
</body>
</html>

22. BUTTON DESIGN CREATION

/* styles.css */

.my-button {
background-color: #007bff; /* Primary color */
color: white; /* Text color */
border: none;
border-radius: 4px; /* Rounded corners */
padding: 10px 20px; /* Vertical and horizontal padding */
font-size: 16px; /* Font size */
cursor: pointer; /* Pointer cursor on hover */
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

.my-button:hover {
background-color: #0056b3; /* Darker shade on hover */
}

.my-button:active {
transform: scale(0.98); /* Slight shrink effect on click */
}
.my-button:focus {
outline: none; /* Remove default focus outline */
}

button.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<button class="my-button">Click Me!</button>
</div>
</body>
</html>

23. Create a webpage banner

styles.css

/* styles.css */

body {
margin: 0;
font-family: Arial, sans-serif;
}

.banner {
background: url('pic1.jpg') no-repeat center center/cover; /* Background image */
color: white; /* Text color */
text-align: center;
padding: 100px 20px; /* Vertical and horizontal padding */
position: relative;
}

.banner-content {
position: relative;
z-index: 2; /* Ensure content is above any overlay */
}

.banner h1 {
font-size: 3em; /* Font size for the title */
margin: 0;
padding: 0;
}

.banner p {
font-size: 1.5em; /* Font size for the tagline */
margin: 10px 0;
}

.btn {
display: inline-block;
background-color: #007bff; /* Button background color */
color: white; /* Button text color */
padding: 10px 20px; /* Vertical and horizontal padding */
font-size: 1em; /* Font size */
text-decoration: none; /* Remove underline */
border-radius: 5px; /* Rounded corners */
transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth transitions */
}

.btn:hover {
background-color: #0056b3; /* Darker shade on hover */
}

.btn:active {
transform: scale(0.98); /* Slight shrink effect on click */
}

banner.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Banner</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="banner">
<div class="banner-content">
<h1>Shasun College</h1>
<p>Your Path to Excellence</p>
<a href="#learn-more" class="btn">Learn More</a>
</div>
</header>
</body>
</html>

You might also like