0 ratings0% found this document useful (0 votes)
29 views94 pagesCit 207 WST
CIT Html notes
Uploaded by
dutchman2051Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
0 ratings0% found this document useful (0 votes)
29 views94 pagesCit 207 WST
CIT Html notes
Uploaded by
dutchman2051Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 94
UNIT NAME: Web Systems and Technologies
UNIT CODE:CIT 207
LECTURER'BRIGID MUISYO
Week 1-2: Introduction to Web Technologies
Overview of the World Wide Web
Evolution of web technologies
Client-server architecture
Front-end and backend development
Week 3-4: HTML and CSS Basics
Introduction to HTML5
HTML document structure
Basic tags and elements
Cascading Style Sheets (CSS)
Styling web pages with CSS
Responsive design principles
Week 5-6: JavaScript Fundamentals
Introduction to JavaScript
Variables, data types, and operators
Control structures (if statements, loops)
Functions and objects
DOM manipulation
Event handling
Week 7-8: Front-end Frameworks
Introduction to front-end frameworks (e.g., React, Angular, Vuejs)
Building interactive user interfaces
Component-based architecture
State management in front-end applications
Week 9-10: Back-end Development
Server-side scripting languages (e.g., Nodejs, Python, Ruby)
Introduction to back-end frameworks (e.g., Express, Django, Ruby on Rails)
RESTful API design principles Handling HTTP requests and responses
Week 11-12: Databases and Data Storage
Introduction to databases (SQL and NoSQL)
Database design and normalization
CRUD operations
Connecting web applications to databases
Data modeling and schema design
Week 13-14: Web Security
Common web security threats
HTTPS and SSL/TLS
Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF)
Authentication and authorization
Best practices for secure web development
Week 15-16: Emerging Trends and Future Technologies
Progressive Web Apps (PWAs)
WebAssembly (Wasm)
WebRTC
Serverless architecture
Internet of Things (loT) and the web
WEB SYSTEM AND TECHNOLOGIES COURSE OUTLINE CHAPTER ONE
A) Overview of the World Wide Web
The World Wide Web (WWW), commonly known as the web, is a vast and
interconnected system of information that allows users to access and share resources
over the Internet. It is an integral part of the internet and has become an essential tool
for communication, collaboration, and information dissemination. Here is an overview
of the key components and concepts associated with the World Wide Web:
1. Definition:
The World Wide Web is a system of interlinked hypertext documents and
multimedia content, accessed via the intemet using web browsers.
2. Key Components:
© Web Pages:
© Basic building blocks of the web.
© Written in HTML (Hypertext Markup Language) to structure content.
Hyperlinks:
0 Text or elements thet, when clicked, navigate to other web pages or
resources
0 Enable the interconnected nature of the web.
Web Browsers:
0 Software applications that allow users to access and navigate the web
0 Examples include Chrome Firefox, Safari, and Edge.
© Web Servers:
0 Computers or systems that store and serve web pages to users
0 Respond to requests from web browsers.
© Internet Protocols:
OHTTP (Hypertext Transfer Protocol): Facilitates communication between
web browsers and servers.
OHTTPS (HTTP Secure): A secure version of HTTP that encrypts data for
security.
3. History:
‘© Invention of the Web:
0 Created by Sir Tim Berners-Lee in 1989.
0 The first website went live in 1991
‘© Evolution of Web Technologies:
o Introduction of HTML, CSS, and JavaScript for web page development. © Advancements in browser capabilities and standards
4. Web Development Technologies:
© HTML (Hypertext Markup Language):
© Standard language for creating web pages.
0 Defines the structure and layout of content.
CSS (Cascading Style Sheets):
© Styles web pages by defining the presentation, layout, and design.
© Enhances the visual appeal of web content.
© JavaScript:
0A scripting language that enables dynamic and interactive features.
© Runs in the browser to manipulate the Document Object Model (DOM),
‘© Web Frameworks and Libraries:
0 Tools like React, Angular, and Vuejs for efficient web development.
0 jQuery for simplified DOM manipulation.
5. Web Standards:
‘© W8C (World Wide Web Consortium):
o International community that develops web standards.
o Ensures interoperability and consistency in web technologies.
* HTMLS and cssa:
o Latest versions of HTML and CSS with enhanced features and capabilities
6. Web Applications and Services:
Dynamic Web Pages:
© Pages that can change content dynamically based on user interactions
© Enabled by JavaScript and AJAX (Asynchronous JavaScript and XML)
© Web Services:
© APIs (Application Programming Interfaces) that allow different web
applications to communicate.
0 Support for RESTful and SOAP APIs.
7. Challenges and Future Trends:
© Web Security:
© Ongoing challenges with cybersecurity, leading to the adoption of HTTPS
and other security measures.
© Responsive Design:
0 Designing web pages that adapt to various screen sizes and devices. © Ensures a consistent user experience.
© Web Accessibility:
o Emphasis on creating web content accessible to users with disabilities.
‘0 Compliance with WCAG (Web Content Accessil
© Emerging Technologies:
0 Integration of Al, VR (Virtual Reality), and AR (Augmented Reality) into web
applications
0 Continued evolution of web development frameworks and tools.
The World Wide Web has become an indispensable part of modem life, connecting
people, businesses, and information across the globe. Its continuous evolution and
adaptation to new technologies contribute to the dynamic and ever-expanding nature of
the online world.
b)Evolution of web technologies
The evolution of web technologies has been marked by significant advancements in
various areas, including web development, design, interactivity, and accessibility. Here's
a chronological overview of key milestones and developments in the evolution of web
technologies:
1. Early Days (1990s):
© Invention of the Web:
© Sir Tim Berners-Lee invents the World Wide Web in 1989.
0 The first website goes livein 1991
HTML and the Birth of the Web:
oO HTML (Hypertext Markup Language) is introduced for creating and
structuring web pages
lity Guidelines)
0 The web primarily consists of static pages with text and links
2. Mid-1990s: The Rise of Dynamic Content:
© Introduction of JavaScript:
o Netscape introduces JavaScript in 1995, enabling client-side scripting for
dynamic web pages
0 JavaScript allows for real-time interactivity and user engagement.
© CSS Emerges:
0 Cascading Style Sheets (CSS) are introduced to separate presentation from
structure.
0CSS allows for more sophisticated and consistent page styling
3. Late 1990s to Early 2000s: The Dot-Com Boom:
© Browser Wars: 0 Competition between Intemet Explorer and Netscape Navigator drives
innovation in browser features
© Microsoft introduces XMLHttpRequest, a key technology for asynchronous
data transfer (AJAX).
‘© Introduction of Flash:
© Macromedia Flash becomes popular for multimedia and interactive content.
0 Flash enables animations, games, and interactive web experiences.
4. Early 2000s: Web Standards and XML:
‘© W3C and Web Standards:
0 The World Wide Web Consortium (W3C) is established to develop and
maintain web standards.
oO HTML4 and CSS2 specifications are released
© XML (eXtensible Markup Language)
0 XML is introduced for structured data representation.
0 Used in web services, data exchange, and configuration files
5. Mid-2000s: Web 2.0 and AJAX:
© Web 2.0 Era:
0 Focus on user-generated content, collaboration, and social media.
© AJAX (Asynchronous JavaScript and XML) enables seamless data
exchange between the browser and server.
‘* Introduction of jQuery:
0 jQuery simplifies JavaScript coding with a cross-browser compatible library
0 Facilitates DOM manipulation and AJAX requests.
6. Late 2000s to Early 2010s: HTMLS and CSS3:
‘* HTMLS and CSS3 Specifications:
oHTMLS introduces new elements, APIs, and multimedia capabilities.
0 CSS3 adds advanced styling features like transitions and animations
© Responsive Web Design:
0 Ethan Marcotte introduces the concept of responsive web design.
0 Websites adapt to different screen sizes and devices.
7. Mid-2010s: JavaScript Frameworks and Libraries:
‘© Rise of Single Page Applications (SPAs):
0 JavaScript frameworks like Angular, React, and Vues gain popularity.
0 SPAs provide smoother user experiences with dynamic content loading © Nodej:
oNodejs enables server-side JavaScript, allowing developers to use @ unified
language on both the client and server.
8. Late 2010s: Progressive Web Apps (PWAs) and WebAssembly:
© Progressive Web Apps:
0 PWAs combine the best of web and mobile apps, offering offline
capabilities and improved performance.
© WebAssembly (Wasm):
0 Wasm allows running high-performance languages like C and C++ in web
browsers
0 Enhances web application performance and opens the door for complex
applications
9. 2020s: Continued Innovation and Integration:
‘© Web Component
0A set of web platform APIs that allow for the creation of reusable UI
components.
© WebRTC (Web Real-Time Communication)
o Enables real-time communication directly in the browser, supporting video
chat and file sharing
© Aland Machine Learning integration:
© Increasing integration of Al and machine leatning in web applications for
enhanced functionality and personalization.
© Security Enhancements:
0 Emphasis on HTTPS adoption, improved encryption, and more secure
authentication practices
The evolution of web technologies is ongoing, driven by technological advancements,
user demands, and the need for more sophisticated and interactive online experiences
The future is likely to see further integration of emerging technologies and continued
efforts to improve web performance, security, and accessibility.
¢) Client-server architecture
Client-server architecture is a computing model in which client devices communicate
with a central server to access resources or services. This architecture is wide used in
networked systems and distributed computing, The client-server model separates the
responsibilities of the client and the server, allowing for efficient and scalable
communication. Here's an overview of client-server architecture:
Components of Client-Server Architecture:
1. Client: © Definition: A client is @ device or application that requests services or
resources from a server.
o Responsibilities:
Initiates communication by sending requests to the server.
© Handles user interface, presentation logic, and user interactions,
* Processes and displays information received from the server.
2. Serer:
0 Definition: A server is a centralized system that provides resources or
services to clients.
o Responsibilities:
* Listens for incoming requests from clients
* Processes client requests and performs necessary computations or
data manipulations.
* Manages and controls access to resources or databases.
Key Characteristics of Client-Server Architecture:
1. Communication:
0 Request-Response Model: Clients send requests to the server, and the server
responds with the requested information or performs the requested
operation.
0 Protocols: Communication is facilitated using standardized protocols such
as HTTP, TCP/IP, or WebSocket.
2. Scalability:
© Centralized Control: The server acts as a central point of control, making it
easiet to scale and manage resources
0 Load Balancing: Multiple servers can be used to balance the load, ensuring
efficient resource utilization
3. Roles and Responsibilities:
0 Client-Side Logic: Clients handle user interface, presentation, and some
application logic.
0 Server-Side Logic: Servers manage data, perform computations, and
execute business logic.
4, Statelessness:
0 Stateless Interaction: Each client-server interaction is independent, and the
server does not maintain information about the state of the client between
requests
0 Session Management: Sessions can be implemented to maintain state for a
specific duration 5. Security:
© Centralized Security Measures: Security measures are implemented at the
server level, ensuring a consistent and controlled environment
0 Access Control: Servers manage access to resources based on user
authentication and authorization
‘Types of Client-Server Architectures:
1, Two-Tier Architecture:
© Simplest form with a client directly communicating with a server.
0 Commonly used in small-scale applications where the client handles both
the presentation and business logic, and the server manages data storage
2, Three-Tier Architecture:
0 Adds an additional layer, typically a middleware or application server,
between the client and database server.
0 Enhances scalability, maintainability, and flexibility
3, N-Tier Architecture:
0 Divides the application into multiple tiers or layers, each with specific
responsibilities.
o Allows for better distribution of tasks and more modular development.
Examples of Client-Server Applications:
1. Web Applications:
0 Clients (web browsers) request resources from web servers.
0 Server-side logic processes requests and returns HTML, CSS, and
JavaScript to clients.
2, Email Systems:
© Email clients (Outlook, Thunderbird) interact with email servers (SMTP,
IMAP) to send and receive messages.
3, Database Systems:
0 Clients (database clients or applications) query database servers to retrieve
or modify data
4, Online Gaming:
© Multiplayer games involve clients interacting with a central game server.
5. File Severs:
0 Clients request and receive files from file servers in networked environments.
Advantages of Client-Server Architecture:
1, Scalability: Easily scalable by adding more servers to handle increased demand
2. Centralized Control: Simplifies management and maintenance of resources. 3. Security: Centralized security measures can be implemented
4, Resource Sharing: Enables efficient sharing of resources among multiple clients
Challenges of Client-Server Architecture:
1, Dependency on Server: Clients rely on the availability and responsiveness of the
server.
2, Network Overhead: Communication between clients end servers introduces
network latency.
3. Single Point of Failure: The server can become single point of failure if not
properly managed.
Client-server architecture is a fundamental model that has been foundational to the
development of networked applications and distributed systems. It remains a prevalent
and effective approach for building scalable and manageable systems
) Front-end and back-end development
Front-end and backend development are two essential components of web
development, each responsible for different aspects of building a web application
These terms refer to the client-side and server-side development, respectively. Here's an
overview of frontend and back-end development:
Front-End Development:
1. Definitior
0 Front-end development, also known as client-side development, involves
creating the user interface and user experience that users interact with
directly.
2. Key Technologies and Languages:
OHTML (Hypertext Markup Language):
© Defines the structure and content of web pages.
0 CSS (Cascading Style Sheets)
* Styles the presentation and layout of web pages.
0 JavaScript:
* Adds interactivity and dynamic behavior to web pages.
3. Responsibilities:
o User interface (Ul):
© Designing and implementing the visual elements of the application.
© Creating responsive and user-friendly layouts
0 User Experience (UX):
© Ensuring a smooth and intuitive user journey.
© Implementing interactive elements and animations 0 Cross-Browser Compatibility:
© Ensuring that the application works consistently across different
web browsers,
0 Mobile Responsiveness:
© Designing for a seamless experience on various devices, including
smartphones and tablets
4, Development Tools:
0 Text Editors/IDEs: Visual Studio Code, Sublime Text, Atom.
0 Version Control: Git and GitHub
0 Frameworks/Libraries: React, Angular, Vuejs
5, Testing and Debugging:
0 Frontend developers test and debug their code to ensure that the user
interface functions as intended.
0 Tools like Chrome Developer Tools are commonly used for debugging
6. Interactions with Back-End:
0 Front-end developers often collaborate with backend developers to integrate
user interfaces with server-side functionalities through APIs (Application
Programming Interfaces)
Back-End Development:
1. Definitio
0 Backend development, also known as server-side development, involves
building and maintaining the server, databases, and application logic that
power the front-end.
2. Key Technologies and Languages:
o Server-Side Languages:
* Java, Python, Ruby, PHP, Nodejs (JavaScript on the server), etc.
0 Databases:
* MySQL, PostgreSQL, MongoDB, Oracle etc.
o Server Frameworks:
* Express (Node.js), Django (Python), Ruby on Rails (Ruby), Spring
(Java), etc.
3, Responsibilities:
0 Server-Side Logic:
© Handling user requests and executing application logic
© Processing and managing data on the server.
0 Database Manageme’ © Storing, retrieving, and updating data in databases.
o Authentication and Authorization:
© Implementing secure user authentication and authorization
mechanisms.
OAPI Development:
© Creating APIs that allow communication between the front-end and
back-end.
4, Development Tools:
© Integrated Development Environments (IDEs): Visual Studio, IntelliJ IDEA,
Eclipse.
0 Database Management Systems (DBMS): MySQL Workbench, pgAdmin,
MongoDB Compass.
Version Control: Git and GitHub.
5. Security:
0 Back-end developers focus on implementing security measures to protect
data and ensure secure communication.
0 Techniques include encryption, secure coding practices, and protecting
against common vulnerabilities.
6. Scalability and Performance:
0 Optimizing server performance and ensuring the application can handle
increased load.
0 Scaling the back-end infrastructure es needed
7. Integration with Front End:
0 Back-end developers work on providing APIs that the front-end can use to
interact with server-side functionalities.
0 Ensuring seamless communication and data flow between the front-end
and back-end
Full-Stack Development:
1. Definition:
0 Full-stack developers are proficient in both front-end and back-end
development.
0 They can handle the entire web development process, from designing user
interfaces to managing server-side logic and databases.
2. Skills:
0 Proficient in HTML, CSS, JavaScript for frontend development.
© Competent in a server-side language (e.g., Nodes, Python, Java) and
database management. 0 Knowledge of frameworks and libraries on both front-end and back-end.
0 Understanding of system architecture and security.
3, Advantages:
0 Full-stack developers can work on end-to-end development, making them
versatile in building and maintainingweb applications.
© They understand the entire developmentit stack, facilitating effective
collaboration between front-end and back-end teams.
In summary, front-end development focuses on creating an engaging and interactive
user interface, while back-end development deals with server-side logic, databases, and
overall application functionality. Full-stack developers have a comprehensive skill set
that allows them to contribute to both aspects of web development. The collaboration
between frontend and back-end teams is crucial for building successful and scalable
web applications
CHAPTER TWO
a) Introduction to HTMLS
HTMLS, or Hypertext Markup Language version 5, is the latest and current standard for
structuring and presenting content on the World Wide Web. It is a markup language
used to Ocreate the structure of web pages and is an essential technology in web
development. HTMLS introduces several new elements, attributes, and features
compared to its predecessor, HTML4. Here's an introduction to HTMLS:
Key Features of HTMLS:
oO HTMLS introduces semantic elements that provide more meaningful
information about the content's structure. Examples include ,
, ,