LAB Report Web Technology CACS205 BCA 3rd

0 | Page
Tribhuvan University
Madan Bhandari Memorial College
New-Baneshwor, Kathmandu Nepal
Lab Report on
Web Technology (CACS 205)
Submitted By : Submitted To :
Name: Department of BCA
Code no: Mr. Milan Raj Nepali
Faculty: Humanities and Social Science (Lecturer of BCA)
Semester: Third Semester
Acknowledgment
Lab Report of Web Technology (CACS 205)
17 | Page
Lab Report of Web Technology (CACS 205)
17 | Page
The sensation and final upshot of this lab project required a lot of guidance and assistance
from many people and we are exceptionally honored to have got this all along the
completion of our lab project. All that we have done is only due to such supervision and
assistance so we would like to express our sincere and earnest gratitude to all individuals
who granted their helping hands to accomplish our project timely and efficiently.
Firstly, we would like to express our sincere gratitude to our lecturer Mr. Milan Raj Nepali for
providing such a splendid opportunity to do the project work in Web Technology and giving
us all support and guidance which made us accomplish the lab project duly. We are
extremely thankful to him for providing such a nice support and guidance. We owe our deep
gratitude to all our classmates and friends who took keen interest on our lab project work
and guided us all along, till the completion of our lab project work by providing all the
necessary information for developing a good system.
We are thankful to and fortunate enough to get constant encouragement, support and
guidance from our senior brothers and sisters which helped us in successfully completing
our lab project work. Also, we would like to extend our sincere esteems to the Department
of Bachelor of Computer Applications (BCA) for granting us such a platform of doing lab
project work. So we would like to express our sincere gratitude to our teachers to provide us
with such a challenging task which would enhance our skills and our knowledge related to
the Web Technology.
Name:
Code No. :
Faculty: Humanities and Social Science
Semester: Third Semester
Lab Report of Web Technology (CACS205)
17 | Page
17 | Page
Course Overview
In order to make websites look and function a certain way, web developers utilize different
languages. The three core languages that make up the World Wide Web are HTML5, CSS,
and JavaScript. In the IT world, the internet is an essential platform, whether its for
developing or for consumer use. When developing a website, typically three main languages
come into play. These languages are JavaScript, CSS, and HTML. HTML is the backbone of
most webpages. Essentially, it is used to create the structure of how a specific website
would look like, from the headings, to the paragraphs, the body, links, and even images.
This course is intended to teach the basics involved in publishing content on the World Wide
Web. This includes the ‘language of the Web’ – HTML, the fundamentals of how the
Internet and the Web function, a basic understanding of graphic production with a specific
stress on creating graphics for the Web, and a general grounding introduction to more
advanced topics such as programming and scripting. This will also expose students to the
basic tools and applications used in Web publishing. The objective of this lab is to develop
an ability to design and implement static and dynamic website. The courses contain web
basics: Design web pages through coding using HTML and DHTML, Browser side scripting
using JavaScript with a focus on, event handling and validation, server-side scripting: Php
syntax, variables, loops and constructs. Java graphics, Browser side scripting: Introduction to
programming world of xml technologies. Basic xml tags, database handling with php and
xml, connecting to databases using php, and jdbc.
17 | Page
17 | Page
List of Lab Practical
S.No. Question of Lab Practical Outcome Pages
1. Write an HTML Code with Output :

• Display HTML: Basic Structure
• Display HTML: Bold/Italic/Underline
• Display HTML: Image Input
• Display HTML: Link Page
• Display HTML : Contact Us Page
• Display HTML : Table
• Display HTML : Upload File
• Display a simple form for user login with login button.
2. Write an HTML Code with Output :
• To display a Unordered List : With Default List Type,
With Square List Type, With Circle List Type and with
none List Type
3. Write a Program :
• To develop drop down menu.
• To add Google Map.
• To upload a file.
4. Write a process to register a .np domain in Nepal
5. Write a definition of Cascading Style Sheet and types of CSS.

Also write a program in HTML and CSS to create a web page.
17 | Page
17 | Page
LAB PRACTICAL - 1
Objective:
Write an HTML Code to display a simple form for user login with login button.
Brief Description:
HTML is the standard markup language for creating Web pages.
• HTML stands for Hyper Text Markup Language.
• HTML describes the structure of Web pages using markup.
• HTML elements are the building blocks of HTML pages.
• HTML elements are represented by tags.
• HTML tags label pieces of content such as "heading", "paragraph", "table", and so
on.
• Browsers do not display the HTML tags, but use them to render the content of the
page. Basic HTML Tags
• The <!DOCTYPE htmltt declaration defines this document to be HTML5
• The <htmltt element is the root element of an HTML page
• The <headtt element contains Meta information about the document
• The <titlett element specifies a title for the document
• The <bodytt element contains the visible page content
• The <h1tt element defines a large heading
• The <ptt element defines a paragraph
17 | Page
17 | Page
1. HTML : Structure
Code:
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my site</title>
</head>
<body>
<h1>This is a Heading</h1
<p>Document content goes here….</P>
</body>
</html>
Output
This is a Heading
Document content goes here….

17 | Page
2. HTML:Bold/Italic/Underline
Code:
<!DOCTYPE html>
<html>
<head>
<title>Mbmc.com</title>
</head>
<body>
<b> Hello</b>
<U> Hello </U>
<i> Hello</i>
</body>
</html>
Output
Hello
Hello
Hello
17 | Page
17 | Page
3. HTML: Image Input

Code:
<<!DOCTYPE html>
<html>
<body>
<h1>HTML image</h1>
<imgsrc="mustang.jpg"height="100"width="220">
</body>
</html>
Output
HTML image
17 | Page
17 | Page
ti. HTML: Link Page

Code:
<<!DOCTYPE html>
<html>
<body>
For Bio-Data: <a href="doc.html">click here </a>
</body>
</html>
Output
For Bio-Data: click here
17 | Page
17 | Page
5. HTML: contact us form

<<!DOCTYPE html>
<html>
<body>
<h2>Text Input</h2>
<form>
First name: <br>
<input type = "text" name= "firstname">
<br>
Last name:<br>
<br>
<h2>Radio Button</h2>
<input type="radio" name="gender" value="male">male<br>
<input type="radio" name="gender" value="female">female<br>
<input type="radio" name="gender" value="other">other<br>
<h2>CheckBox</h2>
<input type="checkbox" name="maths" value="on">Maths
<input type="checkbox" name="physics" value="on">Physics
<br><input type ="Submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also notr the default width of text input field is 20 character.</p>
</body>
</html>
Output
17 | Page
17 | Page
Text Input
First name:
Last name:
Radio Button
male
female
other
CheckBox
Maths Physics
Submit
Note that the form itself is not visible.
Also not the default width of text input field is 20 character.
17 | Page
17 | Page
6. HTML: Table
CODE:
<!doctype html>
<html>
<head>
<title>mbmc.com</title>
</head>
<style>
table,th,td{
border: 1px solid black;
border-collapse: collapse;
</style>
<body>
<table>
<tr>
<th><b>Board</b></th>
<th><b>School/College Name</b></th>
<th><b>Year graduate</b></th>
</tr>
<tr ALIGN="CENTER">
<td>SEE</td>
<td>National Academy </td>
<td>2073</td>
</tr>
17 | Page
17 | Page
<tr ALIGN="CENTER">
<td>+2 level</td>
<td>Golden Gate International College</td>
<td>2075</td>
</tr>
<tr ALIGN="CENTER">
<td>Bachelor</td>
<td>Madan Bhandari Memorial College</td>
<td>Running</td>
</tr>
</table>
</body>
</html>
Output
Board School/College Name Year graduate

SEE National Academy 2073
+2 level Golden Gate International College 2075
Bachelo Madan Bhandari Memorial
Running
r College
17 | Page
17 | Page
7. HTML: upload file

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<label for="image">image</label>
<input type="file" name="image" id="image">
</body>
</html>
Output
17 | Page
17 | Page
8. Display a simple form for user login with login button:

<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form action="login.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<input type="submit" value="Login">
</form>
</body>
</html>
Output
17 | Page
17 | Page
LAB PRACTICAL - 2
[2] To display a Unordered List : With Default List Type, With
Square List Type, With Circle List Type and with none List Type
<!DOCTYPE html>
<html>
<head><title> Unorder list</title>
</head>
<body>
<h1>Unordered list</h1>
<hti>with default list type</hti>
<ul>
<li>System Analyis and Design</li>
<li>Data Structure and Design</li>
<li>Web Technology</li>
<li>OOP in java</li>
<li>Probability & Stastics </li>
</ul>
<hti>with square list type</hti>
<ul type="Square">
<li>OOP in Java</li>
17 | Page
17 | Page
</ul>
<hti>with circle list type</hti>
<ul type="circle">
<li>web Technology</li>
</ul>
<hti>with any list type</hti>
<ul type="none">
</ul>
</body>
</html>
17 | Page
17 | Page
OUTPUT:
17 | Page
17 | Page
LAB PRACTICAL - 3
[3] Write the following programs.
1. Write a program to develop drop down menu.
Code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Country:<select name ="country">
<option value= "Afganistan">Afganistan</option>
<option value= "Bangladesh">Bangladesh</option>
<option value= "china">china</option>
<option value= "Denmark">Denmark</option>
<option value= "India">India</option>
<option value= "Nepal">Nepal</option>
<option value= "Pakistan">Pakistan</option>
<option value= "Srilanka">Srilanka</option>
</select>
</body>
</html>
Output
17 | Page
17 | Page
2. Write a program to add Google Map.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Mbmc.com</title>
</head>
<body>
<br><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3532.6ti76920861933!2d85.327ti5716501518!3d27.6972817827960ti3!2m3!1f0!2f0!3f0!
3m2!1i102ti!2i768!tif13.1!3m3!1m2!1s0x39eb19a36tibb5935%3A0xfti0bticf2c78cfti8a!
2sAnamnagar%2C%20Kathmandu%20titi600!5e0!3m2!1sen!2snp!tiv162ti2ti0808253!5m2!
1sen!2snp" width="350" height="300" style="border:0;" allowfullscreen=""
loading="lazy"></iframe>
</body>
</html>
Output
17 | Page
17 | Page
3. Write a program to upload a file.

Code:
<!DOCTYPE html>
<html>
<head>
<title>MBMC.com</title>
</head>
<body>
<label for="image">image</label>
<input type="file" name="image" id="image">
</body>
</html>
Output
LAB PRACTICAL - ti
[ti] Process to Register a domain :
17 | Page
17 | Page
1. Go to any browser and search for https://www.register.com.np/

2. Then we find a webpage which requests us to check whether the domain
name you want to check is available or not.
3. Search for the domain name’s availability which you want to register.
ti. If the domain name you searched for is available then a pop up message
shows that the name is available and click register now.
5. Enter on register now then you need to sign in your Google account as
shown in the figure or if you don’t have account then create one by clicking
on Create User button.
17 | Page
17 | Page
6. After signing in your account a pop up message shows to check your email
to activate your account.
17 | Page
17 | Page
LAB PRACTICAL - 5
[5] CSS (Cascading Style Sheet)
CSS(Cascading Style Sheet) describes the HTML elements which are displayed on
screen,paper, or in other media. It saves a lot of time. It controls the layout of multiple
web pages atone time. It sets the font-size, font-family, color, background color on the
page.
It allows us to add effects or animations to the website. We use CSS to display
animationslike buttons, effects, loaders or spinners, and also animated backgrounds.
Without using CSS, the website will not look attractive. There are 3 types of CSS which
arebelow:
1. Internal CSS
The internal CSS has <style> tag in the <head> section of the HTML document.
ThisCSS style is an effective way to style single pages. Using the CSS style for multiple
webpages is time consuming because we require placing the style on each web page.We
can use the internal CSS by using the following steps:
i) First open the HTML page and locate the <head>
ii) Put the following code after the <head>
style type =”text/css”>
iii) Add the rules of CSS in the new line.

Example:
body{
background-color: rgb(255,
252, 0);
}
h1{
color: Green;
padding:50px;
}
iv) Close the style tag.

</style>
After adding the internal CSS, the complete HTML file looks like the following:
17 | Page
17 | Page
The output of this code is given below:
2. External CSS
In external CSS, we link the web pages to the external .css file. It is created by text
editor. The CSS is more efficient method for styling a website. By
editingthe .css file,we can change the whole site at once.
To use the external CSS, follow the steps, given below:
i) Create a new .css file with text editor, and add CSS rules too.
For example:
.xleftcol {
float: right;
width: 35%;
background:#608800;
}
.xmiddlecol {
float: right;
width: 35%;
background:#eff3df;
ii) Add a reference to the external .cssfile right after <title> tag in
the <head> section of HTML sheet:
<link rel="stylesheet" type="text/css" href="">
Pros of External CSS:
o Our files have a cleaner structure and smaller in size.
• We use the same .css file for multiple web pages in external CSS.
17 | Page
17 | Page
Cons of External CSS:

o The pages cannot be delivered correctly before the external CSS is loaded.
o In External CSS, uploading many CSS files can increase the download time of a website.
3. Inline CSS
Inline CSS is used to style a specific HTML element. Add a style attribute to each
HTML tag without using the selectors. Managing a website may difficult if we use
only inline CSS. However, Inline CSS in HTML is useful in some situations. We
have not access the CSS files or to apply styles to element.
In the following example, we have used the inline CSSin <p>and <h1>&tag.
<!DOCTYPE html>
<html>
<body style="background-color:white;">
<h1 style="color:Red;padding:20px;">CSS tutorials</h1>
<p style="color:blue;">It will be useful here.</p>
</body>
</html>
Pros of inline CSS:

o We can create CSS rules on the HTML page.
o We cannot create and upload a separate document in inline CSS.
Cons of inline CSS:

o Inline CSS, adding CSS rules to HTML elements is time-consuming and messes upthe
HTML structure.
o It styles multiple elements at the same time which can affect the page size anddownload
time of the page.
17 | Page
17 | Page
HTML and CSS to create a web page.

Html Code:
<!DOCTYPE html>
<html>
<head>
<title>
Car
</title>
<style>
h1{
padding: 50px;
background-color: bisque;
color: black;
font-size: 50px;
}
h2{
padding: 10px;
background-color: green;
color: whitesmoke;
}
p2{
line-height: 150px;
padding: 20px;
background-color: green;
color: whitesmoke;
}
</style>
</head>
<body>
17 | Page
17 | Page
<h1><imgsrc="fordlogo.jpg"height="80"width="150">
<center>Ford Mustang</center></h1>
<h2><center>INFO </h2></center>
<a href="index.html">Home</a>&nbsp & nbsp
<a href="Gallery.html">Gallery</a>&nbsp & nbsp
<a href="Specfication.html">Specification </a>&nbsp & nbsp
<a href="Contact.html">Contact me</a>
<!—Opening of About car-->

<h3>About car</h3>
<center><imgsrc="mustang.jpg"height="300"width="250"></center>
<p1><b>As one of Americafis best-known sports cars, the Ford Mustang brings power to the
people. From its introduction in 196tf, the Mustang has provided RWD thrills and available
V-8 muscle at relatively affordable prices. When the current generation arrived in 2015, an
independent rear suspension allowed it to become more refined and capable </b></p1>
<br><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3532.6ti76920861933!2d85.327ti5716501518!3d27.6972817827960ti3!2m3!1f0!2f0!3f0!
3m2!1i102ti!2i768!tif13.1!3m3!1m2!1s0x39eb19a36tibb5935%3A0xfti0bticf2c78cfti8a!
2sAnamnagar%2C%20Kathmandu%20titi600!5e0!3m2!1sen!2snp!tiv162ti2ti0808253!5m2!
1sen!2snp" width="350" height="300" style="border:0;" allow fullscreen=""
loading="lazy"></iframe>
<iframe width="350" height="300"
src="https://www.youtube.com/embed/wQA68Oqr1qE" title="YouTube video player"
frame border="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allow fullscreen></iframe>
<br><center><p2>copyright 2021 Ford mustang</p2></center>
</body>
</html>
17 | Page
17 | Page
OUTPUT :

LAB Report Web Technology CACS205 BCA 3rd

Uploaded by

Copyright:

Available Formats

LAB Report Web Technology CACS205 BCA 3rd

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

LAB Report Web Technology CACS205 BCA 3rd

Uploaded by

Copyright:

Available Formats

0 | Page

Web Technology (CACS 205)

Code no: Mr. Milan Raj Nepali

Faculty: Humanities and Social Science (Lecturer of BCA)

Semester: Third Semester

Faculty: Humanities and Social Science

Semester: Third Semester

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

List of Lab Practical

S.No. Question of Lab Practical Outcome Pages

1. Write an HTML Code with Output :

5. Write a definition of Cascading Style Sheet and types of CSS.

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

3. HTML: Image Input

Lab Report of Web Technology (CACS205)

ti. HTML: Link Page

Lab Report of Web Technology (CACS205)

5. HTML: contact us form

Lab Report of Web Technology (CACS205)

Note that the form itself is not visible.

Also not the default width of text input field is 20 character.

Lab Report of Web Technology (CACS205)

border: 1px solid black;

<td>National Academy </td>

Lab Report of Web Technology (CACS205)

<td>Golden Gate International College</td>

<td>Madan Bhandari Memorial College</td>

Board School/College Name Year graduate

Lab Report of Web Technology (CACS205)

7. HTML: upload file

Lab Report of Web Technology (CACS205)

8. Display a simple form for user login with login button:

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

Country:<select name ="country">

<option value= "Afganistan">Afganistan</option>

<option value= "Bangladesh">Bangladesh</option>

<option value= "china">china</option>

<option value= "Denmark">Denmark</option>

<option value= "India">India</option>

<option value= "Nepal">Nepal</option>

<option value= "Pakistan">Pakistan</option>

<option value= "Srilanka">Srilanka</option>

2. Write a program to add Google Map.

Lab Report of Web Technology (CACS205)

3. Write a program to upload a file.

1. Go to any browser and search for https://www.register.com.np/

Lab Report of Web Technology (CACS205)

Lab Report of Web Technology (CACS205)

style type =”text/css”>

iii) Add the rules of CSS in the new line.

iv) Close the style tag.

Lab Report of Web Technology (CACS205)

The output of this code is given below: