SlideShare a Scribd company logo
History of the Web
• Internet (1960s)
• World Wide Web - WWW (1991)
• First Web Browser - Netscape, 1994
• Google, 1998
• Facebook, 2004
• Smartphones (iPhone), 2007
• Tablets (iPad), 2010
The Web Browser
O.
Widder.
(2013).
geek&poke.
Available:
http://geek-and-poke.com
Internet Explorer
Chrome
Firefox
Opera
Safari
4
Web Pages Examples
HTML
JavaScript
CSS
Web
Programming
Use HTML to define the
content of web pages
Use CSS to specify the layout of web pages
The Web Programming Triangle
Use JavaScript to program
the behavior of web pages
HTML
CSS
JavaScript
IIS
ASP.NET
AJAX
PHP
SQL
Web Services
JQuery
XML
Web
Programming
Basic Web Programming
• HTML
• CSS
• JavaScript
For more DynamicWeb Programmingwe use e.g.,
• ASP.NET
• SQL
• AJAX
• PHP
• etc. (But these are not part of this Tutorial)
CSS
JavaScript
Web
Server
Web Architecture
Web Server
Web Browser
HTML JavaScript
Client
CSS
Server-side
Internet Explorer Chrome Firefox Opera Safari
Client-Server Example
Database
Client
Web Server
Request
Response
Web Browser
Internet Information Services (IIS), Apache, etc.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Web Platform
Client-side
Server-side
Web Browser
Web Server
Web Page (HTML)
HTML, CSS, JavaScript
ASP.NET, PHP, ...
Internet Information Services (IIS), Apache, etc.
The code runs on the server and converted to
HTML before sending to client (Web Browser)
The Web Browser creates the visual web page you see in the browser based on
the HTML code

More Related Content

Similar to 1a.pdf

The World of Web Development - 2017
The World of Web Development - 2017The World of Web Development - 2017
The World of Web Development - 2017
Cindy Royal
 
End to-end W3C - JS.everywhere(2012) Europe
End to-end W3C - JS.everywhere(2012) EuropeEnd to-end W3C - JS.everywhere(2012) Europe
End to-end W3C - JS.everywhere(2012) Europe
Alexandre Morgaut
 
Ajax introduction
Ajax introductionAjax introduction
Ajax introduction
sjmittal
 
The_web_overview_CSE-HTML-and-CSS-2.pptx
The_web_overview_CSE-HTML-and-CSS-2.pptxThe_web_overview_CSE-HTML-and-CSS-2.pptx
The_web_overview_CSE-HTML-and-CSS-2.pptx
ThompsonOtu
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
Wojciech Bednarski
 
Html5 public
Html5 publicHtml5 public
Html5 public
doodlemoonch
 
JavaScript-Basic-Chapter1-Presentation.pptx
JavaScript-Basic-Chapter1-Presentation.pptxJavaScript-Basic-Chapter1-Presentation.pptx
JavaScript-Basic-Chapter1-Presentation.pptx
Justcode 2023
 
History of-web-design
History of-web-designHistory of-web-design
History of-web-design
Web Designers Nepal
 
スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一
okyawa
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
butest
 
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devicesThe Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
Wesley Hales
 
Introduction to WebSockets
Introduction to WebSocketsIntroduction to WebSockets
Introduction to WebSockets
Steve Agalloco
 
Web Introduction
Web IntroductionWeb Introduction
Web Introduction
asim78
 
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 20102012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
Chris O'Connor
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
Naga Harish M
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
Nagendra Um
 
InfoTalk#17 1st
InfoTalk#17 1stInfoTalk#17 1st
InfoTalk#17 1st
Wakasa Masao
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
Chris Canal
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring Surf
Alfresco Software
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring Surf
Alfresco Software
 

Similar to 1a.pdf (20)

The World of Web Development - 2017
The World of Web Development - 2017The World of Web Development - 2017
The World of Web Development - 2017
 
End to-end W3C - JS.everywhere(2012) Europe
End to-end W3C - JS.everywhere(2012) EuropeEnd to-end W3C - JS.everywhere(2012) Europe
End to-end W3C - JS.everywhere(2012) Europe
 
Ajax introduction
Ajax introductionAjax introduction
Ajax introduction
 
The_web_overview_CSE-HTML-and-CSS-2.pptx
The_web_overview_CSE-HTML-and-CSS-2.pptxThe_web_overview_CSE-HTML-and-CSS-2.pptx
The_web_overview_CSE-HTML-and-CSS-2.pptx
 
Front end for back end developers
Front end for back end developersFront end for back end developers
Front end for back end developers
 
Html5 public
Html5 publicHtml5 public
Html5 public
 
JavaScript-Basic-Chapter1-Presentation.pptx
JavaScript-Basic-Chapter1-Presentation.pptxJavaScript-Basic-Chapter1-Presentation.pptx
JavaScript-Basic-Chapter1-Presentation.pptx
 
History of-web-design
History of-web-designHistory of-web-design
History of-web-design
 
スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一スマートフォンサイトの作成術 - 大川洋一
スマートフォンサイトの作成術 - 大川洋一
 
PPT3958.doc
PPT3958.docPPT3958.doc
PPT3958.doc
 
The Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devicesThe Mobile Web - HTML5 on mobile devices
The Mobile Web - HTML5 on mobile devices
 
Introduction to WebSockets
Introduction to WebSocketsIntroduction to WebSockets
Introduction to WebSockets
 
Web Introduction
Web IntroductionWeb Introduction
Web Introduction
 
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 20102012 - HTML5, CSS3 and jQuery with SharePoint 2010
2012 - HTML5, CSS3 and jQuery with SharePoint 2010
 
About Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JSAbout Best friends - HTML, CSS and JS
About Best friends - HTML, CSS and JS
 
HTML5: An Overview
HTML5: An OverviewHTML5: An Overview
HTML5: An Overview
 
InfoTalk#17 1st
InfoTalk#17 1stInfoTalk#17 1st
InfoTalk#17 1st
 
Single Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.WebSingle Page Application Development with backbone.js and Simple.Web
Single Page Application Development with backbone.js and Simple.Web
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring Surf
 
PLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring SurfPLAT-7 Spring Web Scripts and Spring Surf
PLAT-7 Spring Web Scripts and Spring Surf
 

Recently uploaded

Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
TechSoup
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
National Information Standards Organization (NISO)
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
zuzanka
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
siemaillard
 
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem studentsRHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
Himanshu Rai
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
GeorgeMilliken2
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
imrankhan141184
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
TechSoup
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
HajraNaeem15
 
Juneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School DistrictJuneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School District
David Douglas School District
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
EduSkills OECD
 
Data Structure using C by Dr. K Adisesha .ppsx
Data Structure using C by Dr. K Adisesha .ppsxData Structure using C by Dr. K Adisesha .ppsx
Data Structure using C by Dr. K Adisesha .ppsx
Prof. Dr. K. Adisesha
 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
ImMuslim
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
Jyoti Chand
 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
Steve Thomason
 
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
MysoreMuleSoftMeetup
 
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
Nguyen Thanh Tu Collection
 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
Iris Thiele Isip-Tan
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
zuzanka
 
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
National Information Standards Organization (NISO)
 

Recently uploaded (20)

Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
Elevate Your Nonprofit's Online Presence_ A Guide to Effective SEO Strategies...
 
Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"Benner "Expanding Pathways to Publishing Careers"
Benner "Expanding Pathways to Publishing Careers"
 
SWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptxSWOT analysis in the project Keeping the Memory @live.pptx
SWOT analysis in the project Keeping the Memory @live.pptx
 
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptxPrésentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
Présentationvvvvvvvvvvvvvvvvvvvvvvvvvvvv2.pptx
 
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem studentsRHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
RHEOLOGY Physical pharmaceutics-II notes for B.pharm 4th sem students
 
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
What is Digital Literacy? A guest blog from Andy McLaughlin, University of Ab...
 
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
Traditional Musical Instruments of Arunachal Pradesh and Uttar Pradesh - RAYH...
 
Leveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit InnovationLeveraging Generative AI to Drive Nonprofit Innovation
Leveraging Generative AI to Drive Nonprofit Innovation
 
How to deliver Powerpoint Presentations.pptx
How to deliver Powerpoint  Presentations.pptxHow to deliver Powerpoint  Presentations.pptx
How to deliver Powerpoint Presentations.pptx
 
Juneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School DistrictJuneteenth Freedom Day 2024 David Douglas School District
Juneteenth Freedom Day 2024 David Douglas School District
 
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptxBeyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
Beyond Degrees - Empowering the Workforce in the Context of Skills-First.pptx
 
Data Structure using C by Dr. K Adisesha .ppsx
Data Structure using C by Dr. K Adisesha .ppsxData Structure using C by Dr. K Adisesha .ppsx
Data Structure using C by Dr. K Adisesha .ppsx
 
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
Geography as a Discipline Chapter 1 __ Class 11 Geography NCERT _ Class Notes...
 
Wound healing PPT
Wound healing PPTWound healing PPT
Wound healing PPT
 
A Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two HeartsA Visual Guide to 1 Samuel | A Tale of Two Hearts
A Visual Guide to 1 Samuel | A Tale of Two Hearts
 
Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47Mule event processing models | MuleSoft Mysore Meetup #47
Mule event processing models | MuleSoft Mysore Meetup #47
 
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
BÀI TẬP DẠY THÊM TIẾNG ANH LỚP 7 CẢ NĂM FRIENDS PLUS SÁCH CHÂN TRỜI SÁNG TẠO ...
 
Educational Technology in the Health Sciences
Educational Technology in the Health SciencesEducational Technology in the Health Sciences
Educational Technology in the Health Sciences
 
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptxRESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
RESULTS OF THE EVALUATION QUESTIONNAIRE.pptx
 
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
Jemison, MacLaughlin, and Majumder "Broadening Pathways for Editors and Authors"
 

1a.pdf