ASSIGNMENT 1 FRONT SHEET

Qualification BTEC Level 5 HND Diploma in Computing

Unit number and title 13: Website Design & Development

Submission date Date Received 1st submission

Re-submission Date Date Received 2nd submission

Student Name Kiều Huy Hoàng Student ID BH00429

Class SE06201 Assessor name NGUYEN THI HONG HANH

Student declaration

I certify that the assignment submission is entirely my own work and I fully understand the consequences of plagiarism. I understand that
making a false declaration is a form of malpractice.

Student’s signature Kiều Huy Hoàng

Grading grid

P1 P2 P3 P4 M1 M2 M3 D1
 Summative Feedback: Resubmission Feedback:

Grade: Assessor Signature: Date:

Signature & Date:
 Table of contents
A. Introduction: .............................................................................................................................................................................................................................. 5

B. Contents: .................................................................................................................................................................................................................................... 7

( P1 ) Identify the purpose and types of DNS, including explanations on how domain names are organized and managed: ............................................... 7

I. What is website ? ........................................................................................................................................................................................................ 7

1. Website:.............................................................................................................................................................................................................. 7

2. How the website works ?.................................................................................................................................................................................... 8

3. Domain Name System (DNS): ........................................................................................................................................................................... 9

3.1. What is domain name? ............................................................................................................................................................................ 9

3.2. What is Domain Name System ? ........................................................................................................................................................... 11

3.3. Purpose and type of DNS: ..................................................................................................................................................................... 12

3.4. How does DNS work:............................................................................................................................................................................ 13

( P2 ) Explain the purpose and relationships between communication protocols, server hardware, operating systems and web server software with

regards to designing, publishing and accessing a website:................................................................................................................................................... 15

1. Communication protocols: ....................................................................................................................................................................................... 15

2. Server hardware: ...................................................................................................................................................................................................... 17

3. Operating systems: ................................................................................................................................................................................................... 18

4. Server software:........................................................................................................................................................................................................ 19

5. The relationship between communication protocols, server hardware, operating system and web server software related to design, publish and

access a website:........................................................................................................................................................................................................... 20

( P3 ) Discuss the capabilities and relationships between front-end and back-end website technologies and explain how these relate to presentation and
1
application layers: ................................................................................................................................................................................................................ 21

1. Static and dynamic website: ..................................................................................................................................................................................... 21

1.1. Static website: ............................................................................................................................................................................................... 21

1.2. Dynamic website: .......................................................................................................................................................................................... 23

2. Front-end technologies: ............................................................................................................................................................................................ 25

2.1. HTML (Hypertext Markup Language): ........................................................................................................................................................ 25

2.2. CSS (Cascading Style Sheets): ...................................................................................................................................................................... 27

2.3. JavaScript (JS): .............................................................................................................................................................................................. 28

3. Back-end technologies: ............................................................................................................................................................................................ 32

3.1. .NET: ............................................................................................................................................................................................................. 32

3.2. PHP (Hypertext Preprocessor): ..................................................................................................................................................................... 33

3.3. Java:............................................................................................................................................................................................................... 35

3.4. Python: .......................................................................................................................................................................................................... 36

4. Explain how these relate to presentation and application layers: ............................................................................................................................. 41

4.1. Role of presentation and application layers: ................................................................................................................................................. 41

4.2. How the Front-end and back-end website technologies relate to presentation and application layers in OSI model: .................................. 45

( P4 ) Discuss the differences between online website creation tools and custom built sites with regards to design flexibility, performance, functionality,

User Experience (UX) and User Interface (UI). ................................................................................................................................................................... 47

1. Some of tool to create online website: ..................................................................................................................................................................... 47

2. Discuss the differences between online website builders and custom-built websites with regard to design flexibility, performance, functionality,

User Experience (UX), and Appearance user (UI). ...................................................................................................................................................... 50

2
 3. Define and compare UI, UX: ................................................................................................................................................................................... 51

C. Conclusion: .............................................................................................................................................................................................................................. 53

D. References: .............................................................................................................................................................................................................................. 54

3
 Table of figures
Figure 1: Website ................................................................................................................................................................................................................... 7
Figure 2: How the website works ? ........................................................................................................................................................................................ 8
Figure 3: Domain name ........................................................................................................................................................................................................ 11
Figure 4: Domain Name System .......................................................................................................................................................................................... 12
Figure 5: How does DNS work ............................................................................................................................................................................................ 15
Figure 6: Communication protocols ..................................................................................................................................................................................... 16
Figure 7: Operating systems ................................................................................................................................................................................................. 18
Figure 8: Server software ..................................................................................................................................................................................................... 19
Figure 9: Static website ........................................................................................................................................................................................................ 22
Figure 10: Dynamic website ................................................................................................................................................................................................ 24
Figure 11: HTML (Hypertext Markup Language) ............................................................................................................................................................... 26
Figure 12: CSS (Cascading Style Sheets) ............................................................................................................................................................................ 27
Figure 13: JavaScript (JS) .................................................................................................................................................................................................... 29
Figure 14: PHP (Hypertext Preprocessor) ............................................................................................................................................................................ 34
Figure 15: Java ..................................................................................................................................................................................................................... 35
Figure 16: Python ................................................................................................................................................................................................................. 37
Figure 17: Application layers ............................................................................................................................................................................................... 42
Figure 18: Presentation layers .............................................................................................................................................................................................. 43
Figure 19: OSI model ........................................................................................................................................................................................................... 45

4
A. Introduction:
Currently, I am the team leader of a comprehensive web team for a leading creative web solutions and marketing company. Today our team
is about to sign an important contract to develop an online shopping mall so this is a great opportunity. As the end-to-end site lead, it was my
responsibility to guide my team in choosing the right tools and techniques to bring this project to life.
To ensure the success of this project, we needed a solid understanding of web technologies and their impact on website design, functionality,
management and performance. This is why we organize two presentations: one for junior staff, covering basic web technologies, hosting
services, website management and server technology, and another presentation for our senior staff, diving into front-end and back-end
technologies, as well as other tools, techniques, and software used in site development progressive web. This knowledge will help us make
wise decisions and choose the most suitable tools and techniques for our upcoming projects.
To ensure the project is completed successfully and on schedule, I will provide some useful information in this report to help you better
understand this project so that it is completed successfully and on schedule.
( P1 ) Identify the purpose and type of DNS, including an explanation of how domain names are organized and managed.
In the first part, I will define what a website is and how it works. Along with that, I will also define DNS, its purpose, types of DNS, and how
DNS works.
( P2 ) Explain the purpose and relationship between communication protocols, server hardware, operating systems, and web server software
involved in designing, publishing, and accessing a website.
In this section, I will learn about web firmware including communication protocols, software, hardware, and operating systems. Along with
that, I will also state the relationship of web-based software to the accessibility of a website.
(P3)Discuss the capabilities and relationships between front-end and back-end website technologies and explain how they relate to
presentation and application layer.
In the next section, I will outline the definition, purpose, advantages, and disadvantages of web technology. Along with that, I will also explain
how the relationship is related to the presentation and application layer.

5
(P4) Discuss the differences between online website builders and custom built websites with regards to design flexibility, performance,
functionality, User Experience (UX) and User Interface (UI).
Here, I will highlight some online website creation tools and discuss the differences between online website creation tools. Finally, I will
create a table to define and compare UI and UX.
Please join me to learn more about this project.

6
B. Contents:
( P1 ) Identify the purpose and types of DNS, including explanations on how domain names are
organized and managed:

I. What is website ?
1. Website:

A website is a collection of web pages, and web pages are digital files written in HTML (Hypertext Markup Language), CSS (Cascading Style
Sheets), and JavaScript. To make your website available to everyone in the world, it must be hosted or hosted on computers connected to the
Internet around the clock. Such computers are called Web Servers.
The website's web pages are linked with hyperlinks and hypertext and share a common look and feel and design. The website may also
contain some additional documents and files such as images, videos or other digital content.

Figure 1: Website

7
2. How the website works ?

Websites operate using a combination of front-end and back-end technologies. User interface includes the visual and interactive elements
that users see and interact with, such as layout, design, and content. This is typically created using languages such as HTML, CSS, and
JavaScript.
The back-end includes servers, applications, and databases that work together to deliver content and functionality to users. This can involve
technologies such as server-side scripting languages (e.g. PHP, Python, Ruby), databases (e.g. MySQL, MongoDB), and web servers (e.g.
Apache , Nginx).
When a user visits a website, their browser sends a request to the website's server, which then processes the request and sends back the
data needed to display the website. This data is then displayed by the browser, allowing the user to interact with the website.
There are also many other aspects such as domain management, hosting, security and performance optimization that contribute to the
overall functionality of the website.

Figure 2: How the website works ?

8
3. Domain Name System (DNS):

3.1. What is domain name?

A domain name is a text string that maps to an alphanumeric IP address, used to access a website from client software. In plain English, a
domain name is the text that a user types into a browser window to visit a specific website. For example, Google's domain name is
'google.com'.
The actual address of the website is a complex numeric IP address (e.g. 192.0.2.2), but thanks to DNS, users can enter a human-friendly
domain name and be redirected to the website they are looking for sword. This process is called DNS lookup.
Example:
- https://www.hostinger.com/tutorials/what-is-a-url
HTTP or HTTPS:
HTTP (Hypertext Transfer Protocol) and HTTPS (Hypertext Transfer Protocol Secure) are network communication protocols between web
servers and web browsers. They transmit messages, retrieve them through the domain name system (DNS) and send them back to the browser.
The difference between HTTP and HTTPS is that HTTPS encrypts the data transmission. This security protocol better protects your website
and is essential in improving your search rankings.
WWW (Subdomain):
A subdomain consists of any words or phrases that come before a URL’s first dot. Referring to the world wide web, www is the most common
type. It indicates that a website is accessible through the internet and uses HTTP to communicate.
Furthermore, site owners can use any word as a subdomain for website organization purposes as it points to a specific directory from the
primary domain.
hostinger.com (Domain name ) and .com (Domain name extension):
• Domain name:
A domain name is what users type into their browser’s address bar to reach a website. It consists of a domain name and a domain extension,
for example: hostinger.com.....
Every name is unique, and they represent their corresponding IP addresses. This unique IP address points to the website’s server. In other
9
words, it helps users access websites easily.
• Domain name extension:
Domain name extension is the bit that follows the website name. Used for about 53% of all websites, .com is the most popular extension. It is
also known as top-level domain (TLD). Some widely used types of TLD extensions:
+) Generic TLD (gTLD): This category includes most of the most popular extensions, including .com, .org, .net.
+) Country code TLD (ccTLD): As the name suggests, this TLD denotes a country, territory, or geographical area. The ccTLD consists of two
letters based on international country codes, such as .mx, .in, or .at.
+) Sponsored TLD (sTLD): This type of extension is sponsored and used by specific organizations. For example, Registry Management Company
Tralliance, LLC sponsors .travel and DotAsia Organization Ltd. sponsor the .asia domain extension.
+) New gTLD (nTLD): It's the new generation of domain extensions. Essentially, every TLD launched after January 12, 2012 is a new gTLD,
including .online, .store, and .tech.
/tutorials/what-is-a-url ( Path to the Resource ):
Path to the Resource is the right part of the TLD. It is often called the directory structure of the website. It provides additional information to
the web server, allowing it to direct users to a specific location. A series of resource paths that can point to a specific page, post, or file.
A URL can have multiple paths to resources. When that happens, a forward slash (/) separates each slash. The more paths to a resource a URL
contains, the more specific the location.
?q=site%3Ahostinger.com%2Ftutoria ( Parameters ):
Parameters are query strings or URL variables. They are part of the URL following the question mark.
Parameters contain keys and values separated by an equal sign (=). Furthermore, a URL can have multiple variables, an ampersand (&) symbol
separating each symbol.

10
 Figure 3: Domain name

3.2. What is Domain Name System ?

The Domain Name System (DNS) is a hierarchical, hierarchical naming system used to translate human-readable domain names into machine-
readable IP addresses. It serves as the Internet's key infrastructure, allowing users to access websites and other online services using domain
names instead of having to remember complicated IP addresses.
DNS acts as a distributed database or directory that stores and manages domain name records and their corresponding IP addresses. When a
user enters a domain name into a web browser or any other application that requires network communication, the DNS system assists in the
resolution process by mapping the domain name to its associated IP address.

11
 Figure 4: Domain Name System

3.3. Purpose and type of DNS:

DNS, or Domain Name System, plays a crucial role in the functioning of the internet by translating human-readable domain names into IP
addresses. Here are its primary purpose and types of DNS:
❖ Purpose of DNS:
➢ Here are some key purposes of DNS:
- Domain name resolution: This is the core function of DNS. DNS provides a distributed naming system that resolves domain names to their
associated IP addresses. This allows users to access websites and other services using meaningful and easy-to-remember domain names
instead of having to remember complicated numerical IP addresses.
- Load balancing and redundancy: DNS allows the distribution of incoming network traffic across multiple servers or IP addresses associated
with a domain name. This helps balance load and improve performance by directing users to different servers based on factors such as server
availability or geographical distance.

12
- DNS Security: DNS plays an important role in enhancing the security of internet communications. DNS Security Extensions (DNSSEC) provide
cryptographic authentication and verify the integrity of DNS data, preventing DNS spoofing and man-in-the-middle attacks. DNS can be used
to implement security measures such as blacklisting malicious websites and preventing unauthorized access.
- Domain name registration and management: DNS is an indispensable part of the domain name registration and management process. It
facilitates the association of domain names with IP addresses, allowing domain owners to control their online presence and manage various
DNS-related settings, such as domain names. secondary, email routing, and DNS resource records.
❖ Type of DNS:
➢ There are different types of DNS servers that serve specific functions within the DNS infrastructure:
- Recursive DNS resolver: This is the first point of contact for the browser. They receive your domain name request and either know the IP
address directly or consult other servers to find it and perform the resolution process on their behalf.
- Authoritative DNS servers: These servers store the actual DNS records for a domain. They respond to queries from recursive resolvers with
the exact IP address(es) associated with a domain name.
- Root DNS server: This is the top level of the DNS hierarchy. They provide information about the authoritative name servers for each top-
level domain (TLD), directing DNS queries to the appropriate TLD name servers.
- TLD name servers: These servers maintain information about domain names within a specific top-level domain (for example, ".com" or
".org"). They provide information about the authoritative name servers responsible for the individual domain names within that TLD.
Overall, DNS plays an important role in translating domain names to IP addresses, facilitating efficient and secure communication on the
internet.

3.4. How does DNS work:

The Domain Name System (DNS) works through a series of steps involving different components, such as DNS resolvers, authoritative DNS
servers, root DNS servers, and TLD (domain-level domain) servers. tallest). Here's a simple overview of how DNS works:
- Users enter a web address or domain name into their browser, and their device sends a DNS resolution request to the DNS resolver. The
resolver is typically provided by the user's internet service provider (ISP) or configured by the network administrator.

13
- The browser sends a message, called a recursive DNS query, to the network to find out the IP address or network to which the domain name
corresponds. The query goes to a recursive DNS server, also known as a recursive resolver and typically managed by an internet service
provider (ISP). If the recursive resolver has the address, it returns the address to the user and the web page loads.
- If the recursive DNS server does not have an answer, it queries a series of other servers in the following order: the DNS root name server,
the top-level domain (TLD) name server, and the authoritative name server.
- The three types of servers work together and continue redirection until they retrieve the DNS record containing the queried IP address. It
sends this information to the DNS server recursively and loads the website the user is looking for. DNS root name servers and TLD servers
mainly redirect queries and rarely provide solutions on their own.
- The recursive server stores or caches the A record for the domain name containing the IP address. The next time it receives a request for
that domain, it can reply directly to the user instead of querying other servers.
- If the query reaches the authoritative server and the information cannot be found, it returns an error message. The entire process of
querying different servers takes just a fraction of a second and is often imperceptible to the user.
- DNS servers answer questions from both inside and outside their own domains. When a server receives a request from outside the domain
for information about a name or address within the domain, it provides the correct answer. When a server receives a request from within its
domain for a name or address outside that domain, it forwards that request to another server, usually an ISP-managed server.
- User device response: The resolver returns the IP address for the user's device, allowing the device to establish a connection to the server
hosting the website.
In short, DNS resolves domain names to IP addresses through a series of queries from the user's device to DNS resolvers, root DNS servers,
TLD servers, and authoritative name servers. The resulting IP address will then be used to establish a connection to the appropriate server.

14
 Figure 5: How does DNS work

( P2 ) Explain the purpose and relationships between communication protocols, server hardware,

operating systems and web server software with regards to designing, publishing and accessing a
website:

1. Communication protocols:
Communication protocols are important sets of rules and processes in transferring data and information between devices and networks. It
defines how to communicate, synchronize and process data to ensure efficient and reliable communication.
Communication protocols play an important role in ensuring the consistency and quality of communication connections within the network,
and also support data transfer services, such as file transfer, emailing, web browsing and more. other applications. With the development of
15
technology, communication protocols are increasingly diverse and advanced, helping to create smooth connection and communication in
today's network environment.

Figure 6: Communication protocols

There are several popular communication protocols for transferring data over the network, including HTTP, HTTPS, and FTP. Here is some
information about each of these protocols:
- HTTP is used to transmit web pages, images, videos, and other resources from the web server to the user's browser. It works on a
request/response model, where the browser sends a request to the web server and the server responds by sending back the requested data.
- HTTPS is a secure variant of HTTP. It uses SSL or TLS to encrypt data in transit, ensuring security and privacy when transmitting data between
the browser and web server. HTTPS is often used for websites that require high security.
- FTP is a protocol used to transfer files over the network. It allows users to transfer and upload files from their personal computer to an FTP
server or from an FTP server to a personal computer. FTP operates on the same request/response model as HTTP.
- Popular protocols include: TCP/IP File Transfer Protocol, User Datagram Protocol (UDP), Hypertext Transfer Protocol (HTTP), Post Office
Protocol (POP3), Mail Access Protocol Internet (IMAP) and Simple Mail Transfer Protocol (SMTP) ).

16
2. Server hardware:
Server hardware is a hardware device designed for a server. It refers to the physical components that make up a server, the computer system
responsible for storing, processing, and delivering data and applications to client devices over a network.
The purpose of server hardware is to store data, information, store pages, and be able to connect to other devices through connection ports,
including computer power supplies, motherboard, processor, memory, storage device and network interface card. It is often used by
businesses or organizations that have large amounts of data to store.
➢ Here are some important components in server hardware:
- Motherboard: The motherboard is the main motherboard of the server, connecting all other components such as CPU, RAM, memory and
expansion cards. It also contains the BIOS (Basic Input/Output System), which performs automatic checks on startup and hardware
initialization.
- CPU: Microprocessor (Central Processing Unit) is the heart of the server, handling computing tasks and controlling system operations. CPUs
have many cores to handle multiple tasks at the same time and clock speed to measure performance.
- RAM: Random Access Memory stores data and active programs in temporary memory. RAM has fast access speed and significantly affects
server performance.
- Hard drive: Servers use hard drives to store data and operating systems. There are two common types of hard drives: mechanical hard
drives (HDD) and solid state drives (SSD). Mechanical hard drives have large capacity and low cost, while solid hard drives have faster access
speeds and are less likely to fail.
- Network card: Network card allows the server to connect to the network and transmit data over the network. There are many types of
network cards such as Ethernet, Wi-Fi, and Fiber Channel to suit different network connection requirements.
- Power source: The server needs a stable power source and enough capacity to operate. The power supply supplies power to the entire
server system and protects them from electrical problems such as power outages or power surges.

17
3. Operating systems:
Operating System (OS) is software that manages and controls hardware resources, provides an environment to run applications and provide
services to users on the server. It manages the computer's memory and processes as well as all of its software and hardware. It also allows
you to communicate with the computer without knowing how to speak the computer's language. Without an operating system, a computer is
useless.

Figure 7: Operating systems

➢ Here are some popular operating systems used on servers:

- Microsoft Windows: The most widely used desktop operating system, known for its user-friendly interface and compatibility with a wide
variety of software. It provides specialized features for server system management and operation, including services such as user
management, network management, and resource management.
- macOS: Apple's proprietary operating system for Mac computers, known for its stability, performance, and integration with the Apple
ecosystem.
- Linux: An open source operating system family known for its customization, security, and stability. There are many versions of Linux such as
Ubuntu, CentOS, and Debian. Linux is stable, highly secure and flexible, and is used for many purposes, from web servers to database servers.
- Android/iOS: This is Google's open source operating system for mobile devices, used in most smartphones and tablets.

18
4. Server software:
Server software is programs and applications that are installed and run on a server to provide services and functions to users and other
devices on the network. It is the software responsible for managing and controlling the server's hardware resources, handling requests from
users and other devices, and providing services such as data storage and file sharing. , user management, remote access, web services,
databases, and more.
It is the key element that allows servers to fulfill their role as the backbone of the Internet and various network applications, including
components such as server operating systems, server applications (such as servers, etc.). web, email servers, database servers), open source
software (such as Apache, MySQL, and PostgreSQL), and system control and management tools.

Figure 8: Server software

➢ Here are some popular server software:

- Web server software: Web server software such as Apache HTTP Server, Nginx, and Microsoft IIS are used to run and manage websites and
web applications on the server.
- Database server software: MySQL, PostgreSQL, Microsoft SQL Server and Oracle Database are database server software used to manage and
store data on the server.

19
- Email server software: Email server software such as Microsoft Exchange Server, Postfix and Sendmail are used to manage and send/receive
emails on the server.
- File server software: File server software such as Samba, Microsoft Windows Server, and FileZilla Server support sharing and managing files
and folders on the network.
- Application Server software: Provisions and manages specific applications, providing resources and runtime environments for their
execution. Examples include JBoss and Tomcat.
- Virtualization software: VMware vSphere, Microsoft Hyper-V and KVM are server virtualization software that allows running multiple virtual
machines on a single physical server.

5. The relationship between communication protocols, server hardware, operating system and web
server software related to design, publish and access a website:

Below is a table that describes the relationship between important factors involved in designing, publishing, and accessing a website,
including communication protocols, server hardware, operating systems, and software web server:

Element Describe

Communication protocol - Are the rules and regulations for communication between network components. For example: HTTP,

HTTPS, FTP, TCP/IP, DNS, SSL/TLS, and other protocols.

- HTTP/HTTPS: Data transmission protocol between client and server. HTTPS uses SSL/TLS to protect data

transmission.

- TCP/IP: The basic protocol suite of the Internet, managing the encapsulation, transfer and reception of

data between network devices.

20
 - DNS: Translates domain names into IP addresses, important for locating web servers.

Server hardware - Includes the physical components of the server, including CPU, memory, hard drives, network cards,

and other storage devices.

- Load Balancer: Balances load between servers to ensure work distribution and performance

optimization.

Operating system - Is software that manages and controls server operations, including managing hardware resources and

providing necessary services.

Web server software - Is software that runs on a server to process HTTP/HTTPS requests and provide website content to

users. For example: Apache, Nginx, IIS.

- Database Server (e.g., MySQL, PostgreSQL): Stores and manages databases related to website content.

( P3 ) Discuss the capabilities and relationships between front-end and back-end website technologies
and explain how these relate to presentation and application layers:

1. Static and dynamic website:

1.1. Static website:

a. Definition:
A static website is a collection of web pages coded with HTML and CSS and JavaScript that do not change or adjust their behavior based on
user input or other factors. The content of a static website remains intact unless successfully updated by the web developer.
21
 Figure 9: Static website

b. Purpose:
Static websites are suitable for presenting information that does not need to be updated regularly. They are often used for portfolios,
informational pages, or small business websites where the content does not change often.
Static websites are often used for websites that do not need frequent updates, such as: personal websites, portfolios, brochures, landing
pages, small business websites.
c. Advantages and disadvantages of the static website:
❖ Advantages of the static website:
- Simplicity: Static websites are relatively easy to create and host, requiring minimal server-side processing.
- Speed: Because the content is pre-generated and pre-cached, static websites tend to load quickly, providing a fast browsing experience for
users.
- Security: Static websites are less vulnerable to security threats than dynamic websites because they do not have database connections or
server-side scripting.
- Cost savings: Static website hosting is often less expensive than dynamic websites.

22
❖ Disadvantages of the static website:
- Limited functionality: Interoperability is limited, making them less suitable for complex applications or user-specific content, such as user-
generated content or real-time data.
- Difficult to update: If you need to make changes to your website, you will need to edit the HTML, CSS, and JavaScript files, then upload them
to the server. This can be time-consuming and difficult, especially for those with no coding experience.
- Not interactive: Static websites are not as interactive as dynamic websites because they cannot respond to user input.
- Scalability: As a website grows and requires more pages or more complex functionality, maintaining a static website becomes increasingly
difficult.
- Less engaging: Interactivity and personalization are limited, potentially leading to a less engaging user experience.

1.2. Dynamic website:

a. Definition:
A dynamic website is one that generates web pages dynamically in response to user requests or other variables. Dynamic websites use
server-side scripting languages, such as PHP, Python, or Ruby, along with databases to retrieve and generate content quickly.
Dynamic websites use server-side processing to generate content in real time based on user input or other variables. Content is typically
stored in a database and pages are dynamically generated when requested.

23
 Figure 10: Dynamic website
b. Purpose:
Dynamic websites are suitable for content that needs to be regularly updated, personalized, or requires user interactivity, such as online
stores, social media platforms, and news sites.
Dynamic websites are often used for websites that need to be updated regularly, such as: e-commerce websites, social media platforms,
news websites, Blogs, online communities.
c. Advantages and disadvantages of the dynamic website:
❖ Advantages of the dynamic website:
- Flexible and flexible: Dynamic websites can be very flexible and flexible because they can display any type of content, including user-
generated content, real-time data, and personalized content. impersonal.
- Interactive: Dynamic websites can be highly interactive because they can respond to user input, such as clicks, form submissions, and
comments.

24
- Easy to Update: Dynamic websites can be updated easily using a content management system (CMS). This allows you to make changes to
your website without editing any code.
- Scalability: Dynamic websites can handle large amounts of content and complex functions, making them suitable for websites with scalable
features and frequent updates.
❖ Disadvantages of the dynamic website:
- More complex to create and maintain: Creating and maintaining dynamic websites is more complex than static websites because they
require a database and server-side scripting language.
- Slower load times: Dynamic websites involve server-side processing, which can increase page load times compared to static websites.
- Security risks: Dynamic websites with database connections and server-side scripting are more susceptible to security vulnerabilities if not
properly secured and maintained.
- Cost: Hosting and maintaining dynamic websites can be more expensive, especially for sites with high traffic and complex functionality.

2. Front-end technologies:
2.1. HTML (Hypertext Markup Language):

a. Definition:
HTML is the standard markup language used to create and design web pages. It defines the structure and layout of content on a website
using a series of tags and attributes.

25
 Figure 11: HTML (Hypertext Markup Language)
b. Purpose:
HTML is used to structure web content, including text, images, links, and other multimedia elements. It provides the foundation for building
web pages, defining the hierarchy and relationships between different elements.
HTML also provides the building blocks for web pages, allowing the content and structure of the web page to be defined. It's like the skeleton
of a website, tying everything together.
c. Advantages and disadvantages of HTML:
❖ Advantages of HTML:
- Easy to learn and use: HTML has a simple syntax and is relatively easy to grasp for beginners.
- Wide support: HTML is supported by all web browsers, ensuring compatibility across different platforms and devices.
- SEO Friendly: Proper use of HTML elements and tags can improve search engine optimization (SEO) by providing clear structure and context
to search engines.
- Flexibility: HTML can be combined with other technologies like CSS and JavaScript to create rich, interactive web experiences.
- Accessibility: HTML provides features to create accessible web content, making it easier for people with disabilities to navigate and

26
understand.
❖ Disadvantages of HTML:
- Limited styling: HTML alone has limited ability to control the visual appearance of web pages. Additional styling is often required using CSS.
- Static content: HTML creates static web pages that do not change dynamically based on user interactions or other factors. JavaScript is often
used to add interactivity.
- Semantic markup: Writing semantic HTML requires a good understanding of best practices to ensure proper structure and accessibility.
- Complex layouts: Achieving complex layouts using only HTML can be challenging, especially for beginners.

2.2. CSS (Cascading Style Sheets):

a. Definition:
CSS stands for Cascading Style Sheets and is a language used to style and format web pages. It allows you to control the appearance of HTML
elements, such as fonts, colors, background, and layout.

Figure 12: CSS (Cascading Style Sheets)

27
b. Purpose:
CSS is responsible for the visual appearance of a website. It transforms simple HTML structure into a visually appealing and user-friendly
interface.
CSS is used to control the visual aspects of a website, including layout, colors, fonts, spacing, and animations.
c. Advantages and disadvantages of CSS:
❖ Advantages of CSS:
- Separation of concerns: CSS allows for separation of style and presentation from HTML, making maintenance and updates easier.
- Consistent design: CSS allows for a consistent look and feel across multiple websites by applying styles globally or to specific elements.
- Responsive design: CSS provides responsive design techniques, allowing websites to adapt and adjust to different screen sizes and devices.
- Flexibility: CSS offers many styling options, including layout techniques like flexbox and grid, which help create complex designs.
- Browser compatibility: CSS is supported by all modern web browsers, ensuring consistent display across different platforms.
❖ Disadvantages of CSS:
- Browser compatibility: Different web browsers may interpret CSS rules differently, requiring cross-browser testing and solutions.
- Complexity for complex layouts: Advanced CSS techniques, such as flexbox or grids, can take a while to learn for complex page layouts.
- Performance: Poorly optimized CSS code can affect page load times and overall performance, especially on mobile devices.
- Specificity and Inheritance: Understanding CSS inheritance and specificity rules can be challenging and lead to unexpected behavior.

2.3. JavaScript (JS):

a. Definition:
JavaScript is a high-level, interpreted programming language used to add interactivity and dynamic behavior to web pages. It allows you to
create animations, validate forms, handle user interactions, and more. It is mainly used for client-side scripting, meaning it runs in the user's
web browser.

28
 Figure 13: JavaScript (JS)
b. Purpose:
JavaScript is used to create interactive web components, process user input, manipulate the DOM (Document Object Model), and
communicate with web servers to dynamically update content without No need to reload the entire page.
JavaScript brings web pages to life, making them interactive and engaging for users. It enables real-time interactive content updates and
complex functions.

29
c. Advantages and disadvantages of JavaScript:
❖ Advantages of JavaScript:
- Interactivity: JavaScript enables the creation of dynamic and interactive web experiences, such as form validation, animations, and real-time
updates.
- Flexibility: JavaScript can be used both client-side (in the browser) and server-side (with frameworks like Node.js), allowing for end-to-end
development.
- Large ecosystem: JavaScript has a large ecosystem of libraries and frameworks, such as React, Angular, and Vue.js, that provide additional
functionality and simplify development.
- Integration: JavaScript can be seamlessly integrated with HTML and CSS, allowing developers to create cohesive web applications.
- Community support: JavaScript has a large and active developer community, with extensive resources, libraries, and frameworks available
for building web applications.
❖ Disadvantages of JavaScript:
- Browser compatibility: Different browsers may have different levels of JavaScript support, requiring developers to deal with browser
inconsistencies.
- Performance considerations: Poorly optimized JavaScript code can lead to slower page load times and reduced performance.
- Security risks: JavaScript can be vulnerable to security threats such as cross-site scripting (XSS) attacks if not properly sanitized and
validated.
- Complexity: JavaScript can be complex, especially for beginners, due to its asynchronous nature, event-driven architecture, and various
language features.

30
 ❖ Here are some other front-end framworks :

Framework Definition Purpose Advantages Disadvantages

React.js JavaScript library for Build single-page web High performance and There needs to be a

building user interfaces. applications with high good compatibility with process of learning and

reusability. other libraries. understanding to use it

effectively.

Tailwind CSS A CSS framework that Build user interfaces in a Separation between type Complicated when the

helps build utility-first customized and flexible and structure. project is large.

user interfaces. way. Reusability. Inheritance and priority.

Platform independent. Browser compatible.

Save bandwidth. Managing source code is

difficult.

Bootstrap A CSS and js framework Build responsive and Provides ready-made CSS Can result in a website

for building user attractive interfaces for components and classes look that is similar and

interfaces. websites. to quickly create common to other

interfaces. websites using Bootstrap.

Synchronous libraries,

reducing development

31
 time.

Vue.js A JavaScript framework Build web applications Easy to learn and use, Doesn't have a large

for building user with high reusability and especially suitable for ecosystem like React or

interfaces. interactivity. beginners. Angular, but is growing

rapidly.

3. Back-end technologies:
3.1. .NET:

a. Definition:
.NET is a framework developed by Microsoft that supports many programming languages. Popular languages used with .NET include C# and
VB.NET. It is commonly used to develop Windows applications, web applications, and services.
b. Purpose:
.NET is used to create powerful and scalable web applications, including enterprise-level solutions. It offers features such as code reuse,
security, and seamless integration with other Microsoft technologies.
It is highly flexible, supporting a wide range of applications, including web applications, desktop applications, cloud-based services, and more.
c. Advantages and disadvantages of .NET:
❖ Advantages of .NET:
- Powerful framework: .NET provides a rich set of libraries, frameworks (such as ASP.NET), and tools that simplify web development and
enable rapid application development.
- Language flexibility: .NET supports multiple programming languages, allowing developers to choose the language they feel most
comfortable with, such as C# or Visual Basic.NET.

32
- Excellent IDE (Integrated Development Environment): Visual Studio, the primary IDE for .NET, offers many features to enhance productivity
and streamline the development process.
- Language interoperability: .NET supports multiple languages, allowing developers to choose the language that best fits their project
requirements.
- Integrated development environment (IDE): Visual Studio, the primary IDE for .NET, provides powerful tools for development, debugging,
and deployment.
❖ Disadvantages of .NET:
- Windows dependency: .NET is designed primarily for Windows-based systems, which may limit its portability to other platforms.
- Scalability challenges: While .NET has the ability to build in scalability, it may require additional configuration and optimization applications
for high traffic scenarios.
- Learning curve: Although .NET is powerful, mastering all its features can take time, especially for beginners.

3.2. PHP (Hypertext Preprocessor):

a. Definition:
PHP (Hypertext Preprocessor) is a server-side scripting language designed for web development. It is widely used to build dynamic
applications and websites.

33
 Figure 14: PHP (Hypertext Preprocessor)

b. Purpose:
PHP is mainly used to build dynamic applications and websites. It can connect to databases, handle user authentication, and perform various
server-side tasks.
PHP it is also used for server-side scripting, form data processing, database interaction and dynamic content generation.
c. Advantages and disadvantages of PHP:
❖ Advantages of PHP:
- Easy to learn and use: PHP has a relatively simple and beginner-friendly syntax, making it accessible to new developers.
- Large community and resources: PHP has a large community of developers, rich documentation, and a rich ecosystem of libraries and
frameworks.
- Cross-platform compatibility: PHP is compatible with many different operating systems and web servers, providing flexibility in deployment.
- Integration: PHP can be easily integrated with various databases and web servers.

34
❖ Disadvantages of PHP:
- Inconsistent standard library: PHP's standard library lacks consistency and can be overwhelming for new developers due to different naming
conventions and function usage.
- Security Vulnerabilities: PHP has had some security concerns in the past, but these concerns can be mitigated by following best practices
and using secure coding techniques.
- Scalability: While PHP is suitable for small to medium projects, scaling large applications can be a challenge.

3.3. Java:

a. Definition:
Java is a flexible, object-oriented programming language designed to be platform independent.
Java is a widely used general-purpose programming language that provides a powerful and platform-independent environment for building
web applications.

Figure 15: Java

35
b. Purpose:
Java is used to develop scalable and enterprise-grade web applications, server-side components, and APIs.
Java is used to develop powerful and scalable applications. Its "write once, run anywhere" philosophy allows Java applications to run on any
device with a Java Virtual Machine (JVM).
c. Advantages and disadvantages of Java:
❖ Advantages of PHP:
- Platform independence: Java applications can run on a variety of platforms and operating systems thanks to the "write once, run anywhere"
principle.
- Robust ecosystem: Java has a vast ecosystem of libraries, frameworks (like Spring), and tools that simplify development and promote code
reuse.
- Performance and scalability: Java's performance and scalability make it suitable for high-traffic and enterprise-class applications.
- Security: Java emphasizes security features and JVM provides a secure execution environment.
❖ Disadvantages of Java:
- Learning curve: Java has a steeper learning curve than some other languages due to its object-oriented nature and complex concepts.
- Memory consumption: Java applications can consume more memory than other languages, which can affect resource usage in certain
scenarios.
- Length: Java code can be more verbose than some other languages, which can slow down development.
- Slower startup: Java applications may have slower startup times than languages that use Just-In-Time compilation.

3.4. Python:

a. Definition:
Python is a flexible and beginner-friendly programming language known for its readability and ease of use.
Python is a high-level interpreted programming language known for its readability and simplicity. It supports many programming models and
is widely used for web development, data science, artificial intelligence, and more.

36
 Figure 16: Python
b. Purpose:
Python is very flexible and can be used for a variety of purposes, including web development. Popular web frameworks like Django and Flask
are built using Python.
Python is used to develop web applications, write scripts, analyze data, and build server-side components.
c. Advantages and disadvantages of Python:
❖ Advantages of Python:
- Simple and easy to read: Python's clear syntax and natural language-like structure make it easy to read, write, and maintain code.
- Large community and libraries: Python has a vibrant community, rich documentation, and a large ecosystem of libraries (like Django and
Flask) that help speed up development.
- Rapid prototyping: Python's simplicity and extensive libraries speed up the development process, making it ideal for prototyping and proof
of concept.
- Integration: Python can be easily integrated with other languages, making it suitable for a variety of applications.

37
❖ Disadvantages of Python:
- Performance limitations: Python's interpreted nature can result in slower performance compared to compiled languages, although this can
be mitigated by using optimized libraries or rewrite important parts in lower level languages.
- Global Interpreter Lock (GIL): Python's GIL can limit performance in multi threaded applications, although this limitation can be overcome by
using multiprocessing or asynchronous programming techniques. set.
- Mobile Development: Although Python is used in some mobile app development scenarios, it is not as popular as languages like Java or
Swift.
- Speed: Python's interpreted nature can make it slower than compiled languages for certain types of applications, although this can be
mitigated with optimization techniques and external library.
In addition to the above frameworks, backend frameworks are also popular in many different languages. Here are some popular frameworks
in the backend field:

Framework Definition Purpose Advantages Disadvantages Example

Note.js Server-based Build server-side High Not suitable for - LinkedIn: It is built using Node.js

JavaScript execution network performance, applications and Express.js to handle millions of

environment. applications with consistent requiring high multi- users and create complex social

JavaScript. JavaScript on threaded processing. network connections.

both front-end - Uber: Uber is a global car booking

and back-end. application. Uber's system is built

using Node.js and Express.js to

handle goods requests from users

38
 and drivers globally.

Laravel A web application Build powerful and Provides a Requires knowledge - Facebook: Facebook, the world's

development high-quality web comprehensive of PHP. largest social network, is built with

framework based on applications. development PHP and uses the Laravel framework.

PHP. model and built- Laravel provides a comprehensive

in features. development model and is packed

with powerful features that help

build high-quality web applications.

- Laravel News: Laravel News is a

website that provides news, articles

and documents about Laravel.

Laravel simplifies website building

and provides powerful features like

routing, ORM (Object Relational

Mapping), and database

management.

Express.js A powerful web Build web Easy to learn and Requires building - Express.js website: The main

application applications and use, flexible the application Express.js website is built using this

39
 development APIs simply and support in structure from main framework. Express.js for its

framework based on quickly. building web scratch, without website building is a good example of

Node.js. applications. clear conventions the framework's performance and

like other efficiency.

frameworks. - MyFitnessPal: MyFitnessPal is a

website and mobile app that helps

users track nutrition and exercise.

Express.js allows MyFitnessPal to

quickly and simply build an endpoint

API that helps users record

information about food, activities,

and personal goals.

Flask A compact web Build small and Easy to learn and Does not provide - Pinterest: Pinterest is a famous

(Python) application simple web use, flexible built-in features, image social network. It is built in

development applications. support in requiring the use of Python and uses the Flask

framework based on building web third-party libraries framework. Flask allows Pinterest to

Python. applications. to extend process requests from users and

application create a beautiful and user-friendly

40
 functionality. user interface.

- Reddit: Reddit is a leading

community website in the world. It is

built in Python and uses the Flask

framework. Flask helps Reddit

process requests from users and

display content according to

different topics and subreddits.

4. Explain how these relate to presentation and application layers:

4.1. Role of presentation and application layers:

a. Role of application layers:

The application layer is the top layer in the OSI model and is responsible for providing network services directly to end users or applications.
The application layer is responsible for managing communication and coordination between different applications or systems. It provides
services and protocols for tasks such as data exchange, authentication, session management, and business logic. It interacts with software
applications and provides a communication interface between the application and the network. It includes various high-level protocols such
as HTTP, SMTP, and FTP, used for specific applications.

41
 Figure 17: Application layers

❖ How the application layer works:

- User Interface: The application layer is responsible for providing an interface for end users to interact with the network.
- Data representation and encryption: This layer is also responsible for encryption and decryption to secure data during transmission,
ensuring privacy and integrity.
- Application-level protocols: The application layer uses a variety of protocols to enable communication between applications over the
network. Examples of application layer protocols include HTTP (Hypertext Transfer Protocol) for web browsers, SMTP (Simple Mail
Transfer Protocol) for email, FTP (File Transfer Protocol) for file transfer, etc. These protocols define the rules and conventions of how
data is exchanged between applications.
- Network Services: The application layer provides network services such as directory services, email services, file transfers, and remote
login. These services allow applications on one device to request specific functions or resources from applications on another device.
- Inter-process communication: The application layer facilitates communication between different processes or applications running on
separate devices.
- Error handling and recovery: The application layer may include error handling and recovery mechanisms, depending on the specific

42
 application-level protocol being used. This may involve retransmission of lost data, error detection, and error correction.
b. Role of presentation layers:
The presentation layer is responsible for presenting and formatting data between the application layer and lower level layers (Session,
Transport, Network). It is also exchanged between different systems. It ensures that data is presented in a standard format that both the
sender and receiver can understand.
It may involve tasks such as encoding, data compression, and character set conversion to ensure data is properly formatted for transmission.

Figure 18: Presentation layers

43
❖ How the presentation layer works:
- Data Format: The presentation layer is responsible for formatting the data into a standard format that the receiving application can
easily understand. This includes tasks such as data transformation, data representation, and data structures.
- Data encryption and decryption: The presentation layer can provide encryption and decryption services to secure data during
transmission. Encryption techniques such as SSL/TLS are commonly used to ensure data confidentiality, integrity, and authenticity.
- Data compression: The presentation layer can compress data to reduce the size of the data being transmitted. Compression
techniques such as ZIP or GZIP can be applied to minimize bandwidth usage and improve transmission efficiency. At the receiving end,
the compressed data is decompressed by the presentation layer.
- Data Translation: This ensures that data is encoded in a format that can be interpreted correctly by the receiving system, even if they
use different character sets, data types, or data structures . This includes tasks such as converting between ASCII and Unicode or
between different image or audio formats.
- Protocol Conversion: This layer allows systems using different communication protocols to exchange information by converting data
from one protocol to another. This allows interoperability between systems that may not support the same protocols.
- Data integrity and error checking: The presentation layer may include error checking mechanisms to ensure data integrity during
transmission. It can add checksums or hashes to verify the accuracy of received data and detect any errors or data corruption.
- Compression and decompression: The presentation layer can also handle data compression and decompression, especially for
multimedia applications. It can compress audio, video or image data for efficient storage or transmission and decompress that data at
the receiving end for playback or display.

44
4.2. How the Front-end and back-end website technologies relate to presentation and application layers in OSI
model:

a. What is OSI model ?

The OSI (Open Systems Interconnection) model is a conceptual framework that standardizes the functions of a telecommunications or
computer system into seven layers of abstraction. Two of these layers, the Presentation Layer and the Application Layer, are particularly
relevant to the discussion of front-end and back-end website technology.

Figure 19: OSI model

45
b. How front-end and back-end relate to presentation and application layers:
In the context of web development, the presentation and application layers in the OSI (Open Systems Interconnection) model play an
important role in the overall architecture of the web application. This, can be related to the Presentation Layer and Application Layer of the
OSI model respectively.
⚫ Application layers:
Back-end (Application layer): Back-end mainly operates at the application layer. It handles the core functionality and business logic of the
application. It receives requests from the user interface, processes them, and interacts with databases, external APIs, or other services to
retrieve or manipulate data. Once the necessary operations are performed, the backend sends the response back to the frontend for
presentation.
Back-end relationships: Back-end technologies, such as .NET, PHP, Java, and Python, are often used in the application layer. They handle
server-side processing, data storage and retrieval, business logic implementation, and integration with external systems or APIs. Back-end
technology supports web application functionality and behavior, such as handling user requests, processing data, and generating dynamic
content.
⚫ Presentation layers:
Front-end (Presentation layer): Front-end is mainly related to the presentation layer. It focuses on creating an attractive and intuitive user
interface that allows users to interact with the application. It communicates with the backend to send requests for data or actions and
receives the corresponding response to update the user interface accordingly.
Front-end nexus: Front-end technologies, such as HTML, CSS, and JavaScript, primarily operate in the presentation layer. They are responsible
for structuring and styling the user interface, translating data into a format that looks attractive and interacts with users.
⚫ Communication Between Layers:
The front-end communicates with the back-end to request and receive data. This communication involves the exchange of information in a
format that both layers understand. Common data formats include JSON (JavaScript Object Notation) or XML (eXtensible Markup Language).
The back-end processes requests from the front-end, executes the necessary business logic, retrieves data from databases, and sends the
processed data back to the front-end for presentation.

46
( P4 ) Discuss the differences between online website creation tools and custom built sites with

regards to design flexibility, performance, functionality, User Experience (UX) and User Interface
(UI).

1. Some of tool to create online website:

Tool to create online Definition Purpose Advantages Disadvantages

website

WordPress WordPress is a versatile WordPress is a popular User-friendly interface, Requires regular updates

Content Management content management extensive plugin library for security and

System (CMS) allowing system (CMS) that allows for added functionality, performance, may require

users to build websites users to create and large community support, technical knowledge for

through a user-friendly manage websites easily. It search engine friendly, advanced customization,

interface. offers a wide range of suitable for various types can be resource-intensive

themes, plugins, and of websites. for large-scale websites.

customization options.

Joomla Joomla is an open-source Joomla is another popular Robust and scalable Steeper learning curve

CMS offering a balance CMS that allows users to platform, extensive compared to WordPress,

between simplicity and build websites and customization options, fewer templates and

47
 complexity. powerful online multi-language support, extensions compared to

applications. It offers a strong user management WordPress, may require

balance between ease of features, suitable for e- technical knowledge for

use and flexibility. commerce and social advanced customization.

networking websites.

SiteSpinner SiteSpinner is a WYSIWYG SiteSpinner is a user- Intuitive drag-and-drop Limited advanced features

website design tool friendly website design interface, built-in compared to other CMS

focused on visual design. software that enables templates, mobile-friendly platforms, smaller

users to create responsive designs, visual editing community support, may

websites without coding. capabilities, suitable for not be suitable for

It focuses on simplicity beginners and small complex or large-scale

and ease of use. business owners. websites.

Wix Wix is a user-friendly Wix is an all-in-one Easy to use with no coding Limited flexibility

online website builder website builder that skills required, visually compared to self-hosted

with a drag-and-drop provides a drag-and-drop appealing templates, solutions, higher cost for

interface. interface for creating built-in hosting and advanced features and

professional-looking domain options, mobile- removing ads, limited SEO

websites. It offers a friendly designs, extensive options compared to

48
 variety of templates and app market for added WordPress.

features for functionality.

customization.

CoffeeCup Free HTML CoffeeCup Free HTML CoffeeCup Free HTML Full control over the Requires coding

Editor Editor is a text-based Editor is a code editor that website's design and knowledge and skills, no

HTML editor emphasizing allows users to write and functionality, suitable for built-in website

manual control. edit HTML and CSS code experienced web management features,

for website development. developers, ability to limited visual editing

It provides a create custom designs capabilities, not

straightforward and layouts. recommended for

environment for coding. beginners or those

without coding

experience.

49
2. Discuss the differences between online website builders and custom-built websites with regard to
design flexibility, performance, functionality, User Experience (UX), and Appearance user (UI).

a. Online Website Creation Tools:

Design flexibility: Online website builders often offer a variety of pre-designed templates that users can customize to fit their brand. While
these tools offer some level of design flexibility, they often have limitations in terms of layout options, unique design elements, and
customization capabilities compared to custom-built websites. correction.
Performance: The performance of websites created with online website builders may vary depending on the platform. Some platforms may
have optimized infrastructure and storage, providing good performance.
Functionality: Website builders often offer a variety of built-in features and plugins that users can add to their websites. These features often
include essential functions like contact forms, galleries, and e-commerce capabilities.
User Experience (UX) and User Interface (UI): Website builders often focus on providing user-friendly interfaces and intuitive editing
experiences. They aim to simplify the website creation process for users with limited technical knowledge.
b. Custom-Built Sites:
Design Flexibility: Custom built websites offer the highest level of design flexibility. They can be tailored to meet specific design requirements
and unique branding elements. Designers and developers have complete control over layout, visual elements, and user interactions, allowing
for highly customizable and pixel-perfect designs.
Performance: Custom-built websites have the potential to achieve optimal performance because they can be fine-tuned based on specific
requirements. Developers have control over the server environment, code optimization, and caching strategy, delivering better performance
and faster load times.
Functionality: With custom-built websites, developers have the freedom to implement any necessary functionality. They can create custom
features, integrations, and complex interactions based on specific business needs. This flexibility allows for the implementation of unique and
tailored functionalities that may not be possible with website builders.
User Experience (UX) and User Interface (UI): Custom built websites offer the opportunity to create highly customized and user-centric UX
50
and UI. Designers and developers can focus on creating intuitive navigation, seamless user flows, and engaging interactions tailored to
specific target audiences and goals. This level of customization can result in a more tailored and refined user experience.
In short, online website builders provide a convenient and accessible solution for individuals and small businesses with limited technical
expertise. They offer a certain degree of design flexibility, but can be capable of customization and advanced functionality. On the other
hand, custom-built websites offer the highest level of design flexibility, performance optimization, and the ability to implement unique
functionalities, resulting in a customized user interface and experience. fully adjusted. However, custom-built websites often require more
time, resources, and technical expertise to develop and maintain. Choosing between a website builder and a custom-built website depends
on the specific needs, budget, and technical requirements of the project.

3. Define and compare UI, UX:

Comparison criteria Definition Online website creation tools Custom built site

User Interface (UI) is the user - Provides ready-made themes - Fully customized to suit design

interface, design, and and design templates for quick and personalization

User Interface (UI) presentation elements of a website creation. requirements.

product or system that users - Usually has a visual user - Ability to create unique and

interact with. It includes interface editor, allowing users to unique user interfaces.

elements such as buttons, customize the look and layout. - Complete control over interface

menus, screens and other graphic - Diverse available UI elements design, from small elements like

elements. such as buttons, navigation bars, colors and fonts to large interface

fonts, colors, images. structure.

51
 User experience (UX) is the - Provides an easy-to-use and - Ability to completely customize

overall experience a user has intuitive user interface. the user experience, from

User Experience (UX) when interacting with a product, - Can create customized and interaction processes to creating

system or service. It focuses on optimized user experiences for special functions.

user emotions, perceptions, and specific requirements. - Often includes built-in features

satisfaction. - Provide tools and features that such as SEO optimization, social

improve user experience, such as engagement, analytics

content management and integration, and tracking.

engagement. - Ability to integrate custom

features and technologies to

optimize user experience.

52
C. Conclusion:
In summary, as a team leader of a web development team, it is essential to have a solid understanding of web technologies and their impact
on website design, functionality, management, and performance. To be able to ensure the necessary knowledge to make wise decisions and
the most suitable techniques for upcoming projects. In the first part of the report, we learned about the purpose and types of DNS (Domain
Name System), this type of DNS plays an important role in organizing and managing domain names. Understanding DNS is essential to
ensuring a website operates smoothly. Next, I learned more about the relationship between communication protocols, server hardware,
operating systems, and web server software. We explore how these components work together in website design, publishing, and
accessibility. This knowledge will help us optimize the accessibility and performance of our website. We also discussed the capabilities and
relationships between front-end and back-end website technologies. Understanding how these technologies relate to the presentation and
application layer is critical to developing a seamless user experience and efficient functionality. Finally, we've delved into the differences
between online website builders and custom-built websites. We test aspects such as design flexibility, performance, functionality, User
Experience (UX) and User Interface (UI). This analysis will assist us in making informed decisions about the approach we take to developing
our online shopping mall. By making informed decisions and using the right tools and techniques, we will deliver a high-quality website that
meets customer expectations and is completed on schedule.

53
D. References:
1. Fortinet (2022). What Is DNS? Definition & How DNS Works. [online] Fortinet. Available at:
https://www.fortinet.com/resources/cyberglossary/what-is-dns.

2. www.hostitsmart.com. (n.d.). How does a website work? - Knowledgebase - Host IT Smart. [online] Available at:
https://www.hostitsmart.com/manage/knowledgebase/205/How-does-a-website-work.html.

3. GeeksforGeeks. (2021). What is a Website ? [online] Available at:

https://www.geeksforgeeks.org/what-is-a-website/.

4. academind.com. (n.d.). How The Web Works. [online] Available at:

https://academind.com/tutorials/how-the-web-works/.

5. Lubavitcher, B. and Burke, J. (2021). What is DNS? How Domain Name System works. [online] SearchNetworking. Available at:
https://www.techtarget.com/searchnetworking/definition/domain-name-system.

6. Anon, (n.d.). What is Server Hardware? + Types of Server Hardware. [online] Available at:
https://n6cloud.com/blog/server-hardware/.

7. Peterson, N. (2019). What Are Operating Systems? – ACLALS. [online] Aclals.org. Available at:
http://www.aclals.org/what-are-operating-systems/ [Accessed 1 Feb. 2024].

8. D, L. (2022). What Is a URL: Examples, Structure, and More. [online] Hostinger Tutorials. Available at:
https://www.hostinger.com/tutorials/what-is-a-url.

54