Name: Tran Quang Binh

Student ID: GCH190821

Course: Web Design
Contents for junior staff member:
▪ Operation Mechanism of Website
▪ Domain Name System
▪ Communication Protocols
▪ Web Server Hardware/Software
Contents for senior staff members:
▪ Static and dynamic website
▪ Front-end and back-end web
technologies
▪ Web creation tools and custom built
Explain server technologies and management services
associated with hosting and managing websites
Before we begin, it is necessary to know the concept of website, to put it simply:
▪ A website is simply a collection of web pages of codes – codes that describes the
layout, format and content on a page.
▪ The computers that make up the Internet, “serve up” documents upon request are
known as servers. More accurately, the server is the software (not the computer
itself) that allows the computer to communicate with other computers.
▪ The browser connects your computer to the server through an IP address. The IP
address is obtained by translating the domain name via Domain Name Server
(DNS).
Website works based on “request-
serve” method:
▪ Clients (User browser) request the
webpage from the server by
accessing to website address.
▪ The server “serves” copy of
requested HTML document that later
transform into webpage display on
client’s browser.
▪ In order for a computer to be part of
the Web, it must be running special
web server software that allows it to
handle Hypertext Transfer Protocol
method.
▪ Web server is the computer that
capable to store the content of a
website.
▪ Web server communicate with
client’s browser via HTTP (Hyper Text
Transfer Protocol).
▪ Web server respond to the client
request in either of the following two
ways:
▪ Sending the file to the client associated
with the requested URL.
▪ Generating response by invoking a
script and communicating with
database
▪ When client sends request for a web
page, the web server search for the
requested page if requested page is
found then it will send it to client with
an HTTP response.
▪ If the requested web page is not
found, web server will the send
an HTTP response: Error 404 Not
found.
▪ If client has requested for some other
resources then the web server will
contact to the application server and
data store to construct the HTTP
response.
▪ Universal Resource Locator (URL) is a
complete internet address which can
locate a specific domain or an
individual page on a given domain.
▪ A URL contains the following
information:
▪ The protocol used to access the resource.
▪ The location of the server (whether by IP
address or domain name).
▪ The port number on the server
(optional).
▪ The location of the resource in the
directory structure of the server.
▪ A fragment identifier (optional).
▪ Every computer and device (modem, router, smartphone, cars, etc.)connected to
the Internet is assigned a unique numeric IP (Internet Protocol) address. For
example: 172.16.254.1
▪ Each device connected to the Internet has a unique IP address which other
machines use to find the device. DNS servers eliminate the need for humans to
memorize IP addresses such as 192.168.1.1 (in IPv4), or more complex newer
alphanumeric IP addresses such as 2400:cb00:2048:1::c629:d7a2 (in IPv6).
▪ DNS Record
▪ DNS records are stored in
zone files and are used
for translating domain
names to IP addresses.
▪ DNS server ▪ DNS Query
▪ DNS queries are the
computer code that tells
the DNS servers what kind
of query it is and what
information it wants back.
▪ A DNS server is a type of
name server that
manages, maintains and
processes Internet domain
names and their
associated records.
▪ DNS are organized as following
structure:
▪ Root server
▪ Top level domain
▪ Second level domain
▪ Sub-domain
▪ Hostname
▪ Some forms of management: ▪ Some notable organization:
▪ Change domain name ▪ Internet Corporation for Assigned
▪ Check for suspicious access to the Names and Numbers (ICANN)
domain
▪ Renew or terminate domain
registration
▪ Check for similar names that can
damage a brand's reputation
▪ Internet Assigned Numbers
Authority (IANA)
 ▪ This is example of DNS Management interface of domain.com

▪ You can manage, set webmail, or set expiration date for

registered domain from here.

▪ There are many platforms that offer
purchasing domain name and
provide web hosting service. For
example, Bluehost is the platform that
lets you pick a domain name and host
your own website.
▪ The best thing is that Bluehost lets
you pick a domain name for free
when you choose a web hosting plan.
You’ll also get 63% off web hosting.
▪ For people wondering what are the
five most common domain
extensions, .com is hands-down the
most popular top-level domain (TLD).
It was originally used to
designate for-profit businesses, but
has now become the mainstay for
domain extensions. When deciding
on a domain extension, in almost all
circumstances, you should consider
.com if it’s available.
▪ It is a set of rules or languages used by networking device or computer in
order to communicate with each other.
▪ There are some features of communication protocol:
▪ Transfer data across the Internet.
▪ Communicate with specific servers such as
Webserver, FTP server or Mail server.
▪ Communicating between two devices is safer.
▪ Transmission Control Protocol (TCP)
▪ Internet Protocol (IP)
▪ User Datagram Protocol (UDP)
▪ Post office Protocol (POP)
▪ Simple mail transport Protocol (SMTP)
▪ File Transfer Protocol (FTP)
▪ Hyper Text Transfer Protocol (HTTP)
▪ Hyper Text Transfer Protocol Secure (HTTPS)
▪ Telnet
▪ Gopher
▪ It is a computer that has large memory, hard drive, and fast processor.
▪ The purpose:
▪ Receive and send data/information.
▪ Store the assets of server.
▪ Handle the workload of server.
▪ Provide database for server.
▪ Server software is the kind of
software that designed to be used,
operated and managed on a
computing server.
▪ It is capable of assets management
for other computer.
▪ Most popular web server softwares:
▪ Apache HTTP Server
▪ Microsoft Internet Information Server
▪ (IIS)
▪ Sun Java System Web Server (JSWS)
▪ Server Operating System is a kind of ▪ There are the most well-known sever
special OS designed for server OS that commonly used:
computer. ▪ Windows Server
▪ Just like normal OS, it allows other ▪ Linux
softwares or applications run on server ▪ Red Hat
computer. ▪ FreeBSD
▪ It serve requests from clients computer. ▪ Solaris
▪ MAC
▪ The application that typically run on
▪ Sun Cobalt
Server Operating System:
▪ Webserver
▪ Database server
▪ Mail server
▪ DNS server
 Communication protocol Server hardware Server software OS

Designing Set of rules or language use by computer Support for web design
and networking devices to communicate
with one another.
Specify is layering protocol
Publishing Upload the website, Use open source to Any application available
information, data to publish websites in the system can be
Internet. published and shared via
the Internet
Accessing Transfer information across the Internet. may be accessed through Install web and
website Communicate with the web server. the domains it hosts and applications from the
distributes their content Internet
to end user devices.
Technolo Web design Functions Management
gies
• Using open-source make it easy to edit • Supports connecting • Uses its own memory
• Fast encryption many different space
• Can be constantly developed and database management • Easier to maintain
optimized systems • Supports all servers
PHP • Many frames, fast and efficient • Can edit easily and • Running on many
• Powerful tool for dynamic web flexible different platforms
development • Standalone platform, • More secure
Supports all servers
• Security
• Fast processing speed
• User-Friendly

• Easy to use, compatible with many • Determine the layout of • Easier to maintain,
languages the site change
• Building hypertext structure • Compatible with many • Managed website base
• Supported by all browsers popular browsers on Framework
• Integrated Video / Audio feature • The foundation of static • Most friendly with
HTML • Mobile optimization web search engine
• Loading fast • Let the browser know
what and how to display
the web content
Technologies Web design
• simple to learn and implement
• Comparative with other
languages and can be used in
a huge variety of applications
JavaScript • Many popular frameworks are
made by this language such as
Jquery, Node.js, etc
• Use for creating rich
interfaces.
Functions Management
• can be run immediately within • Flexible, easy to maintain
the client-side browser • Being client-side reduces the
• Loading fast demand on the website server
• Can create animations and • Its UI is easy to manipulate
special effects for the front-
end.
• Can fetch data from other
sources and display it on own
website
JavaScript HTML PHP
 Frameworks Web design Functions Management

• A consistent framework
• Major support of all browsers and fix CSS
compatibility
• Less browser errors
Bootstrap • Responsive structure and style
• Simple integration
• Easy to use, flexible
• Less coding and increased reuse
• of code
• Very stable and reliable
.NET Framework • Use across Platforms and
• Languages
• Easier post development
• Several JavaScript plugins use
• jQuery
• Light and customizable
• Good documentation
• Use for Service-Oriented
Architecture
• Integration with Legacy
Systems
• Fewer Cross browser bugs
• Great grid system
• Loads of free and
• professional templates,
• WordPress themes and
• plugins
• Very stable and reliable.
• Offers enhanced application
• Security
Frameworks Web design Functions Management
Lightweight and lean Pages load faster Open source library
Clean and beautiful syntax Animations and cool effects Highly extensible
Cross-browser compatibility
jQuery Utility features
SEO-friendly
Promotes simplicity
Widely used
▪ It is the software that looks for data that match the criteria in a query.
▪ The term ,which originally is the software and algorithms used to perform a search,
has become synonymous with the complete service, such as the Google, Yahoo!
and Bing search engines.
▪ Helping people to search what they
are looking for
▪ Find websites.
▪ Find topic or information with
keywords.
▪ Reduce the time for researching.

▪ Help websites increasing the view

count
▪ Search engine optimization (SEO) is a methodology of strategies, techniques, and
tactics used to increase the number of visitors (traffic) to a website by obtaining a
high-ranking placement in the search results page of a search engine (SERP) —
including Google, Bing, Yahoo, and other search engines.

▪ There are two main features that search engines look at when evaluating high
ranking site compared to other sites on the web.
▪ On-site SEO looks at what the site (or page) is about
▪ Off-site SEO looks at how authoritative and popular the site is
▪ This is how search engine work step-
by-step
▪ Step 1: Crawling the web to discover
content followed by indexing.
▪ Step 2: Indexing, by analyzing and
organizing content into databases.
▪ Step 3: Ranking by retrieving and
ranking relevant results based on a
search query.
▪ As mentioned above, search engine
will look at on-site and off-site SEO in
order to determine the rank that the
website in at the search engine result
page (SERP).
▪ On-site method ▪ To sum up, the popularity of website
▪ This is a part of the website’s source code of the 1st depends on those characteristics:
result of keyword “How search engine works”
▪ Off-site method ▪ We can also consider to do 3 things as
▪ Website ranking on search result is mentioned at the bellow image in
also influenced by following factors: order to increase the popularity of
website.

User
often
click
on the
first
result
on
google
▪ Improve User Experience (UX)
▪ If website looks untrustworthy,
outdated, amateurish or is slow to load,
potential users are likely to bounce
back to the SERPs and click on another
result.
▪ If a user spends more time on a site,
it’s probably because they found it
useful. So it’s likely that they will keep
using the website for future and thus
increase the rank.
▪ This is the front-page of Amazon, the website provides the best
user experience on the Internet.
▪ Optimize meta description and ▪ The result that display on SERP will always be the title and
descriptions of webpages.
title
▪ Write a unique title and other keyword
tags for each page
▪ Be brief, but descriptive
▪ Avoid generic and vague titles or
descriptions
▪ Use sentence case or title case
▪ Create something click-worthy—not
clickbait
▪ Match search intent
▪ Include target keyword where it makes
sense
▪ Keep it under 60 characters.
▪ https://electronicspost.com/dns-servers/
▪ https://www.eukhost.com/blog/webhosting/how-a-web-server-functions/
▪ https://www.advantage.tech/service/server-hardware
▪ https://www.webopedia.com/TERM/S/server_operating_system.html
▪ https://wavemakers.co/how-search-engines-work/
▪ https://www.singlegrain.com/seo/effective-seo-techniques-that-work/
▪ https://ahrefs.com/blog/seo-meta-tags/
Categories website technologies, tools and software used to
develop websites
▪ Static website is the type of website
that doesn’t use any external
database.
▪ It’s written completely in HTML.
▪ It isn’t interactable.
▪ Cons:
▪ Pros:
▪ Fast load time and page display.
▪ More secured.
▪ Less complex to set up.
▪ Less expensive to maintain and host.
▪ Expensive to update site.
▪ Required developer update the site.
▪ The site functionality is limited.
▪ Dynamic websites are capable of
serving different content to web
visitors.
▪ Dynamic websites require a database.
▪ Interactable.
▪ Cons:
▪ Pros:
▪ Greater Interactivity with Users
▪ Increased Functionality (Ecommerce,
Login Portals etc.)
▪ Easier to manage using a CMS, especially
large sites
▪ Less coding skills required.
▪ Less secure and more vulnerable
▪ More complex to setup depending on
functionality
▪ Slower load time
▪ Generally more expensive to setup and
maintain
 Static website Dynamic website

Similarity Both are written in HTML, CSS, JavaScript.

• Do not allow users to interact with the • Add server programming

website, the languages such as
• information that needs to be changed on the • ASP.NET, PHP, ... and SQL
• website needs to be directly intervened to Server database, MySQL, ...
edit on the HTML file • Allow users to interact with
Differences • Difficulties in maintenance and upgrading the website
• Low website design costs • Easy to maintain and
• Beautiful interface upgrade the website
• High website design costs
• High application
▪ Front-end is the graphical interface
of the webpage through the use of
HTML, CSS, JavaScript.
▪ Front-end is related to client-side.
▪ The framework of front-end: jQuery,
Bootstrap, Foundation, etc.
▪ HTML (Hyper Text Markup
Language): Describe the content and
graphical appearance of webpage.
▪ CSS (Cascading Style Sheet): modify
the graphical elements of webpage –
from colors, background to fonts.
▪ JavaScript: Create interactive
features of website.
▪ This game is made purely by HTML, CSS and JavaScript!
▪ Back-end is server-sided process
that involve rendering the client-side
content.
▪ It is essential for web application
development.
▪ Back-end involve hosting server, web
application, database.
▪ PHP (Hyper Text Pre-Processor): it is
widely-used scripting language that
is especially suited to web
development. It is server-sided
language and embed in HTML.
▪ ASP.NET: it’s a platform created by
Microsoft to make web application.
Front-end and presentation layer
▪ Forward to Presentation Layer (UI) which
shows all things user can see and interact
directly with
▪ Formatting the website properly
▪ Handling simple data validation
▪ Send data to application layer
Back-end and application layer
▪ The application layer handles all the
functionality.
▪ Most often handled on the server via
a language such as PHP or Ruby
▪ Also serves as the mediator between
the presentation and the data.
▪ All interaction between those two should
be done via this layer.
▪ This is the process of designing
website which is using Wix tool.
▪ This is the interface and the source
editor of the custom built webpage.
 Online created website Custom built website

Design flexibility • There is a limit to the number of sites you can
customize
• Shorter development times
• Cheaper cost
Performance • Not built to be search engine friendly
• Does not work 100% on all devices
Functionality • Your web will not stand out
• There is a limit to the number of sites you can
customize
• There is no good support system
• Well-made or maintained
• Custom-built sites are flexible and can grow with you
• Adapt to the needs from user
• Tested to work on all browsers
• Take more time
• Custom more expensive
• Search engine friendly
• Need to test in order to working on almost all of the
browsers.
• No limitations
• Tested to work on all browsers
• Completely unique design

User Experience It can’t be well-known Depends on website’s creator skill.

(UX)
User Interface (UI) Simple, quick-development, have similarities with Unique design, how it looks good or bad depend on web-
other online created website creator’s abilities.
▪ Tools for all-in-one developments:

▪ Sublime Text 3: ▪ Notepad ++: ▪ Visual Studio Code

▪ Specific languages development:

▪ CSS ▪ JavaScript ▪ PHP

 ▪ Frameworks:
▪ Bootstrap ▪ jQuery
▪ Easy to Use ▪ Simple and easy
▪ Mobile-Friendly ▪ Lightweight
▪ Customizable Bootstrap ▪ CSS manipulation
▪ Simple Integration ▪ Html manipulation
▪ Pre-styled Components ▪ Cross browser support
▪ Responsive Features ▪ Event handling
▪ Browser Compatibility ▪ JavaScript Library
▪ Great Grid System ▪ Ajax Support
▪ Extensive list of Components ▪ Built-in Animation
▪ Bundled JavaScript plugins
▪ Good Documentation
▪ Base Styling for most HTML Elements
▪ Recommend tool: Visual Studio
Code
▪ Reasons:
▪ Auto completion, syntax checking,
code suggesting.
▪ A lot of extensions that allow users to
develop any language they want, not
only HTML, CSS, JS, PHP alone.
▪ User-friendly UI.
▪ Fast.
▪ More recommended tool:
phpMyAdmin
▪ Reason:
▪ phpMyAdmin can run on any server or any OS as
it has a web browser.
▪ Can easily create, delete, and edit the database
and can manage all elements using the graphical
interface of phpMyAdmin, which is much easier
than MySQL command-line editor.
▪ phpMyAdmin helps control the user's permission
and operate several servers at the same time.
▪ Have ability to backup database and export the
data into different formats
▪ Can execute complex SQL statements and
queries, create and edit functions, triggers, and
events using the graphical interface.
See you later!
▪ https://vwm.com/blog/static-vs-dynamic-website-pros-cons/
▪ https://www.pluralsight.com/blog/software-development/front-end-vs-back-end
▪ https://www.geeksforgeeks.org/frontend-vs-backend/