1
Web Development
What is IT ?
What is Web Development ?
AGENDA
Emerging technologies in web development
with Python
What is Website ?
What is IT
? Hardware
Software
@ the European Laboratory
Mr. Tim Berners-Lee
created the
World Wide Web
for Particle Physics (CERN)
in Geneva, Switzerland.
In 1990 and 1991
Definition of Website
A website (also written as web
site)
A collection of web pages and
related content
Identified by a common domain
name
Published on at least one web
server.
wikipedia.org,
google.com,
amazon.com, and etc…
Introduction to Web
• A document on the web is called a Web Page.
• A Web page is identified by Uniform Resource Locator
(URL).
• A URL is also commonly referred to as a Web Address.
• A website refers to the location on the internet of the Web
pages and related files.
What is Web Development?
Definition:
Developing a Web site for
the Internet or an intranet.
Range from developing
A simple single static page of
plain text to
complex web applications,
electronic businesses, and
social network services.
Front-end
Three Layers of Web Design
HTML
Do you imagine how
this page would like
without HTML
Looks ugly…
Doesn’t it ?
No HTML
•Without any markup to give your page content
structure, the browser renders unformatted and
unstyled text.
•HTML Tags give structure and meaning to
your content.
Let us Add HTML tags to our
page…
Looks Better….
But still not Good …
But What should we do to make
the page look nice ?
The answer is
use CSS….
CSS =
Cascading Style Sheet
Rules:
Set of rules defining how an html element will be “presented” in the browser.
CSS Rules:
p
{
color: red;
}
#title
{
font-style: italic;
Border: 1px dotted blue;
}
.content {
Font-weight: bold;
Background: yellow;
}
21
Something can and can’t change with CSS:
Can Change
• colors
• font
• font size
• backgrounds
• spacing
• sizes
• borders
• Position(layout)
Can’t change
• content
• Markup
After adding CSS to page:
Looks Perfect !
Text + HTML + CSS = Web Page
Now time for Actions !
Java Script
JavaScript is not a Java:
• JavaScript was not developed at Sun Microsystems, the
home of java.
• JavaScript was developed at Netscape in 1995.
• It’s not a light version of Java.
• It was not based on Java.
JavaScript:
Classic JavaScript is a
client-side language
used to add interactivity to
your web pages.
What can do with JavaScript?
What can do with JavaScript?
Some JavaScript Frameworks in
Recent Trend:
• Angular JS
• React JS
• Node JS
• Vue JS
Back-end
• Python
• MySQL
Python:
Now, it's my belief that Python is a lot easier than to teach to students
programming and teach them C or C++ or Java at the same time
because all the details of the languages are so much harder. Other
scripting languages really don't work very well there either.
- Guido van Rossum.
Python
• Python is an interpreted, object-oriented, high-level programming
language with dynamic semantics. Its high-level built in data
structures, combined with dynamic typing and dynamic binding.
• One area where Python shines is web development. Python offers
many frameworks to power some of the world’s most popular sites
such as Spotify, Mozilla, Reddit, the Washington Post and Yelp.
Python Frameworks:
• A framework is a collection of modules or packages which helps in
writing web applications. While working on frameworks in python
we don’t have to worry about the low level details such as protocols,
sockets or thread management.
Operations Involved in
Frameworks:
• Url Routing – Routing is the mechanism of mapping the URL directly
to the code that creates the web page.
• Input form handling and validation – Suppose you have a form which
takes some input, the idea is to validate the data and then save it.
• Output formats with template engine – A template engine allows
the developers to generate desired content types like HTML, XML,
JSON.
Operations Involved in
Frameworks:
• Database connection – Database connection configuration and
persistent data manipulation through an ORM.
• Web security – Frameworks give web security against cross-site
request forgery aka CSRF, sql injection, cross-site scripting and other
common malicious attacks.
• Session storage and retrieval – Data stored in the session storage
gets cleared when the page session ends.
Classification of Frameworks:
• Full (high-level)
- Come with many pre installed components and lot of low level
task automation.
• Micro (low-level)
- Come with many pre installed components and lot of low level
task automation.
Python Frameworks:
• Full (high-level)
• Django
• Web2py
• Turbogears
• Micro (low-level)
• Flask
• Pyramid
• CherryPy
• Bottle.py
MySQL:
• MySQL is the most popular database system used in Web
Development.
• MySQL is a database system used on the web.
• MySQL is a database system that runs on a server.
• MySQL is ideal for both small and large applications.
• MySQL is very fast, reliable, and easy to use.
• The data in a MySQL database are stored in tables. A table is a
collection of related data, and it consists of columns and rows.
Real-Time Applications:
Job Options in Web Development:
• Application Developer.
• Web developer.
• UI/UX Developer.
• Web Content Manager.
Smart way to become A IT Techie
Web DEVELOPMENT
with Php & Mysql
1.HTML
2.CSS
3.Javascript
4.Jquery
5.Ajax
6.Bootstrap
7.Php & Mysql
Web Development
with Python
1.HTML
2.CSS
3.Javascript
4.Jquery
5.Ajax
6.Bootstrap
7.Python with Django
43
Any
44
ELYSIUM ACADEMY
Peelamedu, Coimbatore.
6385 4444 67
kovai.hps@elysiumacademy.org

"Python web development combines the simplicity of the language with powerful frameworks like Flask and Django. Create dynamic, responsive websites, and deploy scalable applications with ease and efficiency."

  • 1.
  • 2.
    What is IT? What is Web Development ? AGENDA Emerging technologies in web development with Python What is Website ?
  • 3.
    What is IT ?Hardware Software
  • 5.
    @ the EuropeanLaboratory Mr. Tim Berners-Lee created the World Wide Web for Particle Physics (CERN) in Geneva, Switzerland. In 1990 and 1991
  • 6.
    Definition of Website Awebsite (also written as web site) A collection of web pages and related content Identified by a common domain name Published on at least one web server. wikipedia.org, google.com, amazon.com, and etc…
  • 7.
    Introduction to Web •A document on the web is called a Web Page. • A Web page is identified by Uniform Resource Locator (URL). • A URL is also commonly referred to as a Web Address. • A website refers to the location on the internet of the Web pages and related files.
  • 8.
    What is WebDevelopment?
  • 9.
    Definition: Developing a Website for the Internet or an intranet. Range from developing A simple single static page of plain text to complex web applications, electronic businesses, and social network services.
  • 12.
  • 13.
    Three Layers ofWeb Design
  • 14.
  • 15.
    Do you imaginehow this page would like without HTML
  • 16.
  • 17.
    No HTML •Without anymarkup to give your page content structure, the browser renders unformatted and unstyled text. •HTML Tags give structure and meaning to your content.
  • 18.
    Let us AddHTML tags to our page… Looks Better…. But still not Good …
  • 19.
    But What shouldwe do to make the page look nice ? The answer is use CSS….
  • 20.
  • 21.
    Rules: Set of rulesdefining how an html element will be “presented” in the browser. CSS Rules: p { color: red; } #title { font-style: italic; Border: 1px dotted blue; } .content { Font-weight: bold; Background: yellow; } 21
  • 22.
    Something can andcan’t change with CSS: Can Change • colors • font • font size • backgrounds • spacing • sizes • borders • Position(layout) Can’t change • content • Markup
  • 23.
    After adding CSSto page: Looks Perfect !
  • 24.
    Text + HTML+ CSS = Web Page
  • 25.
    Now time forActions ! Java Script
  • 26.
    JavaScript is nota Java: • JavaScript was not developed at Sun Microsystems, the home of java. • JavaScript was developed at Netscape in 1995. • It’s not a light version of Java. • It was not based on Java.
  • 27.
    JavaScript: Classic JavaScript isa client-side language used to add interactivity to your web pages.
  • 28.
    What can dowith JavaScript?
  • 29.
    What can dowith JavaScript?
  • 30.
    Some JavaScript Frameworksin Recent Trend: • Angular JS • React JS • Node JS • Vue JS
  • 31.
  • 32.
    Python: Now, it's mybelief that Python is a lot easier than to teach to students programming and teach them C or C++ or Java at the same time because all the details of the languages are so much harder. Other scripting languages really don't work very well there either. - Guido van Rossum.
  • 33.
    Python • Python isan interpreted, object-oriented, high-level programming language with dynamic semantics. Its high-level built in data structures, combined with dynamic typing and dynamic binding. • One area where Python shines is web development. Python offers many frameworks to power some of the world’s most popular sites such as Spotify, Mozilla, Reddit, the Washington Post and Yelp.
  • 34.
    Python Frameworks: • Aframework is a collection of modules or packages which helps in writing web applications. While working on frameworks in python we don’t have to worry about the low level details such as protocols, sockets or thread management.
  • 35.
    Operations Involved in Frameworks: •Url Routing – Routing is the mechanism of mapping the URL directly to the code that creates the web page. • Input form handling and validation – Suppose you have a form which takes some input, the idea is to validate the data and then save it. • Output formats with template engine – A template engine allows the developers to generate desired content types like HTML, XML, JSON.
  • 36.
    Operations Involved in Frameworks: •Database connection – Database connection configuration and persistent data manipulation through an ORM. • Web security – Frameworks give web security against cross-site request forgery aka CSRF, sql injection, cross-site scripting and other common malicious attacks. • Session storage and retrieval – Data stored in the session storage gets cleared when the page session ends.
  • 37.
    Classification of Frameworks: •Full (high-level) - Come with many pre installed components and lot of low level task automation. • Micro (low-level) - Come with many pre installed components and lot of low level task automation.
  • 38.
    Python Frameworks: • Full(high-level) • Django • Web2py • Turbogears • Micro (low-level) • Flask • Pyramid • CherryPy • Bottle.py
  • 39.
    MySQL: • MySQL isthe most popular database system used in Web Development. • MySQL is a database system used on the web. • MySQL is a database system that runs on a server. • MySQL is ideal for both small and large applications. • MySQL is very fast, reliable, and easy to use. • The data in a MySQL database are stored in tables. A table is a collection of related data, and it consists of columns and rows.
  • 40.
  • 41.
    Job Options inWeb Development: • Application Developer. • Web developer. • UI/UX Developer. • Web Content Manager.
  • 42.
    Smart way tobecome A IT Techie Web DEVELOPMENT with Php & Mysql 1.HTML 2.CSS 3.Javascript 4.Jquery 5.Ajax 6.Bootstrap 7.Php & Mysql Web Development with Python 1.HTML 2.CSS 3.Javascript 4.Jquery 5.Ajax 6.Bootstrap 7.Python with Django
  • 43.
  • 44.
    44 ELYSIUM ACADEMY Peelamedu, Coimbatore. 63854444 67 kovai.hps@elysiumacademy.org