Web Design Vs.

Web Development

Website or Web Application

Functionality
User
Web Designing Interface Web Development

A web designer is who understand the client’s specifications to build a layout and other visual elements of a website,
whereas a web developer is the one who builds the backbone of the website, typically from the ground up, using different
tools including HTML, JavaScript, CSS, jQuery, Python, Ruby, and more.

it’s a collaborative effort by both designers and developers to build a website which is both visually appealing and fully
functional.
 Web Development Components

Front-end Server Side

Backend
Development Development
DB Design
( UI Design)

• SQL
• HTML • PHP MySQL
• CSS • Java Oracle
• JS • Python DB2
• JQ • JS SQL Server
• Bootstrap • Ruby On rails PostgreSQL
• Ruby • etc • No-SQL
• Python MongoDB
• etc. • etc
Student Skills Management

1. Student
-Register
-Login
-Dashboard
-View Details
-Edit / Update Details
-Add/Update/Delete Marks
-Add/Update/Delete Skills
-Change Password
-Logout

2. Placement Department
-Login
-Dashbaord
-Change password
-View Students Details
-Filter on Marks and Skills
-Logout
 Basic Terminologies in Web Design

 Client Machine/System
 Server
 Client- Server Architecture
 Internet
 Web Page
 WWW
 Web Standards
 Website
 Static and Dynamic Website
 Responsive Website
 Domain Name
 Web Hosting
 Client Server Architecture
 Client/server architecture works when the client computer sends a
resource or process request to the server over the network
connection, which is then processed and delivered to the client. A
server computer can manage several clients simultaneously, whereas
one client can be connected to several servers at a time, each
providing a different set of services.
 The client-server architecture or model is an application network
separating tasks between clients and servers that are either within the
same system or need to communicate over a network. In order to
access the service provided by the server, the server-client sends the
request to another program, which runs a few programs that distribute
work among the clients & share resources with them.

Client – The client can be any computer that requests something from the server. For example – visiting any website we request
the webpage from its domain. So here we act as a client.
Server – On the other hand, the Server is the computer that is designed to serve the requests to the client. For the same
example as above, the client asks for the webpage then the server responds with the webpage to the client.
 Web Page

 A web page is a hypertext document on the World

Wide Web.
 A web page can contain the text, audio, video, images
etc in the form of hypertext document.
 Web Page is designed by HTML.
 HTML stands for Hypertext markup language.
Example: irctc web page
 WWW

The World Wide Web (WWW), commonly known as the Web, is an information system enabling documents and other web
resources to be accessed over the Internet.

Berners-Lee is the director of the World Wide Web Consortium (W3C), he founded in 1994.

WWW standards or W3C standards

 Website
Collection of connected web pages.

Static and Dynamic Website

Static website is the collection of all static web pages. Where as Dynamic website is the collection of static webpages
and dynamic webpages.
Static web page contain web elements and related data.
Dynamic web page contain web elements and Server side code along with database connection. At run time server
execute the server side code and placed the data on webpage.
 Web Application Development Path

- Frontend Development
- Backend Development Basic Front-End Technology
- Full Stack Development 1. HTML
- Mean Stack Development 2. CSS
- Mern Stack Development 3. JavaScript
4. JQuery
5. Bootstrap
Mean stack in a popular full-stack
framework, which consists of
AngularJS MongoDB, Express.js, Basic Back-End Technology
and NodeJS. 1. Database Design
- MySQL
- Oracle
- etc.
Mern stack is similar to Mean Stack 2. Server Side Technology
only difference is for Front end - PHP
mern stack use ReactJS instead of - JSP
AngularJS - Python
- Ruby On rails
- etc..
Now, Start with Full stack Development Path
HTML5
 HTML

Q1. What is HTML?

Q2. Why HTML?
Q3. How we can use HTML?

- HTML stands for Hypertext Mark-up Language.

- It is mark-up language to design web pages.
- HTML is not a programming language, meaning it doesn’t have the ability
to create dynamic functionality.
- HTML format documents ,similar to Microsoft word.

1. To Design web Pages ( and web application is consisting web pages)

2. Career as Web Designer ( frontend Designer)
3. Mobile Application Development ( Phonegap /Ionic)

Now, Start with HTML HTML5

Editor( Notepad / Notepad++ / sublime / etc.)
Latest HTML version?
Browser (chrome, firefox, explorer, safari,
Software Requirement? opera etc)
 HTML5

Basic Syntax :

<!DOCTYPE>
<html>
<head>
<title> ……….. </title>
</head>
<body>
………………….
………………….

</body>
</html>

Savs As: FileName.html or FileName.htm

Open Browser: Run html file

Exercise1: Create one web page with title name My First Page and KEC Engineering
College as Page content
 HTML
Text Formatting Tags
1. Heading
2. Paragraph
Heading Tags.
3. Line break There are six different HTML headings which are defined with
4. Bold the <h1> to <h6> tags, from highest level h1 (main heading) to
5. Strong the least level h6 (least important heading).
6. Italic
7. Underline
8. Blockquote
9. Strikethrough
10. Super script
11. Sub script
12. Font ( color, size, face)
<html>
<head>
</head>
<body>
<h1>KEC Engineering College</h1>
<h2>KEC Engineering College</h2>
<h3>KEC Engineering College</h3>
<h4>KEC Engineering College</h4>
<h5>KEC Engineering College</h5>
<h6>KEC Engineering College</h6>
</body>
</html>
 HTML
Paragraph Tags.
<p> </p>
<html>
<head> </head>
<body>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</body>
</html>
 HTML

Bold Tag. Strong Tag. Italic Tag. Underline Tag. Line break Tag.
<b> </b> <strong> </strong> <i> </i> <u> </u> <br/> or <br>

Strike Tag. Blockquote Tag.

<strike> </strike> or <s> </s> <blockquote> </blockquote>

<html>
<head></head>
<body>
<b> DataRitz Technology </b> <br>
<strong> DataRitz Technology </strong> <br/>
<i> DataRitz Technology </i> <br>
<u> DataRitz Technology </u><br/>
<strike> DataRitz Technology </strike> <br>
<blockquote>DataRitz Technology</blockquote>
Date: 7^th
Equation : X₂
</p>
</body>
</html>
 HTML
Tag Attribute / Properties
Example:
<h1 align=“center” >DataRitz Technology</h1>

Non breakable space: &nbsp;

Property / Attribute Value

Font tag: <font> </font>

Font tag is no more in HTML5.
For size(1 to 7) , face and color we use
CSS.
 HTML

Division Tag: <div></div>

- It define a division or section in an HTML document.

- The <div> element is often used as a container for other HTML element.
- By Default, Browser always place a line break before and after <div> element.

Example:
<html>
<head></head>
<body>
<p>The goal of the Full Stack Web Development internship program is to equip learners with the unique skills they need to build dynamic
web applications. </p>
<div>
<p>Objective of this program will be able to design and build frontend, backend and server side programming. </p>
<p>Students will also learn how to deploy Dynamic web application to the cloud server, how to manage multiple version of code
during development process, how to test the web application at developer end. </p>
</div>
</body>
</html>
 HTML
1. Ordered List
list Tag 2. Unordered List
3. Description List
<ol> </ol>
<ul> </ul>

<html>
<head></head>
<body>
<h1>Listing</h1>
Exercise 2: Design the web page for
<ul> following:
<li> A</li>
<li> B</li>
<li> C</li>
<li> D</li>
</ul>
<ol>
<li> A</li>
<li> B</li>
<li> C</li>
<li> D</li>
</ol>
</body>
<ul type=“circle/disc/square/”></ul>
</html>
<ol type=“A/a/1/i/I” start=“3”></ol>
 HTML

Description List
<dt> Headling 1</dt>
<dd> This is all about heading 1. It may be one line or paragraph.</dd>
<dt> Headling 2</dt>
<dd> This is all about heading 2. It may be one line or paragraph.</dd>

Marquee Tag: <marquee> </marquee>

<html>
<head></head> <marquee
<body>
behavior="alternate/slide/scroll“
<marquee> DataRitz Technology </marquee>
</body> scrollamount=“10”> </marquee>
</html>
 HTML
img tag

<img src=“ locationofImage” height=“ ” width=“ ” alt=“ ” ></img>

Anchor tag

<a href= “ ” >text </a>

Exercise: Write the html code for the following :

<a href="http://dataritz.com/">click here

Button tag
</a> to see the details of DataRitz courses.
<a href="http://dataritz.com/" target="_blank">click <button >Text</button>
here </a> to see the details of DataRitz courses.

<html>
<head></head>
<body>
<button type=“button" >click here</button>
</body>
</html>
 HTML

Form tag:

<form> ---------------------</form>
<form action="" method="">
input text: <input type="text" name=" " value=" "><br><br>
password type:<input type="password"><br><br>
radio button: <input type="radio"> Yes <input type="radio"> No <br><br>
check box: <input type="checkbox"> option1 <input type="checkbox"> option2 <br><br>
drop down: <select> <option> option1</option>
<option>option2</option></select><br><br>
date: <input type="date" ><br><br>
time: <input type="time"><br><br>
email: <input type="email"><br><br>
Text Ares <textarea rows="4" cols="50">Enter text here...</textarea><br><br>
submit: <input type="submit" value="submit"><br><br>
reset :<input type="reset" value="reset"><br><br>
</form>
HTML
 HTML

Following HTML tags we have studied:

1. html tag
2. head tag List tags in html
3. title 1. Ordered List
4. body 2. Unordered List
3. Description List
Text Formatting tags in html
Marquee tag
1. Heading
Table Tag
2. Paragraph
Image tag
3. Line break
Anchor tag
4. Bold
Form tag
5. Strong
Button tag
6. Italic
7. Underline
8. Blockquote
9. Strikethrough Some More tags:
10. Super script link, script, style, header, footer, etc.
11. Sub script
12. Font ( color, size, face)
CSS3
 Introduction to CSS3

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December
1996.
CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds
support for media-specific style sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.

 Stands for Cascading Style Sheets.

 CSS save a lot of work. It can control the layout of complete web application
pages all at once.

 CSS describes how HTML elements are to be displayed on screen, paper, or in

other media.

 HTML describe what data represented, CSS describe How data represented on
web page.
 Syntax and way to use CSS

Three ways to use CSS.

1. Inline CSS
2. Internal Sheet CSS
3. External Sheet CSS

Inline CSS:
In this way, we write css code inline with html element with following syntax.
<htmlElement style=“ property1:value1; property2:value2;…..”> </htmlElement>

Example:

<h1 style="color: red;">KEC Engineering College</h1>

<h2 style="color:green;font-size:30px;">KEC Engineering College</h2>
 Internal Sheet CSS

In internal sheet CSS, we write complete CSS code in head section of html file. For this
we use selectors to identify the html element in head section in defining the CSS property.

CSS Selectors:
1. Element Selector
2. Id selector
3. Class selector
4. Group Selector
<html>
<head>
<style>
h1{color:red;}
#myid{color:green;font-size:30px;}
.myclass{color:blue;font-size:35px;}
</style>
</head>
<body>
<h1>KEC Engineering College</h1>
<h2 id="myid“>KEC Engineering College</h2>
<p class="myclass"> DataRitz Technology</p>
</body>
</html>
 External Sheet CSS

In external sheet CSS, we write complete CSS code in separate file, save this file as css file
extension and link this css file to html using link tag in head section of html file. For this we
use selectors to identify the html element separate file in defining the CSS property.
<html>
<head> h1{color:red;}
<link rel=“stylesheet” href=“style.css”></link> #myid{color:green;font-
</head> size:30px;}
<body>
<h1>KEC Engineering College</h1>
.myclass{color:blue;font-
<h2 id="myid“>KEC Engineering College</h2> size:35px;}
<p class="myclass"> DataRitz Technology</p>
</body>
</html> style.css
 CSS topics will be:

 Text Formatting using CSS Text Formatting using CSS

 Font Formatting using CSS
 Background Formatting using CSS 1. Color
 Borders using CSS 2. Alignment
 Margin using CSS 3. Decoration
 Padding using CSS 4. Spacing
 Position using CSS 5. Shadow
 Align using CSS
 Shadow using CSS

color:red;
rgb(255, 99, 71);
color:#ff6347;
text-align:center/right/left;
text-decoration: overline/underline/line-through/none;
letter-spacing: 3px;
text-shadow: 2px 2px 5px red;
 Font Formatting using CSS
font-family: "Times New Roman", Times, serif;
1. Font Family
font-size: 35px;
2. Size
font-weight: bold/normal;

Background Formatting using CSS

background-color background-color: lightblue;

background-image background-image: url("paper.gif");
background-repeat background-repeat: no-repeat/repeat-x;
background-attachment background-attachment: fixed;
background-position background-position: right top;
 Font Formatting using CSS
font-family: "Times New Roman", Times, serif;
1. Font Family
font-size: 35px;
2. Size
font-weight: bold/normal;

Background Formatting using CSS

background-color background-color: lightblue;

background-image background-image: url("paper.gif");
background-repeat background-repeat: no-repeat/repeat-x;
background-attachment background-attachment: fixed;
background-position background-position: right top;
JavaScript
What is Java Script?
Java script is lightweight , Interpreted , Object Oriented , Client Side Scripting
language. Purpose of Java script is to make dynamic web pages with client side
programming.
Advantages of Java Script.
1. To add user functionality on web pages.
2. To validate the web page data at client side.
3. To provide immediate feedback to user.
4. To communicate with server.
5. To increase server performance.
6. To find user information like ip address etc.

How to use java script.

1. Within HTML Document we can write Java script code.
2. In external Sheet ( i.e java script sheet, use as js file extension )
 Start with Java Script
There are two ways to integrate the java script code with html page.
1. Internal sheet
2. External sheet

In internal sheet, we can write java script code in either head section or body section (
where we required) using script tag <script> </script>

Language Fundamentals:
1. Variables
2. Reserved words
3. Data types
4. Operators
5. Control Statements
- Conditional Statements
- Loop statements
- Switch statements
- Break For answer : let’s explore history of java script.
- Continue

Q1: Is there any relation to java script with java programming language.?
Or
Why java script name contain java?
 Java Script History

Variables in java Script

In java script we use var keyword to declare any variable without any explicit data type
declaration.
Ex: var x;
x= 10;
var y= “hello”;
var z= 10.34;
var a = null;
Reserved words in Java Script
 Java Script Operator

Arithmetic Operators : + - / * ++ -- % **

Assignment Operators : = += -= *= /= %= **=

Comparison Operators: < > == <= >= != === ?

( === equal value and equal type)

Logical Operator : && || !

Bitwise Operators: & | ~ ^ << >> >>>

JavaScript Bitwise Operators
Input and output in java Script

To print any message on web page , use

document.write (“message”);

For Input: prompt() dialog box.

Example:
<script>
var x = prompt(“Enter Name”);
</script>

Control Statement in java Script

1. Conditional Statement : if, if-else, nested if and if-else

2. Loop Statement: for, while, do-while
3. break and continue statement
 JavaScript Exercise:

Q1 .Enter 2 input at run time and display the sum of numbers.

Q2 .Print the table of any number , number is entered by user on run time.

<script>
var x= Number(prompt("Enter First Number"));
var y= Number(prompt("Enter First Number"));
var z= x+y;
document.write(z);
}
</script>

<script>
var x= Number(prompt("Enter number"));
for (var i=1;i<=10;i++)
{
var y= x*i;
document.write(y+"<br>");
}
</script>