SlideShare a Scribd company logo
1 of 21
Diploma in Web Engineering
Module I: Introduction to Web
Technologies
Rasan Samarasinghe
ESOFT Computer Studies (pvt) Ltd.
No 68/1, Main Street, Pallegama, Embilipitiya.
Content
1. What is “Web” ?
2. HTML (HyperText Markup Language)
3. Web Developers Knowledge Areas
4. Nature of the Web
5. Current Trends in Web Development
6. Tools and Technologies
7. Web Design Concepts
8. Color usage on the Web
What is “Web” ?
Web
HTML (HyperText Markup Language)
HTML is the main markup language for creating
web pages and other information that can be
displayed in a web browser.
HTML Versions
Version Year
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
Web Developers Knowledge Areas
You gotta learn…
HTML
CSS
Client Side Scripting
Server Side Scripting
Nature of the Web…
The internet is transactional, that means user
requests and server responds.
Nature of the Web…
Websites are either static or dynamic in content.
Nature of the Web…
It’s not a broadcast medium. Thus concepts of
mass media is not valid for the internet.
Vs
Current Trends in Web Development
Some popular websites then…
Current Trends in Web Development
Data driven content has become more popular
Current Trends in Web Development
Rich content on web pages
Current Trends in Web Development
E-Commerce Development
Intranet Development
Tools and Technologies
WYSIWYG Editors for Web Designing
Microsoft FrontPage Adobe Dreamweaver
Web Design Concepts
Remember…
• The primary objective of good design is giving user a
satisfying experience.
• But dazzling user is not our main goal.
• It’s all about giving users what they want.
• Well planned design, quality content and proper use of
media can achieve this goal.
Web Design Concepts
Color usage on the Web
Colors are displayed combining RED, GREEN, and
BLUE light.
Color usage on the Web
There are two main color numbering formats…
• RGB Color Format
• Hexadecimal Color Format
Color Names Supported by All Browsers
Tips for Color Usage on the Web
 Make sure website text is readable.
 Limit the color choices.
 Make to consider brand guidelines.
 Use richer colors for prominent items.
 Keep cultural color meanings in mind.
 Does it fit with the theme?
The End
http://twitter.com/rasansmn

More Related Content

What's hot

What's hot (12)

Chapter 10 authoring
Chapter 10 authoringChapter 10 authoring
Chapter 10 authoring
 
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 13 - Progra...
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 13 - Progra...Understanding Computers: Today and Tomorrow, 13th Edition Chapter 13 - Progra...
Understanding Computers: Today and Tomorrow, 13th Edition Chapter 13 - Progra...
 
Overview of TCP IP
Overview of TCP IPOverview of TCP IP
Overview of TCP IP
 
Web Tech
Web TechWeb Tech
Web Tech
 
Introduction To Web Technology
Introduction To Web TechnologyIntroduction To Web Technology
Introduction To Web Technology
 
Web Engineering
Web Engineering  Web Engineering
Web Engineering
 
Basic computers for DIU laptop project students
Basic computers for DIU laptop project studentsBasic computers for DIU laptop project students
Basic computers for DIU laptop project students
 
Designing applications with multimedia capabilities
Designing applications with multimedia capabilitiesDesigning applications with multimedia capabilities
Designing applications with multimedia capabilities
 
Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1 Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1
 
Comp 111 cep ii
Comp 111 cep iiComp 111 cep ii
Comp 111 cep ii
 
Chapter 4 - Display Design
Chapter 4  - Display DesignChapter 4  - Display Design
Chapter 4 - Display Design
 
History of Web Technology
History of Web TechnologyHistory of Web Technology
History of Web Technology
 

Viewers also liked

DISE - Database Concepts
DISE - Database ConceptsDISE - Database Concepts
DISE - Database Concepts
Rasan Samarasinghe
 

Viewers also liked (19)

DITEC - E-Commerce & ASP.NET
DITEC - E-Commerce & ASP.NETDITEC - E-Commerce & ASP.NET
DITEC - E-Commerce & ASP.NET
 
DITEC - Programming with Java
DITEC - Programming with JavaDITEC - Programming with Java
DITEC - Programming with Java
 
DITEC - Expose yourself to Internet & E-mail (second update)
DITEC - Expose yourself to Internet & E-mail (second update) DITEC - Expose yourself to Internet & E-mail (second update)
DITEC - Expose yourself to Internet & E-mail (second update)
 
DITEC - Expose yourself to Internet & E-mail (updated)
DITEC - Expose yourself to Internet & E-mail (updated)DITEC - Expose yourself to Internet & E-mail (updated)
DITEC - Expose yourself to Internet & E-mail (updated)
 
DITEC - Expose yourself to Internet & E-mail
DITEC - Expose yourself to Internet & E-mailDITEC - Expose yourself to Internet & E-mail
DITEC - Expose yourself to Internet & E-mail
 
DITEC - Programming with C#.NET
DITEC - Programming with C#.NETDITEC - Programming with C#.NET
DITEC - Programming with C#.NET
 
DITEC - Software Engineering
DITEC - Software EngineeringDITEC - Software Engineering
DITEC - Software Engineering
 
DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#DISE - Windows Based Application Development in C#
DISE - Windows Based Application Development in C#
 
DISE - Introduction to Software Engineering
DISE - Introduction to Software EngineeringDISE - Introduction to Software Engineering
DISE - Introduction to Software Engineering
 
DISE - Programming Concepts
DISE - Programming ConceptsDISE - Programming Concepts
DISE - Programming Concepts
 
DISE - OOAD Using UML
DISE - OOAD Using UMLDISE - OOAD Using UML
DISE - OOAD Using UML
 
DISE - Database Concepts
DISE - Database ConceptsDISE - Database Concepts
DISE - Database Concepts
 
Esoft Metro Campus - Certificate in c / c++ programming
Esoft Metro Campus - Certificate in c / c++ programmingEsoft Metro Campus - Certificate in c / c++ programming
Esoft Metro Campus - Certificate in c / c++ programming
 
DISE - Windows Based Application Development in Java
DISE - Windows Based Application Development in JavaDISE - Windows Based Application Development in Java
DISE - Windows Based Application Development in Java
 
Monitoring web application response times, a new approach
Monitoring web application response times, a new approachMonitoring web application response times, a new approach
Monitoring web application response times, a new approach
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET Presentation
 
DITEC - Fundamentals in Networking
DITEC - Fundamentals in NetworkingDITEC - Fundamentals in Networking
DITEC - Fundamentals in Networking
 
DISE - Software Testing and Quality Management
DISE - Software Testing and Quality ManagementDISE - Software Testing and Quality Management
DISE - Software Testing and Quality Management
 
ASP.NET Best Practices - Useful Tips from the Trenches
ASP.NET Best Practices - Useful Tips from the TrenchesASP.NET Best Practices - Useful Tips from the Trenches
ASP.NET Best Practices - Useful Tips from the Trenches
 

Similar to DIWE - Introduction to Web Technologies

Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptx
academicjfurio
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdf
wondimagegndesta
 

Similar to DIWE - Introduction to Web Technologies (20)

Web Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTREWeb Design & Development !BATRA COMPUTER CENTRE
Web Design & Development !BATRA COMPUTER CENTRE
 
Web Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptxWeb Page Designing- Empower Technology.pptx
Web Page Designing- Empower Technology.pptx
 
Learn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end developmentLearn web development: Front-end vs Back-end development
Learn web development: Front-end vs Back-end development
 
Chapter 4 Web design tech in formation technology msc class .pdf
Chapter 4 Web design tech in formation technology  msc class .pdfChapter 4 Web design tech in formation technology  msc class .pdf
Chapter 4 Web design tech in formation technology msc class .pdf
 
How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018How to Learn Web Designing Step by Step From Basics in 2018
How to Learn Web Designing Step by Step From Basics in 2018
 
MKT 460 Week 3
MKT 460 Week 3MKT 460 Week 3
MKT 460 Week 3
 
Mkt460 Week3
Mkt460 Week3Mkt460 Week3
Mkt460 Week3
 
Web development
Web developmentWeb development
Web development
 
Web design and development (1) converted
Web design and development (1) convertedWeb design and development (1) converted
Web design and development (1) converted
 
Crafting Digital Experiences with Innovative Web Designing”
Crafting Digital Experiences with Innovative Web Designing”Crafting Digital Experiences with Innovative Web Designing”
Crafting Digital Experiences with Innovative Web Designing”
 
​Web ​Development
 ​Web ​Development ​Web ​Development
​Web ​Development
 
8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech8 Ideas for Building Great Websites | Keyideas Infotech
8 Ideas for Building Great Websites | Keyideas Infotech
 
Web development company
Web development companyWeb development company
Web development company
 
Best Search Engine Optimization Online Course
Best Search Engine Optimization Online CourseBest Search Engine Optimization Online Course
Best Search Engine Optimization Online Course
 
What is the difference between Web design and Web Development.pdf
What is the difference between Web design and Web Development.pdfWhat is the difference between Web design and Web Development.pdf
What is the difference between Web design and Web Development.pdf
 
Web Designing Training In Chandigarh
Web Designing Training In ChandigarhWeb Designing Training In Chandigarh
Web Designing Training In Chandigarh
 
Frameworks
FrameworksFrameworks
Frameworks
 
Web-Development.pdf
Web-Development.pdfWeb-Development.pdf
Web-Development.pdf
 
Introduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web DevelopmentIntroduction to HTML, CSS, and JavaScript for Web Development
Introduction to HTML, CSS, and JavaScript for Web Development
 
Web Design & Development - Session 1
Web Design & Development - Session 1Web Design & Development - Session 1
Web Design & Development - Session 1
 

More from Rasan Samarasinghe

More from Rasan Samarasinghe (19)

Managing the under performance in projects.pptx
Managing the under performance in projects.pptxManaging the under performance in projects.pptx
Managing the under performance in projects.pptx
 
Agile project management with scrum
Agile project management with scrumAgile project management with scrum
Agile project management with scrum
 
Introduction to Agile
Introduction to AgileIntroduction to Agile
Introduction to Agile
 
IT Introduction (en)
IT Introduction (en)IT Introduction (en)
IT Introduction (en)
 
Application of Unified Modelling Language
Application of Unified Modelling LanguageApplication of Unified Modelling Language
Application of Unified Modelling Language
 
Advanced Web Development in PHP - Understanding REST API
Advanced Web Development in PHP - Understanding REST APIAdvanced Web Development in PHP - Understanding REST API
Advanced Web Development in PHP - Understanding REST API
 
Advanced Web Development in PHP - Understanding Project Development Methodolo...
Advanced Web Development in PHP - Understanding Project Development Methodolo...Advanced Web Development in PHP - Understanding Project Development Methodolo...
Advanced Web Development in PHP - Understanding Project Development Methodolo...
 
Advanced Web Development in PHP - Code Versioning and Branching with Git
Advanced Web Development in PHP - Code Versioning and Branching with GitAdvanced Web Development in PHP - Code Versioning and Branching with Git
Advanced Web Development in PHP - Code Versioning and Branching with Git
 
DIWE - Working with MySQL Databases
DIWE - Working with MySQL DatabasesDIWE - Working with MySQL Databases
DIWE - Working with MySQL Databases
 
DIWE - Using Extensions and Image Manipulation
DIWE - Using Extensions and Image ManipulationDIWE - Using Extensions and Image Manipulation
DIWE - Using Extensions and Image Manipulation
 
DIWE - File handling with PHP
DIWE - File handling with PHPDIWE - File handling with PHP
DIWE - File handling with PHP
 
DIWE - Advanced PHP Concepts
DIWE - Advanced PHP ConceptsDIWE - Advanced PHP Concepts
DIWE - Advanced PHP Concepts
 
DIWE - Fundamentals of PHP
DIWE - Fundamentals of PHPDIWE - Fundamentals of PHP
DIWE - Fundamentals of PHP
 
DIWE - Programming with JavaScript
DIWE - Programming with JavaScriptDIWE - Programming with JavaScript
DIWE - Programming with JavaScript
 
DIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web DesigningDIWE - Coding HTML for Basic Web Designing
DIWE - Coding HTML for Basic Web Designing
 
DIWE - Multimedia Technologies
DIWE - Multimedia TechnologiesDIWE - Multimedia Technologies
DIWE - Multimedia Technologies
 
Esoft Metro Campus - Programming with C++
Esoft Metro Campus - Programming with C++Esoft Metro Campus - Programming with C++
Esoft Metro Campus - Programming with C++
 
Esoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basicsEsoft Metro Campus - Certificate in java basics
Esoft Metro Campus - Certificate in java basics
 
DISE - Introduction to Project Management
DISE - Introduction to Project ManagementDISE - Introduction to Project Management
DISE - Introduction to Project Management
 

Recently uploaded

Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Peter Udo Diehl
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 

Recently uploaded (20)

THE BEST IPTV in GERMANY for 2024: IPTVreel
THE BEST IPTV in  GERMANY for 2024: IPTVreelTHE BEST IPTV in  GERMANY for 2024: IPTVreel
THE BEST IPTV in GERMANY for 2024: IPTVreel
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
Secure Zero Touch enabled Edge compute with Dell NativeEdge via FDO _ Brad at...
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
The UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, OcadoThe UX of Automation by AJ King, Senior UX Researcher, Ocado
The UX of Automation by AJ King, Senior UX Researcher, Ocado
 
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 
AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101AI presentation and introduction - Retrieval Augmented Generation RAG 101
AI presentation and introduction - Retrieval Augmented Generation RAG 101
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 

DIWE - Introduction to Web Technologies

  • 1. Diploma in Web Engineering Module I: Introduction to Web Technologies Rasan Samarasinghe ESOFT Computer Studies (pvt) Ltd. No 68/1, Main Street, Pallegama, Embilipitiya.
  • 2. Content 1. What is “Web” ? 2. HTML (HyperText Markup Language) 3. Web Developers Knowledge Areas 4. Nature of the Web 5. Current Trends in Web Development 6. Tools and Technologies 7. Web Design Concepts 8. Color usage on the Web
  • 4. HTML (HyperText Markup Language) HTML is the main markup language for creating web pages and other information that can be displayed in a web browser.
  • 5. HTML Versions Version Year HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 1.0 2000 HTML5 2012 XHTML5 2013
  • 6. Web Developers Knowledge Areas You gotta learn… HTML CSS Client Side Scripting Server Side Scripting
  • 7. Nature of the Web… The internet is transactional, that means user requests and server responds.
  • 8. Nature of the Web… Websites are either static or dynamic in content.
  • 9. Nature of the Web… It’s not a broadcast medium. Thus concepts of mass media is not valid for the internet. Vs
  • 10. Current Trends in Web Development Some popular websites then…
  • 11. Current Trends in Web Development Data driven content has become more popular
  • 12. Current Trends in Web Development Rich content on web pages
  • 13. Current Trends in Web Development E-Commerce Development Intranet Development
  • 14. Tools and Technologies WYSIWYG Editors for Web Designing Microsoft FrontPage Adobe Dreamweaver
  • 15. Web Design Concepts Remember… • The primary objective of good design is giving user a satisfying experience. • But dazzling user is not our main goal. • It’s all about giving users what they want. • Well planned design, quality content and proper use of media can achieve this goal.
  • 17. Color usage on the Web Colors are displayed combining RED, GREEN, and BLUE light.
  • 18. Color usage on the Web There are two main color numbering formats… • RGB Color Format • Hexadecimal Color Format
  • 19. Color Names Supported by All Browsers
  • 20. Tips for Color Usage on the Web  Make sure website text is readable.  Limit the color choices.  Make to consider brand guidelines.  Use richer colors for prominent items.  Keep cultural color meanings in mind.  Does it fit with the theme?