British
Education
Superior Institution of Science and
Technology
Module:
Web Design and Databases
(Week 1)
Educational Year:
2024/2025
Semester: Lecturer:
Year 1; Semester 2 Dr. Yassine Larbaoui
PLANNING: (Respecting the Programs of Cardiff Metropolitan University)
• Introduction on Web Design and Databases.
• Web Technologies and Internet.
• HTML Basics, Elements and Formatting.
• HTML Layouts, Tables and Lists.
• HTML Forms, Multimedia and Graphics.
• CSS, CSS3 and Bootstrap.
• JavaScript.
• JQuery and Ajax.
• SQL .
• SQL Databases, NoSQL Databases and MySQL.
• PHP.
• Developing User Interfaces, Forms and Databases.
• Web Hosting, Servers, and Databases Management.
Introduction on Web Design and
Databases
Introduction on Web Design and Databases
Evolution over Historic
Historic
Tim Berners-Lee, a British scientist, invented the World Wide Web (WWW) in 1989, while
working at CERN.
Web
The Web was originally conceived and developed to meet the demand for automated information-
Web Design sharing between scientists in universities and institutes around the world.
Web Development
Building forWeb
Introduction on Web Design and Databases
What is Web?
Historic
Web is a service that operates over the Internet, just as email do.
Web
Web is based on providing web pages or user-interfaces through internet.
Web Design Web is also allowing the display and access to stored data in databases.
Web Development
Building forWeb
Introduction on Web Design and Databases
What are the Principal Protocols in Web?
Historic
The principal Protocols used in web are as follow:
HTTP: HyperText Transfer Protocol.
DNS Protocol: Domain Network System protocol.
Web TLS: Transport Layer Security.
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is HTTP?
Historic
Web
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is HTTP? (Continue)
Historic
Hypertext Transfer Protocol (HTTP) is an application-layer protocol for transmitting hypermedia
documents, such as HTML.
Web
HTTP was designed for communication between web browsers and web servers, but it can also be
used for other purposes.
Web Design
HTTP follows a classical client-server model, with a client opening a connection to make a request,
then waiting until it receives a response.
Web Development
HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two
requests.
Building forWeb
Introduction on Web Design and Databases
What is DNS Protocol?
Historic
The Domain Network System (DNS) protocol helps Internet users and network devices to discover
websites using human-readable hostnames, instead of numeric IP addresses.
Web
The DNS protocol is used to communicate with DNS servers.
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is DNS Protocol? (Continue)
Historic
Web
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is TLS?
Historic
Transport Layer Security (TLS) encrypts data sent over the Internet to ensure that eavesdroppers
and hackers are unable to see what you transmit which is particularly useful for private and
sensitive information such as passwords, credit card numbers, and personal correspondence.
Web
TLS protocol is used for applications and websites.
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is TLS? (Continue)
Historic
Web
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is Web Design?
Historic
The term "web design" is normally used to describe the design process relating to the front-end
(client side) design of a website including writing markup.
Web
Web design is principally based on drawing user-interfaces, incorporating input and output forms,
Web Design integrating pictures, graphics and animations.
Web design governs everything involved with the visual aesthetics and usability of a website—color
Web Development
scheme, layout, information flow, and everything else related to the visual aspects of the UI/UX
(User-Interface and User-Experience).
Building forWeb
Introduction on Web Design and Databases
What are the Common Skills and Tools for Web
Design?
Historic
Common skills and tools that are used by web designers are as follow:
Adobe Creative Suite (e.g., Photoshop, Illustrator) or other design software;
Web Graphic design;
UI design;
UX design;
Logo design;
Web Design
Layout/format;
Placing call-to-action buttons;
Branding;
Web Development Wireframes, mock-ups, and storyboards;
Color palettes;
Typography.
Building forWeb
Introduction on Web Design and Databases
What is Web Development?
Historic
Web development is based on using markup languages, programming languages and frameworks to
develop the frontend and backend of a website.
Web
Web developers are requested to have more skills in markup languages and programming languages
like HTML, CSS, JavaScript, SQL, PHP, etc.
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What is the Difference Between Web Design and Web Development?
Historic
Web design is concerned with what the user actually sees on his computer screen or mobile device,
and less about the mechanisms beneath the surface that make it all work. However, web designers
Web are also familiar with HTML, CSS and JavaScript.
Web developers are more involved into the mechanisms of codes, libraries, packages and
frameworks to develop the frontend and backend of a website.
Web Design
Web Development
Building forWeb
Introduction on Web Design and Databases
What are Used Skills and Tools in Web Development?
Historic
Common skills and tools used by web developer are as follow:
HTML;
CSS;
Web JavaScript;
JQuery and Ajax;
SQL;
PHP;
Web Design CSS preprocessors (i.e., LESS or Sass);
Frameworks (i.e., Visual Studio, Pycharm, AngularJS, ReactJS, Ember);
Web template design;
Web Development Libraries (i.e., jQuery);
Git and GitHub;
On-site search engine optimization (SEO);
Server-side programming languages;
Building forWeb
Server-side web development frameworks;
Database management systems (e.g., MySQL, MongoDB, PostgreSQL);
Authentication and security;
Etc.
Introduction on Web Design and Databases
What is Building for Web?
Historic Building for Web is based on concretizing a website by using web design skills in addition of
relying on layout editors, Drag/Drop functionalities, HTML, CSS, Javascripts, SQL, PHP, MYSQL,
etc. Then, publishing these results on hosting server.
Web
Building for Web is based on concretizing websites as soon as possible by using content
management systems, markup languages, programming languages and frameworks, whereas
Web Design publishing them to be accessible through internet.
Web Development
Building forWeb
Introduction on Web Design and Databases
What are The Common Frameworks and Tools to Build for Web?
Historic
The common frameworks and tools to build for web are as follow:
Web
Advanced Skills Medium Skills
Visual Studio; WordPress;
Web Design
Eclips; Dreamwaver;
Angular; Mobirise;
Figma;
Web Development Drupal;
Joomla
Wix;
Building forWeb
Web Technologies and Internet
Web Technologies and Internet
What are Frontend Technologies for Web?
Frontend Technologies
forWeb Frontend technologies for web are programming languages, markup languages and frameworks that
allow concretizing web user-interfaces.
Backend Technologies
forWeb
Frontend technologies for web include tools for design, development and building .
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
What are Available Frontend Languages for Web?
Frontend Technologies
forWeb Frontend languages for web are as follow:
HTML and HTML5 (HyperText Markup Language);
CSS and CSS3 (Cascading Style Sheets);
Backend Technologies JavaScript;
forWeb
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
What are Available Frontend Frameworks for Web?
Frontend Technologies
Frontend frameworks for web are as follow:
forWeb
Visual Studio;
JQuery;
Backend Technologies Angular;
forWeb React and PReact;
Vu.JS;
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
What are Backend Technologies for Web?
Frontend Technologies
forWeb Backend technologies for web are programming languages, servers and applications that allow
concretizing databases, store the data, receiving requests and answering them.
Backend Technologies
forWeb Backend technologies for web include tools to design and develop the architectures of databases,
allowing storing structured and unstructured data, receiving requests using communication
protocols, and responding to these requests while interacting with databases.
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
What are Backend Programming Languages for Web?
Frontend Technologies
forWeb Backend programming languages for web are used to develop the backend applications and answer
to requests while interacting with databases.
Backend Technologies
forWeb
What are Available Backend Programming Languages for Web?
Fullstack Technologies
forWeb Available backend programming languages are as follow:
JavaScript;
PHP;
Internet & URL JAVA;
Python;
Ruby;
Perl;
DNS
Web Technologies and Internet
What are Backend Frameworks for Web?
Frontend Technologies
forWeb Available backend frameworks are as follow:
Django;
Spring Framework;
Backend Technologies
Node.JS;
forWeb
Express JS;
Laravel;
Fullstack Technologies Ruby and Rails;
forWeb
Internet & URL
DNS
Web Technologies and Internet
What are Backend Servers for Web?
Frontend Technologies
forWeb Backend servers for web are used to store databases or data in general whether it is structured or
not.
Backend Technologies
forWeb
What are Available Backend Servers for Web?
Fullstack Technologies Available backend servers are as follow:
forWeb LAMP;
WAMP;
Xampp;
Internet & URL Google Cloud;
AWS;
Firebase;
Digital Ocean;
DNS
Web Technologies and Internet
What are Fullstack Technologies for Web?
Frontend Technologies
forWeb
Fullstack technologies include both used technologies for frontend and backend .
Backend Technologies
forWeb
Fullstack technologies exceeding frontend and backend by supporting the interconnection between
Fullstack Technologies them, whereas considering encryption, resource distribution, accessibility and maintenance.
forWeb
Internet & URL
DNS
Web Technologies and Internet
What is Internet?
Backend Technologies
ForWeb
The Internet is a vast network that connects computers and networking devices all over the world.
Frontend Technologies
ForWeb
Through the Internet, people can share information and communicate from anywhere with an
Fullstack Technologies
Internet connection.
forWeb
Internet & URL
DNS
Web Technologies and Internet
What is WWW?
Backend Technologies
ForWeb The World Wide Web -- also known as the web, WWW or W3 -- refers to all the public websites or
pages that users can access on their local computers and other devices through the internet.
Frontend Technologies
ForWeb
These pages and documents over web are interconnected by means of hyperlinks that users click on
Fullstack Technologies for information. This information can be in different formats, including text, images, audio and
forWeb video.
Internet & URL
DNS
Web Technologies and Internet
What is URL?
Backend Technologies
ForWeb URL stands for Unified Repository Link. A URL is nothing more than the address of a given unique
resource on the Web.
Frontend Technologies
ForWeb
In theory, each valid URL points to a unique resource. Such resources can be an HTML page, a CSS
Fullstack Technologies
document, an image, etc.
forWeb
Internet & URL
DNS
Web Technologies and Internet
Examples of URL
Backend Technologies
ForWeb https://developer.mozilla.org
https://developer.mozilla.org/en-US/docs/Learn/
https://developer.mozilla.org/en-US/search?q=URL
Frontend Technologies
ForWeb
Examples of URL Domain Providers
Fullstack Technologies
forWeb As examples of common URL domain providers:
.com
.gov
Internet & URL .edu
.org
.net
DNS
Web Technologies and Internet
What are the Components of URL?
Backend Technologies
ForWeb The components of URL are as follow:
Scheme;
Domain Name;
Frontend Technologies Port;
ForWeb Path to the file;
Parameters;
Fullstack Technologies Anchor;
forWeb
Internet & URL
DNS
Web Technologies and Internet
What are The Types of URL?
Backend Technologies
ForWeb There are two types of URL:
Absolute URL: This type of URL contains both the domain name and directory/page path.
An absolute URL gives complete location information.
Frontend Technologies Relative URL: This type of URL contains the path excluding the domain name. Relative
ForWeb means “in relation to”, and a relative URL tells a URL location on terms of the current
location. Relative path is used for reference to a given link of a file that exist within the same
Fullstack Technologies domain.
forWeb
Internet & URL
DNS
Web Technologies and Internet
What is DNS Server?
Backend Technologies
ForWeb The DNS Server (Domain Name System Server) turns domain names into IP addresses, which
browsers use to load internet content.
Frontend Technologies
ForWeb
Every device connected to the internet has its own IP address, which is used by other devices to
Fullstack Technologies locate the device. Therefore, we need to convert domain names to IP addresses.
forWeb
Internet & URL
DNS
Web Technologies and Internet
What is IP Address?
Backend Technologies
ForWeb An IP address is a unique address that identifies a device on the internet or a local network.
Frontend Technologies
IP stands for "Internet Protocol," which is the set of rules governing the format of data sent via the
ForWeb
internet or local network.
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
What is IP Address? (Continue)
Backend Technologies
ForWeb
Frontend Technologies
ForWeb
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
What is Localhost IP Address?
Backend Technologies Localhost is the default name of the computer you are working on.
ForWeb The term is a pseudo name for 127.0.0.1, the IP address of the local computer. This IP address
allows the machine to connect to and communicate with itself.
Frontend Technologies
ForWeb
Fullstack Technologies
forWeb
Internet & URL
DNS
Web Technologies and Internet
How does DNS Work?
Backend Technologies
ForWeb DNS works as follows:
Browsers and applications use DNS protocol to communicate to DNS servers.
Then, DNS Servers translate domain names to equivalent IP addresses.
Frontend Technologies
ForWeb
Fullstack Technologies
forWeb
Internet & URL
DNS
