Internet Methodologies Practical File Made in LaTeX
All The Lab Practicals will be Done in LaTeX.This is Lab File For GNDEC IT Dept. students.All the codes are written in easiest way.You can copy.Get output and enjoy!!
Point to be noted:
- Copy The Source code As it is......But Do Remember 😜 to change name and roll no. on front page.
- I have Commented{in RED with %} in the code Where you have to do Changes so enjoy with a few changes!!
- Practical 3 and Practical 4 only 1st page is made ,so rest get it printed from practical 3 and 4 pdfs.
- Download all images (Given Below)in the same folder,where you have saved the copy of source code i.e. (.tex) file
- TeXworks used for compiling!!
- HTML FILES!!
- TeX File!!
- Output at end
- Keep iView-ing!!
Source Code:
\documentclass[12pt]{article}
\usepackage{graphicx}
\usepackage{wrapfig}
\usepackage{multicol}
\usepackage{caption}
\usepackage{subcaption}
\usepackage{transparent}
\usepackage{multirow}
\usepackage{eso-pic}
\usepackage[utf8]{inputenc}
\usepackage{color}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newcommand\BackgroundIm{
\put(0,0){
\parbox[b][\paperheight]{\paperwidth}{
\vfill
\centering
{\transparent{0.05} \includegraphics[height=\paperheight,width=\paperwidth,
keepaspectratio]{gne} %background image
\vfill
}}}}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Main Page
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}
\begin{titlepage}
\newcommand{\HRule}{\rule{\linewidth}{1mm}}
\newcommand{\VRule}{\rule{1mm}{\textheight}}
\begin{minipage}[c]{0.1\textwidth}
\emph{\textbf{\huge{\textcolor{blue}
{\vspace{2\baselineskip}\\
G \\[1.15\baselineskip]
N \\[1.15\baselineskip]
D \\[1.15\baselineskip]
E \\[1.15\baselineskip]
C}}}}
\end{minipage}
\begin{minipage}{0.01\textwidth}
\textcolor{blue}{\VRule}
\end{minipage}
\begin{minipage}[height=\paperheight]{0.8\textwidth}
\centering {
\textcolor{blue}
{
\textsc{\Large Guru Nanak Dev Engg College }\\[0.5cm]
\textsc{\large Practical File}\\[0.3cm]
\HRule \\[0.2cm]
{ \huge \bfseries Internet Methodologies}\\[0.1cm]
\HRule \\[2cm]}
\includegraphics[width=60mm,scale=0.7]{gne}\\[2cm] %%logo of GNDEC
\textcolor{blue}
{{\\\today}\\[1cm]
{\textsc{Sanjampreet Singh \\{1507967}\\{D2-IT-B1}}}}}
\end{minipage}
~
\end{titlepage}
%%%%%%%%%%%%%%%%%%%%% BACKGROUND IMAGE
\AddToShipoutPicture{\BackgroundIm}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\pagenumbering{gobble}
\section{\emph{To familiarize with network devices like switch, hub, routers and bridges.}}
\subsection{\emph{\Large Switch}}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=80mm,scale=0.7]{3}
\caption{Network Switch}
\end{figure}\\
\emph{Definition 1 :} A network switch (also called switching hub, bridging hub, officially MAC bridge) is a computer networking device that connects devices together on a computer network, by using packet switching to receive, process and forward data to the destination device.\\[1cm]
\emph{Definition 2 :}Most business networks today use switches to connect computers, printers and servers within a building or campus. A switch serves as a controller, enabling networked devices to talk to each other efficiently. Through information sharing and resource allocation, switches save businesses money and increase employee productivity.
\subsubsection{What an Ethernet Switch Does?}
Ethernet switches link Ethernet devices together by relaying Ethernet frames between the devices connected to the switches. By moving Ethernet frames between the switch ports, a switch links the traffic carried by the individual network connections into a larger Ethernet network.
\\Ethernet switches perform their linking function by bridging Ethernet frames between Ethernet segments. To do this, they copy Ethernet frames from one switch port to another, based on the Media Access Control (MAC) addresses in the Ethernet frames. Ethernet bridging was initially defined in the 802.1D IEEE Standard for Local and Metropolitan Area Networks: Media Access Control (MAC) Bridges.
\\The standardization of bridging operations in switches makes it possible to buy switches from different vendors that will work together when combined in a network design. That’s the result of lots of hard work on the part of the standards engineers to define a set of standards that vendors could agree upon and implement in their switch designs.
\subsubsection{\emph{Example of Switch}}
\begin{figure}[h]
\centering
\includegraphics[width=150mm,scale=0.9]{switch}
\caption{Example of Switch}
\end{figure}
\newpage
\subsection {\emph{\Huge HUB }}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=80mm,scale=0.7]{HUB}
\caption{Network Hub}
\end{figure}
\subsubsection{\emph What is a Hub?}
\emph{Defination 1:}A hub is a place of convergence where data arrives from one or more directions and is forwarded out in one or more other directions.\\[0.5cm]
\emph{Defination 2:}A hub is the most basic networking device that connects multiple computers or other network devices together, broadcasting all network data across each connection.
\subsubsection{What an Hub Does?}
When referring to a network, a hub is the most basic networking device that connects multiple computers or other network devices together. Unlike a network switch or router, a network hub has no routing tables or intelligence on where to send information and broadcasts all network data across each connection. Most hubs can detect basic network errors such as collisions, but having all information broadcast to multiple ports can be a security risk and cause bottlenecks. In the past, network hubs were popular because they were cheaper than a switch or router. Today, switches do not cost much more than a hub and are a much better solution for any network.
\subsubsection{Applications Of Hub:}Networking Hub is widely used networking connectivity device. It has many advantages over other connectivity devices.\emph{Some Application of Networking Hub are given below:}
\begin{itemize}
\item Hubs are used to create small Home Networks.
\item Hubs are used for monitoring the networks.
\item Hubs are used in Organizations and Computer Labs for connectivity.
\item It Makes one device or peripheral available throughout the whole network.
\end{itemize}
\subsubsection{\emph{Connention of HUB}}
\begin{figure}[h]
\centering
\includegraphics[width=70mm,scale=0.5]{5}
\caption{Example of Hub Network}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection {\emph{\Huge Router}}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=90mm,scale=0.7]{1}
\caption{Router}
\end{figure}
\subsubsection{\emph What is a Router?}
\emph{Defination 1:}A router is a device that forwards data packets along networksand it is connection of at least two networks, commonly two LANs or WANs or a LAN and its ISP.s network.
\\[1cm]\emph{Defination 2:}a router is a device that determines the next network point to which a packet should be forwarded toward its destination.
\\[1cm]
\subsubsection{How Does A Router Works?}
The router powers on and loads it's OS from flashThe router loads the configuration file last saved to NVRAM and sets up the network interfaces and routing protocols it will run.The router adds the network address and subnet for each interface to it's routing table along with the name of the interface itself.The router has a simple static default route to send all non-local data out the network port connected to the cable company.When the router receives a web page request from your computer, it checks the destination IP address against its routing table.The bits forming the destination IP address in the IP packet are used as a hash key to point to the correct route, which in turn points to the correct network interface that the packet should be forwarded out of.The router transmits the packet out the correct interface, to the next router, which repeats the process until the packet reaches the destination.
\subsubsection{\emph{Working of Router Connection}}
\begin{figure}[h]
\centering
\includegraphics[width=100mm,scale=0.7]{0.png}
\caption{Example of Router's Network}
\end{figure}
\newpage
\subsection {\emph{\Huge BRIDGE}}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=90mm,scale=0.7]{8.jpg}
\caption{Bridge}
\end{figure}
\subsubsection{\emph What is a Bridge?}
\emph{Defination 1:}A network bridge is a computer networking device that creates a single aggregate network from multiple communication networks or network segments. This function is called network bridging.
\\[1cm]
\emph{Defination 2:}“A device used to connect two separate Ethernet networks into one extended Ethernet. Bridges only forward packets between networks that are destined for the other network. Term used by Novell to denote a computer that accepts packets at the network layer and forward them to another network.”
\\[2cm]
\subsubsection{How does Bridge Works?}
\emph{When a bridge receives an IP packet, the gateway processes the packet as follows:}
\begin{itemize}
\item The destination MAC address is looked up in the bridge's forwarding table.
\item If the destination MAC address is found in the forwarding table, the packet is forwarded to the corresponding port.
\item If the destination MAC address is not found in the forwarding table, the destination IP address is searched for in all the defined bridge IP address ranges.
\item If the destination IP address is found in the bridge IP address range of exactly one port, the IP address is transmitted to that port.
\item If the IP address is found in the bridge IP address range of more than one port, the packet is dropped. The gateway then sends an ARP query to each of the relevant ports.
\item If a host responds to the ARP request packet with an ARP reply, the forwarding table is updated with the correct <MAC Address, Port> association. Subsequent packets will be forwarded using the forwarding table.
\end{itemize}
\subsubsection{\emph{Working of Bridge Network}}
\begin{figure}[h]
\centering
\includegraphics[width=110mm,scale=0.5]{6}
\caption{Example of Bridge Network}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{Difference between the follows:}}
\subsection{\emph Hub vs Switch}
\begin{table}[h]
\begin{center}
\begin{tabular}{ | l | p{5cm} | p{5cm} |}
\hline
Topic of Comparision & Hub & Switch\\ \hline
Defination&A Hub is a networking device that allows one to connect multiple PCs to a single network. Hubs may be based on Ethernet, Firewire, or USB connections.&A switch is a control unit that turns the flow of electricity on or off in a circuit. It may also be used to route information patterns in streaming electronic data sent over networks.\\ \hline
Transmission Type &Hubs always perform frame flooding; may be unicast, multicast or broadcast.&First broadcast; then unicast and multicast as needed.\\ \hline
Layer&Physical layer. Hubs are classified as Layer 1 devices per the OSI model.&Data Link Layer. Network switches operate at Layer 2 of the OSI model.\\ \hline
Function&To connect a network of personal computers together, they can be joined through a central hub.&Allow to connect multiple device and port can be manage and can also create security.\\ \hline
Ports&Hub has 4/12 ports.&Switch has 24/48 ports. \\ \hline
Figure&\begin{center}
\includegraphics[scale=0.3]{5}
\end{center}&\begin{center}
\includegraphics[scale=0.3]{4}
\end{center}\\ \hline
\end{tabular}
\end{center}
\caption{Hub vs Switch Table}
\end{table}
\newpage
\subsection{\emph Router vs Bridge}
\begin{table}[h]
\begin{center}
\begin{tabular}{ | l | p{5cm} | p{5cm} |}
\hline
Topic of Comparision & Router & Bridge\\ \hline
Defination & A router is a networking device that forwards data packets between computer networks.&A network bridge is a computer networking device that creates a single aggregate network from multiple networks\\ \hline
Used Network&Bridge is used for LAN network&Router is used LAN, WAN network\\ \hline
Security&Block and provide protection against broadcast stroms.&Doesn't blocks any Broadcast or Multicast.\\ \hline
Table&Bridges examine the source port and MAC addresses of frames to build a table and make forwarding decisions. These tables are typically accessed via software.&Store IP address in Routing table and maintain address at its own.\\ \hline
Ports&Bridge has 16 ports.&Router has 2/4/8 ports.\\ \hline
Figure&\begin{center}
\includegraphics[scale=0.23]{6}
\end{center}&\begin{center}
\includegraphics[scale=0.15]{0}
\end{center}\\
\hline
\end{tabular}
\end{center}
\caption{Router vs Bridge Table}
\end{table}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To configure the IP address for a computer connected to LAN}}
\subsection{\emph{Whai is IP Address?}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.2]{ip}
\caption{IP Address logo}
\end{figure}
IP address is a unique string of numbers separated by full stops that identifies each computer using the Internet Protocol to communicate over a network.\\
\subsection{To Configure IP Address For Windows}
\begin{enumerate}
\item Click on the Windows Key on your Keyboard and Press X. On the menu that appears click control panel.
\begin{center}
\includegraphics[scale=0.45]{2-1}
\end{center}
\item In Category view click on Network and Internet.
\begin{center}
\includegraphics[scale=0.5]{2-2}
\end{center}
\item Click on Network and Sharing Center.
\begin{center}
\includegraphics[scale=0.5]{2-3}
\end{center}
\item Click on Change Adapter Settings.
\begin{center}
\includegraphics[scale=0.55]{2-4}
\end{center}
\item Right click on Local Area Connection and click Properties.
\begin{center}
\includegraphics[scale=0.55]{2-5}
\end{center}
\item Click Internet Protocol Version 4 (TCP/IP) then click Properties.
\begin{center}
\includegraphics[scale=0.5]{2-6}
\end{center}
\item Change ‘Dot’ to Use the following IP address and input your IP and DNS information.
\begin{center}
\includegraphics[scale=0.5]{2-7}
\end{center}
\item Click OK to save and apply your settings.
\end{enumerate}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To get familiarize with various troubleshooting utilities.}}
\textbf{ping}\\
PING command is the best way to test connectivity between two nodes.
Whether it is (LAN) or (WAN). Ping use ICMP to communicate to other devices.
You can ping host name of ip address using below command.ping uses the ICMP protocol’s
mandatory ECHO\_\ REQUEST datagram to elicit an ICMPECHO\_\ RESPONSE from a host or gateway.
ECHO\_\ REQUEST datagrams have an IPand ICMP header,followed by a struct
timeval and then an arbitrary number of “pad” bytes used to fill out the packet.\\
\textbf{SYNOPSIS}\\
ping -s [-d] [-l] [-L] [-n] [-r] [-R] [-v] [ -i interface\_\ address ] [-I interval] [-t ttl] host [packetsize]
[count]\\
\textbf{OPTIONS :}\\
\textbf{-d}\\
Set the SO\_\ DEBUG socket option.
\textbf{-l}\\
Loose source route. Use this option in the IP header to send the packet to the given host and back
again. Usually specified with the -R option.\\
\textbf{-L}\\
Turn off loopback of multicast packets. Normally, if there are members in the host group on the out-
going interface, a copy of the multicast packets will be delivered to the local machine.\\
\textbf{-n}\\
Show network addresses as numbers. ping normally displays addresses as host names.\\
\textbf{-r}\\
Bypass the normal routing tables and send directly to a host on an attached network. If the host is
not on a directly-attached network, an error is returned. \\
\textbf{-R}\\
Record route. Sets the IP record route option, which will store the route of the packet inside the IP
header.\\
\textbf{-v}\\
Verbose output. List any ICMP packets, other than ECHO\_\ RESPONSE, that are received.\\
\textbf{-i interface\_\ address}
%%%%%% PLEASE do get printed Next Pages From Practical 3.pdf
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 4
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To setup IIS and Apache Web Server on computer system.}}
\textbf{Setup of IIS Server}
\\Internet Information Services (IIS) is an extensible web server created by
Microsoft for use with Windows NT family. IIS supports HTTP, HTTPS, FTP, FTPS,
SMTP and NNTP. It has been an integral part of the Windows NT family since
Windows NT 4.0, though it may be absent from some edition and is not active by default.\\
\textbf{Steps for Setting IIS Server}
\begin{enumerate}
\item To open the Windows Features dialog box, click Start, and then click Control Panel
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p4}
\end{figure}
\item In the Control Panel,click Program.
\end{enumerate}
%%%%%% PLEASE do get printed Next Pages From Practical 4.pdf
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% HTML 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create a simple html file to demonstrate the use of different tags.}}
\subsection{\emph{Code:}} %use your code
\begin{verbatim}
<html>
<head>
<title>iView AD</title></head>
<body bgcolor="#ff99cc">
<center><h1>TechnoReader</h1><br>
<marquee behaviour="alternative" direction="left">
<h5>iView!! #myView #yourView #ourView
|Field of Vision for Understanding Different Viewpoints.| #iView</h5></marquee>
<hr><img src="C:/Users/sanjam/Documents/download.jpg"> </center><br>
<p>Messaging app Telegram<sup>s</sup> new update brings new photo editor 2.0
with selfie masks, GIF creation, new stickers, photo text and drawing support.
Now Telegram app users will be able to create their own GIFs by simply recording
a video in the app and can share them as a looped autoplayed GIF by
tapping on to the new mute button.<br>The animations will be saved to GIFs
section so users can quickly react to anything with a set of their own
prerecorded GIF-emotions.<br><blockquote >
Today we are pushing the photo editor to the next level with the fun stuff:
you can now add drawings, masks, stickers and text right onto your pictures<br>
</blockquote>
The app is updated with the capability of identifying faces on photo
and uses mask meta-data to find the perfect spot, notes blog post.<br>
Other photo editing tools includes adding text and drawings your photos.Lastly,
there is a new trending stickers tab that keeps all the new stickers at one place.
<br></p><hr><a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\HTML2.html">Next Practical-></a>
</body>
</html>
\end{verbatim}
\newpage
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.45]{p1}%Change Output image with your output
\caption{Output Of HTML Page}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Html 2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to link to different html page which contains images, list,
and also link within a page}}
\subsection{Code:}%use your code
\begin{verbatim}
<html>
<head>
<title>Information Technology </title>
</head>
<body>
<img src="E:/documents/IM%20LAB/html/dptit.PNG"><hr>
<h3>Vision and Mission</h3><br><center>
<b>Department of Information Technology<br>
Department Vision</b></center>
The department of Information Technology envisions to
create groomed, technically competent and skilled intellectual
IT professionals specifically from the rural area of Punjab to meet
the current challenges of the modern computing industry.
Department Mission
<ol type="a">
<li>To uplift rural students of the Punjab region through
advanced quality education in Information Technology.</li>
<li>To provide technical solutions in the field of Information
Technology to the local society.</li>
<li>To provide need based quality training in the
field of Information Technology.</li>
<li>To maintain state-of-the-art facilities and laboratories
where students and faculty can enhance their understanding of technology.</li>
<li>To provide students with the tools to become productive,
participating global citizens and life-long learners.</li>
<li>To provide an atmosphere for students and faculty for continuous
learning to investigate,apply and transfer knowledge.</li></ol><ol >
<center><b>Programme Education Objectives (PEO)
B.Tech. (Information Technology)</b></center>
<li>The graduates of Information Technology Engineering
Program will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering
Program will function effectively as individuals and team members in the
workplace, growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol><br><hr>
<a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\HTML1.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\HTML3.html">Next Practical-></a><br>
<a href="http://it.gndec.ac.in/?page_id=2">Replica from:</a></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p2}%Change Output image with your output
\caption{Output Of a.html}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% HTML 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create a registration form by using various form elements, links and table .}}
\subsection{\emph{Code Main Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>a</title>
</head>
<body>
<center> <h1>Department of Information Technology</h1><br>
<u><h2><a href="b.html">
<abbr title="Program Educational Object">PEO</abbr></a></h2></u>
<table border="5" width="300" height="400" bordercolor="red">
<caption>GNDEC</caption>
<tr>
<th> Department</th>
<th rowspan="3">
<a href="http//:www.cc.gndec.ac.in/">Computer Center</a></th>
</tr>
<tr>
<th> <a href="http//:it.gndec.ac.in/">IT</a></th>
</tr>
<tr>
<th> <a href="http//:cse.gndec.ac.in/">CSE</a> </th>
</tr>
</table>
</center>
<h1> <u><a href="c.html">Registered?</a></u></h1>
<hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">
Sanjampreet Singh</a>
<br>
<a href="http://sanjamhelping.blogspot.in/p/
it-14304-it-methodologies-lab.html">Department Of Information Technology</a>
<br>
<a href="E:\documents\IM LAB\html\HTML2.html">
<-Last Practical</a>
<a href="E:\documents\IM LAB\html\HTML4.html">Next Practical-></a>
<br>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p3-1}%Change Output image with your output
\caption{Output Of Main Page}
\end{figure}
~
\newpage
\subsection{\emph{Code Of PEO Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>PEO</title>
</head>
<body>
<center>
<h1>Programme Education Objectives (PEO)</h1>
</center>
<ol>
<li>The graduates of Information Technology Engineering
Program will be prepared to gain employment as an IT professional.
</li>
<li>The graduates of Information Technology Engineering Program
will function effectively as individuals and team members in the workplace,
growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol>
<hr>
<h3>
<a href="E:\documents\IM LAB\html\HTML3.html">Home</a>
</h3>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p3-peo}%Change Output image with your output
\caption{Output Of PEO Page}
\end{figure}
~
\subsection{\emph{Code for Registration Form:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<center>
<h1>Registration Form</h1>
<form method="get" action="123.html" >
<fieldset>
<legend>Registration Form</legend>
Department <br>
<input type="text" name="dept"><br>
Roll no<br>
<input type="text" name="roll"><br>
Name<br>
<input type="text" name="fname"><br>
Password<br>
<input type="password" name="pass"><br>
E-Mail<br>
<input type="text" name="mail"><br>
<button type="submit">Submit</button>
<button><a href="E:\documents\IM LAB\html\HTML3.html">
Home</a></button>
</form>
</fieldset>
</center>
</body>
</html>
\end{verbatim}
\newpage
\subsubsection{\emph{Output:}}%Change Output image with your output
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p3-form}
\caption{Output Of Form Page}
\end{figure}
\emph{On clicking Submit Button }
\subsubsection{\emph{Code Mail Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Click To Mail</title>
</head>
<body>
<a href="sanjam531@gmail.com">Mail Here</a>
</body>
</html>
\end{verbatim}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Html 4
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html page with frames and frameset. }}
\subsection{\emph{Code:}}%use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<frameset rows="50%,*" >
<frameset cols="50%,*">
<frame src="E:\documents\IM LAB\html\HTML1.html">
<frame src="E:\documents\IM LAB\html\HTML2.html">
</frameset>
<frameset cols="25%,37.5%,37.5%">
<frame src="E:/documents/IM%20LAB/html/sanjam.jpg">
<frame src="E:\documents\IM LAB\html\HTML3.html">
<frame src="E:\documents\IM LAB\html\LinkToHtml.html">
</frameset>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{html4Frame}%Change Output image with your output
\caption{Output Of FRAME Page}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Css 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To write an html file implementing the concept inline, external \&\ internal style sheets.}}
\subsection{\emph{Code}}%use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>iView Technoreader</title>
<link rel="stylesheet" type="text/css" href="enternal.css">
<style>
#box{
text-align:center;
font-style:italic;
font-size:40px}
span.indent
{ padding-left: 1em }
</style>
</head>
<body>
<center>
<h1 style="text-align:center;
font-style:monospace;
font-weight: bolder;font-size: 70px ">TechnoReader</h1>
<h5 style="font-size:25px">#iView-The way i-View!!</h5><hr>
<img src="C:/Users/sanjam/Documents/download.jpg"></center><br>
<p>Messaging app Telegram's new update brings new photo editor
2.0 with selfie masks, GIF creation, new stickers, photo
text and drawing support.<br>
Now Telegram app users will be able to create their own
GIFs by simply recording a video in the app and can share
them as a looped autoplayed GIF by tapping on to the new mute button.<br>
The animations will be saved to GIFs section so users
can quickly react to anything with a set of their own prerecorded
GIF-emotions.<br></p><blockquote id="box">
" Today we are pushing the photo editor to the next level with
the fun stuff: you can now add drawings, masks, stickers and
text right onto your pictures."
</blockquote>
<p>The app is updated with the capability of identifying faces on
photos and uses mask meta-data to find the perfect spot, notes blog post.
Other photo editing tools includes adding text and drawings to your photos.
Lastly, there is a new trending stickers tab that
keeps all the new stickers at one place.<br></p><hr>
<span id="name">Sanjampreet Singh</span> :
<a href="mailto:sanjam531@gmail.com"
style="font-size:40px;font-weight:bold;">E-Mail</a>
<a href="E:\documents\IM LAB\html\HTML4.html" style="text-align:left;">
<-Last Practical</a>
<span class="indent"></span>
<a href="E:\documents\IM LAB\html\CSS 2\css 2.html" style="text-align:right;">
Next Practical-></a></body>
</html>
-----------------------------------------------------------------------
External.css:
body
{
background-color:#37408B;
}
p
{
font-style:serif;
font-size:40px;
text-align: justify;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
}
\end{verbatim}
\newpage
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{P4css}%Change Output image with your output
\caption{Output of HTML and CSS}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% CSS2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement the concept of margin, padding using cascading style sheets.}}
\subsection{\emph{Code}}%use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Information Technology</title>
<style >
body
{
background-color:rgb(212,231,242);
text-align: justify;color:#1F1F97;
margin-right:10%;
padding:100px;
}
#cen
{
text-align:center;font-weight: bolder;font-size:25px;
}
ol
{
padding: 20px;
}
ol li
{
background: #ffe5e5;
margin: 5px;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;
}
span.indent
{
padding-left: 1em
}
</style>
</head>
<body>
<div style="margin:auto;display:block;width:40%;">
<img src="dptit.PNG" height="100px";position:">
</div>
<hr>
<h3 style="text-align:center;font-size:70px;">
Vision and Mission</h3>
<span id="cen">Department Vision</span>
<p style="text-align: justify;font-style: italic;">
The department of Information Technology envisions to create groomed,
technically competent and skilled intellectual IT professionals specifically
from the rural area of Punjab to meet the current challenges of the modern
computing industry.</p>
<span id="cen">Department Mission</span>
<ol type="a">
<li>To uplift rural students of the Punjab region through advanced
quality education in Information Technology.</li>
<li>To provide technical solutions in the field of Information
Technology to the local society.</li>
<li>To provide need based quality training in the field of Information
Technology.</li>
<li>To maintain state-of-the-art facilities and laboratories where
students and faculty can enhance their understanding of technology.</li>
<li>To provide students with the tools to become productive, participating
global citizens and life-long learners.</li>
<li>To provide an atmosphere for students and faculty for continuous learning
to investigate,apply and transfer knowledge.</li>
</ol>
<span id="cen">Programme Education Objectives (PEO)
B.Tech. (Information Technology)</span>
<ol>
<li>The graduates of Information Technology Engineering Program
will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering Program will
function effectively as individuals and team members in the workplace,
growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol>
<hr> <hr>
<span>
<a id="name" href="mailto:sanjam531@gmail.com"
style="font-size:40px;font-weight:bold;">Sanjampreet Singh</a>
<br>
<a href="http://sanjamhelping.blogspot.in/p/
it-14304-it-methodologies-lab.html">Department Of Information
Technology</a>
<br>
<a href="E:\documents\IM LAB\html\CSS 1\CSS1.html"
style="text-align:left;"><-Last Practical
</a>
<span class="indent"></span>
<a href="E:\documents\IM LAB\html\css3\css3.html"
style="text-align:right;">Next Practical-></a>
<br>
<a href="http://it.gndec.ac.in/?page_id=2">Attmpted Replica</a>
</span>
</body>
</html>
------------------------------------------------------------------------
CSS Code:
p{
font-style:serif;
font-size:40px;
text-align: justify;}
span{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;}
\end{verbatim}
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{P5css}%Change Output image with your output
\caption{Output of HTML and CSS}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% CSS 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{\emph{To create an html file to implement the styles related to table,text, fonts, links, lists using cascading style sheets.}}
\subsection{\emph{HTML FILE 1 (Main Page) Source Code:}}%use your code
\begin{verbatim}
<html>
<head>
<title>HTML 3</title>
<link rel="stylesheet" type="text/css" `
href="E:\documents\IM LAB\html\css3\external.css">
</head>
<body>
<h1 style="text-align:center;">Department of Information Technology</h1>
<span style="text-align:center;">
<h2 style="text-decoration:underline;">
<a href="E:\documents\IM LAB\html\css3\css3- peo.html">
<abbr title="Program Educational Object">PEO</abbr>
</a></h2>
<table style="margin: 0px auto;width:300; height:400;" border="15" >
<caption style="font-weight:bold;font-size:30px;">
<abbr title="Guru Nanak Dev Engg. College">GNDEC</abbr>
</caption><tr>
<th style="text-decoration:none;">Department</th>
<th rowspan="3">
<a href="http://cc.gndec.ac.in/">Computer Center</a></th>
</tr><tr><th>
<a href="http://it.gndec.ac.in/">IT</a></th>
</tr><tr><th>
<a href="http://cse.gndec.ac.in/">CSE</a>
</th></tr>
</table>
</span>
<button type="button">
<a href="E:\documents\IM LAB\html\css3\css 3-form.html"
style="font-weight:bolder;text-decoration:underline;">Registered?</a>
</button> <hr><hr>
<span>
<a href="E:\documents\IM LAB\html\html3-mail link.html">
Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a>
<br><a href="E:\documents\IM LAB\html\CSS 2\css 2.html">
<-Last Practical</a><span class="indent"></span>
<a href="">Next Practical-></a><br>
</span>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7}%Change Output image with your output
\caption{Output Of Main Page}
\end{figure}
\newpage
\subsection{\emph{Code for PEO Page :}}%use your code
\begin{verbatim}
<html>
<head>
<title>PEO</title>
<link rel="stylesheet" type="text/css" href=
"E:\documents\IM LAB\html\css3\external.css">
<style>
body
{
text-align:justify;
margin-right:10%;
padding:50px;
}
</style>
</head>
<body>
<center>
<h1>Programme Education Objectives (PEO)</h1>
</center>
<ol>
<li>The graduates of Information Technology Engineering
Program will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering
Program will function effectively as individuals and team
members in the workplace, growing into highly technical or
project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering
Program, if they are inclined, will be able to continue their
formal education and be accepted to relevant post- graduate
degree programs and succeed in these studies.</li>
</ol>
<hr>
<h3>
<button type="button">
<a href="E:\documents\IM LAB\html\css3\css3.html">Home</a>
</button>
</h3>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7peo}%Change Output image with your output
\caption{Output PEO Page}
\end{figure}
\subsubsection{\emph{Code for FORM Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css"
href="E:\documents\IM LAB\html\css3\external.css">
</head>
<body>
<center>
<h1>Registration Form</h1>
<form method="get" action="123.html"
style="padding:0.01% 40%;">
<fieldset>
<legend>Registration Form</legend>
<br>
Department <br>
<input type="text" name="dept"><br>
Roll no<br>
<input type="text" name="roll"><br>
Name<br>
<input type="text" name="fname"><br>
Password<br>
<input type="password" name="pass"><br>
E-Mail<br>
<input type="text" name="mail"><br><br>
<button type="submit">
<a href="E:\documents\IM LAB\html\css3\css3-mail link.html">
Submit</a></button>
<button><a href="E:\documents\IM LAB\html\css3\css3.html">
Home</a></button>
</form>
</fieldset>
</center>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7form}%Change Output image with your output
\caption{Output FORM Page}
\end{figure}
\subsubsection{\emph{Code for MAIL Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Click To Mail</title>
<link rel="stylesheet" type="text/css"
href="E:\documents\IM LAB\html\css3\external.css">
</head>
<body>
<center>
<div style="margin: 0px;padding: 22.5%;">
<button>
<a href ="mailto:sanjam531@gmail.com"
style="font-size:50px;">Mail Here</a>
</button>
</div>
</center>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7mail}%Change Output image with your output
\caption{Output MAIL Page}
\end{figure}
\newpage
\subsubsection{\emph{Code for CSS:}}%use your code
\begin{verbatim}
body{
background-color:#90FEB9;
color:#CC0037; }
p{
font-style:serif;
font-size:40px;
text-align: justify;}
span{
font-style:sans-serif;
text-decoration:underline;
font-size:20px;
text-align: center;
font-weight:bold; }
a{
color:#CC0037;
text-decoration:none;}
ol {
padding: 20px;}
ol li
{background: #ffe5e5;
margin: 5px;}
span{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;}
span.indent{
padding-left: 1em; }
input[type=text],input[type=password] {
border: 3px solid #555;}
\end{verbatim}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement the concept of document object model using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<body>
<p id="demo">
Click the button to display the cookies associated with this document.</p>
<button onclick="myFunction()">Try it</button><hr>
<a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js2\js2.html">Next Practical-></a>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="Cookies
associated with this document : " + document.cookie;}
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js1}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Js2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file and to display the various arithmetic operations on variables using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html><head>
<title>js2</title>
</head> <body>
<b>Below Calculations are performed using Javascript Arithmetic Operations</b>
<center>
<script type="text/javascript">
var a = 33; var b = 10; var c = 56;
var linebreak = "<br />";
document.write("a = " +a);
document.write(linebreak);
document.write("b = " +b);
document.write(linebreak);
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
</script> </center>
</body><hr>
<a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js1\js1.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js3\js3.html">Next Practical-></a><br>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js2}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement alert box, confirm box, dialog box using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>JS3</title>
</head>
<body>
<p>Click the button!!</p>
<button onclick="alert_box()">This is an Alert Box</button>
<p>Click the button!!</p>
<button onclick="dialog_box()">This is an Dialog Box</button>
<p id="demodialog"></p>
<p>Click the button!!</p>
<button onclick="confirm_box()">This is an Confirm Box</button>
<p id="democonfirm"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js2\js2.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js4\js4.html">Next Practical-></a><br>
<script>
function alert_box() {
alert("ALERT!");}
function dialog_box() {
var person=prompt("Please enter your name","Sanjampreet Singh");
if (person != null) {
document.getElementById("demodialog").innerHTML =
"Hello " + person + "! How are you today?";}}
function confirm_box() {
var x;
if (confirm("Press a button!") == true) {
x = "Pressed OK!";
} else {
x = "Pressed Cancel!";}
document.getElementById("democonfirm").innerHTML = x;}
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{js3}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 4
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement concept of functions and arrays using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<html><head>
<title>JS4</title>
</head><body>
<button onclick="get_first()">Click to Get First Element</button>
<p id="demo"></p><hr>
<a href="E:\documents\IM LAB\html\html3-
mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js3\js3.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js5\js5.html">Next Practical-></a><br>
<script> function get_first() {
var cars=["Volvo","BMW"];
document.getElementById("demo").innerHTML=cars[0];}
</script> </body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js4}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 5
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create a user defined function in javascript to get array of values and sort them in ascending order}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS5</title></head>
<body><p>Click the button!!</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p><hr>
<a href="E:\documents\IM LAB\html\
html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js4\js4.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js6\js6.html">Next Practical-></a><br>
<script>
var fruits = ["Banana","Orange","Apple","Mango"];
document.getElementById("demo").innerHTML=fruits;
function myFunction(){fruits.sort();
document.getElementById("demo").innerHTML=fruits;}
</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.35]{js5}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 6
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate the use of control statements and loops in javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS6</title></head>
<body>
<a href="E:\documents\IM LAB\html\html3-mail
link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js5\js5.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js7\js7.html">Next Practical-></a><br>
<script>
var b,z,c=0;var a=prompt("Enter a number");
z=a;while(z>0)
{b=z%10;
c=c+(b*b*b);
z=parseInt(z/10);}
if(a==c)alert("given no is amstrong number");
elsealert("given no is not an amstrong number");
</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\begin{subfigure}[b]{0.3\textwidth}
\includegraphics[scale=0.35]{js6-1}
\end{subfigure}
~
\begin{subfigure}[b]{0.3\textwidth}
\includegraphics[scale=0.36]{js6-2}
\end{subfigure}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 7
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate string and math object’s predefined methods using javascript.}}
\subsection{\emph{Source Code: Example Of String}}
\begin{verbatim}
<html>
<head><title>JS7</title></head>
<body>
<p id="p1">Please locate where 'locate' occurs!.</p>
<button onclick="stringindex()">Try it</button>
<p id="pos"></p><p id="lastpos"></p><hr>
<a href="E:\documents\IM LAB\html\html3-
mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-method
ologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js6\js6.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js8\js8.html">Next Practical-></a><br>
<script>function stringindex()
{var str = document.getElementById("p1").innerHTML;
var pos = str.indexOf("locate");var last_pos = str.lastIndexOf("locate");
document.getElementById("pos").innerHTML = "Word locate occurs at "+pos;
document.getElementById("lastpos").innerHTML=
"Word locate occurs last at "+last_pos;}</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.4]{js7}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Source Code: Math Object}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>JS7</title>
</head>
<body>
<p>Math.random() returns a random number between 0 and 1.
Every time Output varies between 0 and 1</p>
<p id="random_no"></p>
<p>Math.min() returns the lowest value.</p>
<p id="min"></p>
<p>Math.round() rounds a number to its nearest integer.</p>
<p>Math.ceil() rounds a number <strong>up</strong> to its nearest integer.</p>
<p id="round"></p>
<p>Math constants are E, PI, SQR2, LN2, LN10, LOG2E, LOG10E</p>
<p id="const"></p>
<hr>
a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a> <br>
<a href="E:\documents\IM LAB\html\js7\js7.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js8\js8.html">Next Practical-></a><br>
<script>
document.getElementById("random_no").innerHTML = "<b>Output of Math.Random()
is</b>"+Math.random();
document.getElementById("min").innerHTML = "<b>Math.Min(0, 150, 30, 20, -8, -200)
returns min value from set of parameters passed</b> "+ Math.min(0, 150, 30, 20, -8, -200);
document.getElementById("round").innerHTML = "<b>Math.Round(4.4) and Math.ceil(4.4)
round off the value to nearest integer</b> "+Math.round(4.4) +" and " + Math.ceil(4.4);
document.getElementById("const").innerHTML = "<b>Value of E using Math.E</b> "
+Math.E + "<br>" + "<b>Value of PI using Math.PI</b> "+Math.PI + "<br>" +
"<b>Value of SQRT2 using Math.SQRT2</b> "+Math.SQRT2 + "<br>" +
"<b>Value of LN2 using Math.LN2</b> "+Math.LN2 + "<br>" +
"<b>Value of LN10 using Math.LN10</b> "+Math.LN10 + "<br>" +
"<b>Value of LOG2E using Math.LOG2E</b> "+Math.LOG2E + "<br>" +
"<b>Value of LOG10E using Math.LOG10E</b> "+Math.LOG10E + "<br>";
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.65]{js7_1}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 8
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate array objects and date object’s predefined methods using javascript.}}
\subsection{\emph{Source Code:Array example}}
\begin{verbatim}
<!DOCTYPE html>
<head><title>Js8</title></head>
<html>
<body>
<p>The toString() method returns an array as a comma separated string.</p>
<p id="demo"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js7\js7_1.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js8\js8_1.html">Next Practical-></a><br>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js8}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Source Code: Date Object}}
\begin{verbatim}
<html>
<head><title>JS8</title></head><body>
<p>The internal clock in JavaScript starts at midnight January 1, 1970.</p>
<p>The getTime() function returns the number of milliseconds since then:</p>
<p id="demo1"></p>
<p>The getFullYear() method returns the full year of a date:</p><p id="demo2"></p>
<p>The getDay() method returns the weekday as a number:</p><p id="demo3"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js8\js8.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js9\js9.html">Next Practical-></a><br>
<script>var d = new Date();
document.getElementById("demo1").innerHTML = d.getTime();
document.getElementById("demo2").innerHTML = d.getFullYear();
document.getElementById("demo3").innerHTML = d.getDay();
</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.35]{js8_1}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 9
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To implement the concept of event handling and validating registration form.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS9</title></head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return
validateForm()" method="post">Name: <input type="text" name="fname">
<input type="submit" value="Submit"></form><hr>
<a href="E:\documents\IM LAB\html\html3-mail
link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js8\js8.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js10\js10.html">Next Practical-></a><br>
<script>function validateForm()
{var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "")
{alert("Name must be filled out");
return false;}}</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.35]{js9}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 10
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate the use of expression, array, math, string, date functions.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS10</title></head>
<body>
<p>Use of Expressions</p><p id="demo1"></p>
<p>Use of Array Length Function</p><p id="demo2"></p>
<p id="demo3"></p><p>Sorted Array is</p>
<p id="demo4"></p><p>Sorted Array in reverse order</p>
<p id="demo5"></p><p>Following is String</p>
<p id="demo6"></p><p id="demo7"></p>
<p id="demo8"></p><p>The getDay() method returns
the weekday as a number:</p><p id="demo9"></p>
<p>Date.parse(string) returns milliseconds.</p>
<p>You can use the return value to
convert the string to a date object:</p><p id="demo10"></p>
<hr><a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a>
<br><a href="http://sanjamhelping.blogspot.in/p/it-14304-
it-methodologies-lab.html">Department Of Information Technology</a>
<br><a href="E:\documents\IM LAB\html\js9\js9.html"><-Last Practical</a>
<script>
var x=10;var y=20;var z= x+y*x/y;var d = new Date();
var str="Guru Nanak Dev Engineering College Ludhiana";
var pos = str.indexOf("Engineering");
var arr1= ["IT", "CSE", "Prod", "ME", "ECE"];
document.getElementById("demo1").innerHTML="<b>Output of z= x+y*x/y is </b>"+z;
document.getElementById("demo2").innerHTML="<b>Array is </b>"+arr1;
document.getElementById("demo3").innerHTML="<b>Length of Array is </b>"+arr1.length;
document.getElementById("demo4").innerHTML="<b>Sorted Array is </b>"+arr1.sort();
document.getElementById("demo5").innerHTML="<b>reverse order </b>"+arr1.reverse();
document.getElementById("demo6").innerHTML=str;
document.getElementById("demo7").innerHTML="<b>word Engineering is at </b>"+pos;
document.getElementById("demo8").innerHTML="<b>Upper Case <br/>"+str.toUpperCase();
document.getElementById("demo9").innerHTML=d.getDay();
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);document.getElementById("demo10").innerHTML = d;
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js10}
\caption{Output Of HTML page with Js}
\end{figure}
\end{document}
\usepackage{graphicx}
\usepackage{wrapfig}
\usepackage{multicol}
\usepackage{caption}
\usepackage{subcaption}
\usepackage{transparent}
\usepackage{multirow}
\usepackage{eso-pic}
\usepackage[utf8]{inputenc}
\usepackage{color}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newcommand\BackgroundIm{
\put(0,0){
\parbox[b][\paperheight]{\paperwidth}{
\vfill
\centering
{\transparent{0.05} \includegraphics[height=\paperheight,width=\paperwidth,
keepaspectratio]{gne} %background image
\vfill
}}}}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Main Page
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\begin{document}
\begin{titlepage}
\newcommand{\HRule}{\rule{\linewidth}{1mm}}
\newcommand{\VRule}{\rule{1mm}{\textheight}}
\begin{minipage}[c]{0.1\textwidth}
\emph{\textbf{\huge{\textcolor{blue}
{\vspace{2\baselineskip}\\
G \\[1.15\baselineskip]
N \\[1.15\baselineskip]
D \\[1.15\baselineskip]
E \\[1.15\baselineskip]
C}}}}
\end{minipage}
\begin{minipage}{0.01\textwidth}
\textcolor{blue}{\VRule}
\end{minipage}
\begin{minipage}[height=\paperheight]{0.8\textwidth}
\centering {
\textcolor{blue}
{
\textsc{\Large Guru Nanak Dev Engg College }\\[0.5cm]
\textsc{\large Practical File}\\[0.3cm]
\HRule \\[0.2cm]
{ \huge \bfseries Internet Methodologies}\\[0.1cm]
\HRule \\[2cm]}
\includegraphics[width=60mm,scale=0.7]{gne}\\[2cm] %%logo of GNDEC
\textcolor{blue}
{{\\\today}\\[1cm]
{\textsc{Sanjampreet Singh \\{1507967}\\{D2-IT-B1}}}}}
\end{minipage}
~
\end{titlepage}
%%%%%%%%%%%%%%%%%%%%% BACKGROUND IMAGE
\AddToShipoutPicture{\BackgroundIm}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\pagenumbering{gobble}
\section{\emph{To familiarize with network devices like switch, hub, routers and bridges.}}
\subsection{\emph{\Large Switch}}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=80mm,scale=0.7]{3}
\caption{Network Switch}
\end{figure}\\
\emph{Definition 1 :} A network switch (also called switching hub, bridging hub, officially MAC bridge) is a computer networking device that connects devices together on a computer network, by using packet switching to receive, process and forward data to the destination device.\\[1cm]
\emph{Definition 2 :}Most business networks today use switches to connect computers, printers and servers within a building or campus. A switch serves as a controller, enabling networked devices to talk to each other efficiently. Through information sharing and resource allocation, switches save businesses money and increase employee productivity.
\subsubsection{What an Ethernet Switch Does?}
Ethernet switches link Ethernet devices together by relaying Ethernet frames between the devices connected to the switches. By moving Ethernet frames between the switch ports, a switch links the traffic carried by the individual network connections into a larger Ethernet network.
\\Ethernet switches perform their linking function by bridging Ethernet frames between Ethernet segments. To do this, they copy Ethernet frames from one switch port to another, based on the Media Access Control (MAC) addresses in the Ethernet frames. Ethernet bridging was initially defined in the 802.1D IEEE Standard for Local and Metropolitan Area Networks: Media Access Control (MAC) Bridges.
\\The standardization of bridging operations in switches makes it possible to buy switches from different vendors that will work together when combined in a network design. That’s the result of lots of hard work on the part of the standards engineers to define a set of standards that vendors could agree upon and implement in their switch designs.
\subsubsection{\emph{Example of Switch}}
\begin{figure}[h]
\centering
\includegraphics[width=150mm,scale=0.9]{switch}
\caption{Example of Switch}
\end{figure}
\newpage
\subsection {\emph{\Huge HUB }}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=80mm,scale=0.7]{HUB}
\caption{Network Hub}
\end{figure}
\subsubsection{\emph What is a Hub?}
\emph{Defination 1:}A hub is a place of convergence where data arrives from one or more directions and is forwarded out in one or more other directions.\\[0.5cm]
\emph{Defination 2:}A hub is the most basic networking device that connects multiple computers or other network devices together, broadcasting all network data across each connection.
\subsubsection{What an Hub Does?}
When referring to a network, a hub is the most basic networking device that connects multiple computers or other network devices together. Unlike a network switch or router, a network hub has no routing tables or intelligence on where to send information and broadcasts all network data across each connection. Most hubs can detect basic network errors such as collisions, but having all information broadcast to multiple ports can be a security risk and cause bottlenecks. In the past, network hubs were popular because they were cheaper than a switch or router. Today, switches do not cost much more than a hub and are a much better solution for any network.
\subsubsection{Applications Of Hub:}Networking Hub is widely used networking connectivity device. It has many advantages over other connectivity devices.\emph{Some Application of Networking Hub are given below:}
\begin{itemize}
\item Hubs are used to create small Home Networks.
\item Hubs are used for monitoring the networks.
\item Hubs are used in Organizations and Computer Labs for connectivity.
\item It Makes one device or peripheral available throughout the whole network.
\end{itemize}
\subsubsection{\emph{Connention of HUB}}
\begin{figure}[h]
\centering
\includegraphics[width=70mm,scale=0.5]{5}
\caption{Example of Hub Network}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection {\emph{\Huge Router}}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=90mm,scale=0.7]{1}
\caption{Router}
\end{figure}
\subsubsection{\emph What is a Router?}
\emph{Defination 1:}A router is a device that forwards data packets along networksand it is connection of at least two networks, commonly two LANs or WANs or a LAN and its ISP.s network.
\\[1cm]\emph{Defination 2:}a router is a device that determines the next network point to which a packet should be forwarded toward its destination.
\\[1cm]
\subsubsection{How Does A Router Works?}
The router powers on and loads it's OS from flashThe router loads the configuration file last saved to NVRAM and sets up the network interfaces and routing protocols it will run.The router adds the network address and subnet for each interface to it's routing table along with the name of the interface itself.The router has a simple static default route to send all non-local data out the network port connected to the cable company.When the router receives a web page request from your computer, it checks the destination IP address against its routing table.The bits forming the destination IP address in the IP packet are used as a hash key to point to the correct route, which in turn points to the correct network interface that the packet should be forwarded out of.The router transmits the packet out the correct interface, to the next router, which repeats the process until the packet reaches the destination.
\subsubsection{\emph{Working of Router Connection}}
\begin{figure}[h]
\centering
\includegraphics[width=100mm,scale=0.7]{0.png}
\caption{Example of Router's Network}
\end{figure}
\newpage
\subsection {\emph{\Huge BRIDGE}}
\rule{\linewidth}{0.5mm}
\begin{figure}[h]
\centering
\includegraphics[width=90mm,scale=0.7]{8.jpg}
\caption{Bridge}
\end{figure}
\subsubsection{\emph What is a Bridge?}
\emph{Defination 1:}A network bridge is a computer networking device that creates a single aggregate network from multiple communication networks or network segments. This function is called network bridging.
\\[1cm]
\emph{Defination 2:}“A device used to connect two separate Ethernet networks into one extended Ethernet. Bridges only forward packets between networks that are destined for the other network. Term used by Novell to denote a computer that accepts packets at the network layer and forward them to another network.”
\\[2cm]
\subsubsection{How does Bridge Works?}
\emph{When a bridge receives an IP packet, the gateway processes the packet as follows:}
\begin{itemize}
\item The destination MAC address is looked up in the bridge's forwarding table.
\item If the destination MAC address is found in the forwarding table, the packet is forwarded to the corresponding port.
\item If the destination MAC address is not found in the forwarding table, the destination IP address is searched for in all the defined bridge IP address ranges.
\item If the destination IP address is found in the bridge IP address range of exactly one port, the IP address is transmitted to that port.
\item If the IP address is found in the bridge IP address range of more than one port, the packet is dropped. The gateway then sends an ARP query to each of the relevant ports.
\item If a host responds to the ARP request packet with an ARP reply, the forwarding table is updated with the correct <MAC Address, Port> association. Subsequent packets will be forwarded using the forwarding table.
\end{itemize}
\subsubsection{\emph{Working of Bridge Network}}
\begin{figure}[h]
\centering
\includegraphics[width=110mm,scale=0.5]{6}
\caption{Example of Bridge Network}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{Difference between the follows:}}
\subsection{\emph Hub vs Switch}
\begin{table}[h]
\begin{center}
\begin{tabular}{ | l | p{5cm} | p{5cm} |}
\hline
Topic of Comparision & Hub & Switch\\ \hline
Defination&A Hub is a networking device that allows one to connect multiple PCs to a single network. Hubs may be based on Ethernet, Firewire, or USB connections.&A switch is a control unit that turns the flow of electricity on or off in a circuit. It may also be used to route information patterns in streaming electronic data sent over networks.\\ \hline
Transmission Type &Hubs always perform frame flooding; may be unicast, multicast or broadcast.&First broadcast; then unicast and multicast as needed.\\ \hline
Layer&Physical layer. Hubs are classified as Layer 1 devices per the OSI model.&Data Link Layer. Network switches operate at Layer 2 of the OSI model.\\ \hline
Function&To connect a network of personal computers together, they can be joined through a central hub.&Allow to connect multiple device and port can be manage and can also create security.\\ \hline
Ports&Hub has 4/12 ports.&Switch has 24/48 ports. \\ \hline
Figure&\begin{center}
\includegraphics[scale=0.3]{5}
\end{center}&\begin{center}
\includegraphics[scale=0.3]{4}
\end{center}\\ \hline
\end{tabular}
\end{center}
\caption{Hub vs Switch Table}
\end{table}
\newpage
\subsection{\emph Router vs Bridge}
\begin{table}[h]
\begin{center}
\begin{tabular}{ | l | p{5cm} | p{5cm} |}
\hline
Topic of Comparision & Router & Bridge\\ \hline
Defination & A router is a networking device that forwards data packets between computer networks.&A network bridge is a computer networking device that creates a single aggregate network from multiple networks\\ \hline
Used Network&Bridge is used for LAN network&Router is used LAN, WAN network\\ \hline
Security&Block and provide protection against broadcast stroms.&Doesn't blocks any Broadcast or Multicast.\\ \hline
Table&Bridges examine the source port and MAC addresses of frames to build a table and make forwarding decisions. These tables are typically accessed via software.&Store IP address in Routing table and maintain address at its own.\\ \hline
Ports&Bridge has 16 ports.&Router has 2/4/8 ports.\\ \hline
Figure&\begin{center}
\includegraphics[scale=0.23]{6}
\end{center}&\begin{center}
\includegraphics[scale=0.15]{0}
\end{center}\\
\hline
\end{tabular}
\end{center}
\caption{Router vs Bridge Table}
\end{table}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To configure the IP address for a computer connected to LAN}}
\subsection{\emph{Whai is IP Address?}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.2]{ip}
\caption{IP Address logo}
\end{figure}
IP address is a unique string of numbers separated by full stops that identifies each computer using the Internet Protocol to communicate over a network.\\
\subsection{To Configure IP Address For Windows}
\begin{enumerate}
\item Click on the Windows Key on your Keyboard and Press X. On the menu that appears click control panel.
\begin{center}
\includegraphics[scale=0.45]{2-1}
\end{center}
\item In Category view click on Network and Internet.
\begin{center}
\includegraphics[scale=0.5]{2-2}
\end{center}
\item Click on Network and Sharing Center.
\begin{center}
\includegraphics[scale=0.5]{2-3}
\end{center}
\item Click on Change Adapter Settings.
\begin{center}
\includegraphics[scale=0.55]{2-4}
\end{center}
\item Right click on Local Area Connection and click Properties.
\begin{center}
\includegraphics[scale=0.55]{2-5}
\end{center}
\item Click Internet Protocol Version 4 (TCP/IP) then click Properties.
\begin{center}
\includegraphics[scale=0.5]{2-6}
\end{center}
\item Change ‘Dot’ to Use the following IP address and input your IP and DNS information.
\begin{center}
\includegraphics[scale=0.5]{2-7}
\end{center}
\item Click OK to save and apply your settings.
\end{enumerate}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To get familiarize with various troubleshooting utilities.}}
\textbf{ping}\\
PING command is the best way to test connectivity between two nodes.
Whether it is (LAN) or (WAN). Ping use ICMP to communicate to other devices.
You can ping host name of ip address using below command.ping uses the ICMP protocol’s
mandatory ECHO\_\ REQUEST datagram to elicit an ICMPECHO\_\ RESPONSE from a host or gateway.
ECHO\_\ REQUEST datagrams have an IPand ICMP header,followed by a struct
timeval and then an arbitrary number of “pad” bytes used to fill out the packet.\\
\textbf{SYNOPSIS}\\
ping -s [-d] [-l] [-L] [-n] [-r] [-R] [-v] [ -i interface\_\ address ] [-I interval] [-t ttl] host [packetsize]
[count]\\
\textbf{OPTIONS :}\\
\textbf{-d}\\
Set the SO\_\ DEBUG socket option.
\textbf{-l}\\
Loose source route. Use this option in the IP header to send the packet to the given host and back
again. Usually specified with the -R option.\\
\textbf{-L}\\
Turn off loopback of multicast packets. Normally, if there are members in the host group on the out-
going interface, a copy of the multicast packets will be delivered to the local machine.\\
\textbf{-n}\\
Show network addresses as numbers. ping normally displays addresses as host names.\\
\textbf{-r}\\
Bypass the normal routing tables and send directly to a host on an attached network. If the host is
not on a directly-attached network, an error is returned. \\
\textbf{-R}\\
Record route. Sets the IP record route option, which will store the route of the packet inside the IP
header.\\
\textbf{-v}\\
Verbose output. List any ICMP packets, other than ECHO\_\ RESPONSE, that are received.\\
\textbf{-i interface\_\ address}
%%%%%% PLEASE do get printed Next Pages From Practical 3.pdf
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Practical 4
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To setup IIS and Apache Web Server on computer system.}}
\textbf{Setup of IIS Server}
\\Internet Information Services (IIS) is an extensible web server created by
Microsoft for use with Windows NT family. IIS supports HTTP, HTTPS, FTP, FTPS,
SMTP and NNTP. It has been an integral part of the Windows NT family since
Windows NT 4.0, though it may be absent from some edition and is not active by default.\\
\textbf{Steps for Setting IIS Server}
\begin{enumerate}
\item To open the Windows Features dialog box, click Start, and then click Control Panel
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{p4}
\end{figure}
\item In the Control Panel,click Program.
\end{enumerate}
%%%%%% PLEASE do get printed Next Pages From Practical 4.pdf
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% HTML 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create a simple html file to demonstrate the use of different tags.}}
\subsection{\emph{Code:}} %use your code
\begin{verbatim}
<html>
<head>
<title>iView AD</title></head>
<body bgcolor="#ff99cc">
<center><h1>TechnoReader</h1><br>
<marquee behaviour="alternative" direction="left">
<h5>iView!! #myView #yourView #ourView
|Field of Vision for Understanding Different Viewpoints.| #iView</h5></marquee>
<hr><img src="C:/Users/sanjam/Documents/download.jpg"> </center><br>
<p>Messaging app Telegram<sup>s</sup> new update brings new photo editor 2.0
with selfie masks, GIF creation, new stickers, photo text and drawing support.
Now Telegram app users will be able to create their own GIFs by simply recording
a video in the app and can share them as a looped autoplayed GIF by
tapping on to the new mute button.<br>The animations will be saved to GIFs
section so users can quickly react to anything with a set of their own
prerecorded GIF-emotions.<br><blockquote >
Today we are pushing the photo editor to the next level with the fun stuff:
you can now add drawings, masks, stickers and text right onto your pictures<br>
</blockquote>
The app is updated with the capability of identifying faces on photo
and uses mask meta-data to find the perfect spot, notes blog post.<br>
Other photo editing tools includes adding text and drawings your photos.Lastly,
there is a new trending stickers tab that keeps all the new stickers at one place.
<br></p><hr><a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\HTML2.html">Next Practical-></a>
</body>
</html>
\end{verbatim}
\newpage
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.45]{p1}%Change Output image with your output
\caption{Output Of HTML Page}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Html 2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to link to different html page which contains images, list,
and also link within a page}}
\subsection{Code:}%use your code
\begin{verbatim}
<html>
<head>
<title>Information Technology </title>
</head>
<body>
<img src="E:/documents/IM%20LAB/html/dptit.PNG"><hr>
<h3>Vision and Mission</h3><br><center>
<b>Department of Information Technology<br>
Department Vision</b></center>
The department of Information Technology envisions to
create groomed, technically competent and skilled intellectual
IT professionals specifically from the rural area of Punjab to meet
the current challenges of the modern computing industry.
Department Mission
<ol type="a">
<li>To uplift rural students of the Punjab region through
advanced quality education in Information Technology.</li>
<li>To provide technical solutions in the field of Information
Technology to the local society.</li>
<li>To provide need based quality training in the
field of Information Technology.</li>
<li>To maintain state-of-the-art facilities and laboratories
where students and faculty can enhance their understanding of technology.</li>
<li>To provide students with the tools to become productive,
participating global citizens and life-long learners.</li>
<li>To provide an atmosphere for students and faculty for continuous
learning to investigate,apply and transfer knowledge.</li></ol><ol >
<center><b>Programme Education Objectives (PEO)
B.Tech. (Information Technology)</b></center>
<li>The graduates of Information Technology Engineering
Program will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering
Program will function effectively as individuals and team members in the
workplace, growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol><br><hr>
<a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\HTML1.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\HTML3.html">Next Practical-></a><br>
<a href="http://it.gndec.ac.in/?page_id=2">Replica from:</a></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p2}%Change Output image with your output
\caption{Output Of a.html}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% HTML 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create a registration form by using various form elements, links and table .}}
\subsection{\emph{Code Main Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>a</title>
</head>
<body>
<center> <h1>Department of Information Technology</h1><br>
<u><h2><a href="b.html">
<abbr title="Program Educational Object">PEO</abbr></a></h2></u>
<table border="5" width="300" height="400" bordercolor="red">
<caption>GNDEC</caption>
<tr>
<th> Department</th>
<th rowspan="3">
<a href="http//:www.cc.gndec.ac.in/">Computer Center</a></th>
</tr>
<tr>
<th> <a href="http//:it.gndec.ac.in/">IT</a></th>
</tr>
<tr>
<th> <a href="http//:cse.gndec.ac.in/">CSE</a> </th>
</tr>
</table>
</center>
<h1> <u><a href="c.html">Registered?</a></u></h1>
<hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">
Sanjampreet Singh</a>
<br>
<a href="http://sanjamhelping.blogspot.in/p/
it-14304-it-methodologies-lab.html">Department Of Information Technology</a>
<br>
<a href="E:\documents\IM LAB\html\HTML2.html">
<-Last Practical</a>
<a href="E:\documents\IM LAB\html\HTML4.html">Next Practical-></a>
<br>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p3-1}%Change Output image with your output
\caption{Output Of Main Page}
\end{figure}
~
\newpage
\subsection{\emph{Code Of PEO Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>PEO</title>
</head>
<body>
<center>
<h1>Programme Education Objectives (PEO)</h1>
</center>
<ol>
<li>The graduates of Information Technology Engineering
Program will be prepared to gain employment as an IT professional.
</li>
<li>The graduates of Information Technology Engineering Program
will function effectively as individuals and team members in the workplace,
growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol>
<hr>
<h3>
<a href="E:\documents\IM LAB\html\HTML3.html">Home</a>
</h3>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p3-peo}%Change Output image with your output
\caption{Output Of PEO Page}
\end{figure}
~
\subsection{\emph{Code for Registration Form:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<center>
<h1>Registration Form</h1>
<form method="get" action="123.html" >
<fieldset>
<legend>Registration Form</legend>
Department <br>
<input type="text" name="dept"><br>
Roll no<br>
<input type="text" name="roll"><br>
Name<br>
<input type="text" name="fname"><br>
Password<br>
<input type="password" name="pass"><br>
E-Mail<br>
<input type="text" name="mail"><br>
<button type="submit">Submit</button>
<button><a href="E:\documents\IM LAB\html\HTML3.html">
Home</a></button>
</form>
</fieldset>
</center>
</body>
</html>
\end{verbatim}
\newpage
\subsubsection{\emph{Output:}}%Change Output image with your output
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p3-form}
\caption{Output Of Form Page}
\end{figure}
\emph{On clicking Submit Button }
\subsubsection{\emph{Code Mail Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Click To Mail</title>
</head>
<body>
<a href="sanjam531@gmail.com">Mail Here</a>
</body>
</html>
\end{verbatim}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Html 4
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html page with frames and frameset. }}
\subsection{\emph{Code:}}%use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<frameset rows="50%,*" >
<frameset cols="50%,*">
<frame src="E:\documents\IM LAB\html\HTML1.html">
<frame src="E:\documents\IM LAB\html\HTML2.html">
</frameset>
<frameset cols="25%,37.5%,37.5%">
<frame src="E:/documents/IM%20LAB/html/sanjam.jpg">
<frame src="E:\documents\IM LAB\html\HTML3.html">
<frame src="E:\documents\IM LAB\html\LinkToHtml.html">
</frameset>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{html4Frame}%Change Output image with your output
\caption{Output Of FRAME Page}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Css 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To write an html file implementing the concept inline, external \&\ internal style sheets.}}
\subsection{\emph{Code}}%use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>iView Technoreader</title>
<link rel="stylesheet" type="text/css" href="enternal.css">
<style>
#box{
text-align:center;
font-style:italic;
font-size:40px}
span.indent
{ padding-left: 1em }
</style>
</head>
<body>
<center>
<h1 style="text-align:center;
font-style:monospace;
font-weight: bolder;font-size: 70px ">TechnoReader</h1>
<h5 style="font-size:25px">#iView-The way i-View!!</h5><hr>
<img src="C:/Users/sanjam/Documents/download.jpg"></center><br>
<p>Messaging app Telegram's new update brings new photo editor
2.0 with selfie masks, GIF creation, new stickers, photo
text and drawing support.<br>
Now Telegram app users will be able to create their own
GIFs by simply recording a video in the app and can share
them as a looped autoplayed GIF by tapping on to the new mute button.<br>
The animations will be saved to GIFs section so users
can quickly react to anything with a set of their own prerecorded
GIF-emotions.<br></p><blockquote id="box">
" Today we are pushing the photo editor to the next level with
the fun stuff: you can now add drawings, masks, stickers and
text right onto your pictures."
</blockquote>
<p>The app is updated with the capability of identifying faces on
photos and uses mask meta-data to find the perfect spot, notes blog post.
Other photo editing tools includes adding text and drawings to your photos.
Lastly, there is a new trending stickers tab that
keeps all the new stickers at one place.<br></p><hr>
<span id="name">Sanjampreet Singh</span> :
<a href="mailto:sanjam531@gmail.com"
style="font-size:40px;font-weight:bold;">E-Mail</a>
<a href="E:\documents\IM LAB\html\HTML4.html" style="text-align:left;">
<-Last Practical</a>
<span class="indent"></span>
<a href="E:\documents\IM LAB\html\CSS 2\css 2.html" style="text-align:right;">
Next Practical-></a></body>
</html>
-----------------------------------------------------------------------
External.css:
body
{
background-color:#37408B;
}
p
{
font-style:serif;
font-size:40px;
text-align: justify;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
}
\end{verbatim}
\newpage
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{P4css}%Change Output image with your output
\caption{Output of HTML and CSS}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% CSS2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement the concept of margin, padding using cascading style sheets.}}
\subsection{\emph{Code}}%use your code
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>Information Technology</title>
<style >
body
{
background-color:rgb(212,231,242);
text-align: justify;color:#1F1F97;
margin-right:10%;
padding:100px;
}
#cen
{
text-align:center;font-weight: bolder;font-size:25px;
}
ol
{
padding: 20px;
}
ol li
{
background: #ffe5e5;
margin: 5px;
}
span
{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;
}
span.indent
{
padding-left: 1em
}
</style>
</head>
<body>
<div style="margin:auto;display:block;width:40%;">
<img src="dptit.PNG" height="100px";position:">
</div>
<hr>
<h3 style="text-align:center;font-size:70px;">
Vision and Mission</h3>
<span id="cen">Department Vision</span>
<p style="text-align: justify;font-style: italic;">
The department of Information Technology envisions to create groomed,
technically competent and skilled intellectual IT professionals specifically
from the rural area of Punjab to meet the current challenges of the modern
computing industry.</p>
<span id="cen">Department Mission</span>
<ol type="a">
<li>To uplift rural students of the Punjab region through advanced
quality education in Information Technology.</li>
<li>To provide technical solutions in the field of Information
Technology to the local society.</li>
<li>To provide need based quality training in the field of Information
Technology.</li>
<li>To maintain state-of-the-art facilities and laboratories where
students and faculty can enhance their understanding of technology.</li>
<li>To provide students with the tools to become productive, participating
global citizens and life-long learners.</li>
<li>To provide an atmosphere for students and faculty for continuous learning
to investigate,apply and transfer knowledge.</li>
</ol>
<span id="cen">Programme Education Objectives (PEO)
B.Tech. (Information Technology)</span>
<ol>
<li>The graduates of Information Technology Engineering Program
will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering Program will
function effectively as individuals and team members in the workplace,
growing into highly technical or project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering Program,
if they are inclined, will be able to continue their formal education and be
accepted to relevant post- graduate degree programs and succeed in these studies.</li>
</ol>
<hr> <hr>
<span>
<a id="name" href="mailto:sanjam531@gmail.com"
style="font-size:40px;font-weight:bold;">Sanjampreet Singh</a>
<br>
<a href="http://sanjamhelping.blogspot.in/p/
it-14304-it-methodologies-lab.html">Department Of Information
Technology</a>
<br>
<a href="E:\documents\IM LAB\html\CSS 1\CSS1.html"
style="text-align:left;"><-Last Practical
</a>
<span class="indent"></span>
<a href="E:\documents\IM LAB\html\css3\css3.html"
style="text-align:right;">Next Practical-></a>
<br>
<a href="http://it.gndec.ac.in/?page_id=2">Attmpted Replica</a>
</span>
</body>
</html>
------------------------------------------------------------------------
CSS Code:
p{
font-style:serif;
font-size:40px;
text-align: justify;}
span{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;}
\end{verbatim}
\subsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{P5css}%Change Output image with your output
\caption{Output of HTML and CSS}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% CSS 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\section{\emph{To create an html file to implement the styles related to table,text, fonts, links, lists using cascading style sheets.}}
\subsection{\emph{HTML FILE 1 (Main Page) Source Code:}}%use your code
\begin{verbatim}
<html>
<head>
<title>HTML 3</title>
<link rel="stylesheet" type="text/css" `
href="E:\documents\IM LAB\html\css3\external.css">
</head>
<body>
<h1 style="text-align:center;">Department of Information Technology</h1>
<span style="text-align:center;">
<h2 style="text-decoration:underline;">
<a href="E:\documents\IM LAB\html\css3\css3- peo.html">
<abbr title="Program Educational Object">PEO</abbr>
</a></h2>
<table style="margin: 0px auto;width:300; height:400;" border="15" >
<caption style="font-weight:bold;font-size:30px;">
<abbr title="Guru Nanak Dev Engg. College">GNDEC</abbr>
</caption><tr>
<th style="text-decoration:none;">Department</th>
<th rowspan="3">
<a href="http://cc.gndec.ac.in/">Computer Center</a></th>
</tr><tr><th>
<a href="http://it.gndec.ac.in/">IT</a></th>
</tr><tr><th>
<a href="http://cse.gndec.ac.in/">CSE</a>
</th></tr>
</table>
</span>
<button type="button">
<a href="E:\documents\IM LAB\html\css3\css 3-form.html"
style="font-weight:bolder;text-decoration:underline;">Registered?</a>
</button> <hr><hr>
<span>
<a href="E:\documents\IM LAB\html\html3-mail link.html">
Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a>
<br><a href="E:\documents\IM LAB\html\CSS 2\css 2.html">
<-Last Practical</a><span class="indent"></span>
<a href="">Next Practical-></a><br>
</span>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7}%Change Output image with your output
\caption{Output Of Main Page}
\end{figure}
\newpage
\subsection{\emph{Code for PEO Page :}}%use your code
\begin{verbatim}
<html>
<head>
<title>PEO</title>
<link rel="stylesheet" type="text/css" href=
"E:\documents\IM LAB\html\css3\external.css">
<style>
body
{
text-align:justify;
margin-right:10%;
padding:50px;
}
</style>
</head>
<body>
<center>
<h1>Programme Education Objectives (PEO)</h1>
</center>
<ol>
<li>The graduates of Information Technology Engineering
Program will be prepared to gain employment as an IT professional.</li>
<li>The graduates of Information Technology Engineering
Program will function effectively as individuals and team
members in the workplace, growing into highly technical or
project management and leadership roles.</li>
<li>The graduates of Information Technology Engineering
Program, if they are inclined, will be able to continue their
formal education and be accepted to relevant post- graduate
degree programs and succeed in these studies.</li>
</ol>
<hr>
<h3>
<button type="button">
<a href="E:\documents\IM LAB\html\css3\css3.html">Home</a>
</button>
</h3>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7peo}%Change Output image with your output
\caption{Output PEO Page}
\end{figure}
\subsubsection{\emph{Code for FORM Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" type="text/css"
href="E:\documents\IM LAB\html\css3\external.css">
</head>
<body>
<center>
<h1>Registration Form</h1>
<form method="get" action="123.html"
style="padding:0.01% 40%;">
<fieldset>
<legend>Registration Form</legend>
<br>
Department <br>
<input type="text" name="dept"><br>
Roll no<br>
<input type="text" name="roll"><br>
Name<br>
<input type="text" name="fname"><br>
Password<br>
<input type="password" name="pass"><br>
E-Mail<br>
<input type="text" name="mail"><br><br>
<button type="submit">
<a href="E:\documents\IM LAB\html\css3\css3-mail link.html">
Submit</a></button>
<button><a href="E:\documents\IM LAB\html\css3\css3.html">
Home</a></button>
</form>
</fieldset>
</center>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7form}%Change Output image with your output
\caption{Output FORM Page}
\end{figure}
\subsubsection{\emph{Code for MAIL Page:}}%use your code
\begin{verbatim}
<html>
<head>
<title>Click To Mail</title>
<link rel="stylesheet" type="text/css"
href="E:\documents\IM LAB\html\css3\external.css">
</head>
<body>
<center>
<div style="margin: 0px;padding: 22.5%;">
<button>
<a href ="mailto:sanjam531@gmail.com"
style="font-size:50px;">Mail Here</a>
</button>
</div>
</center>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.3]{p7mail}%Change Output image with your output
\caption{Output MAIL Page}
\end{figure}
\newpage
\subsubsection{\emph{Code for CSS:}}%use your code
\begin{verbatim}
body{
background-color:#90FEB9;
color:#CC0037; }
p{
font-style:serif;
font-size:40px;
text-align: justify;}
span{
font-style:sans-serif;
text-decoration:underline;
font-size:20px;
text-align: center;
font-weight:bold; }
a{
color:#CC0037;
text-decoration:none;}
ol {
padding: 20px;}
ol li
{background: #ffe5e5;
margin: 5px;}
span{
font-style:sans-serif;
text-decoration:underline;
font-size:35px;
text-align: center;}
span.indent{
padding-left: 1em; }
input[type=text],input[type=password] {
border: 3px solid #555;}
\end{verbatim}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 1
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement the concept of document object model using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<body>
<p id="demo">
Click the button to display the cookies associated with this document.</p>
<button onclick="myFunction()">Try it</button><hr>
<a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js2\js2.html">Next Practical-></a>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="Cookies
associated with this document : " + document.cookie;}
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js1}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% Js2
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file and to display the various arithmetic operations on variables using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html><head>
<title>js2</title>
</head> <body>
<b>Below Calculations are performed using Javascript Arithmetic Operations</b>
<center>
<script type="text/javascript">
var a = 33; var b = 10; var c = 56;
var linebreak = "<br />";
document.write("a = " +a);
document.write(linebreak);
document.write("b = " +b);
document.write(linebreak);
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
</script> </center>
</body><hr>
<a href="mailto:sanjam531@gmail.com">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js1\js1.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js3\js3.html">Next Practical-></a><br>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js2}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 3
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement alert box, confirm box, dialog box using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>JS3</title>
</head>
<body>
<p>Click the button!!</p>
<button onclick="alert_box()">This is an Alert Box</button>
<p>Click the button!!</p>
<button onclick="dialog_box()">This is an Dialog Box</button>
<p id="demodialog"></p>
<p>Click the button!!</p>
<button onclick="confirm_box()">This is an Confirm Box</button>
<p id="democonfirm"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js2\js2.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js4\js4.html">Next Practical-></a><br>
<script>
function alert_box() {
alert("ALERT!");}
function dialog_box() {
var person=prompt("Please enter your name","Sanjampreet Singh");
if (person != null) {
document.getElementById("demodialog").innerHTML =
"Hello " + person + "! How are you today?";}}
function confirm_box() {
var x;
if (confirm("Press a button!") == true) {
x = "Pressed OK!";
} else {
x = "Pressed Cancel!";}
document.getElementById("democonfirm").innerHTML = x;}
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.7]{js3}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 4
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create an html file to implement concept of functions and arrays using javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<html><head>
<title>JS4</title>
</head><body>
<button onclick="get_first()">Click to Get First Element</button>
<p id="demo"></p><hr>
<a href="E:\documents\IM LAB\html\html3-
mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js3\js3.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js5\js5.html">Next Practical-></a><br>
<script> function get_first() {
var cars=["Volvo","BMW"];
document.getElementById("demo").innerHTML=cars[0];}
</script> </body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js4}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 5
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To create a user defined function in javascript to get array of values and sort them in ascending order}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS5</title></head>
<body><p>Click the button!!</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p><hr>
<a href="E:\documents\IM LAB\html\
html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js4\js4.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js6\js6.html">Next Practical-></a><br>
<script>
var fruits = ["Banana","Orange","Apple","Mango"];
document.getElementById("demo").innerHTML=fruits;
function myFunction(){fruits.sort();
document.getElementById("demo").innerHTML=fruits;}
</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.35]{js5}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 6
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate the use of control statements and loops in javascript.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS6</title></head>
<body>
<a href="E:\documents\IM LAB\html\html3-mail
link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js5\js5.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js7\js7.html">Next Practical-></a><br>
<script>
var b,z,c=0;var a=prompt("Enter a number");
z=a;while(z>0)
{b=z%10;
c=c+(b*b*b);
z=parseInt(z/10);}
if(a==c)alert("given no is amstrong number");
elsealert("given no is not an amstrong number");
</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\begin{subfigure}[b]{0.3\textwidth}
\includegraphics[scale=0.35]{js6-1}
\end{subfigure}
~
\begin{subfigure}[b]{0.3\textwidth}
\includegraphics[scale=0.36]{js6-2}
\end{subfigure}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 7
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate string and math object’s predefined methods using javascript.}}
\subsection{\emph{Source Code: Example Of String}}
\begin{verbatim}
<html>
<head><title>JS7</title></head>
<body>
<p id="p1">Please locate where 'locate' occurs!.</p>
<button onclick="stringindex()">Try it</button>
<p id="pos"></p><p id="lastpos"></p><hr>
<a href="E:\documents\IM LAB\html\html3-
mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-method
ologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js6\js6.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js8\js8.html">Next Practical-></a><br>
<script>function stringindex()
{var str = document.getElementById("p1").innerHTML;
var pos = str.indexOf("locate");var last_pos = str.lastIndexOf("locate");
document.getElementById("pos").innerHTML = "Word locate occurs at "+pos;
document.getElementById("lastpos").innerHTML=
"Word locate occurs last at "+last_pos;}</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.4]{js7}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Source Code: Math Object}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head>
<title>JS7</title>
</head>
<body>
<p>Math.random() returns a random number between 0 and 1.
Every time Output varies between 0 and 1</p>
<p id="random_no"></p>
<p>Math.min() returns the lowest value.</p>
<p id="min"></p>
<p>Math.round() rounds a number to its nearest integer.</p>
<p>Math.ceil() rounds a number <strong>up</strong> to its nearest integer.</p>
<p id="round"></p>
<p>Math constants are E, PI, SQR2, LN2, LN10, LOG2E, LOG10E</p>
<p id="const"></p>
<hr>
a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-methodologies-lab.html">
Department Of Information Technology</a> <br>
<a href="E:\documents\IM LAB\html\js7\js7.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js8\js8.html">Next Practical-></a><br>
<script>
document.getElementById("random_no").innerHTML = "<b>Output of Math.Random()
is</b>"+Math.random();
document.getElementById("min").innerHTML = "<b>Math.Min(0, 150, 30, 20, -8, -200)
returns min value from set of parameters passed</b> "+ Math.min(0, 150, 30, 20, -8, -200);
document.getElementById("round").innerHTML = "<b>Math.Round(4.4) and Math.ceil(4.4)
round off the value to nearest integer</b> "+Math.round(4.4) +" and " + Math.ceil(4.4);
document.getElementById("const").innerHTML = "<b>Value of E using Math.E</b> "
+Math.E + "<br>" + "<b>Value of PI using Math.PI</b> "+Math.PI + "<br>" +
"<b>Value of SQRT2 using Math.SQRT2</b> "+Math.SQRT2 + "<br>" +
"<b>Value of LN2 using Math.LN2</b> "+Math.LN2 + "<br>" +
"<b>Value of LN10 using Math.LN10</b> "+Math.LN10 + "<br>" +
"<b>Value of LOG2E using Math.LOG2E</b> "+Math.LOG2E + "<br>" +
"<b>Value of LOG10E using Math.LOG10E</b> "+Math.LOG10E + "<br>";
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.65]{js7_1}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% js 8
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate array objects and date object’s predefined methods using javascript.}}
\subsection{\emph{Source Code:Array example}}
\begin{verbatim}
<!DOCTYPE html>
<head><title>Js8</title></head>
<html>
<body>
<p>The toString() method returns an array as a comma separated string.</p>
<p id="demo"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js7\js7_1.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js8\js8_1.html">Next Practical-></a><br>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString();
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js8}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\subsection{\emph{Source Code: Date Object}}
\begin{verbatim}
<html>
<head><title>JS8</title></head><body>
<p>The internal clock in JavaScript starts at midnight January 1, 1970.</p>
<p>The getTime() function returns the number of milliseconds since then:</p>
<p id="demo1"></p>
<p>The getFullYear() method returns the full year of a date:</p><p id="demo2"></p>
<p>The getDay() method returns the weekday as a number:</p><p id="demo3"></p><hr>
<a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js8\js8.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js9\js9.html">Next Practical-></a><br>
<script>var d = new Date();
document.getElementById("demo1").innerHTML = d.getTime();
document.getElementById("demo2").innerHTML = d.getFullYear();
document.getElementById("demo3").innerHTML = d.getDay();
</script></body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.35]{js8_1}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 9
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To implement the concept of event handling and validating registration form.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS9</title></head>
<body>
<form name="myForm" action="demo_form.asp" onsubmit="return
validateForm()" method="post">Name: <input type="text" name="fname">
<input type="submit" value="Submit"></form><hr>
<a href="E:\documents\IM LAB\html\html3-mail
link.html">Sanjampreet Singh</a><br>
<a href="http://sanjamhelping.blogspot.in/p/it-14304-it-
methodologies-lab.html">Department Of Information Technology</a><br>
<a href="E:\documents\IM LAB\html\js8\js8.html"><-Last Practical</a>
<a href="E:\documents\IM LAB\html\js10\js10.html">Next Practical-></a><br>
<script>function validateForm()
{var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "")
{alert("Name must be filled out");
return false;}}</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.35]{js9}
\caption{Output Of HTML page with Js}
\end{figure}
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%% JS 10
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
\newpage
\section{\emph{To demonstrate the use of expression, array, math, string, date functions.}}
\subsection{\emph{Source Code:}}
\begin{verbatim}
<!DOCTYPE html>
<html>
<head><title>JS10</title></head>
<body>
<p>Use of Expressions</p><p id="demo1"></p>
<p>Use of Array Length Function</p><p id="demo2"></p>
<p id="demo3"></p><p>Sorted Array is</p>
<p id="demo4"></p><p>Sorted Array in reverse order</p>
<p id="demo5"></p><p>Following is String</p>
<p id="demo6"></p><p id="demo7"></p>
<p id="demo8"></p><p>The getDay() method returns
the weekday as a number:</p><p id="demo9"></p>
<p>Date.parse(string) returns milliseconds.</p>
<p>You can use the return value to
convert the string to a date object:</p><p id="demo10"></p>
<hr><a href="E:\documents\IM LAB\html\html3-mail link.html">Sanjampreet Singh</a>
<br><a href="http://sanjamhelping.blogspot.in/p/it-14304-
it-methodologies-lab.html">Department Of Information Technology</a>
<br><a href="E:\documents\IM LAB\html\js9\js9.html"><-Last Practical</a>
<script>
var x=10;var y=20;var z= x+y*x/y;var d = new Date();
var str="Guru Nanak Dev Engineering College Ludhiana";
var pos = str.indexOf("Engineering");
var arr1= ["IT", "CSE", "Prod", "ME", "ECE"];
document.getElementById("demo1").innerHTML="<b>Output of z= x+y*x/y is </b>"+z;
document.getElementById("demo2").innerHTML="<b>Array is </b>"+arr1;
document.getElementById("demo3").innerHTML="<b>Length of Array is </b>"+arr1.length;
document.getElementById("demo4").innerHTML="<b>Sorted Array is </b>"+arr1.sort();
document.getElementById("demo5").innerHTML="<b>reverse order </b>"+arr1.reverse();
document.getElementById("demo6").innerHTML=str;
document.getElementById("demo7").innerHTML="<b>word Engineering is at </b>"+pos;
document.getElementById("demo8").innerHTML="<b>Upper Case <br/>"+str.toUpperCase();
document.getElementById("demo9").innerHTML=d.getDay();
var msec = Date.parse("March 21, 2012");
var d = new Date(msec);document.getElementById("demo10").innerHTML = d;
</script>
</body>
</html>
\end{verbatim}
\subsubsection{\emph{Output:}}
\begin{figure}[h]
\centering
\includegraphics[scale=0.5]{js10}
\caption{Output Of HTML page with Js}
\end{figure}
\end{document}
Output:
IMAGES USED {Download them With same name in the Source code folder}
Comments
Post a Comment