II year BCom Sem-III E-commerce and Web designing lab programs
1. Designapagehavingsuitablebackgroundcolourandtextcolourwithtitle
“MyFirst Web Page” using all the attributes of the Font tag.
Aim: To create a simple web page by using html tags.
Procedure:
1. Go to start->all program–>accessories-> notepad.
2. Type the html code.
3. Include title ”my first web page” in title tag.
4. Set the background for the web page by using bgcolor attributes of the body tag.
5. Use font tag to display text.
6. Go to file->save->save the file with html extension.
7. Run the html code using browser.
Source code:
<html>
<head>
<title>sri hari degree college</title>
</head>
<body bgcolor="green">
<font size="16"color="white" face="Arial">Welcome to sri hari degree
college,balajinagar,kadapa...</font>
</body>
</html>
***************output***************
1
II year BCom Sem-III E-commerce and Web designing lab programs
2. Create a HTML document giving details of your[Name,Age],[Address,Phone]and[Register
Number, Class] aligned in proper order using alignment attributes of Paragraph tag.
Aim: To create a simple web page by using alignment attributes of Paragraph tag.
Procedure:
1. Go to start->all program–>accessories-> notepad
2. Type the html code
3. Align[name ,age]to center by using align=”left ” of<p>tag
4. Align[register ,number ,class] to right using align=”right” of<p>tag
5. Go to file->save->save the file with html extension
6. Run the html code using browser
Source code
<html>
<head>
<title>program02</title>
</head>
<body>
<p align="center”> Name: SHDC<br> Age: 16</p>
<p align="right">
Address:Aghraharam post Kadapa<br>
Phone: 123535615 </p>
<p align="left"> Reg No:
20AK1A0501<br>
Class:2nd Sem C’s
</p>
</body>
</html>
II year BCom Sem-III E-commerce and Web designing lab programs
****************output*************
8
II year BCom Sem-III E-commerce and Web designing lab programs
3. Write HTML code to design a page containing some text in a paragraph by
giving suitable heading style.
Aim: to design a page containing some text in a paragraph by giving suitable
Heading style.
Procedure:
1. Go to start->all programs–>accessories->notepad
2. Type the html code
3. Use<h1>to<h6>tag to display heading
4. Use<p>tag for the paragraph
5. Go to file->save->save the file with html extension
6. Run the html code html using browser
Html code:
<html>
<head>
<title>program03</title>
</head>
<body>
<center>
<h1>BasicWebdesign Lab</h1>
</center>
<h2 align="left">Definition</h2>
<h3 align="left">Website</h3>
<p>
A set of interconnected web pages usually including a home page and many
other web pages
</p>
</body>
</html>
**************output**************
9
II year BCom Sem-III E-commerce and Web designing lab programs
4. Create a page to show different character formatting (B,I,U,SUB,SUP)tags.
p
viz: logbm =p logbm
Aim: To show different character formatting (B, I, U, SUB, SUP) tags.
p
: logbm =p logbm
Procedure:
1. Go to start->all programs–>accessories->notepad
2. Type the html code
3. Include<b>,<u>,<sup>,<sub>,tags
4. Go to file->save->save the file with html extension
5. Run the html code using browsers
Source code:
<html>
<head>
<title>program04</title>
</head>
<body>
<p><b><i>log</i></b><sub>b</sub>m<sup>p</sup>=p<b><i>log</i>
</b><sub>b</sub>m</p>
</body>
</html>
**************output**************
10
II year BCom Sem-III E-commerce and Web designing lab programs
5. Write HTML code to create a Web Page that contains an Image at its centre.
Procedure:
1. Go to start->all programs–>accessories->notepad
2. Type the html code
3. Include<img>tag inside<center>tag and set align attribute of img tag to middle
4. Go to file->save->save the file with html extension
5. Run the html code using browsres
Source code:
<html>
<head>
<title>program05</title>
</head>
<body>
<center>
<imgsrc="C:\DocumentsandSettings\AllUsers\Documents\MyPictures\Sa
mple Pictures\[Link]" height="200" width="200" align="middle"/>
</center>
</body>
</html>
***************output***************
11
II year BCom Sem-III E-commerce and Web designing lab programs
6. Create a webpage use in Embedded CSS and multimedia
Aim: Create a webpage us in Embedded CSS and multimedia
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Use<style>tag for css to apply styles for body,h1,ptags
4. Include audio file by using<audio>tag
5. Go to file–>save–>save the file with html
extension
6. Run the html file using fire fox browser
Source code:
<html>
<body>
<style
>body
{
background-color:blue;
}
h1 {
color:orange;
text-
align:center;
}
p{
font-
family:"TimesNewRoman";
font-size: 20px;
}
</style>
<h1>MyFirst CSS Example</h1>
<p>Thisisa audio.</p>
<audio controls>
<sourcesrc="Horse-neighing.mp3">
</audio>
</body>
</html>
12
II year BCom Sem-III E-commerce and Web designing lab programs
*****************output*******************
13 | P a g e
7. Write a html program to create a simple webpage at different colors of css
Aim: to create a simple webpage at different colors of css
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Use<style>tag for css to apply styles for body,h1,ptags
4. Include audio file by using<audio>tag
5. Go to file–>save–>save the file with html extension
6. Run the html file using fire fox browser
Source code:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
******************output*******************
CSS background-color example!
This is a text inside a div element.
This paragraph has its own background color.
We are still in the div element.
8. Write a html program to display the different types of heading tags
Aim : To display the different types of heading tags(h1 to h6).
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. To apply the text for different heading tags from h1 to h6.
4. Go to file–>save–>save the file with html extension
5. Run the html file using fire fox browser
Source code:
<!DOCTYPE html>
<html>
<head>
<title>heading tag examples</title>
</head>
<body bgcolor=”red”>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
output
Heading tags:
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
9. Write a html program to specify the individual margin properties for
each side of the element.
Aim:
To specify the Using individual margin properties
Procedure:
1. Go to start->all programs->accessories->notepad
2. Type the html code
3. Use<style>tag for css to apply styles for body,div tags
4. Go to file–>save–>save the file with html extension
5. Run the html file using fire fox browser
Source code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a
bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>
Output
Using individual margin properties
This div element has a top margin of 100px, a right margin of 150px, a bottom margin
of 100px, and a left margin of 80px.