Boda Yash Maheshbhai 210310116016

DEPARTMENT
OF
INFORMATION TECHNOLOGY

Laboratory Manual
For Internet of
Things

LUKHDHIRJI ENGINEERING COLLAGE,

MORBI

Practical List

Name of Student:- Boda Yash Maheshbhai.

Enrollment No: - 210310116016

IT Department, L.E. College, Morbi 1

 Boda Yash Maheshbhai 210310116016
Department Name:- Information Technology Batch:- 2021-25

Sr. Name of Practical Page Date of Marks Sign

No. No Submission

1 Introduction to Operating System 3

2 Introduction to Windows Operating System. 8

3 Introduction to Unix Operating System. 13

4 Introduction to Basic HTML. 19

5 Developing static website using HTML (Attach 26

the print of your own website)

6 Introduction to IoT(Internet of Things) 31

7 Study of Arduino Board and its components 35

8 Develop a LED Blinking Project using 40

Arduino (Attach a report of your chosen
project)

EXPERIMENT NO: 1 Date: / /

IT Department, L.E. College, Morbi 2

 Boda Yash Maheshbhai 210310116016
TITLE: Introduction to Operating System.

OBJECTIVE: On completion of this exercise students will be able to ...

➔ Understand the basics of Operating Systems and types of OS.
➔ Understand the various features of OS.

THEORY:

What is an Operating System?

An Operating System (OS) is an interface between a computer user and computer hardware. An
operating system is a software which performs all the basic tasks like file management, memory
management, process management, handling input and output, and controlling peripheral devices
such as disk drives and printers.
Some common Operating Systems include Linux Operating System, Windows Operating System,
VMS, OS/400, AIX, z/OS, etc.

The structure of a Computer system can be visualized as having four basic components:
1. Hardware: Provides basic computing resources - CPU, memory, I/O devices.
2. Operating system: Controls and coordinates use of hardware among various applications
and users.
3. Application programs: Define the ways in which the system resources are used to solve
the computing problems of the users.
4. Users: Anybody who desires work to be done by a computer system. People, machines,
other computers.

Why to use an Operating System?

An operating system is a special program that controls the execution of other programs. OS makes
it convenient for users to interact with computer hardware. For example, all programs you use like
internet browser, Microsoft word, games, etc. run-on Windows OS.

IT Department, L.E. College, Morbi 3

 Boda Yash Maheshbhai 210310116016
The key objectives of an OS are:
● Convenience: It makes a computer more suitable to use.
● Efficiency: It provides the computer system resources efficiently and in easy-to-use
format.
● Ability to develop: It should be built in such a way that it permits the efficient
development, testing and installation of new system functions without interfering with
service.

Operating System Services

● User Interface
● Program execution
● I/O operations
● File System manipulation
● Communication
● Error Detection
● Resource Allocation
● Security and Protection

Functions of an Operating System

Here is a list of some significant functions of an Operating System:
● Memory Management
● Processor Management
● Device Management
● File Management
● Security
● Control over system performance
● Job accounting
● Error detecting aids
● Coordination between other software and users

➢ Memory Management
Memory management refers to management of Primary Memory or Main Memory (RAM). Main
memory is a large array of words or bytes where each word or byte has its own address. Main
memory provides a fast storage that can be accessed directly by the CPU. For a program to be
executed, it must be in the main memory.
An Operating System does the following activities for memory management
−
● Keeps tracks of primary memory, i.e., what part of it are in use by whom, what part are
not in use.
● In multiprogramming, the OS decides which process will get memory when and how
much. ● Allocates the memory when a process requests it to do so.
● De-allocates the memory when a process no longer needs it or has been terminated.

IT Department, L.E. College, Morbi 4

 Boda Yash Maheshbhai 210310116016
➢ Processor Management
In a multiprogramming environment, the OS decides which process gets the processor when and
for how much time. This function is called process scheduling. This functionality of an OS
allows us to run multiple programs simultaneously. For example, when you are browsing the
internet and listening to music and editing a word document altogether.
An Operating System does the following activities for processor management −
● Keeps tracks of processor and status of process. The program responsible for this task is
known as traffic controller.
● Allocates the processor (CPU) to a process.
● De-allocates processor when a process is no longer required.

➔ Device Management
An Operating System manages device communication via their respective drivers. It handles
different connected devices like keyboard, mouse, printers, etc.
It does the following activities for device management −
● Keep track of all devices. Program responsible for this task is known as the I/O controller.
● Decides which process gets the device when and for how much time.
● Allocates the device in an efficient way.
● De-allocates devices.

➔ File Management
A file system is normally organized into directories for easy navigation and usage. These
directories may contain files and other directions.
An Operating System does the following activities for file
management −
● Keeps track of information, location, uses, status etc. The collective facilities are often
known as file systems.
● Decides who gets the resources.
● Allocates the resources.
● De-allocates the resources.

➔ Other Important Activities

Following are some of the important activities that an Operating System performs −
● Security − By means of password and similar other techniques, it prevents unauthorized
access to programs and data.

● Control over system performance − Recording delays between request for a service
and response from the system.
● Job accounting − Keeping track of time and resources used by various jobs and users.
● Error detecting aids − Production of dumps, traces, error messages, and other debugging
and error detecting aids.

IT Department, L.E. College, Morbi 5

 Boda Yash Maheshbhai 210310116016
● Coordination between other software’s and users − Coordination and assignment of
compilers, interpreters, assemblers and other software to the various users of the computer
systems.

NOTE: The state of the windows operating system can be checked using ‘Windows Task
Manager’ as shown below-

Examples of Operating Systems

Some common operating systems that you might come across are:
● Windows OS
This is the most common operating system by Microsoft which everyone who has ever
used a computer is familiar with. Different versions of windows are Windows XP,
Windows 7, Windows 8, Windows 10.
● Linux
Linux is an open-source operating System. Linux is actually everywhere: It’s in your
phones, your thermostats, in your cars, refrigerators, Roku devices, and televisions. It also
runs most of the Internet, all of the world’s top 500 supercomputers, and the world’s stock
exchanges. Various flavors of Linux OS are available including Ubuntu, Mint OS,
Fedora, Kali Linux, Peppermint Linux, etc.
● MacOS
MacOS was developed by Apple which is used in Mac computers. It is the second most
common OS being used after windows.
● Android
Android is an operating system everyone is familiar with. It runs on smartphones. It
provides all the functionalities to a mobile phone like calling, chatting, playing games,
surfing internet, etc. It is developed and maintained by Google.
● iOS
iOS is a mobile operating system created and developed by Apple Inc. exclusively for its
hardware. It is the operating system that presently powers many of the company's mobile
devices, including the iPhone, and iPod Touch.

EXERCISES:
1. What is an Operating System? Describe the various functions of an operating system in
brief.

IT Department, L.E. College, Morbi 6

 Boda Yash Maheshbhai 210310116016
2. Explain the key purpose for using an Operating System.

3. What do you mean by an Operating System process? What activities does an OS perform
for process management?
4. What is the application software and System Software?

QUIZ:
1. List the various operating systems that you have used.

REFERENCES:

1. https://www.tutorialspoint.com/operating_system/os_overview.htm

2. https://www.guru99.com/operating-system-tutorial.html

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation
4 2 4 10

Date: Signature:

IT Department, L.E. College, Morbi 7

 Boda Yash Maheshbhai 210310116016

EXPERIMENT NO: 2 Date: / /

TITLE: Introduction to Windows Operating System.

OBJECTIVE: On completion of this exercise students will be able to ...

➔ Understand Windows OS
➔ Understand the basic commands on windows

THEORY:
What is Windows OS?
Windows OS, computer operating system (OS) developed by Microsoft Corporation to run
personal computers (PCs). Windows featured the first graphical user interface (GUI) for
operating systems. Approximately 90 percent of PCs run some version of Windows. The various
versions of Windows are Windows XP, Windows 7, Windows 8, Windows 10, etc.

Command shell overview

The Command shell was the first shell built into Windows to automate routine tasks, like user
account management or nightly backups, with batch (.bat) files. With Windows Script Host you
could run more sophisticated scripts in the Command shell.

Windows has two command shells: The Command shell and PowerShell. Each shell is a software
program that provides direct communication between you and the operating system or
application, providing an environment to automate IT operations.

You can run windows command prompt (cmd) by searching cmd in run menu (Windows + R) as
shown below-

IT Department, L.E. College, Morbi 8

 Boda Yash Maheshbhai 210310116016

Common Shell Commands ●

Cd
Changes the current directory to the specified directory.
Syntax - cd <path_to_new_location>
Example - cd C:\Users\Admin\Documents
● Chdir
It is the same as cd.
Syntax - chdir <path_to_new_location>
Example - chdir C:\Users\Admin\Documents
● Cls
Clears the Command Prompt window. Syntax
- cls
● Copy
Copies one or more files from one location to another. Syntax
- cls
Example - copy memo.doc letter.doc
● Comp
Compares the contents of two files or sets of files byte-by-byte. If used without
parameters, comp prompts you to enter the files to compare. Syntax - comp [<Data1>]
[<Data2>]
Example - comp c:\reports \\sales\backup\april
● Date
Displays or sets the system date. If used without parameters, date displays the current
system date setting and prompts you to enter a new date.
Syntax - date [/t | <Month-Day-Year>] Example
- date /t
The current date is: Mon 04/02/2007

IT Department, L.E. College, Morbi 9

 Boda Yash Maheshbhai 210310116016
● Del
Deletes one or more files. This command is the same as the erase command. Syntax -
del <filenames>
Example - del \work
● Dir
Displays a list of a directory's files and subdirectories in the current working directory.
Syntax - dir
● Echo
Displays messages or turns on or off the command echoing feature. If used without
parameters, echo displays the current echo setting. Syntax - echo [<Message>]
Example - echo “hello”
hello
● Exit
Exits the Cmd.exe program (the command interpreter).
Syntax - exit [<exitCode>]
Example - exit ●
Find
Searches for a string of text in a file or files, and displays lines of text that contain the
specified string.
Syntax - find [options] "<string_to_find>" <path/name of the file>
Example - find "Pencil Sharpener" pencil.txt
● Findstr
Searches for patterns of text in files.
Syntax - findstr [options] <Strings> <path/name of the file> Example
- findstr Windows proposal.txt
● Format
Formats a disk to accept Windows files.
Syntax - format <Volume> [options] Example
- format a:
● Ftp
Transfers files to and from a computer running a File Transfer Protocol (ftp) server
service. Syntax - ftp [-options] [-s:<FileName>] [<Host>]
● Help
Provides online information about system commands (that is, non-network commands). If
used without parameters, help lists and briefly describes every system command.
Syntax - help [<Command>] Example
- help ftp
● Ipconfig
Displays all current TCP/IP network configuration values and refreshes Dynamic Host
Configuration Protocol (DHCP) and Domain Name System (DNS) settings.
Syntax - ipconfig [options] Example

IT Department, L.E. College, Morbi 10

 Boda Yash Maheshbhai 210310116016
- ipconfig
● Mkdir
Creates a directory or subdirectory. Same as md command.
Syntax - mkdir <Path>
Example - mkdir Directory1
● Move
Moves one or more files from one directory to another directory.
Syntax - move [options] [<Source>] [<Target>]
Example - move \data\*.doc \myfiles\reports\
● More
Displays one screen of output at a time. Syntax
- more [/options] [<Files>]
Example - more < clients.new
type clients.new | more
● Netsh
Netsh is a command-line scripting utility that allows you to, either locally or remotely,
display or modify the network configuration of a currently running computer. Syntax - netsh ●
Netstat
Displays active TCP connections, ports on which the computer is listening, Ethernet
statistics, the IP routing table, IPv4 statistics (for the IP, ICMP, TCP, and UDP protocols),
and IPv6 statistics (for the IPv6, ICMPv6, TCP over IPv6, and UDP over IPv6 protocols).
Used without parameters, netstat displays active TCP connections.
Syntax - netstat [-options] [-p <Protocol>] [<Interval>]
Example - to display both the Ethernet statistics and the statistics for all protocols, type:
netstat -e -s
● Path
Sets the command path in the PATH environment variable (the set of directories used to
search for executable files). If used without parameters, path displays the current
command path.
Syntax - path [<Path>]
Example - path c:\user\taxes;b:\user\invest;b:\bin
● Ping
The ping command verifies IP-level connectivity to another TCP/IP computer by sending
Internet Control Message Protocol (ICMP) echo Request messages.
Syntax - ping [options] [<Hostlist>] [/w <timeout>] [<Srcaddr>] <TargetName> Example
- ping /a www.google.com
● Rd
Deletes a directory.
Syntax - rd <Path> [/options] Example
- rd test
● Rename

IT Department, L.E. College, Morbi 11

 Boda Yash Maheshbhai 210310116016
Renames files or directories.
Syntax - rename [<Path>]<FileName1> <FileName2> Example
- rename chap10.txt ch10.txt
● Rmdir
Deletes a directory. Same as rd command
Syntax - rmdir <Path> [/options]
Example - rmdir test
● Telnet
Communicates with a computer running the telnet Server service.
Syntax - telnet [/a] [/e <EscapeChar>] [/f <FileName>] [/l <UserName>] [/t {vt100 | vt52
| ansi | vtnt}] [<Host> [<Port>]] [/?]
● Tree
Displays the directory structure of a path or of the disk in a drive graphically.
Syntax - tree [<Drive>:][<Path>] [/f] [/a] Example - tree \
● Xcopy
Copies files and directories, including subdirectories.
Syntax - xcopy <Source> [<Destination>] [/options] [/exclude:FileName1[+[FileName2]]
[+[FileName3]] [{/y | /-y}] [/z] [/b] [/j]
Example - xcopy a: b:

EXERCISES:
1. Explain the following windows commands:
cd, dir, chdir, cls, copy, del, delete, fdisk, find, findstr, format, ftp, ipconfig, mkdir, more,
move, net, netsh, netstat, ping, rd, remove, rmdir, telnet, tree, xcopy.

2. Demonstrate the following in windows command prompt-

a. Create a new directory
b. Display current date and time
c. List all the items in current directory

QUIZ:
1. What command should be used to create a new directory in windows?

2. How to list all the directories present in a given directory?

IT Department, L.E. College, Morbi 12

 Boda Yash Maheshbhai 210310116016

REFERENCES:
1. https://helpdeskgeek.com/help-desk/21-cmd-commands-all-windows-users-should-know/
2. https://docs.microsoft.com/en-us/windows-server/administration/windows- commands/windows-
commands

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation

4 2 4 10

Date: Signature:

EXPERIMENT NO: 3 Date: / /

TITLE: Introduction to Unix Operating System.

OBJECTIVE: On completion of this exercise students will be able to ... ➔

Understand about Unix OS. ➔ Understand the various basic Unix
Commands.

THEORY:
What is Unix?
● Unix is an OS for Programmers as shell (the command interpreter) that provides the
programming facility.
● It provides an in-built security mechanism through the username and password, combined
with the access rights associated with files.

The main concept that unites all the versions of Unix is the following four basics −

IT Department, L.E. College, Morbi 13

 Boda Yash Maheshbhai 210310116016
● Kernel: The kernel is the heart of the operating system. It interacts with the hardware and
most of the tasks like memory management, task scheduling and file management.
● Shell: The shell is the utility that processes your requests. When you type in a command at
your terminal, the shell interprets the command and calls the program that you want. The
shell uses standard syntax for all commands. C Shell, Bourne Shell and Korn Shell are the
most famous shells which are available with most of the Unix variants.
● Commands and Utilities: There are various commands and utilities which you can make
use of in your day-to-day activities. cp, mv, cat and grep, etc. are few examples of
commands and utilities. There are over 250 standard commands plus numerous others
provided through 3 rd party software. All the commands come along with various options.
● Files and Directories: All the data of Unix is organized into files. All files are then
organized into directories. These directories are further organized into a tree-like structure
called the filesystem.

Features of Unix Operating System

● Multi-user and Multitasking
● Everything is a file
● Configuration data stored in text
● Small, single purpose programs
● Ability to chain programs together to perform complex task
● Facility of background processing

Basic Unix Commands ● echo

It displays a line text. Echo the given string or strings to standard output.
Syntax: echo [OPTION]... [STRING]...

● passwd
The passwd command is used to change passwords for user accounts. A normal user may
only change the password for his or her own account, while the superuser may change the
password for any account.
Syntax: passwd [options] [LOGIN]

IT Department, L.E. College, Morbi 14

 Boda Yash Maheshbhai 210310116016

● uname
Print certain system information. Syntax:
uname [OPTION]...
● who
who command prints information about all users who are currently logged in.?
Syntax: who [OPTION]... [ FILE ] [ am i ]

● find
To search the entire file-system to locate files and directories according to the specific
search criteria. Other than searching files in can also perform actions(executing
commands) on searched files. Syntax: find [option] [action]

● man
To view manual pages for Unix commands. Syntax: man
<command_name>

● clear
To clear the terminal screen.
Syntax: clear

● history show history of previous commands.

Syntax: history

● date show current date and time

Syntax: date

● sleep wait for a given number of seconds. Syntax: sleep <seconds_to_wait>

IT Department, L.E. College, Morbi 15

 Boda Yash Maheshbhai 210310116016
● pwd
Display the current working directory Syntax:
pwd

● ls list files and directories in the specified directory or the current working directory.
Syntax:
ls [options] [path]

● cd
Change the current working directory to the specified path. Syntax:
cd [path]

● cp
copy files from source to destination. Syntax:
cp [source/filename] [destination]

● rm
remove files and directories.
Syntax: rm <name>

● mv
rename or move files and directories to another location.
Syntax: mv <source path> <destination path>

● chmod
change file/directory access permissions. (r-read; w-write; x-execute)
Syntax: chmod [OPTIONS] MODE FILE…
(remove execute permission for all users)

● cat concatenate files and show contents to the standard output.

Syntax: cat filename1 [filename2...]

IT Department, L.E. College, Morbi 16

 Boda Yash Maheshbhai 210310116016

● mkdir
make a new directory.
Syntax: mkdir <directory name>

● rmdir
remove directories
Syntax: rmdir <directory name>

● ifconfig show and set IP addresses (found almost everywhere)

(same as ipconfig in windows)

IT Department, L.E. College, Morbi 17

 Boda Yash Maheshbhai 210310116016

Syntax: ipconfig

● netstat
show network stats and routing information.
Syntax: netstat

IT Department, L.E. College, Morbi 18

 Boda Yash Maheshbhai 210310116016

IT Department, L.E. College, Morbi 19

 Boda Yash Maheshbhai 210310116016
EXERCISES:
1. Explain the following Unix commands with example:
cd, mkdir, rmdir, cp, mv, date, history, help, man, cat, ls, grep.

2. Describe the following -

a. Unix Shell
b. Unix Kernel

3. Enlist the various features of Unix.

QUIZ:
1. In Unix, how would you check if a given file exists in the current directory?

2. Which command is used to change access permissions for a file in Unix?

REFERENCES:
1. https://www.unixtutorial.org/basic-unix-commands
2. https://www.tutorialspoint.com/unix/index.htm
3. https://www.geeksforgeeks.org/introduction-to-unix-system/

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation

4 2 4 10

Date: Signature :

IT Department, L.E. College, Morbi 20

 Boda Yash Maheshbhai 210310116016

EXPERIMENT NO: 4 Date: / /

TITLE: Introduction to Basic HTML.

OBJECTIVE: On completion of this exercise students will be able to ...

➔ Understand what HTML is and how it works. ➔ Understand
the various HTML tags.

THEORY:
Introduction to HTML
HTML stands for Hypertext Markup Language, and it is the most widely used language to write
Web Pages.
● Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
● As its name suggests, HTML is a Markup Language which means you use HTML to
simply "mark-up" a text document with tags that tell a Web browser how to structure it to
display.
● HTML describes the structure of a Web page
● HTML consists of a series of elements
● HTML elements tell the browser how to display the content
● HTML elements are represented by tags
● HTML tags label pieces of content such as "heading", "paragraph", "table", and so on
● Browsers do not display the HTML tags, but use them to render the content of the page

Features of HTML
● It is easy to learn and easy to use.
● It is platform independent.
● Images, video and audio can be added to a web page.
● Hypertext can be added to text.
● It is a markup language.

Why learns HTML?

● It is a simple markup language. Its implementation is easy.
● It is used to create a website.
● Helps in developing fundamentals about web programming. ● Boost professional career.

Advantages
● HTML is used to build websites.
● It is supported by all browsers.

IT Department, L.E. College, Morbi 21

 Boda Yash Maheshbhai 210310116016
● It can be integrated with other languages like CSS, JavaScript etc.

Disadvantages
● HTML can create only static web pages so for dynamic web pages other languages have
to be used.
● Large amount of code has to be written to create a simple web page. ● Security feature is
not good.

Elements and Tag

HTML uses predefined tags and elements which tells the browser about content display property.
If a tag is not closed then the browser applies that effect till the end of page.

HTML page structure

The Basic structure of HTML page is given below. It contains some elements like head, title,
body, … etc. These elements are used to build the blocks of web pages.

The basic HTML tags are described below-

Tag Description

<DOCTYPE! html> This tag defines the document type and HTML version.
<html>
This is called HTML root element and used to wrap all the
code.
<head> Head tag contains metadata, title, page CSS etc. All the
HTML elements that can be used inside <head> are:
- <style>
- <title>
- <base>
- <noscript>
- <script>
- <meta>

IT Department, L.E. College, Morbi 22

 Boda Yash Maheshbhai 210310116016
<title>
The <title> tag is used inside the <head> tag to mention the
document title.
The tag begins with <title> and ends with </title>
<body>
Body tag is used to enclose all the data which a web page
has from texts to links. All of the content that you see
rendered in the browser is contained within this element.

<h1> This tag represents the heading. There are different types of

headings- <h1>, <h2>, <h3>, <h4>, <h5> and <h6> in

decreasing order of content size.

<p> This tag represents a paragraph. They start with the <p> tag
and ends with <p>.

Basic HTML Example

HTML page can be created using any text editor (notepad). Then save that file using ‘.htm’ or
‘.html’ extension and open that file in the browser. It will get the HTML page response.

<!DOCTYPE html> <html>

<head>
<title>This is document title</title>
</head> <body>
<h1>This is a heading</h1>
<p>Document content goes here .... </p>
</body>
</html>

Output

IT Department, L.E. College, Morbi 23

 Boda Yash Maheshbhai 210310116016

HTML Headings Example

<!DOCTYPE html> <html>

<head>
<title>Document title</title>
</head> <body>
<h1>This is a heading 1</h1>
<h2>This is a heading 2</h2>
<h3>This is a heading 3</h3>
<h4>This is a heading 4</h4>
<h5>This is a heading 5</h5>
<h6>This is a heading 6</h6>
</body>
</html>

Output

Other common HTML Tags ●

Line Break
The <br /> tag inserts a line break. The text following <br /> are displayed in a new line.
It is usually used within paragraph tag (<p></p>).
<br /> tag is self-closing or empty tag, i.e., it does not have any body. Example:
<p>Hello<br />You delivered your assignment on time.<br />Thanks<br />Mahnaz</p>

IT Department, L.E. College, Morbi 24

 Boda Yash Maheshbhai 210310116016

● Horizontal Break
Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and breaks the
line accordingly.
Like the <br /> tag, it also does not have any body. Example:
<p>This is paragraph one and should be on top</p> <hr />
<p>This is paragraph two and should be at bottom</p>

● Formatting Tags
These tags are used to format the text in a paragraph. ○
Bold Text
Anything that appears within <b>...</b> element, is displayed in bold. Example:
<p>The following word uses a <b>bold</b> typeface.</p>

○ Italic Text
Anything that appears within <i>...</i> element is displayed in italicized.
Example: <p>The following word uses a <i>italicized</i> typeface.</p>

○ Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline
Example:
<p>The following word uses a <u>underlined</u> typeface.</p>

○ Striked Text
Anything that appears within <strike>...</strike> element is displayed with
strikethrough, which is a thin line through the text Example:
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

○ Monospaced Font
The content of a <tt>...</tt> element is written in monospaced font. Most of the
fonts are known as variable-width fonts because different letters are of different

IT Department, L.E. College, Morbi 25

 Boda Yash Maheshbhai 210310116016
widths (for example, the letter 'm' is wider than the letter 'i'). In a monospaced
font, however, each letter has the same width.
Example:
<p>The following word uses a <tt>monospaced</tt> typeface.</p>

○ Superscript Text
The content of a ^... element is written in superscript; the font size
used is the same size as the characters surrounding it but is displayed half a
character's height above the other characters.
Example:
<p>The following word uses a ^superscript typeface.</p>

○ Subscript Text
The content of a _... element is written in subscript; the font size used
is the same as the characters surrounding it, but is displayed half a character's
height beneath the other characters.
Example:
<p>The following word uses a _subscript typeface.</p>

○ Inserted Text
Anything that appears within <ins>...</ins> element is displayed as inserted text.
Example:
<p>I want to drink <del>cola</del> <ins>wine</ins></p>

○ Deleted Text
Anything that appears within <del>...</del> element, is displayed as deleted text.
Example:
<p>I want to drink <del>cola</del> <ins>wine</ins></p>

○ Large Text
The content of the <big>...</big> element is displayed one font size larger than
the rest of the text surrounding it.
Example:
<p>The following word uses a <big>big</big> typeface.</p>

○ Small Text

IT Department, L.E. College, Morbi 26

 Boda Yash Maheshbhai 210310116016
The content of the <small>...</small> element is displayed one font size smaller
than the rest of the text surrounding it Example:
<p>The following word uses a <small>small</small> typeface.</p>

EXERCISES:
1. Explain any 5 basic HTML tags with their syntax and usage.
2. Enlist and explain the various text formatting tags in HTML with examples.
3. Give examples of empty tags in HTML.

QUIZ:
1. Where is the content in <title> tag displayed when a html file is opened in a web browser?

2. Name one HTML tag that does not require a closing tag.

REFERENCES:
1. https://www.geeksforgeeks.org/html-introduction/
2. https://www.tutorialspoint.com/html/index.htm

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation

4 2 4 10

IT Department, L.E. College, Morbi 27

 Boda Yash Maheshbhai 210310116016

Date: Signature:

EXPERIMENT NO: 5 Date: / /

TITLE: Developing static website using HTML.

OBJECTIVE: On completion of this exercise students will be able to ... ➔ Develop

a static website on their own.

THEORY:
What is a Static Website?
A static website or a web page is a collection of items like text, images and multimedia elements
containing marked up content created with Hyper Text Markup Language (HTML) and stored in
a web server. Wikipedia is an example of a static website.
A static website does not interact with the user. It just displays information for the reader to read.

Basics of Static Website

1. Features of a Static Website
● Static sites are mainly used to distribute a fixed information from the web server to the
browser running on a client computer.
● All visitors will see exactly the same content each time when they load the page.
● Generally static sites are created with Hyper Text Markup Language (HTML) but it is not
necessary that all HTML pages are static. For example, a JavaScript code embedded in an
HTML page will still show as HTML page with .html extension when opened in a
browser.
● When a visitor enters a URL in the web browser running on a computer, the browser
sends an HTTP request to the server. The web server simply sends an HTTP response to
indicate the availability of the requested URL. The response will be completed by sending
the content of the requested URL to the client. In general web servers does not perform
any code processing in a static web page. Pictorial representation of a browser displaying
a static website content is shown in the below picture.

IT Department, L.E. College, Morbi 28

 Boda Yash Maheshbhai 210310116016

● Browser interprets the marked-up content and displays it in the browser window to give a
look and feel to the website. All web browsers have their own way of interpreting HTML
markups. This is the reason the same website looks different on Chrome, Firefox, Safari,
Edge and Internet Explorer. Web designers focus on developing sites that look similar on
all browsers and platforms.
● Static sites are more appropriate for distributing fixed content that does not change with
time or not need frequent update.
● Generally, site owners create and update the content of static sites by themselves.

2. Creating a Simple Static Web Page

● Open any word processor, in this example we explain with a Notepad for Windows
operating system.
● Copy and paste the below code in the Notepad.
● Save the file as staticpage.html on your local desktop.
● Open the file using any browser like Chrome or Firefox. (Double clicking on the file will
open it in the default web browser).
Creating a Static Website: <html>
<head>
<title>Static Page Example</title>
</head>
<body bgcolor="#f1f1f1" text="Red">
<h1>Static Website Demo</h1> Here is
the content of your site.
</body>
</html>
● Save the file as staticpage.html on your local desktop.
● Open the file using any browser like Chrome or Firefox. (Double clicking on the file will
open it in the default web browser).

3. Look and Feel of the Webpage

IT Department, L.E. College, Morbi 29

 Boda Yash Maheshbhai 210310116016
The HTML file opened with Chrome will look like as shown in the picture below.

Notice the content of the original file and the look in the browser, all the HTML tags are converted
in the browser accordingly and only the content is displayed excluding the spaces. For example, the
content in between the h1 tags is interpreted as a heading during the display in the browser window.
● The same content will be loaded every time you open the file since there is no interactive
processing neither at server nor at browser side.
● For a real case on the internet, the HTML file will be located on a web server with a page
name on the domain like “www.domain-name.com/staticpage.html”. The web page will
open in the browser window when a visitor enters this URL directly on the browser
address bar or when this URL is redirected from a search result.

4. Static Web Page Details

A static webpage contains all the required information to be displayed on that page. Let us take
an example of a simple blog page with the name “blog-post.html” as shown below. When this
page is a static page then all content relevant to header, main content area, footer and sidebar are
available within the “blog-post.html” page. You can right click and view the source of the page to
find all relevant details.

IT Department, L.E. College, Morbi 30

 Boda Yash Maheshbhai 210310116016
5. Creating Live Static Sites
● The easiest way to create a live static webpage is to create a HTML page as explained
above. Then upload the HTML page and relevant linked resources like images and
stylesheets to the web server using file transfer protocol.
● There are also pre-compiled frontend frameworks like Bootstrap that will help you to
create static pages quickly by reusing built-in blocks. You can view a demo static
Bootstrap site with some dynamic scripts for form data processing.
● The last option is to use website builder tools like Weebly, Wix and Yola. All of these
service providers offer free service with limited features and paid service with complete
features.
Most of these tools offer a combination of static and dynamic pages for building a complete
website with a larger number of pages. There are advanced content management systems like
WordPress, Joomla and Drupal for building more sophisticated dynamic sites.
● Wikipedia is an example of a live static website.

6. Advantages and Disadvantages of Static Website

● Static websites have many advantages in this mobile world:
0 Search engines like Google like static websites as they load very fast. Google also
pushes site owners to have Accelerated Mobile Pages (AMP), which is static in
nature, equivalent to the dynamic pages on desktop.
○ In order to improve page loading speed, site owners use caching to convert dynamic
pages into static pages.
○ The cost of creating and hosting static websites is multifold lower than managing
dynamic sites.
● Nowadays you simply can’t have a standalone static site with fixed content.
0 You need server-side scripting for processing emails and collecting details using
contact forms.
○ Offering customized content to individual users is not possible with static websites.
In order to run a membership or subscription site, you first need to collect, process
and store data in a database. You can’t manage these things as static sites will not
have separate databases.
○ Similarly, ecommerce sites need to offer product variations and collect payments
from customers which you can’t do with static sites.

IT Department, L.E. College, Morbi 31

 Boda Yash Maheshbhai 210310116016
EXERCISES:
1. Write HTML code to make a web page as follows-

2. Create a static website about yourself, describing your interests, achievements and other
details.

QUIZ:
1. List some advantages of static websites.

2. List the features which can be kept in a static website.

REFERENCES:
1. https://www.webnots.com/basics-of-a-static-website/

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation

4 2 4 10

IT Department, L.E. College, Morbi 32

 Boda Yash Maheshbhai 210310116016

Date: Signature:

EXPERIMENT NO: 6 Date: / /

TITLE: Introduction to IoT

OBJECTIVE: On completion of this exercise students will be able to ... ➔ Understand

what IoT
➔ How IoT works and its application

THEORY:
What is IOT?

IOT stands for Internet of Things. In simple words, this is the concept of basically connecting
any physical device with an on and off switch to the Internet.

This includes everything from cell phones, washing machines, Air conditioners, wearable devices
etc. As mentioned, anything that has on and off switch then chances are it can be part of IOT. The

IT Department, L.E. College, Morbi 33

 Boda Yash Maheshbhai 210310116016
IOT is a giant network of connected ‘things. The relationship will be between people- people,
people-things and things-things.

“The Internet of Things is simply a network of internet connected objects able to collect and
exchange data. The word Internet of Things has two main parts; Internet being the backbone of
connectivity, and the Things meaning object/device. ”

How does IOT work?

A complete IOT system integrate four distinct components:

● Sensor/Device
● Connectivity
● Data Processing
● User Interface

➢ Sensor/Device
Sensor and device are a key component that helps you to collect live data from the surrounding
environment. All this data may have various levels of complexity.
A device may have various types of sensors which perform multiple tasks apart from sensing.
Example, a mobile phone is a device which has multiple sensors like GPS, camera etc.

➢ Connectivity
All collected data is sent to cloud infrastructure, but it needs a medium for transport.
So, this sensor should be connected to cloud using various medium of communication like
Bluetooth, Wi-Fi, WAN etc.

➢ Data Processing
Once data is collected, and it gets to the cloud, the software performs processing on gathered
data.

➢ User Interface
The information needs to be available to the end user in some way which can be achieved by
triggering alarms on their phone or sending them notification through email or text message.

Difference between IOT and Embedded System

IOT is a big model that tries to integrate multiple things together, while Embedded systems are
part of the overall IOT. In one sentence, the embedded system is a subset of IOT.

An Embedded System in simple words is a combination of customized hardware and customized

software. Customized hardware is the personalized design to suit your specific system with a
specific set of requirement and customized software is the software piece that gives life to your
hardware.

IT Department, L.E. College, Morbi 34

 Boda Yash Maheshbhai 210310116016

In short: IOT = ET + NT + IT

At the simplest level, IOT is a combination of Embedded Technology (ET), Network Technology
(NT) and Information Technology (IT).

Example:
Let’s imagine you have a "Smart air conditioning unit" in your home that is connected to the
internet. (This is a "thing" connected to the internet) Now, imagine it's a hot summer day and you
have left for home from your work. You would like your home to be cool enough by the time you
enter it. So, when you leave your office, you can remotely switch ON the air conditioning unit of
your home using your mobile (another "Thing" connected to the internet). Technically, with the
internet, you can control your AC system from any part of the world as long as both the AC and
your mobile are connected using the "Internet".
● Your smart A/C will have an embedded system that collects temperature data from a
sensor and send it to the cloud (internet) using a WIFI module. This is your Embedded
System.
● The WIFI network and Cloud constitute your Network Technology.
● Your mobile will have an APP running in it that will receive the data. Depending on the
received data, the app (in turn the mobile) will switch ON the A/C depending on your
GPS coordinate. The mobile app infrastructure is a simple Information Technology.

Applications Of IOT:

Application Type Description

Smart Thermometers Helps you to save resources on heating bills by knowing your
usage patterns.

IT Department, L.E. College, Morbi 35

 Connected
Boda cars
Yash Maheshbhai IOT helps automobile companies handle billing, parking,
210310116016
insurance, and other related stuff automatically.

Activity Trackers Helps you to capture heart rate patterns, calorie expenditure,
activity levels, and skin temperature on your wrist.

Smart Outlets Remotely turn any device on or off. It also allows you to track
a device's energy level and get custom notifications directly
into your smartphone.

Parking Sensors IOT technology helps users to identify the real-time

availability of parking spaces on their phone.

Connect Health The concept of a connected health care system facilitates real-
time health monitoring and patient care. It helps in improved
medical decision-making based on patient data.

Smart City Smart cities offer all types of use cases which include traffic
management to water distribution, waste management, etc.

Smart Health Smart homes encapsulate the connectivity inside your homes.
It includes smoke detectors, home appliances, light bulbs,
windows, door locks, etc.

Smart supply chain Helps you in real time tracking of goods while they are on the
road, or getting suppliers to exchange inventory information.

EXERCISES:
1. What is IoT?
2. Differentiate between IoT and Embedded System.
3. Explain one application of IoT with all its components.

QUIZ:
1. List 5 real life applications of IoT.

REFERENCES:

IT Department, L.E. College, Morbi 36

 Boda Yash Maheshbhai 210310116016
1. https://www.guru99.com/iot-tutorial.html#4

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation
4 2 4 10

Date: Signature:

EXPERIMENT NO: 7 Date: / /

IT Department, L.E. College, Morbi 37

 Boda Yash Maheshbhai 210310116016
TITLE: Study of Arduino Board and its components.

OBJECTIVE: On completion of this exercise students will be able to ...

➔ Understand what Arduino is.
➔ Understand how to use an Arduino board.

THEORY:
What is Arduino?
Arduino is an open-source electronics platform based on easy-to-use hardware and software. Arduino
boards are able to read inputs - light on a sensor, a finger on a button, or a Twitter message - and turn it
into an output - activating a motor, turning on an LED, publishing something online.

Why use Arduino?

Arduino has been used in thousands of different projects and applications. The Arduino software is easy-
touse for beginners, yet flexible enough for advanced users. It runs on Mac, Windows, and Linux. Arduino
is a key tool to learn new things.
Arduino is being used in various domains for various purposes -
- Teachers and students use it to build low-cost scientific instruments, to prove chemistry and physics
principles, or to get started with programming and robotics.
- Designers and architects build interactive prototypes, musicians and artists use it for installations
and to experiment with new musical instruments.
- Makers, of course, use it to build many of the projects exhibited at the Maker Faire.
- Anyone - children, hobbyists, artists, programmers - can start tinkering just following the step-
bystep instructions of a kit, or sharing ideas online with other members of the Arduino community.

Advantages of Arduino
● Inexpensive
● Cross-platform
● Simple, clear programming environment
● Open source and extensible software
● Open source and extensible hardware

Arduino UNO
Here, we will study the Arduino UNO board because it is the most popular board in the Arduino board
family. In addition, it is the best board to get started with electronics and coding. Some boards look a bit
different from the one given below, but most Arduinos have a majority of these components in common.

IT Department, L.E. College, Morbi 38

Boda Yash Maheshbhai 210310116016

Fig: Arduino UNO Board

Power USB

Arduino boards can be powered by using the USB cable from your computer.
All you need to do is connect the USB cable to the USB connection (1).

Power (Barrel Jack)

Arduino boards can be powered directly from the AC mains power supply by
connecting it to the Barrel Jack (2).

Voltage Regulator

The function of the voltage regulator is to control the voltage given to the Arduino
board and stabilize the DC voltages used by the processor and other elements.

Crystal Oscillator

The crystal oscillator helps Arduino in dealing with time issues. How does
Arduino calculate time? The answer is, by using the crystal oscillator. The number
printed on top of the Arduino crystal is 16.000H9H. It tells us that the frequency
is 16,000,000 Hertz or 16 MHz

Arduino Reset

You can reset your Arduino board, i.e., start your program from the beginning.
You can reset the UNO board in two ways. First, by using the reset button (17) on
the board. Second, you can connect an external reset button to the Arduino pin
labelled RESET (5).
37 IT Department, L.E. College, Morbi
Boda Yash Maheshbhai 210310116016

Pins (3.3, 5, GND, Vin)

· 3.3V (6) − Supply 3.3 output volt

· 5V (7) − Supply 5 output volt

· Most of the components used with the Arduino board works fine with
3.3 volt and 5 volt.
· GND (8)(Ground) − There are several GND pins on the Arduino, any of
which can be used to ground your circuit.
· Vin (9) − This pin also can be used to power the Arduino board from an
external power source, like AC mains power supply.

Analog pins

The Arduino UNO board has six analog input pins A0 through A5. These pins
can read the signal from an analog sensor like the humidity sensor or
temperature sensor and convert it into a digital value that can be read by the
microprocessor.

Main microcontroller

Each Arduino board has its own microcontroller (11). You can assume it as the
brain of your board. The main IC (integrated circuit) on the Arduino is slightly
different from board to board. The microcontrollers are usually of the ATMEL
Company. You must know what IC your board has before loading up a new
program from the Arduino IDE. This information is available on the top of the
IC. For more details about the IC construction and functions, you can refer to
the data sheet.

40 IT Department, L.E. College, Morbi

ICSP pin

Mostly, ICSP (12) is an AVR, a tiny programming header for the Arduino
consisting of MOSI, MISO, SCK, RESET, VCC, and GND. It is often referred
to as an SPI (Serial Peripheral Interface), which could be considered as an
"expansion" of the output. Actually, you are slaving the output device to the
master of the SPI bus.
Boda Yash Maheshbhai 210310116016

Power LED indicator

This LED should light up when you plug your Arduino into a power source to
indicate that your board is powered up correctly. If this light does not turn on,
then there is something wrong with the connection.

TX and RX LEDs

On your board, you will find two labels: TX (transmit) and RX (receive). They
appear in two places on the Arduino UNO board. First, at the digital pins 0 and
1, to indicate the pins responsible for serial communication. Second, the TX and
RX led (13). The TX led flashes with different speed while sending the serial
data. The speed of flashing depends on the baud rate used by the board.
RX flashes during the receiving process.

Digital I/O

The Arduino UNO board has 14 digital I/O pins (15) (of which 6 provide PWM
(Pulse Width Modulation) output. These pins can be configured to work as
input digital pins to read logic values (0 or 1) or as digital output pins to drive
different modules like LEDs, relays, etc. The pins labeled “~” can be used to
generate PWM.

AREF

AREF stands for Analog Reference. It is sometimes used to set an external

reference voltage (between 0 and 5 Volts) as the upper limit for the analog input
pins.

EXERCISES:
1. What is Arduino? What is its purpose?

2. What are the advantages of Arduino?

3. List some applications which can be developed using Arduino.

QUIZ:
1. How many types of Arduinos do we have?

42 IT Department, L.E. College, Morbi

Boda Yash Maheshbhai 210310116016

REFERENCES:
1. https://www.arduino.cc/

EVALUATION:

Observation and Timely Completion Quiz and Viva Total

Implementation

4 2 4 10

Date: Signature :

43 IT Department, L.E. College, Morbi

Boda Yash Maheshbhai 210310116016

EXPERIMENT NO: 8 Date: / /

TITLE: Developing LED blinking project using Arduino. [Attach a report of your chosen
project]

OBJECTIVE: On completion of this exercise students will be able to ... ➔ Develop

an IoT project using Arduino.

THEORY:
Components Required
● 1 × Breadboard
● 1 × Arduino UNO R3
● 1 × LED
● 1 × 330Ω Resistor ● 2 × Jumper

Procedure
Follow the circuit diagram and hook up the components on the breadboard as shown in the
image given below.

44 IT Department, L.E. College, Morbi

Boda Yash Maheshbhai 210310116016

Note: To find out the polarity of an LED, look at it closely. The shorter of the two legs, towards
the flat edge of the bulb indicates the negative terminal.

Components like resistors need to have their terminals bent into 90° angles in order to fit the
breadboard sockets properly. You can also cut the terminals shorter.

Open the Arduino IDE software on your computer. Coding in the Arduino language will control
your circuit. Open the new sketch File by clicking New.

Program:
*
Blink

45 IT Department, L.E. College, Morbi

Boda Yash Maheshbhai 210310116016

Turns on an LED on for one second, then off for one second, repeatedly. */

// the setup function runs once when you press reset or power the board
void setup() { // initialize digital pin 13 as an output. pin Mode(2,
OUTPUT);
}
// the loop function runs over and over again forever void
loop() {
digitalWrite(2, HIGH); // turn the LED on (HIGH is the voltage level)
delay(1000); // wait for a second digitalWrite(2, LOW); // turn the LED
off by making the voltage LOW delay(1000); // wait for a second }

Code to Note pinMode(2, OUTPUT) − Before you can use one of Arduino’s pins, you need to
tell Arduino Uno R3 whether it is an INPUT or OUTPUT. We use a builtin “function” called
pinMode() to do this. digitalWrite(2, HIGH) − When you are using a pin as an OUTPUT, you
can command it to be HIGH (output 5 volts), or LOW (output 0 volts).

Result
You should see your LED turn on and off. If the required output is not seen, make sure you have
assembled the circuit correctly, and verified and uploaded the code to your board.

EXERCISES:
1. Which two methods are required in the Arduino program?
2. List out different sensors which can be used to design IoT application,

QUIZ:
1. Give the purpose of pinMode().

2. Give the purpose of digitalWrite().

REFERENCES:
1. https://youtu.be/ZEVxj1_wlTY

EVALUATION:
Observation and Timely Completion Quiz and Viva Total
Implementation

4 2 4 10

46 IT Department, L.E. College, Morbi

Boda Yash Maheshbhai 210310116016

Date: Signature :

47 IT Department, L.E. College, Morbi