Smt. J.J.
Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
Q.1 Attempt the following 3
(A) 1. Full form of DNS. Domain Name System
2. Full form of WWW. World wide web
3. Full form http. Hypertext transfer protocol
(B) Explain Remote Login. 2
In simple words Remote Login means to access other computers on the network or on
the other network by the use of telnet or rlogin command. In other words we can also say
that Remote Login means to access native computer from the other computer on the
network when you are connected to the internet
(C) Explain Domain Name Server and Search Engine. 5
A DNS server translates a computer or domain name to the associated IP address. It
provides a way to map friendly host names, or URLs, to IP addresses.
A DNS server houses the IP addresses used to access internet resources.
The internet operates via IP address in the format of [Link] (i.e.
[Link]). Since those are hard to remember, DNS servers are responsible for
translating the user friendly names like [Link] to [Link].
If you type "CMD" in the Run box on Windows XP, then "PING [Link]". You
can see what the IP address is for the website.
DNS stands for Domain Name System. A DNS server resolves a name to an IP address, as
stated in an earlier answer, but it can also point to multiple IP addresses for load
balancing, or for backup servers if one or more is offline or not accepting connections.
Individual organizations may have their own DNS servers for their local Intranet.
Web Search Engine
Internet search engines (e.g. Google, AltaVista) help users find web pages on a given subject.
The search engines maintain databases of web sites and use programs (often referred to as
"spiders" or "robots") to collect information, which is then indexed by the search engine.
Computer software designed to help users of the Internet locate information on the World
Wide Web. It collects and indexes Internet resources (Web pages, Usenet Newsgroups,
programs, images, etc.) and provides a keyword search system allowing the user to identify
and retrieve resources. There are many search engines available and each is different in their
scope, search protocols, and appearance. Some common search engines are: Alta Vista,
Google, Yahoo, Excite, Lycos, and HotBot.
Web Meta Search Engine
A Meta Search Engine is a website where you can run a single search and it searches all the
major search engine's databases on the web and then gives you the best results on a single
page.
Q.2 Attempt the following 3
(A) 1. Full form of HTML. Hypertext markup language
2. Full form of href. Hypertext reference
3. Full form of <ul> unordered list
(B) Explain table tag with example. 2
The <table> tag defines an HTML table. An HTML table consists of the <table> element and
one or more <tr>, <th>, and <td> elements. The <tr> element defines a table row, the <th>
element defines a table header, and the <td> element defines a table cell. A more complex
HTML table may also include <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
elements. The "align", "bgcolor", "cellpadding", "cellspacing", "frame", "rules", "summary",
and "width" attributes are not supported in HTML5
Attributes
height: width: Sets the height and width for the particular table. It could be in pixel or
in percentage user should use % pattern for the dynamic output.
border: Sets the border of the rows and columns. The value is in pixel only. The default
value is zero and the minimum value is 1.
align: The attribute is used for the alignment of the table left, right and center are the
values.
cellpadding: Sets the space of the text from the starting of cell. The value is in pixels
only.
<html>
<body>
<table cellpadding="10">
<tr>
<th>Month</th> <th>Savings</th>
</tr>
<tr>
<td>January</td> <td>$100</td>
</tr>
</table>
</body>
</html>
(C) Writes a note on frame in html. 5
Frames Tags
The <frameset> tag is not supported in HTML5. The <frameset> tag defines a frameset. The
<frameset> element holds one or more <frame> elements. Each <frame> element can hold a
separate document. The <frameset> element specifies HOW MANY columns or rows there
will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
Not Supported in HTML5.
Attributes
rows: Specifies the number and size of columns in a frameset
cols: Specifies the number and size of rows in a frameset
Frame
The <frame> tag is not supported in HTML5. The <frame> tag defines one particular window
(frame) within a <frameset>. Each <frame> in a <frameset> can have different attributes,
such as border, scrolling, the ability to resize, etc. Not Supported in HTML5.
Attribute
name: A name is given to identify it when specifying the target of the html document
which is to be displayed in that particular frame.
src: Src stands for the source. It specifies the URL or the local path of the html document
to be displayed in a frame.
scrolling: The attribute is used to describes whether the frame should have a scrollbar or
not. If the value is yea a scroll bar is displayed. if the value is no, no scrollbar is displayed
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
and if the value is auto the browser decides whether the scrollbar should be displayed or
not.
Noresize: The attribute has no value to assign. If this is given the frame is not resizable
by any user.
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.html">
<frame src="frame_b.html">
<frame src="frame_c.html">
</frameset>
</html>
Q.3 Attempt the following 3
(A) 1. List different types of style sheet. Inline style sheet, internal style sheet and external
style sheet
2. Which character used to start id selector. #
3. Which property is used to increase or decrease between words. Word spacing
(B) How to use Google Fonts & Custom Fonts using CSS. 2
How to use Google Fonts & Custom Fonts ( @font-face) :
Google Fonts :
@import :
While @font-face is excellent for fonts that are hosted on our own servers,
there may be situations where a hosted font solution is better. Google Fonts offers this as a
way to use their fonts. The following is an example of using @import to load the Open Sans
font from Google Fonts:
@import url(//[Link]/css?family=Open+Sans);
Then we can use it to style elements:
body {
font-family: 'Open Sans', sans-serif;
}
If you open the URL for the font, you can actually see all the @font-face work
being done behind the scenes.
A benefit of using a hosted service is that it is likely to include all the font file
variations, which ensures deep cross-browser compatibility without having to host all those
files ourselves
(C) Explain Media Query in CSS. 5
Media Queries
Media queries in CSS3 extend the CSS2 media types idea: Instead of looking for a type of
device, they look at the capability of the device.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries are a popular technique for delivering a tailored style sheet to tablets,
iPhone, and Androids.
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
A media query consists of a media type and can contain one or more expressions, which
resolve to either true or false.
@media not|only mediatype and (expressions){
CSS-Code;
}
The result of the query is true if the specified media type matches the type of device the
document is being displayed on and all expressions in the media query are true. When a
media query is true, the corresponding style sheet or style rules are applied, following the
normal cascading rules.
Unless you use the not or only operators, the media type is optional and the all type will
be implied.
You can also have different stylesheets for different media:
<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="[Link]">
Media Types
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize the browser window to see the effect!</h1>
<p>The media query will only apply if the media type is screen and the
viewport is 480px wide or wider.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow:auto;}
#main {margin-left: 4px;}
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
#leftsidebar {float: none;width: auto;}
#menulist {margin:0;padding:0;}
.menuitem {
background:#CDF0F6;
border:1px solid #d4d4d4;
border-radius:4px;
list-style-type:none;
margin:4px;
padding:2px;
}
@media screen and (min-width: 480px) {
#leftsidebar {width:200px;float:left;}
#main {margin-left:216px;}
}
</style>
</head>
<body>
<div class="wrapper">
<div id="leftsidebar">
<ul id="menulist">
<li class="menuitem">Menu-item 1</li>
<li class="menuitem">Menu-item 2</li>
<li class="menuitem">Menu-item 3</li>
<li class="menuitem">Menu-item 4</li>
<li class="menuitem">Menu-item 5</li>
</ul>
</div>
<div id="main">
<h1>Resize the browser window to see the effect!</h1>
<p>This example shows a menu that will float to the left of the page if
the viewport is 480 pixels wide or wider. If the viewport is less than 480 pixels, the menu
will be on top of the content.</p>
</div>
</div>
</body>
</html>
Q.4 Attempt the following 3
(A) 1. Java script is case sensitive. (True/ False) True
2. Which tag is used to start java script code in html? <script> tag
3. Semi colon is optional in single statement of java script. (True/False) true
2
(B) Explain Java Script Loops.
Control Structure (Iteration Control)
While loop
Loop statements in JAVASCRIPT are used to execute the same block of code a specified
number of times. It tells JAVASCRIPT to execute the nested statement(s) repeatedly, as long
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
as the while expression evaluates to TRUE. The value of the expression is checked each time
at the beginning of the loop, so even if this value changes during the execution of the nested
statement(s), execution will not stop until the end of the iteration (each time JAVASCRIPT
runs the statements in the loop is one iteration). Sometimes, if the while expression
evaluates to FALSE from the very beginning, the nested statement(s) won't even be run once.
while(expression) while(expression)
do this; {
while(expression) do this;
{ while(expression)
do this; and this; {
} do this;
and this;
}
}
<html>
<body>
<script language="javascript">
i=1;
while(i<=5){
[Link]("The number is ");
[Link](i+"<br>");
i++;
}
</script>
</body>
</html>
Do- while loop
The do...while statement will execute a block of code at least once - it then will repeat the
loop as long as a condition is true. There is just one syntax for do-while loops.
do this; do
and this; {
}while(expresion); do this; and this;
do
{
do this
}while(expresion);
}while(expresion);
<html>
<body>
<script language="javascript">
i = 5;
do{
[Link](i);i--;
} while (i > 0);
</script>
</body>
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
</html>
For Loop
For statement is used when you know how many times you want to execute a statement or a
list of statements. ‘For’ statement have three parameters. The first parameter initializes
variables, the second parameter holds the condition, and the third parameter contains the
increments required to implement the loop. If more than one variable is included in the
initialization or the increment parameter, they should be separated by commas. The
condition must evaluate to true or false.
for (initialization; condition; for (initialization; condition;
increment) increment)
do this; {
for (initialization; condition; do this;
increment) for (initialization; condition;
{ increment)
do this; do this if second for condition is
and do this; true
} }
<html>
<body>
<script language="javascript">
for (i = 1; i <= 10; i++){
[Link]("Hello every one");
[Link](" Ha ha ..!<br>");
}
</script>
</body>
</html>
(C) Explain JavaScript User Define Function. 5
What Is Function?
A function is defined as a block of statements which can be invoked whenever required
within a script. It can well be referred to as a subroutine which can be called with the script
at any point of execution. It is the core of structured programming.
How to Declare a Function
This includes the actual list of instruction which contribute to the function. It starts with a
line known as declaratory, which is followed by the function body. The function body is
enclosed within braces and is a set of statement due for execution once the function evoked.
To create a function you define its name, any values ("arguments"), and some statements. A
arguments mean some value is to be transferred to a function for some logical or arithmetic
calculation. Value can be as variable or directly constant.
How to Call a Function
The function is to be called by its name and parenthesis bracket e.g. funct() and if there is
some value to be passed to the function then it to be done with the argument e.g.
funct(name,age)
Return Value From Function
Functions that will return a result must use the "return" statement. This statement specifies
the value which will be returned to where the function was called from.
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
Form Of UDF
function functionname() function
{ functionname(argument1,argument2)
function body; {
do this; function body;
} do this;
}
function function functionname()
functionname(argument1,argument2) {
{ function body;
function body; do this;
do this; return value;
return value; }
}
Types Of Function
Simple function [without argument and without return]
<html>
<script language="javascript">
var name=""
function hello(){
name = prompt("Enter your name")
alert("Welcome " + name)
}
function bye(){
alert("Good bye " + name)
}
hello();
bye();
</script>
</html>
Function with arguments
<html>
<script language="javascript">
var name=""
function hello(name){
alert("Welcome " + name)
}
function bye(){
alert("Good bye " + name)
}
hello("Javascript")
name="Language"
bye(name)
</script>
</html>
Function with arguments with return
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
<html>
<script language="javascript">
var name=""
function hello(usrname){
return usrname+ "Javascript"
}
name=hello("Language")
[Link](name)
</script>
</html>
Function without arguments with return
<html>
<script language="javascript">
var name=""
function hello() {
return "Javascript"
}
name=hello()
[Link](name)
</script>
</html>
Q.5 Attempt the following 3
(A) 1. Which framework is Bootstrap built on? Html , css and javascript
2. Bootstrap is mainly used for the creation of websites and web apps.
3. What does the 'col-' prefix in Bootstrap indicate? columns
(B) Explain Bootstrap Buttons. 2
Buttons
Button Styles
Bootstrap 4 provides different styles of
buttons:
<div class="container">
<h2>Button Styles</h2>
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
The button classes can be used on <a>, <button>,
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
or <input> elements:
<div class="container">
<h2>Button Elements</h2>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
(C) Explain Bootstrap NavBar. 5
Navbar(Navigation Bars)
A navigation bar is a navigation header that is placed at the top of the page:
Basic Navbar
With Bootstrap, a navigation bar can extend or collapse, depending on the screen
size.A standard navigation bar is created with the .navbar class, followed by a responsive
collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large,
large, medium or small screens).
To add links inside the navbar, use a <ul> element with class="navbar-nav". Then
add <li> elements with a .nav-item class followed by an <a> element with a .nav-link class:
Link 1 Link 2 Link 3
<nav class="navbar navbar-expand-sm bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Vertical Navbar
Remove the .navbar-expand-xl|lg|md|sm class to create a vertical navigation bar:
Link 1
Link 2
Link 3
<nav class="navbar bg-light">
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
Smt. J.J. Kundalia Commerce College, Rajkot
Networking & Internet Environment
Date: - 22/10/2024 Preliminary Exam Marks 50
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>
</nav>
Centered Navbar
Add the .justify-content-center class to center the navigation bar. The following example will
center the navigation bar on medium, large and extra large screens. On small screens it will
be displayed vertically and left-aligned (because of the .navbar-expand-sm class):
Link 1 Link 2 Link 3
<nav class="navbar navbar-expand-sm bg-light justify-content-center">
...
</nav>
Colored Navbar
Use any of the .bg-color classes to change the background color of the navbar (.bg-
primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light)
<!-- Grey with black text -->
<nav class="navbar navbar-expand-sm bg-light navbar-light">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</nav>
<!-- Black with white text -->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">...</nav>
<!-- Blue with white text -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">...</nav>