Scribd
Upload
8 views23 pages

1-10 Program Practical Manual

Uploaded by

Nichu U
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
8 views23 pages

1-10 Program Practical Manual

Uploaded by

Nichu U
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/ 23

NEHRU ARTS & SCIENCE

COLLEGE

INTERNET & WEB


DESIGNING
PRATICALS

III BCOM CA
INDEX
S.NO DATE PROGRAM

1 Create a Program using HTML to display the ordered list


16.12.2023 and unordered list of a Departmental Store.

2 30.12.2023 Program to display Image and text using HTML tag for
an advertisement of a Company Product.

3 26.12.2023 Create a table to display list of products using HTML tag.

4 08.01.2024 Create web pages for a business organization using


HTML Frames.

5 19.01.2024 Create a document using Formatting and alignment to


display Sales Letter.

6 29.01.2024 Create a Resume using HTML Tags.

7 02.02.2024 Create a website of your department with minimum five


links using HTML
8 07.02.2024 Create a document using Form to support Local Processing
of Order form.

9 16.02.2024 Create a Form of the Customer Survey for the user to


enter General name and address information.

10 23.02.2024 Create a Frame to display a multiform document.

ORDERED LIST AND UNORDERED LIST

AIM: To write a HTML program using ordered list and unordered list of a Departmental Store.

ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad.
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: By using tags makes an ordered list.
Step 5: By using tags makes an unordered list.
Step 6: <li>tag used to declare the list of item option such as number (or) alphabet (or) some
special symbol like disk, circle and square by using the “type” attribute. Step 4: <ol> used for
ordered list
Step 7: start Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 8: Stop

SOURCE CODE:-
<html>
<head>
<title>Department Store Lists</title>
</head>
<body bgcolor=yellow>
<center><h1>Department Store</h1></center>
<h2>Unordered List</h2>
<ul>
<li>Fashion</li>
<li>Electronics</li>
<li>Home and Furniture</li>
<li>Appliances</li>
<li>Beauty and Personal Care</li>
</ul>
<h2> Ordered List</h2>
<ol>
<li>Vegetables</li>
<li>fruits</li>
<li>Gift Accessories</li>
<li>Books</li>
<li>household textiles</li>
</ol>
</body>
</html>
OUTPUT:-

RESULT:-
Therefore the webpage is successfully designed.
ADVERTISMENT

AIM: To create html program using Image tag to display the advertisement of a Company
product.

ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad.
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: By using heading tag to define the heading.
Step 5: By using image tag to display the image.
Step 6: By using marquee tag to scrolling text or images.
Step 7: start Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 8: Stop
SOURCE CODE:-

<html>
<head>
<title>advertisment</title>
</head>
<body bgcolor=red>
<center><h1>ADVERTISMENT</h1></center>
<font size=20>
<marquee bgcolor=yellow>PIZZA SPECIAL FOR EVERY
MONDAY!!!!</marquee> <center><img src=advert.jpg><center>
<marquee bgcolor=yellow>UPTO 50% OFFER WITH EXTRA CASH
BACK!!!</marquee> </body>
</html>
OUTPUT:-

RESULT:-
Therefore the webpage is successfully designed.
LIST OF PRODUCTS

AIM:
Create a table to display list of products using HTML tag.

ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad.
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: By using <table> to represent the tabular data.
Step 5: By using <tr> tag to define the rows of cell in a table. Step 6:
By using <th> tag to define the standard cell in a html table.
Step 7: By using <td> tag to define the table data.
Step 8: start Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 9: Stop
SOURCE CODE:-

<html>
<head>
<title>Product List</title>
</head>
<body bgcolor=yellow>
<center><h2>Product List</h2></center>
<center><table bgcolor=pink border=1 cellpadding=25></center>

<tr>
<th>Product Name</th>
<th>Category</th>
<th>Price</th>
</tr>
<tr>
<td>Widget 1</td>
<td>Electronics</td>
<td>10,000</td>
</tr>
<tr>
<td>Gizmo 2</td>
<td>Gadgets</td>
<td>5000</td>
</tr>
<tr>
<td>Super cool ear buds</td>
<td>Accessories</td>
<td>1000</td>
</tr>
</table>
</body>
</html>
OUTPUT:-
RESULT:-
Therefore the webpage is successfully designed.
FRAMES

AIM :- To Create web pages for a business organization using HTML Frames.

ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad.
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: By using heading tag to define the heading.
Step 5: By using image tag to display the image.
Step 6: By using marquee tag to scrolling text or images.
Step 7: start Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 8: Stop
SOURCE CODE:-
Frames.html
<html>
<frameset rows="20%,80%,10%">
<frame name="A" src="header.html">
<frameset cols="100%,20%">
<frame name="B" src="home.html">
<frame name="C" src="sidebar.html">
</frameset>
<frame name="B" src="footer.html">
<frameset rows="100%">
</frameset>
</frameset>
</html>

Header.html
<html>
<body bgcolor=lime>
<marquee direction=up><img src=header.jpg
width=100%></marquee> </body>
</html>

Footer.html
<html>
<body bgcolor=lime>
<center>
&COPY reserved
<center><img src=6.jpg width=10%></center>
</h1>
</body>
</html>
Sidebar.html
<html>
<body>
<h4 align="center">
<body bgcolor=pear>
<marquee scrollamount=150 direction=down><img src=5.jpg></marquee> <font
size=40>Address: 1, Coimbatore, KOOTURAVU THIRUNAGAR, ACHIPATTI
Coimbatore, Tamil Nadu, 642002 India.
</h4>
</body>
</html>

Home.html
<html>
<body>
<h1>
<center>Welcome to the home page</center>
<body bgcolor=black>
<marquee behavior=scroll scrollamount=100><center><img src=1.jpg height=75%
width=50% ><font color=white><h1>WELCOME TO DOMAIN
CREATORS</h1></center> </marquee>
<center><img src=2.jpg height=75% width=50%></center>
<center><img src=3.jpg height=75% width=50%></center>
<center><img src=4.jpg height=75% width=50%></center>
<font color=white>
<center><h1>WELCOME TO DOMAIN CREATORS</h1></center>
</font>
</h1>
</body>
</html>
OUTPUT:

RESULT:-
Therefore the webpage is successfully designed.
SALES LETTER

AIM :- To Create a document using Formatting and alignment to display Sales Letter.

ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad.
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: By using heading tag to define the heading.
Step 5: By using <p> align Attribute is used to specify the alignment of paragraph text content
Step 6: By using <left> align Attribute, it sets the text left-align.
Step 7: By using <right> align Attribute, it sets the text right-align.
Step 8: By using <center> align Attribute, it sets the text center-align.
Step 9: By using <justify> align Attribute, it stretch the text of paragraph to set the width of all
lines equal
Step 10: start Internet explorer File Open Browser and select the file and click
OK, then the webpage will be displayed
Step 11: Stop
SOURCE CODE

<html>
<head>
<title>sales letter</title>
</head>
<font color=white>
<center>SALES LETTER</center>
<body bgcolor=green>
<p align=left>
15 July 2039<br>
Harrison Allen<br>
FABRICS Textiles<br>
435 Celina, Texas<br>
</left>

<p align=justify>

Dear Mr. Allen,


<br>We at FABRICS Textiles are glad to inform you about our new product. We are one of the
renowned names in the textile industries and have a vast collection of fabrics. This winter, we
have released a new Snow Fabrics line. The products in this line are specially designed to
withstand the cold weather and are warmer than our previous designs. They are also available in
dark colors meant to trap the heat in for the best experience. We assure you that your customers
will love the Snow Fabrics line. If you have any queries, please contact FABRICS Textiles
through [email protected] or call our office at (545) 456 789 00.</p>

<p align=right>
Sincerely,<br>
Michelle Johannes<br>
Marketing Manager,<br>
FABRICS Textiles<br>
OUTPUT
RESULT:-
Therefore the webpage is successfully designed.
RESUME

AIM:
To Create a Resume using HTML Tags.
ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad++
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: By using table border to represent the tabular data.
Step 5: By using img tag to display an image in jpg format.
Step 6: By using <hr> tag in HTML stands for horizontal rule
and is used to insert a horizontal rule.
Step 7: By using <ul> tag to create bullets and define the items in unordered
list Step 8: By using <li> is used to list the items.
Step 9: start Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 10: Stop
SOURCE CODE

<!DOCTYPE html>
<head>
<title>Resume</title>
</head>
<body>
<table border=3>
<th align=left>
<header>
<center> <h1>John Doe
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb
sp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
& nbsp;<img src=2.jpg></h1></center>
<p>123 Main Street, Coimbatore TN</p>
<p>Email: [email protected] | Phone: 89456-5789</p>
</header>
<hr align=left width=100%>
<section>
<h2><u>Summary</u></h2>
<p>Dynamic and results-oriented professional with 5 years of experience in web
development. <br>Skilled in HTML, CSS, JavaScript, and responsive design. Proven track record
of delivering <br>high-quality projects on time and exceeding client expectations.</p>
</section>
<hr align=left width=100%>
<section>
<h2><u>Education</u></h2>
<h3>Bachelor of Science in Computer Science</h3>
<p>University Name, City, State | Graduation Year: 20XX</p>
</section>
<hr align=left width=100%>
<section>
<h2><u>Experience</u></h2>
<h3><u>Web Developer</u></h3>
<p>XYZ Company, City, State | 20XX - Present</p>
<ul>
<li>Developed and maintained responsive websites using HTML, CSS, and
JavaScript.</li> <li>Collaborated with design and marketing teams to implement website features
and functionality.</li>
<li>Optimized website performance and ensured cross-browser compatibility.</li>
<li>Performed code reviews and provided technical guidance to junior developers.</li>
</ul>
<hr align=left width=100%>
<h3><u>Junior Web Developer</u></h3>
<p>ABC Agency, City, State | 20XX - 20XX</p>
<ul>
<li>Assisted in the development of web applications and user interfaces.</li>
<li>Participated in team meetings and contributed to project planning and brainstorming
sessions.</li> <li>Performed troubleshooting and resolved technical issues in a timely
manner.</li> </ul>
</section>
<hr align=left width=100%>
<section>
<h2><u>Skills</u></h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>Responsive Web Design</li>
<li>Version Control (Git)</li>
<li>Problem Solving</li>
</ul>
</section>
<hr align=left width=100%>
<section>
<h2><u>Languages</u></h2>
<ul>
<li>English (Fluent)</li>
<li>Spanish (Intermediate)</li>
</ul>
</section>

</table>
</body>
</html>
OUTPUT

RESULT:-
Therefore the webpage is successfully designed.
COLLEGE WEBSITE

AIM:
To Create a website of your department with minimum five links using HTML
ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad++
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps
Step 4: Create a website of your department make five links using
HTML Step 5: By using img tag to display an image in jpg format.
Step 6: By using < a href>..</a>tag which indicates the link’s
destination.
Step 7: By using <ul> tag to create bullets and define the items in unordered
list Step 8: By using <li> is used to list the items.
Step 9: start Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 10: Stop
SOURCE CODE

Website.html

<!DOCTYPE html>
<head>
<title>Department Website</title>
</head>
<body background=home.jpg>
<center><img src=logo.jpg>
<header>
<font color=white>
<h1>Department of Commerce</h1>
</header></center>
<nav>
<ul>
<li><a href="about.html">About</a></li>
<li><a href="highlights.html">Highlights</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="departments.html">Departments</a></li>
<li><a href="contact.html">Contact US</a></li>
</ul>
</nav>
</body>
</html>

About.html
<img src=logo.jpg><h2>
The programme aims to develop professionalism in trade, commerce and industry among students. The
school of commerce has made tremendous transformations in terms of commerce studies across the nation
by applying theories into practice and has been investing tireless efforts in bridging gap between academic
pursuits and industry requirements</h2>

<a href="website.html">Home</a>

Highlights.html
<img src=logo.jpg>
<ul>
<li>Digital Class Monitoring System</li>
<li>NASC Bank</li>
<li>National Day Celebrations at School</li>
<li>Institution Brand Building</li>
<li>Parent Conclave</li>

<a href="website.html">Home</a>
</ul>
Gallery.html
<img src=logo.jpg>
<img src=gallery.jpg>
<a href="website.html">Home</a>

Departments.html
<img src=logo.jpg>
<h2>
<ol>
<li>B.Com </li>
<li>B.Com IT </li>
<li>B.Com CA </li>
<li>B.Com Banking</li>
<li>B.Com PA </li>
<li>M.Com </li>
</ol>
<a href="website.html">Home</a>
</h2>

Contact.html
<img src=logo.jpg>
<p><center>
LOCATION
“Nehru Gardens” TM Palayam, Coimbatore
641105. <br>
[email protected]<br>
+91 73589 99256</p>

<a href="website.html">Home</a>
output
RESULT:-
Therefore the webpage is successfully designed.
8.LOCAL PROCESSING ORDER FORM

AIM:
To create a document using Form to support Local Processing of Order form.
ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad++
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps.
Step 4: By using form tag is used to create an Html form for user input controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
Step 5: By using method as post tells the browser how to send form data to a web server. Step
6: finally submit button which submits all form values to a form-handler. Step 7: start
Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 8: Stop
SOURCE CODE

Local.html

<!DOCTYPE html>
<head>
<title>Local Order Processing Form</title>
</head>
<body bgcolor=pink>
<center>
<h2>fit foods order form</h2>
<img src=food.jpg>
<form action="process_order.html" method="post">
<label for="customer_name">Customer Name:</label>
<input type="text" id="customer_name" name="customer_name"
required><br><br> <label for="email">Email:</label>
<input type="email" id="email" name="email"
required><br><br> <label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone"
required><br><br> <label for="product">Product:</label>
<select id="product" name="product" required>
<option value="">Select a product</option>
<option value="Product A">Cakes & Muffins</option>
<option value="Product B">Breads and Buns</option>
<option value="Product C">Frozen Veggies &
Snacks</option> </select><br><br>
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1"
required><br><br> <label for="comments">Additional Comments:</label><br>
<textarea id="comments" name="comments"
rows="4"></textarea><br><br> <input type="submit" value="Submit
Order">
</center>
</form>
</body>
</html>

process_order.html

<center>
<h2>form submitted
order will processed soon... </h2><br>
<img src=del.gif>
<center>
Output
RESULT:-
Therefore the webpage is successfully designed.
CUSTOMER SURVEY FORM

AIM:
To Create a Form of the Customer Survey for the user to enter General name and address
information.
ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad++
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps.
Step 4: By using form tag is used to create an Html form for user input controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
Step 5: By using method as post tells the browser how to send form data to a web server. Step
6: finally submit button which submits all form values to a form-handler. Step 7: start
Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 8: Stop
Coding :
<!DOCTYPE HTML>
<html>
<head>
<title>Customer Survey Form</title>
</head>
<body bgcolor="pink">
25
<center h1><b>Customer Survey Form</b>
</center h1>
<form>
<center>
<br>
<br>
<br>
<div>
<label for="fname">FIRST NAME:</label><br>
<input type="text" id="fname" name="fname">
<br>
<br>
<label for="lname">LAST NAME:</label><br>
<input type="text" id="lname" name="lname">
<br>
<br>
<label for="birthday">DATE OF BIRTH:</label><br>
<input type="date" id="birthday" DOB="birthday"><br><br>
<label for="add">ADDRESS OF THE
CUSTOMER:</label><br> <input type="text" id="add"
name="address"><br><br>
<label for="info">INFORMATION ABOUT THE
CUSTOMER:</label><br> <input type ="text" informtion="info"><br><br>
<label for="rate">RATING:</label><br>
<p><em>(Note:The Rating should be 1-10)</em></p>
<input type="text" rating="rate"><br><br>
<input type="Submit"style="background-color:silver;"
value="Submit"> </div>
</center>
</form>
</body>
</html>
OUTPUT
RESULT:-
Therefore the webpage is successfully designed.
10. MULTI FRAME FORM

AIM:
To Create a Frame to display a multiform document.

ALGORITHM:
Step 1: Start the program.
Step 2: Go to the start menu and select accessories for notepad++
Step 3: Type the source code in notepad++ and save it in the form of filename.html
format. To run the program, we must follow the following steps.
Step 4: By using form tag is used to create an Html form for user input controls such as text fields,
password fields, checkboxes, radio buttons, submit button, menus etc.
Step 5: By using method as post tells the browser how to send form data to a web server. Step
6: finally submit button which submits all form values to a form-handler. Step 7: start
Internet explorer File Open Browser and select the file and click OK, then the
webpage will be displayed
Step 8: Stop
Coding :
<!DOCTYPE html>
<html>
<head>
<title>Create a Registration form</title>
</head>
<body style="background-color:#77C3EC;>
The following tags are used in this HTML code for creating the Registration
form: <br>
<form>
<label>Firstname:</label>
<input type="text name="firstname" size="15"/><br>
<br>
<label>Lastname:</label>
<input type="text" name="lastname" size="15"/><br>
<br>
<label>Course:</label>
<select>
<option value="Course">Course</option>
<option value="BCA">BCA</option>
<option value="BBA">BBA</option>
<option value="B.Tech">B.Tech</option>
<option value="MBA">MBA</option>
<option value="MCA">MCA</option>
<option value="M.Tech">M.Tech</option>
</select>
<br>
<br>
28
<label>
Gender:
</label>
<br>
<input type="radio" name="gender"/>Male<br>
<input type="radio" name="gender"/>Female<br>
<input type="radio" name="gender"/>Other
<br>
<br>
<label>
Hobbies:
</label>
<br>
<input type="checkbox" name="Cricket">Cricket<br>
<input type="checkbox"
name="Programming">Programming<br> <input
type="checkbox" name="Football">Football<br>
<input type="checkbox" name="Reading Novel">Reading
Novel<br> <br>
<br>
<label>
Phone:
</label>
<input type="text" name="phone"
size="10"><br><br> Address:
<br>
<textarea cols="80" rows="5"
value="address"> </textarea>
<br>
<br>
Email:
<input type="email" id="email"
name="email"><br> <br>
<br>
Password:
<input value="Password" id="pass"
name="pass"><br> <br>
<br>
<input type="submit" value="submit">
<input type="reset" value="reset">
</form>
</body>
</html>
OUTPUT
RESULT:-
Therefore the webpage is successfully designed.

You might also like