System
Architectures
Prepared by : Tamrat Tena
What is System Architectures
❖ System architecture is the blueprint or design of how the different parts of a
computer system or software application are organized and how they work together
❖ Purpose:
It shows how data flows, how components communicate, and how the system is structured
(front-end, back-end, database, network, etc.).
Think of it like:
The map of a city – it shows where the roads, buildings, and connections are, so everything can work
together smoothly
Main Elements of System Architecture
1. Presentation Layer (Front-End) – what users see and interact with.
2. Application Layer (Back-End) – the logic or brain that processes requests.
3. Data Layer (Database/Storage) – where information is stored securely.
4. Infrastructure/Hardware Layer – servers, networks, cloud, etc.
Types of System Architectures
○ One-Tier (Standalone) – everything in one machine.
○ Two-Tier – client ↔ database.
○ Three-Tier – client ↔ server ↔ database. (Client–Server–Database
Model)
○ N-Tier – multiple layers (API, microservices, caching, etc.).
Two-Tier Architecture
Layers:
1. Client (Front-End)
2. Database (Data Layer)
How it works:
● The client (e.g., desktop app) talks directly to the database.
● The database does all the storage + some logic.
Advantages:
Three-Tier Architecture
Layers:
1. Presentation Layer (Front-End) – user interface (browser, mobile app).
2. Application Layer (Back-End / Server) – logic, rules, authentication.
3. Data Layer (Database) – stores structured data.
How it works:
● The client sends requests → back-end processes → database stores/retrieves → response goes back to client.
Advantages:
What is Front-End
Front-End
● Definition:
The front-end is the part of a computer system, website, or application that
users see and interact with directly.
● Other name: Client side.
What It Does
● Displays information from the back-end or database.
● Collects input from the user (like forms, clicks, text).
● Makes the system look usable, attractive, and interactive
Technologies Used
● HTML → gives structure (headings, forms, tables, paragraphs).
● CSS → gives style (colors, fonts, layout, design).
● JavaScript → makes it interactive (buttons, animations, form validation).
● Frameworks & Libraries: React, Angular, [Link], Bootstrap, etc
Examples of Front-End
● A login page where you type username and password.
● The shopping cart page in Amazon showing product names and prices.
● The “Like” button and comment section in Facebook.
● The Gmail inbox interface where you read and compose emails
What is HTML
❖ HTML stands for HyperText Markup Language.
❖ It is the standard language for creating web pages
❖ With HTML you can create your own Website
❖ HTML is easy to learn - You will enjoy it!
Is HTML a Programming Language?
❖ .
No HTML is not a programming language
❖ Programming languages (like Python, Java, or C++) are used to give logic and instructions to a computer:
calculations, decisions, loops, and complex operations
❖ HTML is a markup language. It doesn’t perform calculations or logic—it only marks up content to tell the
browser how to display it
How HTML Works With Other Languages
❖ HTML alone = just the structure
❖ CSS = adds design (colors, fonts, layouts)
❖ JavaScript = adds interactivity (buttons, animations, form validation).
❖ Backend Languages (Python, PHP, Java, etc.) = add logic, databases, and server-side
features.
Text Editors for Writing HTML
❖ A text editor is a simple software where we can write and edit code .
❖ Example of text editor Notepad, Notepad ++, Visual Studio Code, pycharm etc
Example
<!DOCTYPE html>
<html>
<head>
<title>Page Title </title>
</head>
<body>
<h1>This is a Heading </h1>
<p>This is a paragraph. </p>
</body>
</html>
Code Explanation
<!DOCTYPE html>
❖ This tells the browser: “This is an HTML5 document
❖ It’s not an HTML tag, but a declaration.
<html>
❖ The opening <html> tag marks the start of your HTML document.
❖ Everything you write for the page should go inside <html> ... </html>
Code Explanation
<head>
<title>Page Title</title>
</head>
❖ The <head> section contains information about the page (not shown directly on the webpage)
❖ <title> sets the text that appears in the browser tab
❖ Example: If you type “My First Website” inside <title>, the browser tab will display that
Code Explanation
<body>
❖ The <body> section contains everything you actually see on the webpage:
text, images, links, etc
<h1>this is a heading<body>
❖ <h1> is the largest heading
❖ Headings range from <h1> (biggest) to <h6> (smallest)
<h1>this is a heading<body>
❖ <p> defines a paragraph
❖ It is used for normal text content
Code Explanation
</body>
</html>
❖ These close the <body> and <html> sections
This is the simplest structure of any HTML page:
● DOCTYPE → tells browser it’s HTML
● HTML → contains everything
● HEAD → invisible info (like title, metadata, styles, scripts)
● BODY → visible content
Code Explanation
● The <!DOCTYPE html> declaration defines that this document is an HTML5 document
● The <html> element is the root element of an HTML page
● The <head> element contains meta information about the HTML page
● The <title> element specifies a title for the HTML page (which is shown in the browser's
title bar or in the page's tab)
● The <body> element defines the document's body, and is a container for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
● The <h1> element defines a large heading
● The <p> element defines a paragraph
1. Text Editors for
Writing HTML
Choose one approach to grab the audience’s
attention right from the start: unexpected,
emotional, or simple.
➔ Unexpected
Highlight what’s new, unusual, or
surprising.
➔ Emotional
Give people a reason to care.
➔ Simple
Provide a simple unifying message for
what is to come
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
How many languages do
you need to know to
communicate with Tip
the rest of the world?
In this example, we’re
leading off with
something unexpected.
While the audience is
trying to come up with a
number, we’ll surprise
them with the next slide.
HTML Headings
❖ HTML headings are defined with the <h1> to <h6> tags .
❖ <h1> defines the most important heading. <h6> defines the least important
heading
Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
❖ HTML paragraphs are defined with the <p> tag: .
Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
❖ HTML links are defined with the <a> tag:
Example
<a href="[Link] >This is a link </a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements
You will learn more about attributes in a later chapter.
HTML Attributes
❖ HTML attributes provide additional information about HTML elements.
❖ All HTML elements can have attributes
❖ Attributes provide additional information about elements
❖ Attributes are always specified in the start tag
❖ Attributes usually come in name/value pairs like: name="value"
.
The href Attributes
❖ The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link goes to:.
❖ All HTML elements can have attributes
❖ Attributes provide additional information about elements
❖ Attributes are always specified in the start tag
❖ Attributes usually come in name/value pairs like: name="value"