Front end

&
Back end Development
By Hardik , Diksha , Yash , Vaibhav ,
Nishkarsh
 What is Web Development?
Web development is the work involved in developing a Web site for the
Internet or an intranet

Front-end Back-end Web site

 Static vs Dynamic Websites
Static websites are ones that are
fixed and display the same content
for every user, usually written
exclusively in HTML. A dynamic
website, on the other hand, is one
that can display different
content and provide user
interaction.
 Use of Web Sites in IOT
SERVER

BROWER / NODEMCU /
WEBSITE SENSORS

USER 1
USER 3

USER 2
Front- End development
Application of Front –End
Developing and maintaining the user
interface

Implementing design on mobile websites

Managing software workflow

Search Engine optimization

Optimizing the user experience

Front end Languages
Used to design the front-end portion of
HTML web pages using a markup language.

Used to simplify the process of making

CSS web pages presentable.

Used to create magic on the sites to

Javascript make the site interactive for the user.
 Front End Frameworks and
Libraries: 

jQuery

AngularJ
S Flutter
SASS
React.js
 Back- End

Data System
analysis architecture Servers

database
Frameworks
Back end is :

security
Operating
system
scalability API
 Application of Back-End

Content
management
Server-side
system
programming
development,
Web server languages,
deployment,
technologies, Operating
Database maintenance API
Cloud systems,
creation, integration,
computing Troubleshooting
integration, and Security settings,
integration and debug
management analytics ,
statistics.
 Back end languages

PHP Python
PHP is a server-side scripting language 01 04 Python is a programming language
that lets you work quickly and
integrate systems more efficiently.

C++ Javascript
widely used nowadays for competitive
programming
02 05 JavaScript can be used as both (front
end and back end) programming
languages.

JAVA Node.js
It is highly scalable. Java components
are easily available.
03 06 ode.js is an open-source and cross-
platform runtime environment for
executing JavaScript code outside a
browser
 Back End frameworks

Express JS Rails

Etc..

Django Laravel
 How to implement front-end
1)The front end refers to the client side of the application.
2)It is the part of the website users can see and interact with.
3)It typically includes everything that attributes to the visual aspects
of website.
4)It forms the basic of what users can touch and experience on their
web browsers.
5) The essential of frontend web development include HTML,CSS and
javascript.
 HTML
(hypertext markup language)

• HTML is the standard markup language for

creation web pages.
• HTML describes the structure of the web
page.
• HTML consists of a series of elements.
• HTML elements tell the browser how to
display the content.
• HTML elements label the pieces of content
such as “this is heading”,”this is a
paragraph” , ” this is a link ”, etc.
• <h1>->my first heading-></he>
• <p>-> my first paragraph-><p/>
• <br> -> none -> none
 Difference between hyperlink and hypertext
HYPERTEXT

it contains the non-linear link of the text with some

other information.

It involves only text.

It directed information only generates the related

information.

It contains hyperlink.

It associate with the keywords.

Difference between hyper link and hypertext.

HYPERLINK

Their references are used in the hypertext or with other

hypermedia.

It involves text , media , audio , video , images , and

graphics.

It directed link could contain some unrelated information.

It contains the comprised of the URLs.

It associate with the anchor tags.

HTML text Editors
An HTML file is a text file, so to
create an HTML file we can use any
text editors.

There are various types of text editors available

which you can directly download, but for a
now, we are using Notepad ++
 HTML code using Notepad ++
Open Notepad ++ .
1
 HTML code using Notepad ++
Write code in HTML .
2
 HTML code using Notepad ++
3 Save the HTML file with .htm or .html extension.
 HTML code using Notepad ++
Open the HTML page in your web browser.
4
 HTML code using Notepad ++
Here is our webpage
5
 Building blocks of HTML
An HTML document consist of its basic building blocks
which are:
Tags: An HTML tag surrounds the content and apply meaning to it. It is
written between < and > brackets.
Attribute: An attribute in HTML provides extra information about the
element, and it is applied within the start tag. An HTML attribute contains two
fields: name & value.
Syntax <tag name  attribute_name= " attr_value"> content </ tag name>   
Elements: An HTML element is an individual component of an HTML file. In
an HTML file, everything written within tags are termed as HTML elements.
 HTML
TAGS
HTML tags are like keywords which
defines that how web browser will format
and display the content

HTML tags contain three main parts: opening tag, content and
closing tag. But some HTML tags are unclosed tags.
Syntax
<tag> content </tag>
Tag name Description
<!-- --> This tag is used to apply comment in an HTML document.
<!DOCTYPE> This tag is used to specify the version of HTML
<html> It represents root of an HTML document.
<a> It is termed as anchor tag and it creates a hyperlink or link.
<b> It is used to make a text bold.
<body> It is used to define the body section of an HTML document.
<br> It is used to apply single line break.
<center> It is used to align the content in center. 
<font> It defines the font, size, color, and face for the content.
<h1> to <h6> It defines headings for an HTML document from level 1 to level 6.
<head> It defines the head section of an HTML document.
<hr> It is used to apply thematic break between paragraph-level elements.
<img> It is used to insert an image within an HTML document.
<p> It represents a paragraph in an HTML document.
<table> It is used to present data in tabular form or to create a table within HTML document
<title> It defines the title or name of an HTML document.
   

Example
<html>  
  <head>  
<title>HTML tag</title>  
</head>  
<body>  
<h2>Example of HTML tag</h2>  
<p> Write your main Content within Body of t
he HTML document. </p>  
</body>  
</html>  
OUTPUT
  

 
 The HTML <head> element is used as a
container for metadata (data about data).
It is used between <html> tag and <body>
tag.

Metadata defines the document title, character set,

styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

<title>
<style>
<meta>
<link>
<script>
<base>
 A HTML heading or HTML h tag can be defined as
a title or a subtitle which you want to display on
the webpage. When you place the text within
the heading tags <h1>.........</h1>, it is displayed
on the browser in the bold format and size of the
text depends on the number of heading

Example
<h1>Heading no. 1</h1>  
<h2>Heading no. 2</h2>  
<h3>Heading no. 3</h3>  
<h4>Heading no. 4</h4>  
<h5>Heading no. 5</h5>  
<h6>Heading no. 6</h6>  
OUTPUT
  

 
 HTML <body> tag defines the main
content of an HTML document
which displays on the browser. It
can contain text content,
paragraphs, headings, images,
tables, links, videos, etc.

<html>  
<head>  
 <title>Body Tag</title>  
</head>  
<body>  
 <h2>Example of body tag</h2>  
 <p>This paragraph is written between the body t
ag</p>  
</body>  
</html>
OUTPUT
  

 
<html>  
<head>  
    <title>First web page.</title>  
</head>  
<body>  
    <p>Welcome to my first web page.</p>  
</body>  
</html> 
OUTPUT
  

 
<p>This is first paragraph.</p>  
<p>This is second paragraph.</p>
  
<p>This is third paragraph.</p>  
OUTPUT
  

 
<a href="second.html">Click 
for Second Page</a>  
OUTPUT
  

 
# How to add html to sketch

Step 1 = write html code in editor ( notepad++)

Step 2 = paste it to Arduino ide

Step 3 = add each line in client.println(“ code “);

Step 4 = add Arduino declared variable in its position

Step 5 = compile and upload the data

step 6 = html code will start working in web page and show required data