Shri Guru Ram Rai University
(Estd.By Govt,of Uttarakhand,vide Shri Guru Ram Rai Univarsity Act No.03 of 2017)
Patel Nagar,Dehradun-248001,Uttarakhand
Shri Guru Ram Rai CollegeCA & IT
“PRACTICAL FILE”
“WEB DEVELOPMENT USING HTML AND CSS ”
SUBMITTED BY SUBMITTED TO
DEEPAK SINGH MR.PRAVEEN TRIPATHI
ENROLL NO=R190530016 (ASST.PROFESSOR)
COURSE: BSC.IT (5th SEM)
HEADINGS IN HTML
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
OUTPUT
LINKS IN HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="https://www.w3schools.com">This is a link</a>
</body>
</html>
BUTTONS IN HTML
<!DOCTYPE html>
<html>
<body>
<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>
<button>Click me</button>
</body>
</html>
OUTPUT
PARAGRAPH IN HTML
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
OUTPUT
LISTS IN HTML
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
OUTPUT
THE TITLE ATTRIBUTE
<!DOCTYPE html>
<html>
<body>
<h2 title="I'm a header">The title Attribute</h2>
<p title="I'm a tooltip">Mouse over this paragraph, to display the title attribute as a tooltip.</p>
</body>
</html>
OUTPUT
THE HREF ATTRIBUTE
<!DOCTYPE html>
<html>
<body>
<h2>The href Attribute</h2>
<p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>
<a href="https://www.w3schools.com">Visit W3Schools</a>
</body>
</html>
OUTPUT
THE HTML HORIZONTAL RULE
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
</body>
</html>
OUTPUT
HTML STYLE
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
OUTPUT
HTML BACGROUND COLOR
<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
HTML TEXT COLOR
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
OUTPUT
HTML TEXT ALIGN
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
OUTPUT
BOLD FORMATTING USING B ELEMENT
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body>
</html>
OUTPUT
HTML INLINE IN CSS
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
</body>
</html>
OUTPUT
HTML WITH INTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
HTML FONTS
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
p {
color: red;
font-family: courier;
font-size: 160%;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
HTML WITH CSS USING CSS ID ATTRIBUTE
<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
color: blue;
</style>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id="p01">I am different.</p>
</body>
</html>
OUTPUT
HTML WITH CSS BORDER
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
CSS MARGIN
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
margin: 50px;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
CSS PADDING
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 2px solid powderblue;
padding: 30px;
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT
