See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/385354756

Web Design

Book · October 2024

CITATIONS READS

0 1,373

1 author:

Hassan Ali Al-Ababneh

Zarqa University
85 PUBLICATIONS 307 CITATIONS

SEE PROFILE

All content following this page was uploaded by Hassan Ali Al-Ababneh on 30 October 2024.

The user has requested enhancement of the downloaded file.

1
 ‫‪‬‬
‫‪ALL RIGHTS RESERVED‬‬
‫الطبعة األولى‬
‫‪1446‬هـ ‪2025 -‬م‬
‫المملكة األردنية الهاشمية‬
‫رقم األيداع لدى دائرة المكتبة الوطنية‬
‫‪National Library Deposit No‬‬
‫ر‪.‬ا‪)2024/10/5698( :.‬‬
‫الواصفات‪/:‬لغات البرمجة‪ //‬تصميم البرامج‪ //‬التسويق‬
‫اإللكتروني‪ //‬وسائل التواصل االجتماعي‪ //‬تطبيقات‬
‫الحاسوب‬

‫‪Dar Al- Swaqe Alelmieh‬‬

‫‪For Publishing and Distribution‬‬
‫‪Amman-Jordan‬‬
‫عمان – األردن – العبدلي–عمارة غطاس سنتر– ط‪2‬‬

‫هاتف ‪+ 962 795294400:‬‬

‫ص‪.‬ب ‪ – 1472 :‬الرمز البريدي ‪1111 :‬‬
‫‪E-Mail: dar.alswaqe.publishers@gmail.com‬‬

‫يتحمل املؤلف كامل املسؤولية القانونية عن حمتوى مصنفه وال‬

‫يعّب هذا املصنف عن رأي دائرة املكتبة الوطنية أو أي جهة‬‫ر‬
‫اخرى‪.‬‬
‫‪All rights reserved . No part of this book may be‬‬ ‫حكومية‬
‫‪reproduced , stored in a retrieval system or‬‬
‫‪transmitted in any form or by any means without‬‬
‫‪prior permission in writing of the Author‬‬
‫مجيع احلقوق حمفوظة ‪ ،‬ال يسمح إبعادة إصدار هذا الكتاب أو‬
‫أي جزء منه أو ختزينه يف نطاق استعادة املعلومات أو نقله أبي‬
‫شكل من األشكال دون إذن خطي مسبق من املؤلف ‪.‬‬
‫الرقم المعياري الدولي‬

‫(ردمك) ‪ISBN 978-9923-9404-9-5‬‬

‫‪2‬‬
 In the name of Allah, the Most Gracious, the Most Merciful

A word of thanks and gratitude

He who does not thank people does not thank Allah

I must first thank Allah Almighty who enabled me to reach this high
academic level. I also extend my thanks and gratitude to the arbitration
committee that evaluated the book for teaching purposes and my
continued thanks to my honorable professors. I have all the respect and
reverence for you for expressing your opinion and recommendation for
the scientific status of the book. This is a certificate that we are proud of.

1. Professor Dr. Naji Maala - Professor of Marketing

2. Professor Dr. Hamid Abdul Nabi Al-Taie - Professor of Marketing
3. The honorable uncle Ahmed Al-Mathani - Arabic language teacher.

3
4
 Dedication
To the soul of my dear mother... May God have mercy
on her and make her dwell in a spacious paradise... To my
beloved father, the symbol of giving... May God grant
him health and wellness. To my brothers and sisters who
were my support at every moment and the best support...
to my virtuous wife... to the joy of soul, spirit and heart,
to my budding children, Karam and Kamila.

5
6
 Abstract
This book was written to explain the basic principles and theories in the field of
web programming design, with an emphasis on the need to use effective web design
that relies on innovation, technology and modern trends to achieve the strategic
goals of the organization.
The concept of website design and modeling, the main elements, tools and
modern trends related to improving the organization of the website and search
engines in order to increase conversions and increase the share of the target
audience. In addition to presenting the basic methods and steps of programming for
modern programming languages HTML, JavaScript and PHP.
Thus, to allow the obtained scientific and methodological aspects to be applied in
practice as tools for understanding the needs of further development in website
design and programming.
We hope that university students, graduate students, educational institutions and
businessmen will benefit from the results of the study. This book will contribute as a
reference for studying the theoretical foundations of website design .

7
8
 CONTENT
INTRODUCTION 11

CHAPTER 1 THEORETICAL ASPECTS OF WEB DESIGN 15

CHAPTER 2 WEBSITE DESIGN 33

CHAPTER 3 WEBSITE FUNCTIONALITY 49

CHAPTER 4 WEBSITE LAYOUT 63

CHAPTER 5 PROGRAMMING LANGUAGES FOR WEBSITES 77

CHAPTER 6 USING THE HTML PROGRAMMING LANGUAGE 91

USING THE JAVASCRIPT PROGRAMMING

CHAPTER 7 117
LANGUAGE

CHAPTER 8 USING THE PHP PROGRAMMING LANGUAGE 132

PROMOTION AND SEARCH OPTIMIZATION OF

CHAPTER 9 155
THE WEBSITE

CHAPTER 10 WEB DESIGN AND DEVELOPMENT TRENDS 176

REFERENCE 187
CONCLUSION 190

9
10
 INTRODUCTION

The purpose of this book is to explain the features of website design in the light
of the development of digital technologies that have covered all spheres of life,
including the economy and the sphere of electronic marketing. Since the use of
digital technologies in electronic marketing has increased competitiveness and
intensified the marketing activities of the organization in accordance with
international business standards. Innovative technologies and modern marketing
tools cannot be imagined without designing websites in such a way as to achieve the
strategic goals of the organization. Since competition in global markets,
digitalization of business and the transition to digital channels of customer service,
sales of goods and services, logistics deliveries together are a guarantee of extracting
benefits from available resources, increasing the effectiveness of the organization's
marketing activities and increasing profitability. All this is the driving force behind
the growth of investment projects and, consequently, the growth of the global
economy. In this book, the author focused on the development of websites for
organizations and the need to know their concepts to improve marketing efficiency
and maximize the benefits of global digitization and the development of the digital
economy.
Chapter One: is devoted to studying the benefits of website design and the need
to use it when creating websites. The features of web design development depending
on the type and activity of the organization are highlighted, as they play an important
role in the design and development of websites and are an experience for the user,
as they are the first impression of the brand of the organization. In terms of
developing a vision for applying the latest trends in drawing website designs for
organizations, with the possibility of practical application in the formation, planning
and design of the organization's website.
Chapter Two: is devoted to the study of construction methods at the main stages
of website design and development. The main work tasks performed by web design
are considered, with an emphasis on highlighting the semantic features of website
design, classifying prototypes and visualizing plans, with the aim of achieving the
completion of the website prototype.
Chapter Three: is devoted to the study of website functions, as the main
characteristics and elements of website functions have been formulated. Sites are
classified based on purpose and function, which allows improving its functions and
achieving the ability to customize websites depending on the direction and type of
activity of the organization.

11
 Chapter Four: This chapter is devoted to the study of the important role of
website design and the advantages and disadvantages of using the CSS programming
language format for these websites. It shows the main stages of website
programming and also classifies modern types of website formats for each
organization according to the nature of its investment service activities.
Chapter Five: This chapter is devoted to the study of programming languages
and web development technologies. The most important factors that influence the
decision to choose a website programming language are highlighted. The most
suitable and popular web programming languages are considered, the advantages of
using these languages are explained. Attention is focused on the need to use
frameworks and the main types of frameworks and libraries that simplify the web
development process are highlighted. The advantages of web technologies and
programming languages and the degree of their practical application are argued
when deciding to develop an organization's website.
Chapter Six: The purpose of this chapter is to cover the main web components,
tags and hyperlinks in the HTML programming language, highlight the elements
used in website development. Practical examples have been developed, including
the steps and stages of developing the corresponding software for website
development. The attributes of tags based on classification have been brought to
light, theoretical, scientific and methodological aspects have been developed that
can be used in practice when forming strategies for developing websites based on
HTML.
Chapter Seven: Dedicated to the study of the JavaScript programming language
and the definition of its main components and elements. The necessity of using
HTML template elements for web components in JavaScript is determined and their
properties are explained. Practical examples are presented for composing the code
using all the provided variables and data types.
Chapter Eight: Dedicated to the study of the PHP programming language and
the definition of its main components and elements, and the identification of the
types of data used. Necessary practical examples are developed to explain the code
instructions for developing a website, taking into account the variables, components
and data types found in the PHP programming language.
Chapter Nine: Dedicated to explaining the role of website promotion and search
engine optimization, where the author defined the stages of content creation when
organizing an organization's website. The main tasks for forming an effective
optimization of the organization's website are outlined and activities related to the
organization of the search engine optimization process are developed, with the
presentation of theoretical and practical results and recommendations that will form
strategies for promoting and improving the search engine of the website.
12
 Chapter Ten: is devoted to the study of modern trends in web design and its
technologies, where the author formed the main trends in the field of web design,
and using examples, the main trends in the development of web design were
identified. Innovative web technologies are indicated that can be used in the
development and implementation of websites with the greatest degree of automation,
as well as improving labor activities to form strategies for developing websites and
updating them in accordance with modern trends.
The book "Website Design" was developed in accordance with the problems and
requirements of the market and electronic marketing. This allows us to recommend
this book to students and postgraduates of universities and other educational
institutions, as well as to anyone who wants to get a theoretical basis and ready-
made practical recommendations in the field of web design.

And God is the Grantor of success

Author
Professor of Electronic Marketing
Dr. Eng. Hassan Ali Al-Ababneh

13
14
 CHAPTER 1

THEORETICAL ASPECTS OF WEB DESIGN

With the development of business technology, there is a complete change in all

areas that directly or indirectly affect the economic activities of organizations around
the world, and website design for organizations is no exception. Web design is a
creative and artistic activity, the purpose of which is to create communications or
change the visual environment to suit some specific tasks and requirements, because
it differs from object design in that it does not relate to the artistic design of physical
objects, but to the world connected with information. Today, web design is used in
marketing and advertising of goods and services, publishing, printing, cinema and
television. , information technology, electronic technology and other media fields
and sectors of the global economy. Preparation of media reports, advertising,
publications on social networks and promotion through electronic channels is
difficult without graphic images and web design, based on which ideas about each
practical object or phenomenon of the real world are developed, allowing them to be
described to a greater extent. Detail and expressiveness in online presentations.
Graphic images designed in web design should push the viewer to the conclusions
necessary for the creator of an information message, advertisement or publication
on social networks. Web design should be understood broadly, such as
organizational identity, illustration, web design, communications and public
relations. A graphic designer is considered an expert in this creative specialty, since
he not only masters the “information design” method, but is also a true artist who
boldly uses artistic means in his work. Graphic design works are often referred to as
visual creators, and their authors enjoy the same rights as their creators. Works of
art, science and literature, if we try to define the essence of graphic design, then over
time we will see more clearly that messages (ideas, appeals, warnings) are more
effectively expressed through graphic images than through text or spoken words.
The development of graphic arts around the world has been significantly
influenced by the advent of digital technology and the creation of computers, which
have provided graphic designers with the latest tools and techniques that have
radically changed the workflow by first processing information in digital form. In
the twentieth century, various schools of graphic design emerged, making significant
contributions to the formation of graphic art [1-2].
Based on the structuring and critical analysis of scientific works in the field of
the history of the formation of graphic design schools, the author presents the key
features of each and their characteristics, which are presented in the table 1.

15
 Table 1
Historical development and key features of the leading schools of graphic
design
School of Graphic
Design and years of Key features
development
Advertising in the 1920s in America was largely traditional in
appearance, the creative power mainly drawn from copying the best
School of American European designs. Post-war prosperity took place under the slogan "buy,
Advertising buy, buy." The design of cars is rapidly changing; every year there is a
Graphics new model, but the design of advertisements, as a whole remains the
(1920-1950) same. By equating graphic design with art, the school still failed to
reverse the wave of unattractive ads that accompanied America's
consumer boom.
It is a style of graphic design that was developed by designers in
Switzerland in the 1950s and has had a profound effect on graphic design
as part of the modernist movement, influencing many fields related to
design, including architecture and art. This style emphasizes simplicity,
readability and objectivity. One of the most important things this method
Swiss School of brings is the use of grids to organize content, or what is called grid
Graphic Design design. The idea behind this approach was to help designers take a
(1950-1960) consistent, consistent, and structured approach to page layout. This was
in line with the Swiss design ideology, which emphasizes regularity and
readability above all else, as grid design became a mainstay throughout
the 20th century and became the corporate design standard. Strict
adherence to this concept has since diminished, its influence certainly
still being felt.
In the Polish poster, universality is combined with uniqueness,
rationality with sensuality, graphic quality with picturesqueness,
simplicity with complexity. All this brought a special, recognizable
texture and unique images to graphic design. The work of the Polish
Polish school poster poster was a clear idea within the design art, as it expressed the thoughts,
feelings and concerns of people, and was not just an image or a means
(1960-1970)
of attraction. At the first International Poster Biennale in Warsaw in
1966, at the accompanying international scientific symposium on the
image and role of the poster in the urban environment, the influence of
the Polish school on the world of graphic design received final
recognition.
The works of Japanese designers amaze with their strange, unlike
Japanese school anything, amazing aesthetics. Some designers create their works based
poster on the centuries-old history and culture of the Land of the Rising Sun,
(1960-1980) while others, on the contrary, completely abstract from it and work
exclusively with modern images.
Source: Developed by the author based on data [2-3]
Based on the presented, it should be noted that initially, in its primary form, the
design was much simpler and included the simplest elements for transmitting certain
data, taking into account culture, religion and the main goals that were set for the
design of that time (poster, announcement, etc.). However, the origin of design itself

16
was quite a long time ago, which was transformed into a modern activity that solves
many problems under the influence of innovative development technologies. Given
the above, it is important to state the fact that modern promotion and organization
of effective marketing cannot be imagined without digital channels of interaction, a
company website and, of course, web design. The first website in the world was
published in 1991, which was not similar to those existing in modern conditions, but
consisted of several paragraphs of text on a uniform background with a command
line instead of links [3].
However, it was from this moment that websites began their hard and thorny
path. Currently, there are more than a billion web resources on the Internet, each of
which consists of many visual elements. The process of creating the appearance of
websites, its promotion, optimization has become a whole direction in science,
which includes not only designing a graphical shell, but also thinking through
navigation, organizing text content and analyzing user behavior, prototyping,
segmentation and target audience formation, and much more other. The success of
an organization's website largely depends on the digital tools and web design
techniques used in the implementation process.
However, web design tools and techniques largely depend on the business goals
and main areas of work. Therefore, modern web site design must comply with the
basic principles of its creation and be constantly improved and include all
technological innovations and mechanisms for the development and implementation
of websites.
In order to create a quality product, it must be based on all existing methods
and basic principles, which include the implementation of web design development,
which will help avoid the most common mistakes and problems during
implementation.
One of the areas of this science is web design. Based on this, it is necessary to
consider in more detail the essence of web design and why it is needed in modern
conditions, which is shown in Fig. 1.

17
 Web design is planning and creating
When using web design tools, websites
content in such a way that the site is
acquire the correct color scheme, suitable
beautiful, functional and user-friendly. To
fonts, photographs, images and animations,
achieve each of these goals, web designers
and special effects.
use a wide range of tools.

To ensure maximum functionality of the

website with the help of web design, the
With the help of web design, interaction with
structure of pages and their navigation are
the website is carried out in an intuitive way and
thought out, pages and sections are filled
to avoid confusion. Positioning the most
with informative and relevant content, and
important information at the top of the screen so
additional elements are added in the form
that the user does not have to scroll down the
of: polls, subscription forms, widgets with
page.
social networks, interactive maps and much
more.

Fig. 1. The essence of web design and its key purpose in modern conditions
Source: Developed by the author based on data [3-4].

Based on what was provided by the author, the basic principles of web design
were formed, which are presented in Figure 2.

Balance Hierarchy Negative space

Contrast Rhythm Subsequence

Accent Movement

Fig. 2. Basic principles of web design in modern conditions

Source: Developed by the author based on data [3-7].

1. Balance: Balance is an equal number of sizes and shapes in two parts of a

page (design) that are separated by a vertical or horizontal imaginary line. As you
know, an imbalance in something gives rise to a feeling of discomfort. In practice,
there are two ways to achieve balance in web design:

18
  Symmetrical balance This is a complete symmetry of shapes, masses and lines
in two parts of the design, with the possibility that symmetrical balance web pages
evoke a sense of security, harmony and beauty in the user.
 Asymmetric balance is proportionality and the same size of shapes, blocks and
lines in two parts of the design, regardless of the presence or absence of symmetry,
as this balance is more dynamic and easier to use in web design.
For a more detailed understanding of the presented ways of balancing the web
design of the website pages, the author presents in fig. 3 main ways to determine the
balance of a website's web design.

Symmetrical web design Asymmetrical web design

Fig. 3. The main ways to balance the web design of the pages of the website
Source: Developed by the author based on data [4-5].

Keeping the balance of the web design of the website pages in modern conditions is quite
important and necessary, which leads to a more loyal attitude of consumers and website visitors,
since a pleasant, not overloaded web design is always in trend.
2.Contrast: Contrast is a difference in color or difference in hue and makes objects
in an image stand out and separate from each other. If the image has reduced contrast,
it is difficult to distinguish objects in the image, and we say that the image is blurry
or cloudy. Since web design is more interesting and exciting, and therefore can draw
the attention of users on the page, based on this, the author of the book presented
two contrast options that can be used when designing a website, which are actually
shown in Fig. 4.

19
 Rational Contrast Not a rational contrast
Fig. 4. Basic Web Design Contrast Variations in Modern Conditions
Source: Developed by the author based on data [4-5].

Much depends on the contrast of the web design of the website pages, in the
presented irrational contrast, gray is completely lost against the background of
contrasting monochrome colors, which indicates that visitors may not see or lose
the information of interest, which will form a negative impression about visiting
the company's website.
3. Accent: When forming the structure of a website, it is clear that not all
elements and functions present can be equally important. Some should catch the
eye from the first second on the website: a company logo, a call to action, or a
button to place an order or purchase a product or service.
When highlighting an important element on a website, it will draw the
attention of visitors to it, but the composition of the website is more dynamic.
Emphasis is very important when creating websites for companies that will sell
and serve their customers through electronic digital channels such as a website.
When visiting a website, when the focus is on buying, ordering a product or
service, then at the first entry, visitors will see highlighted aspects about this.
Based on this, the author has formed two main options for emphasizing with the
help of web design on the pages of websites in modern conditions, which is shown
in Fig. 5

20
 Accent web page design website Not accentuated web design of a website
page
Fig. 5. The main options for emphasizing with the help of web design on the pages of
websites in modern conditions
Source: Developed by the author based on data [4-5].

Emphasizing with the help of web design tools is quite relevant in today's highly
competitive environment and the need to optimize resources and increase sales.
4. Movement: Creating moving elements on the pages of a website using
web design tools will maximize the attention of visitors. Based on this, the author
has formed the highlighted options for the movement of elements on the pages of
the website using web design tools, which are shown in Fig. 6

Driving element on a website page Static element on a website page

Fig. 6. Basic options for moving elements on website pages using web design tools
Source: Developed by the author based on data [5-6].

5. Rhythm: Elements on the page should "rhyme" with each other - that is,
they should have similar characteristics such as brand colors and brand font. This
will help reinforce brand identity and increase online presence. Repetition of the
same or at least similar elements in a particular design keeps the design from being
boring and suggests rhythm, just like in music.

21
 6. Hierarchy: One of the biggest mistakes in web design is placing important
information at the bottom of a company's website page. This way, only those users
who didn't leave the website in the first minute and decide to scroll down will
notice it - and there won't be many of those people. Therefore, the more important
the information, the higher it should be placed on the website.
7. Negative space: Negative space is the empty space around and between
an image object. Negative space can be most noticeable when the space around a
particular subject, rather than the subject itself, forms an interesting or artistically
appropriate shape, and this space is sometimes used for artistic effect as the "real"
subject of the image. Accordingly, proceeding from this, the author of the book
proposed a comparison of arrangement options with and without negative space.
Based on this, the author presents in fig. 7. To compare website options with and
without negative space.

Website made of negative space web design Website without negative space elements of
elements web design

Fig. 7. Basic options for building a website with web design tools like negative
space
Source: Developed by the author based on data [6-7].

8. Subsequence: Web design consistency is achieved when the other basic

principles are followed and in harmony. When website elements are balanced,
properly positioned, contrasted with each other, and surrounded by enough “air”,
the visitor is more likely to stay on the website and take the right action for the
company, which will ensure that the business goals are met [7].
In symmetrical web design, elements are harmoniously combined with each
other, creating a cohesive visual image that is pleasing to the eye and stimulates
revisiting of the website. Website design influences the functional part related to
loading speed, ease of use, navigation elements, and other elements.

23
 Influencing elements in website design work
1. Navigation: Websites often consist of several web pages, while large
websites and portals can have dozens of them. Good website navigation ties all
web pages together and helps users get to the right section, subsection, and web
page of the website. When designing and designing a website's web design, the
navigation menu is key. In fact, this menu is a website map, and helps not to get
lost even on a very large Internet resource [7-8].
The most commonly used types of menus in website design:
 Classic menu. The most common version, located at the top of the website, which is a
horizontal sheet of links.
 Floating menu. A menu that is pinned to a specific part of the screen and stays in the
user's field of view even when they scroll down the website.
 Hamburger button or compact menu button: A GUI button whose icon consists of three

parallel horizontal lines (indicated by ☰). It is often placed at the top left or right of the user
interface and is so named because it resembles an image of a hamburger. Expands to full list
when clicked.
 Drop-down menu. A menu with additional parts that are only displayed when the user
clicks or hover over a specific location in the main part.
 Sidebar. Menu that is located at the edges on the left or right side of the screen.
2. Website loading speed: According to international studies, on websites that
load more than 3 seconds, the bounce rate increases by 38% [9]. It doesn't matter
how pretty a web page looks, but if it doesn't display correctly and keeps the user
waiting, they're more likely to close it after a few seconds. There are many factors
that can affect the performance of a website, from the number of elements on a
web page to third-party applications.
3. Usability UX: user experience is quite in demand and relevant in the
development and implementation of websites. User experience is a new discipline
and science in the field of web design that studies the logic of user actions in order
to provide them with the most comfortable interaction with a company's website.
This is a structured process by which to determine what experience a user will get
using a web resource. If UX is the experience a user will have after interacting
with a company website, then UX is web design by definition of that experience.
When building a UX web design for a website, a prerequisite is the fulfillment of
the main characteristics that allow you to achieve the effectiveness of the
implementation of the website and ensure its optimization. The implementation
of the web design of company websites in order to provide UX should provide
key characteristics, which are presented in Fig. 8.

25
 Benefit Ease of use

Ease of
Value finding
information

Availability Confidence

Desirability

Fig.8. User interface characteristics in web design

Source: Developed by the author based on data [10-11]

Convenience, speed and ease of information search are very important for
the user, which becomes a huge advantage for companies if this is provided by
the web design of the website. In addition, the desirability of buying or visiting a
website of a company, and not a competitive one, is also important, which largely
depends on search engine optimization, which ensures the availability of the
resource, its value to visitors and brand loyalty. It is important to state that in
modern conditions, more than half of website traffic comes from mobile devices,
which necessitates the implementation of adaptive web design.
There are two approaches to converting a website from desktop to mobile:
 Responsive web design involves creating multiple versions of the site: for example, for
different screen sizes or browsers.
 Responsive (responsive) web design means creating one "flexible" version of the
website, which changes depending on the screen size or even on the position of the smartphone
in space [11].
Having considered the key features of web design and its key elements,
principles and functional parts, it is necessary to focus in more detail on the visual
elements of web design, which play a significant role in creating a modern
website. The author structured the main visual elements of the web design of
modern websites, which are presented in Fig. 9.

26
 Animation
Color palette Images
elements

Website
Header Site maintenance
background

Page body Footer

Fig. 9. Essential Visual Web Design Elements of Modern Websites

Source: Developed by the author based on data [12-13]

It should be argued that if the functional components of the website ensure

the performance of the website and comfortable work with it, then the visual
elements, namely the web design of the website, are responsible for aesthetics and
attractiveness. Just as beautiful packaging helps to sell a product better, a beautiful
web design will help to attract the attention of visitors and encourage them to stay
longer on the page. Of those presented in Fig. 9. Essential Visual Elements of
Modern Website Design You Should Take a Closer Look at Each of Them:
1. Website color palette. This is a deep and complex study of the psychological impact of
colors on the minds of everyone who sees them. It has incomprehensible interactions that make
us lean towards certain colors, while certain colors unconsciously repel our gaze. When
designing a company website, colors are essential. The main role in keeping or attracting the
target audience to the website. To take the necessary action, therefore, understanding the
psychological role of colors is very important before designing a website, because each color
has its own meaning in directing the reader's gaze or performing a certain calculation function..
2. Header (web site header) - located at the very top of the web page above the content part.
It usually includes the business name, title, logo, and a top menu that makes it easier for users
to navigate the website.
3. Page body: Rules for the design of the text of the website in order to convey information
to the audience in the most readable and understandable way. The design format affects the
time the user spends on the site, the performance of the target action and the overall impression
of the site, takes into account fonts, as well as how exactly the text will be located on the
website. Good typography complements the overall aesthetic of a website and reinforces the
message of the text. Just like colors, fonts can say a lot about a company's brand. It is necessary
to focus on those that fit the overall style of the website. Classic serif fonts tend to represent
solidity and conservatism, while softer, rounder fonts tend to represent innovation and
creativity.
4. Footer - the lowest part of the website. It usually has a menu with links to all-important
pages, as well as an address, mobile phone number, and other contact information. Also in the
footer are links to social networks, if it is in the company.

27
 5. Website background: Static or animated, uniform or textured, the website background is
also an important visual element. Users see this background continuously while browsing the
website. The background can be a brand color, an image, and even a video - the main thing is
that the website looks solid and the text is easy to read.
6. Images: Images make a website colorful and enjoyable to look at. Product pictures, photos
from events and illustrations - all this will help to keep the user's attention.
7. Animated elements: Animation will help you make your website stand out from the
competition and manage the user's attention. Animation elements can be used by adding a
button with a call to action; adding animated arrows to the navigation so that the user does not
get lost; adding a page loading bar and more.
8. Website maintenance: Web design is constantly changing and a company's website must
evolve with it. Outdated elements can scare off users, and at the same time reduce traffic and
sales. Given the above, it is necessary to monitor and analyze web design innovations and
trends, edit and update content, optimize SEO and check from time to time how fast pages load.
[12-13].
Based on the above, it should be noted that when implementing and
developing a company's website, a necessary condition is the use of visual
elements of web design and its key types, which will allow you to achieve your
business goals. It should be stated that the right web design will help website
visitors to understand the product or service offered by the company much better,
create more emotional connections and improve interaction.
However, the success of web page design depends entirely on how elements
such as color, font, and texture are used and combined. Therefore, it is important
to have a clear understanding of each of them in detail. For a more detailed study
of the features of creating a web design, the author structured the key stages,
which are presented in Fig. 10.

28
 4. Creation of a
prototype and
3. Choosing a website layout.
platform for This step allows
implementation you to define the
2. Identification of information
the area of When the idea of
building a quality architecture and
1. Definition of a implementation of explains the
the website website comes up,
business goal. the question to ask relationship
An important Scaling is one of between different
the most difficult yourself is which
element of creating platform to choose. pages and content
a web resource is steps in the entire elements. Building
website building There are many
to determine its varieties of CMS a website without a
business purpose process. The scope site prototype is
and scope of the in e-commerce
in order to development, like building a
understand why project can be house without a
volatile and change however, you need
and for whom the to choose the best blueprint, and it's
website is being depending on unlikely to
various factors options for
developed. In creating a website. succeed.
addition, web during the creation
designers need to of the website.
understand what
customers expect
from a company's
website.
Fig. 10. Key Steps in Creating a Modern Website Web Design
Source: Structured by the author based on data [12-14]

Of the structured key stages of creating a web design for modern websites,
it should be noted that the superficial stages are highlighted and each of them
contains many more sub-stages that are aimed at achieving the set business goals
at the very beginning of the project.
The first step in creating web design when creating a modern website is to
determine its business objectives. Before creating an implementation plan, the
following questions should be answered: What is the purpose of this website?
what content will be published on it? What ways of interacting with the audience
should be provided? After the presentation is formed and the answers to these
questions, you can begin to initiate the project itself, and the answers to the
questions presented will allow you to adequately design the structure and
appearance of the web page.
The second step of development and the introduction of a modern website is
the identification of its area. At this stage, it is necessary to determine the timing
of the project itself, the total number of web pages, and their functionality. If the
described information is available, this will allow you to achieve the business
goals of implementing the company's website. In practice, many world-class
companies use various tools and platforms to manage projects and track
implementation deadlines [13-14].

29
 The third step after the scope of the project has been identified and the key
goals have been identified is the search for a platform for the implementation of
the website. There are many varieties of CMS. CMS (Content management
system) is a single system that helps to manage a website, edit content, and set up
additional services. The CMS stores information that is closed to website visitors;
only authorized users have access. Popular CMS in modern conditions:
WordPress, Tilda, OpenCartx [15].
A content management system (CMS) makes it possible to create a website
without having to write code from scratch or even know how to program at all. It
is also a set of tools that help in creating a website, and then managing it using a
graphical interface, without resorting to using files.
HTML, CSS, and JavaScript The choice of this platform should be based on
previous analysis and determining the main goals that the site must achieve, so
that effective content management system platforms allow you to implement a
website and constantly update it without the participation of the developer:
• Adding and modifying content on website pages.
• Optimize website pages for search engines.
• Writing titles and adding tags.
• Use ready-to-use scripts so you don't have to rewrite the code, which saves
developers time.
Fourth step Once a website sitemap is created, the framework is created is a
black and white outline of the website page. The website displays the layout of
elements including buttons, images, and text. They do not perform any primary
function on the website, but are necessary to define the content that will be placed.
A mockup is then created which is a visual version of the framework. However,
colors are shown, images are selected, typography is taken into consideration and
it all turns into an attractive image of the actual site. Design is vital to establishing
the style and mood of the design. After designing, a mockup is created. Prototype
This is an interactive version of the framework, also in black and white. The
prototype is used to coordinate the location of blocks and buttons with the client
and to conduct usability testing [16]. After the completion of each of these stages,
the development of the website takes place, taking into account all the accepted
nuances of web design and functionality. Based on what has been discussed in
this section of the book, it should be noted that the success of the entire website
depends largely on the quality of its web design. Therefore, it is important to follow
the current trends in order to understand which tools have become fashionable for
website implementation, and which are already considered obsolete and even anti-
trend. Ecommerce web design trends are constantly changing, improving and

30
modernizing. Based on this, the author classified the key web design trends of
modern websites, which are presented in Table 2.
Table 2
Classification of key trends in web design of modern websites
Web design
Classification of key features
trend
Users expect personalization by adding dynamic content (also known as
Dynamic responsive content) to their website. Thus, all content changes depending on
the demographics, behavior, preferences and interests of users. Thanks to
content
this personalization, it is possible to provide users with interesting and
relevant content.
People respond better to visual content. Data visualization is not just about
Data charts and graphs. Depending on the user's important information, it is
visualization possible to select data sources and present them in an engaging visualized
storytelling format.
Voice Over the past years, voice dialing has become a growing trend, so the
interface introduction of a voice interface into a website is becoming a necessity.
Twitter was the first social network to incorporate this trend into its design.
Dark mode A dark background makes design elements more visible, creating a higher
contrast ratio using other colors, while improving visual ergonomics by
reducing eye strain.
Forms of An email list is one of the most important business assets. A successful
lead website must have a well thought out form of lead generation that expands
generation the company's customer list.
It is extremely important to use chatbots for websites, especially if you are
Chatbots an e-commerce business. To ensure competitiveness, you need to make your
own chatbot on the website, which will cover all the initial needs of
customers.
This trend is an undeniable user experience accelerator. This creates a
A virtual powerful emotional engagement that can be used to connect more securely
reality with your audience. Moving the background or main menu elements of your
site with VR is still relevant and adds a twist.
Easy to use Lightweight websites consistently attract audiences and will stay trending
tools for a long time to come.
3D 3D has long been used on various sites and is of great interest. Using 3D
graphics will help make the site trendy and interesting, and users will want
technologies
to see the images better.
Source: Developed by the author based on data [16-17]

Of the presented trends, it should be noted that it was popular and rapidly
developed in previous years, now it is significantly slowing down and giving way
to new innovative tools and technologies in the field of web design and web
development. It should be taken into account that the fact for the practice of
marketing business and the formation of business goals for the implementation
and development of a website that creates the right impression about the company
and brand, increases customer loyalty and the level of competition in the market.

31
 The aesthetics of an organization's website is not the only condition for
engaging users, but it acts as a bridge to attract customers and should prevent them
from feeling the need to leave an organization's website than what creative web
design should be primarily intuitive. Therefore, those visitors do not have to sit at
the computer for hours to see the portal interface. Web design is an important
component of website development, but the process is difficult without
developing a prototype, which will be discussed in more detail in the next chapter.

32
 CHAPTER 2

WEB SITE DESIGN

In the practice of marketing business, regardless of what type of website an
organization needs to develop, be it a business card website or a full-fledged website
for interaction with clients and visitors. It is always useful to pay attention to the cost
of this type of service, i.e. financial and time investments and the need for specialists
and professionals in this field, the process of developing and implementing an
organization’s website is considered a complex and multifaceted process that
requires special attention to all details at all stages. In the previous chapter, we
discussed the details of web design and its role in the implementation of an
organization's website.
However, this process is closely related to other stages, such as design and
prototyping, the main goal of website design is to ensure that the online resource is
as convenient as possible for the customer and potential visitors, and is fully
consistent with the tasks and goals of the organization, in order to achieve all goals.
The organization within the framework of the site implementation needs to follow
a conceptual approach when planning the tasks and activities that need to be
completed during the implementation of the project. It is also necessary to use
innovative methods and tools to ensure the efficiency of website development and
promotion. Before you start designing a website or creating a website promotion
plan or organizing search engine optimization, website design should be the first
priority step.
Based on this foundation and because of a critical analysis of scientific works in
the field of development and implementation of websites, the author formed the
main directions and organized the various stages of website design and development,
presented in Figure 11.

33
 Determining the goals and objectives of the website

Analysis and study of the target audience

Preparation of terms of reference for the development of a website

Prototyping

Creating a designer website layout

Layout

Programming

Filling the resource

Testing

User support
Fig. 11. Structuring the key stages of designing and developing websites in modern conditions
Source: Developed by the author based on data [1-2]

1. Determining the goals and objectives of the website: in order to obtain a

quality result that will satisfy the client, it is necessary to carry out careful planning,
build a scheme and algorithm for the stages of work. A detailed and step-by-step
algorithm makes it possible to save time, however, according to many international
studies, it is necessary to spend 2/3 of the time to develop a phased plan for the
implementation and development of a modern website for a company, and the
remaining third will be enough to solve the set business goals [2].
The process of designing a website cannot be neglected, and attempts to save
time in many cases lead to the fact that fundamental mistakes are made that take
much longer to fix than the time saved. Rational and competent design of the website
development process will save time, material and financial resources.
It should be argued that the development of a web resource is a lot of time-
consuming work. Even a small website can have a big impact on the development
of a business, so when creating a business card site, all the details must be carefully
thought out and designed. The first thing to be done based on the key stages
developed by the author in Fig. 11 is the setting and definition of key business goals.
If you do think them over initially, then not all the outlines of what needs to be done
will not be clear enough, however, like the completed project for the development

34
and implementation of the website itself. Without a specific design goal, the
development of a website will be either insufficient or, conversely, an excessive
amount of information and unnecessary functionality. The following option is also
possible: enough information is included, but it does not correspond to the subject
of the resource or, at best, does not fully correspond. However, with careful planning
of the sequence of work from scratch to the final stage of development, it is
necessary to have a structured web resource with a clear interface and easy
navigation.
2. Analysis and study of the target audience: When designing the
implementation process of a modern company website, the following components
must be determined, without which it is impossible to form the target audience,
subject and direction, which are presented in more detail in Fig. 12.

What What are the

Feedback
What types information preferences Target
and
Digital channels of content and content and audience and
organization
for will be used will be expectations direction of the
of the
communication to promote posted to of buyers and company's
interaction
the website attract an potential website
process
audience customers

Fig. 12. The main components for determining the target audience, topics and direction of a
modern website
Source: Developed by the author based on data [3-4].

The elements presented are not final when designing, developing and
implementing websites, as there may be more secondary elements that must be
considered in the design process.
3. Preparation of terms of reference for the development of a website: As this
stage is considered one of the most important stages, the occurrence of errors in this
stage will have negative results in implementing the project on time. Preparing
specifications is one of the elements of the success of designing and developing a
website. The technical task is organized from the requirements and capabilities of
the project, its work methods, and its function. When designing and developing a
website Web the stages of preparation for a technical task, which are the basis for
building the entire process, should be based on the requirements collected by the
author in Figure 13.

35
 Accurate description of
Availability of the statement
Detailed requirements for website development
of requirements.
website development. requirements.
The terms of reference for
All the features and specifics The terms of reference
the development of the
of the functioning of the should include an accurate
website should be
website must be defined and description of all functional,
understandable and
fixed in the terms of non-functional requirements
accessible to all project
reference. for the website that are
participants.
expected.

Fig.13. Requirements on which the terms of reference for the development of a modern website
should be based
Source: Grouped by author based on data [4].

Unite important is the fact that when creating the terms of reference, the goals
for which the web resource is created and the information obtained from the analysis
of the target audience are taken into account. Once the key business goals of website
development have been identified, the target audience has been drawn up and the
terms of reference have been drawn up, it becomes necessary to develop and create
a prototype of the website.
4. Prototyping: Their purpose is to show the location of the component parts
of the organization's future website and learn about the navigation features. A clear
view allows you to form a complete picture and know how the site will look in the
future. This eliminates the problem of waiting and anticipating, what will be
immediately visible on the design and then what will be in the final form. In addition,
it is easier for the client to make changes and modifications than to redraw or rewrite
requirements in paper form. It is easier to do it correctly in the design than to do it
later on the finished website to change functionality, arrange elements and make
other changes. Such modifications will cost much more than developing a website
prototype in terms of time and money. Another advantage is a more accurate
estimate of the timing of the development process and planning the budget for the
development and implementation of the site. Of course, it will not be 100%, but it
will be as close as possible to these indicators [5].
Based on the detailed features and attributes of the formation of a website
prototype, the author, based on the analysis of scientific works in the field of website
prototypes, has compiled a classification of existing types of website prototypes.

36
 High detail
layout

МLow Detail
Static layout
Layout

Classification of
Sketch on paper types of prototypes Interactive layout
of modern websites

Fig. 17. Classification of types of prototypes of modern websites

Source: Classified by the author based on data [6-5].

Sketch on paper
This type of prototyping is the simplest and is suitable for the implementation of
simple projects and websites. To implement it, you only need a pencil and an A4 sheet
on which the layout of the blocks of the future website is schematically drawn, which
will allow you to determine the optimal site design. This type of prototyping will allow
you to find a good arrangement of elements and create a common vision without
unnecessary details. This can provide both a vision of the overall concept for building
a website, and drawing a map of the website. A visual sketch of a website on paper is
shown in fig. 18.

Fig.18. Visualization of a modern website prototype sketch on paper

Source: Compiled by the author based on data [6-5]

Figure 18 shows a visualization of the website prototype with details of the main
functional blocks and their placement on the main pages of the website. However,
when using website prototyping using a sketch on paper, detailing is not

37
recommended, but it is better to superficially state the vision of the future website and
the concept for its implementation.
Low Detail Layout
This type of web page and website prototyping is also called LoFi Wireframe.
This type of website is drawn from a rough sketch, which helps to compile the idea
into a digital document and agree on an approximate scope of the work. At this stage,
general points such as unit sizes and proportions, coding, structure and framework are
determined. Each participant in the development process provides his comments and
puts forward hypotheses. As site development ideas, a minimally detailed design
usually does not contain any content. It is a page with a rough representation of groups
in the form of geometric shapes, as shown in Fig. 19.

Fig. 19. Rendering a Modern Website Prototype Using a Low Detail Sketch
Source: Compiled by the author based on data [6-5]

This type of prototyping of modern websites is suitable for simple and not
complicated functional websites, since the essence of the functionality and features of
web design is not fully disclosed with such detail.
High detail layout
This type of prototyping of modern websites is used when the approximate
structure of the website has already been developed and then they start working with
the content: texts, illustrations, descriptions and captions, icons and photographs.
Content forms the main message and helps to place accents, convey a valuable
business message to the audience. The text should provide an explanation, the
illustrations should form the images, and the big picture should create the story. A
team usually works on detailing and depth of study: a designer, an illustrator, a
copywriter, a photographer (for online stores and product websites). With such a
prototype, it is easier to organize teamwork, when each participant has his own
functional task. Visualization of a prototype of a modern website using a high-detailed
layout is shown in Fig. 20.

38
 Fig. 20. Visualize a modern website prototype with a highly detailed sketch
Source: Compiled by the author based on data [6-5]

It should be noted that this type of prototyping of modern websites is in many

ways similar to a real website, which contains an already approved web design and
layout of functional blocks.
Static layout
These prototypes are in the form of a graphic image. The ability to interact with
such a layout may not be available, the elements are not clickable. In fact, this is just
a picture, like a screenshot of the future site. First, a draft is developed as a static one
in order to optimize development resources. The designer simply draws a template
that will be duplicated and transferred to other pages. It makes no sense to make an
interactive prototype right away - because in about 100% of cases there will be
improvements. In addition, it is easier to redraw everything in Photoshop than to redo
the interactive elements. This type of prototyping is used by many companies when
the deadlines are short and the front-end website is simple and does not contain
complex functional elements [6].
Interactive layout
This type of prototyping is relevant and in demand in modern conditions and is
accepted when there is a visual representation and part of the content, behavioral
moments are taken up. The designer watches how animations are displayed, visual
effects, how transitions and sliders work, how website elements behave when
interacting, how forms and filters pop up, how buttons react to user actions on
different gadgets.
In fact, this is already a working version of the website - just a prototype, which
helps to finalize the web design before starting web development, work out the
details, simplify testing and agree on the result. You can interact with this layout and
even insert clickable links. Interactive Hi-Fi is created when developing complex
39
websites, when a serious budget is allocated and an impeccable result with a
minimum number of errors is needed. Often, such versions of the prototype are
compiled to present the concept for the implementation of web design and the project
itself for the implementation of the company's website, taking into account its main
business goals [7].
The prototype of a modern website is the result of the interaction of a whole
team that gathers more than once, makes changes more than once and works a lot,
sometimes a lot. It happens that creating a good prototype takes longer than the rest
of the development.
Based on this, the author structured the key stages as a guideline for developing
a prototype of a modern website, which are shown in Fig. 21.

5. Elaboration
and
specification of
4. Website requirements
3. Research the prototyping
basic
2. Formation of requirements
1. Discussion website and specifics of
and setting prototyping the website
the business hypotheses
goal of
website
prototyping
Fig. 21. Structuring the Key Stages of Prototyping a Modern Website
Source: Structured by the author based on data [8-7]

 Discussion and setting the business goal of website prototyping:

Structured by the author, the key stages of developing a prototype of a modern
website act as a guideline for organizing the process of developing and implementing
a website. The whole prototyping process starts with setting goals. The team meets
and discusses the goals of the future web product.
 Formation of website prototyping hypothese: Vague wording is acceptable,
however, the more clearly and specifically the goals are formulated, the more
competent will be the hypotheses that will be formulated regarding the
implementation and development of a website prototype. Therefore, when there are
goals and a rough understanding of what kind of web resource is needed, hypotheses
are put forward regarding the implementation of the website. These are assumptions
that will be verified by the website. Hypotheses are usually repelled when forming
a structure.
 Basic research into website requirements and characteristics:
At this stage, the team goes deeper into the product itself and studies the
business processes in the organization, which allows them to know the methods and
40
essence of business processes to make more effective decisions. The goal should be
to make the website an extension of the client’s business, otherwise there is a risk
that the organization and its website developed for it will be separate from each
other, since research is a matter of budget, if it is limited, then the research is
practically ignored, they simply create a website that is not takes into account
marketing operations. After this, a number of problems appear that were not taken
into account, which significantly complicates the process and leads to additional
costs.
 website prototyping: It is the transformation of goals, hypotheses and research
results into requirements for specific products. Initially, the approximate interface
requirements are described in words: navigation requirements, number of sections,
number of pages, icons, elements and blocks, general function, filtering function,
etc. Next, they approach a comprehensive sketch with little detail. The first sketches
are a prototype. Each team member coordinates, comments and corrects. Then the
editor-in-chief or project manager looks and expresses his or her impression. This
process is cyclical and is repeated with each new phase. From the development of
the layout, when there is a general idea, the layout begins to acquire content and
details. The higher the level of detail, the easier and more efficient the testing. The
output should give an idea of \u200b\u200bthe work of the future project, after that
it will be possible to identify problem areas, think about the logic of the interface
and determine the user's path from the first touch until placing an order, after which
you can work on web design, but this is a different direction [8-7]. In today's e-
commerce and website development business environment, there are a large number
of website prototyping programs available. Each of them has its own advantages,
disadvantages, features. Often designers have to work in several programs at once, as
the functionality and capabilities differ. Based on this, the author of the book analyzed
the existing software that serves to create prototypes of modern websites, which is
presented in more detail in the table 4.
Table 4
Classification of the main programs for prototyping modern websites
Program Features and specifics of website prototyping
A program for creating high-quality and complex prototypes. It is intended for UX
designers who need to create interactive applications and websites. Widgets and elements
Axure RP are inserted by drag and drop, so you can create a prototype site in a few hours. This
powerful tool allows you to implement almost any project, and make them interactive
and clickable.
Allows you to create a prototype website in a matter of hours. The method of work is
simple: it is similar to drawing on a regular board, the interface is as clear and accessible
Balsamiq as possible to everyone. Simple drag-and-drop, offline use of the program, convenient
format for providing data allow you to quickly create high-quality layouts and fully
prototype for a website.

41
 A professional tool for designers that is designed to design a variety of graphic elements
Figma and components. You can create a site prototype on Figma so accurately that developers
will only have to transfer elements to the framework and set parameters for them.
Designed to work with the iOs operating system and helps to create high-quality sketches
of websites. It has a fairly large library with ready-made sets of elements that can be
Origami individually adjusted to fit your needs. It is also possible to add interactivity, animation
elements, customize the behavior.
The prototype is assembled according to the principle of a block system, just drag the
desired element, set its parameters, and it will be in its place. You don't need to write all
Draftium the features from scratch. But even if it is needed, it can be done with the help of quality
tools. On Draftium you can create a very complex layout with many pages.
Professional application for teamwork. It gives access to several designers and developers
InVision at once, so that everyone can make their own changes if they have rights. The program
allows you to create interactive website prototypes with full functionality and display.
Source: Developed by the author based on [9-8]

5. Website planning and design: While designing a website for an organization,

calls to action should be implemented smoothly to achieve the desired increase in
sales. If they are not available, not everyone will decide to make purchases. If you
ignore such appeals, it is difficult to achieve the ultimate goal.
This stage of the website design and development process is responsible for
conceiving and organizing the appearance of the website, which includes developing
colors, drawing functional parts, designing individual implementation options (if
necessary).
The website design received must initially be implemented through the
development phase of the organization's services, and after For years, web resources
will not become known to visitors and buyers, unless they are indexed by search
robots. If modifications are made to the design, and the appearance of the website is
not good enough, this will lead to the failure of the entire web project [10].
The concept of good design in practice includes not only beautiful design, but also
a comfortable, simple and informative interface and user experience, because this is
where the success of the resource begins.
The layout of the page elements should be easy so that the visitor can find them
immediately, as the main task is In this case, the designer can create an interface that
helps find buyers for goods or services. Web design for the user interface and its
experience is a broader and more comprehensive concept than web design [10].
The basics of interface development are similar everywhere - UI and UX web
design should be clear and always beautiful. The author presents the detailed
elements of the website development and design process for the user interface and
user experience interface, shown in Table 3.

42
 .Table 3
Basic elements of the development and design process of UX and UI web
design of a modern website
Web design UX and Features of the development and design process of UX and UI web design
UI element
A web designer must make the interface intuitive and accessible to most
Availability people. They also include people with disabilities. Therefore, universal color
(Accessibility). palettes are used, a different use of the keyboard, pages are laid out in a certain
way, deliberately adapted versions and other tools are used..
Website User Collection and processing of information about website visitors. It is collected
Behavior through interviews, seminars, surveys, communication with focus groups.
Analysis (Context
of Use Analysis)
Ease of learning Easy to learn interface. It should facilitate the user's work with the website, and
(Easy to Learn). search for information should take a minimum of time..
Efficiency f the user quickly and easily got acquainted with the resource, without spending
(Efficiency) extra effort, found the necessary element, then the interface is highly effective..
This is one of the data collection methods in research. It is made up of a small
group of people, but includes people from different geographic backgrounds.
Focus group Their interactions are studied, especially in research related to marketing,
during the discussion of a new product or something else. In order to find out
(Focus Group). the possible impressions from people. Focus group is one of the research
methods aimed at collecting data. Through interactive discussions designed by
the researcher.
Interface An essential component of every website. These are objects, environment, tool
(Interface) sets with which the user gets acquainted with the web resource.
CMS Software that helps users create, manage and modify content on a website
A content without the need for technical knowledge. CMS allows you to create a website
without having to code from scratch (or even not know how to code at all).
management
system
Source: Structured by the author based on data [11-13].

The main task of the designer in this case is to create an interface that will help
find buyers for goods or services. UX / UI web design is a more voluminous and
extensive concept than web design (resource design). It can be associated with the
design of the control panel of a copier, the instrument panel on an airplane, an ATM,
and much more. In any field there are certain nuances and specifics of using web
design. [13].
A consistent UX/UI web design should be traceable to every section of the
website. Whatever section the user is in, he will see a typical website color
combination, logo and other recognizable graphic elements and brand elements.
During the development and design of the UX and UI web design of a modern
website, all key elements should be taken into account.
6. Layout: It is important to note that upon completion of the web design
development process, the contractor agrees with the customer on the layout of the

43
resource and only after that proceeds to adaptive layout. This design stage of website
development involves the adaptation of graphic materials to any kind of gadgets and
various browsers [12].
This stage of designing and developing a website is very responsible, since it
is much easier to make changes to the drawing of a resource, and then make up once,
than to make adjustments and changes several times. However, interaction with the
customer is no less important, the more active the latter's participation in the
discussion of web design, the higher the likelihood that he will receive a modern
website that fully meets his needs and market requirements in a particular niche [13].
7. Programming: the stage where the website comes to life. Creation of the basic
elements of a web resource, at this stage the programming of the underlying logic
and functionality takes place. In practice, to save resources and optimize the business
processes of companies, the stages of layout and programming are combined into
one, but this is only possible when performing small-scale projects, if we are talking
about a large online store or a website of a large company, these two tasks will have
to be divided into different stages. After the layout, layout and programming of the
key functions of the website is completed, the next stage is filled with content.
8. Filling the resource: Any modern website without filling with content cannot
be considered complete, since customers are unlikely to be interested in it, at this
design stage, the content is translated into the desired format and then placed on the
pages of the website Preparation of materials is carried out in advance. Writing
articles for a website can be entrusted to copywriters according to a pre-compiled
term of reference. In principle, the creation of texts can be done by any person who
has a good command of the word, has the skills of competent writing and is
competent in the subject of the resource, at least in theory. It can be both descriptions
of goods and their groups, and informational texts. In addition, the content must be
constantly updated. If there is no development, search engines will stop paying
attention to the company's website and positions in the issue will steadily fall. Texts
should be informative and relevant in order to interest potential clients. After the
implementation of all the stages described and structured by the author of the book,
an important technological point in the design and development of modern websites
is to check the performance of the resulting functionality [14].
9. Testing: Website testing is carried out at each stage of its creation, however,
the testing process cannot be neglected, since this process allows you to identify
broken links or non-functioning elements. It is only important to eliminate all
inaccuracies in time, before the web resource is transferred to the customer. After
eliminating all the errors, the web project is transferred to the hosting - a permanent
place of the Internet resource on the network. After the transfer, the website is tested
again in order to eliminate all errors, even the most minor ones, in time [15].
44
 10. User support: Of creating, a website is to transfer it to the client and learn
how to work with the web resource. A good sign of a quality web resource is a
convenient administrative panel, a panel for flexible management of website
parameters for further maintenance and development of the website.
From the presented, it should be stated that the design of a website is a
thoughtful modeling of an effective online resource. This is the initial stage in the
development of the website and it is he who is responsible for the adequacy of further
development. When designing a website, the idea of the website is developed, its
goals and key business objectives are determined, as well as ways to achieve them.
By the end of the design phase, web developers have a clear idea of how the
completed web project will look and work.
Considering the process of designing a modern website, one should highlight
the semantic design of web resources. Semantic design is an approach to the
implementation of a website, the purpose of which is to create a logical hierarchy of
web pages and form the structure of a web project and select search words, a
semantic core that describe the activity of a resource for compiling terms of
reference for developing a website and writing content.
In today's highly competitive environment, when introducing new and
upgrading existing websites of companies, it is imperative to organize a design that
ensures the achievement of key business goals, which are presented in more detail
in Fig. 14.

Increasing the likelihood of achieving the desired type of web

resource.
Clearly setting goals, defining the target audience and modeling
user paths can get the desired result from the development.

Logical division of work on website development.

A site prototype is an independent document, on the basis of
which the customer can already create a website, independently or
by another development team.

Time optimization and financial safety

Eliminating errors while creating a website prototype is a simple
process, as it is enough to change some parts of the text or
graphics. Implementing such actions will take much longer and
is more expensive at the coordination stage. For a web
programmer, such corrections will be more labor-intensive.

Fig. 14. Key business tasks, the solution of which ensures the design of modern websites
Source: Developed by the author based on data [15-17].

45
 It should be noted that the semantic design of websites is carried out on the
basis of an analysis of existing web resources of a certain subject and search demand
in order to find effective methods of promotion in search engines.
Based on this, the author of the book carried out a critical analysis of existing
approaches in the field of semantic design, developed key iterations of the semantic
design of modern websites, which are shown in Fig. 15.

1. Familiarization with the subject and direction of the company's business

2.Analysis and assessment of the demand for the implementation of a new website and
the provision of services through the website

3. Analysis of search results of websites and search for competitors

4. Analysis of the structure of competitors' websites

5. Expansion of the website structure by compiling a semantic core

6. Search for alternative options for website promotion

Fig. 15. Key iterations of the semantic design of modern websites

Source: Developed by the author based on data [16-17].

It should be emphasized that, shown in Fig. 15 key iterations of the semantic

design of modern websites are based on pre-collected information about the subject
of the business, the range of services and the specifics of the functioning and
scalability of the business.
The information provided will help the relevant specialists to get to know the
web project as much as possible and set priorities, which in turn will have a positive
impact on the design stage of the website and its further promotion in search engines.
An important next iteration of semantic design is the evaluation of user requests on
the Internet, which will determine the need and relevance of the implementation of
a particular web service. It is also important to analyze and search for competitors
by keywords and search queries to identify key weaknesses and strengths for their
inclusion in the process of developing and implementing a website. [15-16].
Having collected all the necessary information for designing the semantic core
of the website, based on the results of the analysis of requests, expanding the
structure of the website based on the user survey and certain needs, the semantic
core of the website is organized, which takes into account all the strengths of the
company and the corrected weaknesses of competitors. The next element of the
semantic website design iteration is the analysis of the traffic distribution on the
46
website and a detailed study of the most trafficked web pages. This analysis will
help to learn and determine the methods and tools used for search engine
optimization and promotion in more depth, evaluate less competitive topics,
prioritize writing texts for the website, followed by drawing up a strategy for
promoting the company's website. Based on the presented, it is worth considering
the key features and advantages of the semantic design of a modern website, which
are presented in Fig. 16.

•ready-made •eady-made website •reduction in the

Benefits for a WEB developer

semantic core; structure; cost of developing

Benefits for the business

•a ready-made •recommendations a web project;
• accelerating the
Benefits for SEO

promotion strategy of an SEO

Professionals

in search engines; specialist process of waiting

•prioritized content regarding the for the

owner
preparation; development of a effectiveness of
•Website website; implementation;
development and •error •accelerating profits
implementation minimization; from the results of
process planned •Reducing website the website
development time. implementation.

Fig. 16. Key Features and Benefits of Semantic Design for a Modern Website
Source: Developed by the author based on data [16-17].

The benefits provided by semantic organization website design are of great

importance not only for employees of agencies and website implementation
organizations, but also for business owners, which is reflected in the increased
financial results provided by digital sales and customer service channels. To create
a modern and effective website, you need to plan and think through every detail
before it is developed.
When discussing the above, it is necessary to emphasize that the design,
development and implementation of websites are necessary and relevant for
marketing work, in order to optimize costs and increase profits, with the ability of
many organizations to practically apply the features of website design. In this
chapter, as part of the development and formation of a brand promotion strategy on
the Internet, it is argued that everything is difficult without an effective and
efficiently created websit.

47
48
 CHAPTER 3

WEB SITE FUNCTIONALITY

In modern conditions of running a marketing business, regardless of the details
and scope of activity, it is strategically important and necessary to develop an
organization’s website. The website is a direct representative of the brand over the
Internet and is the main tool for influencing consumers with information. The
success of a marketing business through digital channels depends on this.
The Internet is largely based on website design. For an organization to achieve
its goals, it is necessary to develop and promote a website. If an organization's
website does not rank highly in search queries, the organization will lose traffic,
leads, and sales through its website. To achieve all of the organization's strategic
business goals in the field of search engine optimization and digitalization of
marketing, it is necessary and advisable to maintain a high level of website
functionality.
The functionality of the website for visitors and users is characterized by
convenient navigation and overlap between sections and between web pages, as well
as during the search process and quick access to the necessary information. Many
excellent organizations and brands believe that website functionality is much more
important than attractive web design. Whether customers and users want to purchase
or access products, an organization's website must meet their expectations.
The process of designing site navigation is complex and multi-disciplinary,
which requires creating an organization's website in such a way additional increase
in content does not lead to disruption of the functionality of the organization's
website. Since the function of the site is a set of different options that solve some
user problems for comfortable work with the Web resource.
Accordingly, the author, based on a comprehensive analysis of existing
approaches in the scientific literature, has formed the main elements that should be
given great attention when developing the functionality of the site, which can
negatively affect the state of the organization’s web resource, presented in Figure
22.

49
 Convenience and ease of Timely updating of Consistency of website
navigation on the website website content elements

Logical separation of Content structure and

Website cross browser
website content order

The website address

Ease of finding a website
should be easy to Website loading speed
on the Internet
remember.

Fig. 22. Key characteristics and components of the functionality of a modern website
Source: Structured by the author based on data [1-3].

Based on the presented structuring of the key characteristics and components

of the functionality of a modern website, each of them should be considered in more
detail and specifically:
1. Convenience and ease of navigation on the website. This functionality is
critical, otherwise, if the visitor finds it difficult to navigate from one web page to
another in search of the necessary information, he will be frustrated by the
difficulties that have arisen and, most likely, will leave the website. Re-attracting
visitors who have left a company's website is much more difficult than attracting
new ones.
2. Logical separation of website content. The website visitor should always
have a clear idea of which web page of the company website he is on and how he
got there, which makes it much easier to navigate the web page. It is the logical
division of the content of the website that will rationally distribute the content within
the existing functionality of the website.
3. The website address should be easy to remember. One of the most common
mistakes in modern website design is the ill-advised choice of a domain name. The
domain name of the website should be easy to remember and easy to use for visitors
and customers of the company.
4. Ease of finding a website on the Internet. The high level of competition
among existing websites is associated with the developed technological architecture
of the world economy and the need to organize e-commerce. However, because there
are millions of websites on the Internet, and every day there are more and more of
them, for a company that develops with the help of digital marketing, it is
conceptually necessary and important to develop search engine optimization of a
website on the Internet.
50
 5. Cross-browser compatibility of the website. In the context of the intensive
development of digital technologies and their implementation in all sectors of the
world economy, this development and development of websites has not bypassed.
In modern conditions, various tools and software, including web browsers, are
intensively developing. Today, there are various internet browsers that people prefer
to use. Thus, there is a need for the company's website to load in absolutely any
browser - regardless of whether you use Internet Explorer, Firefox, Safari, Google
Chrome and many others.
This is quite an important requirement for the functionality of a modern
website, which should ensure that the website is cross-browser compatible without
compromising functionality and web design. Based on this, when designing and
developing a website in modern conditions, this should be taken into account in the
initial requirements.
6. Timely update of website content. The real factor that drives a website to
success is its content. If content is not updated frequently, website visitors lose
interest and traffic drops. However, updating content on a regular basis becomes
difficult if you do not know HTML, which will ensure effective content
management. Modern conditions for doing business, despite the fact that there are
many innovative methods and tools for maintaining and maintaining websites,
necessitates the constant revision of content, its actualization and updating. Support
and development of the company's website is inextricably linked with the
actualization of content and its effective placement in functional blocks. Relevant
content and effective promotion will provide standard positions in search queries,
and the company's website will make it more recognizable and in demand.
7. Consistency of website content elements. Modern websites should be
compact, convenient and easy to find on the Internet to search for the website itself
and the necessary information. It should be noted that when developing a website,
the requirements for structuring all web pages to a certain layout must be met in
order to maintain a basis and uniformity. If the web page layouts of a website are
inconsistent with each other, the website will look disorganized, which will be
reflected in the company's brand image on the Internet.
8. Structured content and order. When implementing and developing websites
by modern companies, there is a common mistake that many people make, which is
related to placing too much content on one web page. Often, many companies post
so much information that the website visitor is overwhelmed by it. Good layout of
information is key as it allows the website designer to properly place content on the
website. By choosing a certain layout template, it is possible to place the desired
widgets with a drop-down menu, and then the company will never worry about

51
overloading the website visitor with a large amount of information, since now he
will be able to direct him to the information sections he needs.
9. Website loading speed. In today's dynamic world, patient waiting is slowly
becoming outdated. In the modern conditions of digitalization of all sectors of the
world economy, Internet users want websites to load quickly and provide the
opportunity to immediately view photos, articles and videos. When a website hosts
too many large images, it takes longer to load. This can result in visitors not waiting
for the company's website to fully load and leave. You should give priority to smaller
files when filling content, unless these files are key to attracting the attention of
visitors. In this matter, it is necessary to correctly prioritize [2-3].
The functionality of the site is one of the tasks that can be solved using the site.
To achieve the strategic goals of the organization's website, we strive to maximize
profits, increase operational efficiency and reduce costs. The intensity of
digitalization processes and the expanding presence of digital technologies in all
spheres of human activity have contributed to a collective transition. In addition to
the electronic form, many organizations and brands have many websites that need
to be organized according to their goals, web design, level of navigation, thematic
focus of the content, etc. Because the current structure allows the user to evaluate
the Internet site from the point of view usefulness and value when searching for
information, and a website development specialist knows what the client requires of
him, what business goals need to be achieved. The main criterion for evaluating a
web resource is the ability to satisfy the specific needs or interests of visitors, based
on a comprehensive analysis of scientific research in the field of website functions
and features of their development. The author has developed a classification of
websites based on generalization and depending on their purpose and functions,
shown in Figure 23.

52
 Business card
websites

Corporate
websites

Commercial
websites

Blogs

Portals

Social media

Web
applications
Fig. 23. Classification of modern websites depending on their purpose and functionality
Source: Developed by the author based on [4-6].

The developed classification of modern websites depending on their purpose

and functionality made it possible to structure their main types and form a unified
approach to considering websites depending on their functionality. For a more
detailed consideration and definition of this classification, each of them should be
considered in more detail:
1. Business card website. This type of websites is the simplest type of websites,
which are single-page in their structure, which contain basic and brief information
about the company or brand, indicating contact details for communication in various
ways (phone, e-mail, social networks, blogs). and others.). This type of websites is
necessary for companies that do not connect their activities with the worldwide
network, but want to make themselves known in the Internet space. Great for self-
employed entrepreneurs, small start-up firms and companies.
2. Corporate websites. This type of websites is characterized by much larger
volumes and is designed to provide more detailed information about goods, services
or the company's brand:
1) the history of the creation of the brand and the company.
2) description of the key goals and mission of the company.
3) development strategies.
4) the main activities of the company.
5) competitive advantages.
53
 6) the working team and its achievements. It should be noted that in the modern
world, the development and implementation of a corporate website is a prerequisite
for the full-fledged existence of any company, since without its own representation
on the Internet, it will not be perceived by most partners as authoritative and
deserving of attention. Such a web resource can only have a representative function
or be directly involved in practical activities. Corporate types of websites differ
significantly in purpose and can simultaneously perform the tasks of an online store
[4].
3. Commercial websites. One of the most common categories that allows
hundreds of thousands of people around the world to establish a profitable business
on the Internet. According to their functionality, this category of websites should
include the following:
 Landings. The customer reaches the Internet page after clicking on an advertising
hyperlink on the Internet. It usually includes details of the advertised good or service, which
promotes any specific service or good, and its ultimate goal is to encourage the visitor to perform
a specific action that is useful to the organization, such as requesting a call back or adding an item.
To cart or checkout.
 Internet shops: The most popular types of websites, the main section of which is a catalog
with product cards containing their description, image, reviews of consumers who have bought. A
prerequisite for the operation of an online store is the ability to register in a personal account for
the convenience of making a purchase. In addition, the development of websites in this category
involves the presence of information pages describing possible algorithms for delivery, payment,
return, warranty service.
 Places for booking. They provide services for the remote purchase of tickets for any type
of transport, various events (concerts, exhibitions, conferences, and excursions), pre-ordering
rooms in hotels, inns, hostels, tables in restaurants, renting apartments, etc. [5].
4. Blogs. A person, group of people, or even a company writes down ideas,
beliefs, or activities in a journal-like website. A blog may specialize in publishing
original material or filtering news and articles, collecting them from various sources
on the Internet and adding them to its sources. Some are electronic blogs that allow
visitors to comment on content and interact with the publisher. One of the distinctive
features of sites of this type is the constant updating of content of any type (text,
multimedia, graphic) [6].
5. Portals. This type of website is a large-scale Internet platform, reminiscent of
blogs, but with more advanced functionality. These types of websites are designed
for a huge audience with different interests and hobbies. Most often, they combine
several services with the ability to read news, chat on forums, participate in voting,
use e-mail, store personal information, etc.
4. Social networks. This category of websites refers to large web sites that are
designed for acquaintance, communication, entertainment of users, providing an
opportunity to share information about yourself, your interests, and significant
54
events with the world. In recent years, it has been actively used to develop its own
business, promote goods and services. This type of websites is classified as the type
that allows you to scale and gain confidence in end users using the platform - social
networks.
7. Web applications: Useful types of websites that provide access to software
products. They have a high degree of interactivity, allowing various actions to be
performed. This type of more advanced website is characterized by ease of use in
order to respond to different user requests in real time. Which allows attracting the
attention of users in the Internet, increase brand awareness and increase loyalty to
the organization and its brand. The global practice of developing modern websites
allocates many classification criteria according to a variety of criteria.
Website development standards:
 Accessibility (open or closed)
 Content creation method (static or dynamic)
 Network mode (external or local)
 Type of content (news, educational, social, entertainment, technical) and others [7].
The functionality of the website largely determines the further development of the
site itself, because this aspect is the key to determining the importance, priority and
value of the web resource among users and potential customers, and yet in order to
ensure the effectiveness of the site's work by developing functionality as shown in
Figure 24.
Clear web design and user interface

Quality image and quality product

description
Prominent but not intrusive calls to
action
Maintaining a company blog to
improve brand credibility
Simple and clear website
navigation

Fig.
24. Key elements to improve the functionality of a modern website
Source: Compiled by the author based on [8-9].

The considered key elements that allow improving the functionality of a modern
website are aimed at developing the company's brand, its positioning and
increasing recognition on the Internet using innovative development tools and
techniques. The high functionality of a modern website is more likely to attract
new users to the company's web resource, increase the time they spend on the
website, and help convert them into potential customers.
55
 It should be noted that each company itself determines what its website should
be like, what functionality it should have and what strategic goals it should fulfill.
Based on this, the key functionality that is standard and necessary to provide the
basic functions of a modern website was presented above in this paragraph.
However, taking into account the intensity of digitalization processes and the
maximum automation of existing business processes, additional functionality of the
websites of modern companies is being developed and put into practice to fulfill the
most diverse strategic business goals.
It should be noted that the thoughtful functionality of a modern website is one
of the most important components of the success of the development and
implementation process. It is on how convenient and understandable the structure
and navigation will be that the desire to make a purchase or go to another web
resource depends.
The functionality of the website includes both basic elements (visual editor,
news section, questions and answers, contact form, etc.), and can be extended by
certain modules, plugins.
The cost of the work depends on the need for advanced features and the
complexity of developing the functionality of a website. It is very important to
determine all the key elements at the time of planning the development and
implementation of a website.
The improvement of the additional functionality of the website includes in most
cases in practice such work as adding modules, fixing errors, changing the page
template, updating the design and setting up additional functionality to improve and
increase the efficiency of the website.
Based on the presented structuring of additional functionality and
customization features of modern websites, it should be noted that the functionality
of each website is unique in its essence and depends on the set business goals and is
aimed at ensuring the efficiency of the company.
Based on this, based on an in-depth study of the existing functionality, the
author of the book developed a structuring of additional functionality and
customization features of modern websites, which are shown in Fig. 25.

56
 Maintaining
Multilingual Micro markup Forms
statistics

Interactive Comparison
Slider Filter and sort
search functionality

Promotions and Timer and

Photo gallery Video gallery
discounts timing

Downloading
Website SEO
Social media and uploading Website map
Module
files

Cost Calculator Online booking Online payment Online

consultant

Catalog Registration
Back call Personal Area

E-mail
Shopping basket newsletter
Reviews Question answer

Fig. 25. Structuring additional functionality and customization features of modern websites
Source: Structured by the author based on data [10-11].

Arguing presented in Fig. 25 conceptually necessary, it is necessary to consider

in more detail each of the elements of the additional functionality of modern
websites:
1. Multilingual. Developing a multilingual website is one of the most
important tasks that every organization that owns a website should work on. To host
more than one language on your website to achieve distribution that helps reach new
audience segments interested in the site's content, especially if the site's content is
useful. For many audiences who speak different languages, more than one language

57
is provided. Translating website content into languages that website visitors can
understand is an important undertaking that increases the degree of audience
interaction and connection with the website content, thereby achieving the maximum
possible benefit from visitors.
2. Maintaining statistics. After implementing the site, it is necessary to
monitor user interaction with the site. Website analysis helps to evaluate its
performance and traffic to make decisions. As a result, you can analyze and plan the
further implementation of the marketing strategy on the site. When implementing
and developing a website for many organizations, these are not additional
requirements, but basic requirements for the functionality of the site.
3. Micromarking. Functionality that is characterized by marking up web pages
using tags and attributes that help search and social networking robots and use them
to parse the content of the website for their understanding.
4. Forms. Implementation of various forms for entering textual and digital
information when placing an order, filling out forms and making a purchase on the
website. When a company switches to an online interaction format, this functionality
is the main result of the implementation and development of a website.
5. Slider. Scroll bars are a graphical user interface element commonly used in
software applications to simplify navigation through large amounts of content or
data, especially when the content cannot be displayed entirely within the confines of
the viewable area. Scroll bars provide an efficient means for users to navigate
horizontally or vertically, depending on the orientation of the content. It plays a
pivotal role in improving the overall user experience of the digital product.
6. Interactive search. The functionality of the website, which allows you to
quickly search the website for the keyword of interest to the visitor's information.
Websites of companies with complex functionality must have an interactive search
for easy information retrieval.
7. Filter and sort. Functionality that allows you to sort and filter information on
the goods and services of the company. Basically, this functionality is suitable for
online stores.
8. Comparison functionality. Functionality that allows you to compare a product
or service with others that are on the website. The functionality is suitable for shops
and supermarkets, which will allow the user to make the right choice based on the
results of comparing a product or service and choosing the best in terms of its
characteristics.
9. Promotions and discounts. It is the ability to create additional functions on the
website to attract the attention of visitors and increase loyalty on their part. There
are many benefits in relying on discounts, including increasing traffic on the online

58
store, getting rid of unsold inventory of products, and attracting a group of customers
who are more price conscious.
10. Timer countdown. Implementation of a functionality that will allow you to
organize a countdown to the start or end of some kind of promotion or event that is
planned as part of the company's marketing activities.
11. Photo gallery. A section or group of websites across the Internet to publish
pictures of specific goods or services of the organization, its achievements, and
details of its activities. These can be thumbnail images, or full-size image pages.
Each page contains links that allow visitors to navigate the site, for example, when
the visitor clicks on a thumbnail image. On the home page, the full-sized image
associated with it is loaded into the gallery page.
12. Video gallery. A section or group of websites on the Internet for publishing
videos about an organization's specific products, achievements, and details of its
activities. Video clips contain links that allow visitors to navigate around the site.
For example, when a visitor clicks on a video clip, it either downloads or goes to a
page to watch it.
13. Social networks. They are web pages that allow active interaction between
members of this network and aim to provide different interests to facilitate
interaction between members. These features may include (instant messaging, video,
chat, file sharing, discussion groups, e-mail, blogs). The main idea of social
networking is Collect data about members who participate in the network and
publish this data on the network so that members with common interests and people
looking for files or images can find each other.
14. Downloading and uploading files. A function that allows users to upload or
download certain file formats that are managed on the side of an organization's
website. To save a file or image on a computer or other device, you must download
the file or image. The file will be saved to the automatic download location.
15. Website SEO module. Functionality for performing tasks of promotion and
search engine optimization of the company's website.
16. Website map. A formatted file lists every page of a website online. It makes
the website easy to find via search engines. In other words, a website map does not
directly help boost our website’s ranking in search results, but it helps the website
be seen and found by search engines. In an easier way.
17. Cost calculator. Functionality that allows the website to make an online
calculation of the cost of a product or service of a company, which will allow the
visitor to receive comprehensive information.
18. Online booking. The functionality is implemented to optimize the company's
internal business processes by automating the booking of a company's product or

59
service. In demand for creating websites for travel agencies, hotel and restaurant
business.
19. Online payment. A function that allows payment for the purchase of products
digitally from a store or website, by highlighting the data of the customer’s card or
bank account, and completing the filling of his data. Saving time for both the
organization and the visitor by automating the process of paying for goods and
services online on the website.
20. Online consultant. It is a coach and facilitator for marketing businesses that
work through the online channel. It is a way to provide professional or specialized
advice in a specific field or industry via the Internet. Online consultants can work
with individuals or companies who need help solving problems, improving
performance, or achieving goals. You can profit from providing consultations from
anywhere in the world, as long as you have a reliable Internet connection and the
necessary tools and skills.
21. Callback. Functionality by ordering a callback from an employee of the
company for consultation, clarification of the nuances of the service or product of
the company in the shortest possible time.
22. Catalog. Implementation of a full-fledged catalog of goods or services of the
company for the convenience of searching and studying the assortment by visitors.
The most requested functionality is for online stores and huge supermarkets.
23. Personal account. Creation of a personal user account, which will allow you
to optimally and quickly serve the visitor of the website, thoroughly study it and
form a personal offer.
24. Registration. The functionality for entering personal data for registering on
the website, which in turn will allow you to serve the client more quickly and study
it in more detail for further building communications.
25. Shopping cart. A shopping cart in the context of website development refers
to a basic software component, which allows users to make online purchases
effortlessly. Shopping carts act as an intermediary between consumers and online
sellers, facilitating the selection, booking and final transaction of products across e-
marketing platforms. Shopping carts handle a number of Countless functions
ranging from managing user sessions to integrating payment gateways, all with the
aim of providing a seamless, secure and convenient user experience.
26. Reviews. Autumn is also important and necessary functionality that forms the
feedback and user experience base on the use of the company's service or product.
27. Question-answer. Functionality in the form of a separate block, which reveals
the main questions and answers to them, which will help the website visitor to
actively study and understand a particular situation related to the company.

60
 28. Email distribution. Module for conducting advertising campaigns for visitors
and regular customers of the company's website.
Detailed website add-ons shown in the figure. 25 are not the final versions,
which include all possible functional features and trends of modern websites, but
this list of additional functions may be expanded and supplemented by the
organization and the development and implementation team of the website
depending on the specifics of the activity and the specific strategic business
objectives. In today's environment, an effective website is a functional website, as it
relies heavily on the web design of the website.
Developing an online website for business, entertainment, communication or
developing an information portal means completely different functions of the
website. Accordingly, the author presented the functions of modern websites
depending on the direction and type of activity of the organization. 26.
Website trading
function
Information
Website advertising
function of the
feature
website

Communication
Website image
function of the
function
website

Website
Website service
marketing
function
function
Fig.
26. Key functions of modern websites depending on the direction and type of activity of the company
Source: Compiled by the author based on data [12-13].

There are many websites that have all these features and others are just a part
of them, but everyone wonders what the most important thing in a website is? Of
course, ease of use, beauty of external design for visitors, work on the image of the
organization and its profitability for the site owner, in the most general case, the
functionality of the site being developed can be viewed from two points of view: the
visitor and the site owner [13].
Websites cannot be viewed without the ability to perform some kind of
interactive action; they are unlikely to attract the interest of visitors and will not
bring any effectiveness in marketing efforts. Based on this, even the simplest
websites are equipped with various software modules that allow visitors to
communicate with each other (forums, chats). Expressing your opinion on various
issues (polls and voting). For large and complex projects to develop and implement

61
an online website without various functional elements, such as visitor functions,
news groups, weather conditions, site search, comparison of products and services,
etc., since the online store includes wide range of functions. Therefore, the functional
elements in this case are the trolley. Online stores, orders, and payment system for
purchases. Without these elements, it is impossible to develop an online store [14].
Entertainment sites, of course, have many entertainment functions: Internet
radiobroadcasts, video and audio players, image manipulation (uploading to and
from the site, online image processing) are available to visitors, and the search
function on the site is necessary for visitors. Without this function, it is difficult for
a visitor to navigate through numerous sections and subcategories. Thus, a functional
website from the visitor's point of view is a website that supports a variety of
interactive features to fulfill any requirement and desire that meets today's demands.
Having considered the features of developing and implementing functional sites for
visitors, it is worth considering the features for owners of organizational websites.
As for website owners, priorities are placed in a slightly different order. After all,
the site is developed for any marketing purposes, such as increasing demand for
goods or services, buying and selling online, attracting customers and partners.
Ultimately, the main thing is not only the number of site visitors, but also the number
of potential clients.
This means that the site must provide its owner with tools that will help him
complete this task. To achieve this goal, the site must contain an administrative
section with extensive functions [15].
Answer the question: What opportunities should this department provide? For
example, if a visitor comes to a site from a search engine for a specific query, the
site's content should match that query as closely as possible. Therefore, the
information function of the site is what comes to the fore and determines the quality
if the visitor is a regular, therefore the function of the administrative department
must necessarily include the ability to quickly manage the site’s content. The website
owner cares about the number of clients attracted, so it should include development.
The site is a component development for recording visitors, and in the case of
an online store, its owner will definitely need the function of adding products to the
catalog, managing product prices and an electronic payment system. Also, website
development should functionally include elements of working with advertising,
because online advertising is an excellent tool for website promotion. To ensure the
effectiveness of the process of developing and implementing an Internet site, this is
not enough, since a mandatory and necessary element of this process should be
search engine optimization and promotion of the Internet site being developed,
which should be based on innovative principles, methods and tools.

62
 CHAPTER 4

WEB SITE LAYOUT

In modern conditions of running a marketing business using digital channels

and platforms, it is difficult to imagine without the development and implementation
of an innovative website for an organization, since the process of design,
development and implementation includes many complex and necessary stages,
starting from definition and implementation. Formation of marketing goals of the
organization, development and design of a website.
In previous chapters, we talked about the basic stages of website design and
development, as well as defining and promoting website functionality. Accordingly,
the implementation of all the initial stages of site design and development cannot be
implemented without the main stage of site coordination, since site coordination is
a more important decision. Modernity and accuracy, which involves writing
different rules for designing website web pages for different screen sizes.
This labor-intensive process automatically solves the problem of preparing an
adaptable version of the site for various devices, for example, tablets and
smartphones, since the site format is important today. The modern Internet is one of
the most important stages in the development of an online resource, as a result of
which the design drawn by the designer turns into HTML and CSS code. This task
requires special skills; to create high-quality HTML code, you need comprehensive
knowledge of the features of browsers, the semantics of web pages, and the
principles of element positioning.
A problem that needs to be solved when designing websites is displaying pages
with different screen sizes. The method of specifying the sizes of blocks and other
elements as a percentage of the width of the screen or original elements is called
formatting.
Requirements for the code written for website development:
The first requirement: the format must be correct: gross semantic errors are not allowed as
this leads to problems in promoting the site in search engines and the effect is tangible.
Second requirement: The website must be multi-browser: that is, it must look similar in all
popular versions of browsers used by the target audience and customers [1].
Website formatting is the process of programming the visible part of web pages
according to a previously developed and agreed upon prototype to format the
functionality of the future website. The appearance of web pages is programmed in
CSS language which should be understandable and readable for modern web
browsers. The main goal of websites is to protect and separate Describing the logical
structure of a web page (which is done using HTML or other markup languages)
than describing the appearance of that web page (which is now done using CSS).
63
 This separation can increase the accessibility of the document, provide greater
flexibility and control over its presentation, and reduce complexity and redundancy
in structural content. Additionally, CSS (Cascading Style Sheets) allows the same
document to be displayed in different styles or output methods. Such as on-screen
presentation, printed display, audio reading (using an audio browser or dedicated
screen reader), or when viewed with Braille devices. It is important to note that
before the advent of CSS, web pages were designed exclusively using HTML
directly within the document content. However, with the advent of CSS it became
possible to essentially separate document content and presentation.
Thanks to this innovation, it became possible to easily apply a single design style
to a group of similar documents and also quickly change this design. Based on the
above, the author has formulated the main pros and cons of using CSS for websites,
which are shown in Figure 27.

- Implementation of multiple web

page designs for different viewing - Different display layouts in different
devices. browsers that interpret the same CSS
data differently.
- Reducing the loading time of
website pages by transferring data - The often encountered need in

Flaws
presentation rules to a separate CSS practice to fix not only one CSS file,
file. In this case, the browser only but also HTML tags that are
downloads the document structure associated with CSS selectors in a
and the data stored on the page, and complex and invisibly way, which
the representation of this data is sometimes negates the ease of
downloaded by the browser only once applying single style files and
Advantages

and can be cached. significantly increases editing and

testing time.
- Ease of subsequent changes in web
design. You don't have to edit every
web page, just change the CSS file.
- Additional options for designing
web design pages of a website.

Fig.27. Key advantages and disadvantages advantages and disadvantages of using CSS layout for
modern websites
Source: Developed by the author based on data [4-5].

Based on the above, it should be noted that the process of website layout is one
of the key stages in the development and design of a modern website. Web site layout
is the writing of code that transforms the web design layout and prototype into a web
browser-readable page in an interactive way for the user of the web site. The process
of developing a modern website is popular and in demand for organizing an effective
business concept, which is based on digitalization and the development of digital

64
channels for interaction between companies and customers. Based on this, the author
of the book, based on the study of much scientific reference in the field of
programming, critical analysis and generalization formed the key stages of web
development of websites in modern conditions, which are presented in Fig. 28.

1.Web resource programming, including

the collection of customer requirements, 2. Creation of a general concept
the development of technical of a web project, taking into
requirements and interface design account creativity

3. Analysis of the design concept

and bringing it to life through the 4. Creation of multimedia and
development of a web layout FLASH elements

7. Transferring
6. Development of
5. Layout of the site's development to the
functional elements and
web pages platform and optimizing
their integration
text content

10. Maintenance of the

8. Checking and testing 9. Launching a web
project as a whole or its
a web resource project on the server
software component

Fig. 28. Key stages of web programming websites in modern conditions

Source: Structured by the author based on data [6-7].

It should be stated that, depending on the characteristics of a particular web

project, some stages of the development of websites and applications can be
interconnected and performed in a slightly different sequence, however, in Fig. 28
shows the key stages of web development of a modern website and their sequence
based on generally accepted and well-known methods and practices of web project
management.
In modern conditions of global transformations of the world market and
increased competition at all levels, it is undeniable that in order to scale a business
and increase its presence in the markets, it is necessary to organize an online format
for interacting with customers and organizing sales through the development of
websites and entire digital platforms. Based on this, any company or organization
must, in order to achieve the efficiency of business processes and ensure high levels

65
of sales, think over its development strategy, which must certainly be based on a
digital marketing strategy, which is based on the development and promotion of a
website that meets modern conditions. Considering the features and specifics of web
development of modern websites, the author developed a classification of types of
web development in modern conditions, which is shown in Fig. 29.

Front-end

Back-end Full Stack

Fig. 29. Classification of types of web development in modern conditions

Source: Classified by the author based on data [7-11].

Front end web development.

Represents a public part of the web development of web applications
(websites), with which the user can interact and contact directly. The Front-end
includes the display of functional tasks, the user interface performed on the client
side, and the processing of user requests. At its core, Front-end is the entire visual
part of a website that is visible to users when they open the web page of a modern
website, such as text, colors, buttons or images, and others.
It should be noted that a web application is a client-server application in which
the client is mainly a web browser, and the server is a web server. The logic of the
web application is distributed between the server and the client, data is stored mainly
on the server, and information is exchanged over the network. This is what the user
sees and what actions he performs every time he connects to the Internet and opens
any web browser. [7].
Front-end web development is the work of creating a public part of a web
application that the user directly interacts with and functionality that is usually
performed on the client side. That is, the Front-end developer works to ensure that
on the website each button, icon, text and window not only stand in its place, do not
overlap each other and look holistic (this is a web layout), but also that they fulfill
their intended function. In order to create a popular and affordable product (web
application).
Front-end web developer needs to interact with other programmers, designers,
marketers, analysts and other professionals who may be involved in the design,
development and implementation of the company's website.
66
 It should be stated that Front-end web development should include and be based
on key components:
 HTML (HyperText Markup Language) is a markup language used in the
creation and design of web pages and websites. This language is considered one of
the oldest languages and is widely used in the development of web pages for all
elements and documents on a web page and their interaction in the structure of a web
page.
 CSS (Cascading Style Sheets) is a web page formatting language that takes
care of the appearance and design of websites. It was specifically designed to
separate formatting from the content of a written document. This applies to colors,
fonts, images and backgrounds that are used on pages with total flexibility and ease.
This technology is related to the general appearance of web pages, including colors,
images, etc. It also adapts the same document in different styles and styles. displays
the transmission on the screen or for reading by voice.
 JavaScript is a programming language that developers use to create
interactive web pages to bring them to life. From updating social media feeds to
displaying animations and interactive maps, its functionality can enhance the user
experience on a website. Because it is a client-side scripting language, it is one of
the core technologies of the World Wide Web. It emerged as a browser-side
technology to add dynamism to web applications. With it, browsers can respond to
user interaction and change the location of content on a web page. Their task is to
respond to user actions and process keystrokes, cursor movements, and mouse
clicks. It allows you to enter messages, send requests to the server, load data without
reloading the page, and so on. [8].
It should be noted that the main task of Front-end web development is to
establish a link between the web application (web page of the website) presented by
the web designer and the Back-end and, if necessary, implement computing
functionality on the user side. The core technologies in a front-end web developer's
arsenal are HTML, CSS, and JavaScript. However, it is worth noting that when
working in a team, you need to know and understand many business processes
related to the work of Front-end web development. For a more impactful web
development process, the Front-end process is inextricably linked to the Back-end,
which requires more consideration that is detailed.
Back end web development
This type of web development of websites is the server-side operation of a
website or web application, which is responsible for everything that actually happens
when the website or web application is running, but this is not available for viewing
by the user. . Back-end web development is, largely, the creation of the main part of

67
the functionality of a web application and a website that runs through the front-end,
but takes place on the back-end.
Back-end web development takes into account all the main elements, nuances
and requirements for the implementation of the functionality on the website. The
development is based on the creation of functionality for existing blocks and
elements of the website with the detailing of each functional part [9]. At its core,
back-end web development provides a mechanism in which a huge number of
elements, data types, formats, participants and variables are interconnected, but at
the same time all these components work smoothly, like clockwork, ensuring that
all the necessary functions and embedded procedures are performed. The key task
of back-end web development is to create an invisible, but such an important piece
of software. Everything that is hidden behind a beautiful form must work effectively,
only then the project can be considered successful.
However, in addition to the correct operation of all the functions of a web
resource, it is also important to organize the process of interaction with databases,
work with the application interface, programming and integration with all external
services that are often necessary to ensure the functionality of the website of modern
companies. Web development and assembling the functionality of the website of
related Front-end and Back-end parts and fixing errors and possible technical
failures in the development process or even software operation, regardless of
whether they are on the Front-end or Back-end side . Since there are an uncountable
set of functions that need to be implemented on the Back-end side, there is also a
huge and varied choice of tools for their implementation. There are many
programming languages that come to the aid of web programmers, each of which
has its own characteristics, as well as pros and cons. And the capabilities of different
languages may differ, so it is not always the choice of a web programming language
for a web project, sometimes a web programming language chooses a web project.
In practice, the following programming languages are used for Back-end web
development:
 PHP. It is a scripting language primarily intended for developing and
programming web applications. It can also be used to create offline programs, not
just for the web. Open source and developed by a team of volunteers, it is one of the
most popular languages in the world. Great for working with the server side,
allowing you to automate the work of a web resource. It also runs on multiple
operating systems such as Linux and Windows.
 Python. It is an easy to learn, open source, extensible, high-level, object-
oriented programming language. It is an interpreted and general-purpose language
that is widely used in many fields such as creating standalone programs using GUIs
and web applications, and it can be used as a scripting language to control the
68
performance of many programs with the ability to use it to make simple programs
for beginners and carry out huge projects at the same time. Programming beginners
are often advised to learn this language because it is one of the fastest learning
languages. It has a simple structure, which makes it suitable for mobile development
as well.
 Ruby. It is a general purpose, high-level interpreted programming language
that supports many programming paradigms. It was designed with a focus on
performance and ease of programming. In Ruby, everything is an object, including
primitive data types, they are dynamically typed and use garbage collection and just-
in-time compilation. It supports multiple programming paradigms including
procedural, object-oriented and functional programming.
 SQL. It is a programming language for storing and managing information in
a relational database. A relational database stores information in the form of a table
in which rows and columns represent different data attributes and different
relationships between data values, with the ability to use SQL statements to store,
update, delete, search, and retrieve information from the database. You can also use
them to maintain and improve database performance. And the sphere of back-end
development is difficult to imagine without SQL, not a single store or social network
can do without linking to databases.
 Go (Golang) It is an open source compiled multi-threaded programming
language from Google. It is considered a general-purpose language, but is mainly
used for developing web services and client-server applications. It has become one
of the fastest growing server-side programming languages due to its simplicity, as
well as its ability to work with multi-core systems, networks, and huge code bases.
 Java. It is a high-level, class-based, object-oriented programming language
designed to have as few implementation dependencies as possible. It is a general-
purpose programming language that allows programmers to write once and run
anywhere (WORA), meaning that compiled Java code can run on all Java-enabled
platforms without the need for recompilation. In order to analyze in more detail, the
features and specifics of Back-end web development, it should be divided into three
main elements, each of which performs its functions in the general mechanism of
the company's web resource, which are presented in the table 5.
Table 5.
Back-end elements of web development
Back-end
elements of web Peculiarities
development
Every website or web application has two sides - a client and a server. The
Server part client is the application shell or browser, that is, what the user interacts with,
and from where requests are sent to the server. And the server is essentially

69
 a machine that processes these requests and returns the necessary
information. At the same time, one server can process requests from many
clients, just as one client can access many servers.
The server only processes information, but does not store it; there are special
tools for this - databases. When logging into any system, a database is also
Database used: it stores all logins and passwords, and when login data is entered, the
server sends a request to the database to check if there is such a login-
password pair; if the answer is positive, it is possible to log in and get access
to the system that you logged into.
Application Programming Interface - this is the part of the server that the
Application client directly interacts with, when it comes to just one server and one client
Programming in a vacuum - everything seems pretty simple. However, in practice this
rarely happens and you have to integrate programs with each other, for
Interface example, insert Google maps into a website so that the user can easily find
any offline store of the company and build a route to it.
Source: Compiled by the author based on [9-10].

Java applications are typically compiled into bytecode that can run on any Java
Virtual Machine (JVM) regardless of the underlying computer architecture. Java's
syntax is similar to C and C++, but it has fewer low-level features. The Java runtime
provides dynamic capabilities (such as reflection and modification of runtime code)
that are not normally available in traditional compiled languages [10].
Presented all interactions and communication of functional blocks and elements
of the website of a modern company are implemented using Back-end web
development. However, the main difficulty of back-end web development lies in the
fact that it is not enough just to make each element separately, it is important to
debug the synchronous and well-coordinated work of the entire mechanism so that
the web resource quickly and accurately performs all its functions. It should be noted
that one of the best frameworks for working with Java is Spring. Its peculiarity is
the ability to connect many modules designed to perform any tasks related to web
development. Having considered two key elements of web development, which are
the basis for creating any web product in today's conditions, but are impossible
without an associated type of web development - Full Stack.
Full stack web development
The direction of Full Stack web development is quite relevant and in demand
in modern conditions. This type of development is a universal approach to web
development, and Full Stack Developer specialists in this area understand both the
Back-end component (hardware and software part of the service) and the Front-end
(user interface). In essence, the division into Back-end and Front-end appeared only
in the 2010s, when software products began to have a complex and multi-level
structure. Prior to this, most programmers and web developers acted as Full Stack
by default, although no one called them that [11].

70
 In practice, there are many variations of Full-stack web developers, in fact,
many: PHP Full-stack Developer, Node.js Full-stack Developer, Java Full-stack
Developer and so on. The name, which stands at the very beginning of the specialty,
indicates which language / platform is taken as the basis during the implementation
of the Back-end part. The front-end technology stack is almost always the same and
differs only in the JavaScript frameworks used - Angular, React or Vue.js. But the
Back-end provides much more opportunities to realize their ambitions. It should be
emphasized that a Full-stack Developer is a developer who is directly involved in
all stages of web application development - from creating the client side (visual part
and user logic) to implementing the server side (databases, server architecture,
program logic). This direction is characterized by its relevance due to the fact that
this type of development will combine all existing innovative approaches in web
development, both Back-end and Front-end. The structure of the main components
of Full-stack web development in modern conditions is formed and presented by the
author in fig. 30.

Back-end Project management

The structure of the main components of

Full-stack web development in modern
conditions

Front-end DevOps

Fig. 30. The structure of the main components of Full-stack web development
Source: Developed by the author based on data [11-12].

From the presented, it should be noted that Full-stack web development covers
all stages of web application development from the creation of the client part, its
visualization and development of functionality to the implementation of the server
(database, server architecture and program logic). In modern conditions, Full-stack
web development includes not only Back-end and Front-end, but also the process of
managing and organizing this process, as well as DevOps 1. The advantage of this
type of web development of web applications and websites is that this direction
includes the combination of Back-end and Front-end. However, apart from the fact
that such professionals in the field are able to implement both parts of a web
application or website and configure their relationship, which is a frequent stumbling

1
DevOps - interaction on the development process with specialists in information
technology services and mutual integration of work processes [12].
71
block between Front-end and Back-end. This eliminates misunderstandings and
contradictions that would inevitably arise between several web developers working
on the same web project.
Having considered the features of website layout and key types of web
development, it should be noted that the first impression of a company's website in
modern conditions is created by web design and layout. However, the user will never
be able to see the design layout; it interacts with the finished website assembled by
the layout designer. Therefore, no matter how cool the initial web design is, if it is
not properly laid out, the user experience will be spoiled from the first seconds.
However, more often than not, it's not just about aesthetics. A website with a bad
layout becomes unreadable, inconvenient and uninformative. If two text blocks
overlap each other, or the image goes under the cut of the layout and the terms of
the promotion, dates and other important information on the banner become
invisible, the site's usefulness is reduced. In addition, high-quality layout is the key
to successful SEO promotion, and it affects not only technical, but also behavioral
ranking factors. The availability of a website for a search robot depends on the
correct layout: will it be able to index all the information on the page? Will he
understand where the content is and where are the auxiliary design elements? Will
he be able to capture the hierarchy and structure of the page? Will it stumble on
errors in the code? The user, having entered the website and found that he has all
gone somewhere, will immediately leave it, adding a refusal to the analytics system,
and losing behavioral factors [13]. From the classification provided for the intensive
development of information technologies and innovations in the field of
digitalization of all sectors, this has not left aside the processes of web development
of websites. There are a number of tools for creating a website format, which are
divided into textual and visual. In addition, there are hybrid programs where you can
format using both the code and the creation of blocks visually. There are a large
number of tools, but they are divided into categories. Website coordination depends
on many factors that have a significant impact on the effectiveness of the process of
developing, implementing and promoting an organization’s website. Based on this,
the author developed a classification of modern types of organization website
coordination, which are presented in the table 6.
Table 6.
Classification of modern types of layouts of company websites in modern
conditions
Type of
Website layout features
website layout
It implies correct display on any kind of devices. It is by far the most popular. It is an
Adaptive
integral part of the other two species, so it is much less often distinguished as a
layout
separate species..
When we learned how to make up websites, this method appeared. Tabular web
design of a website involves the use of tables filled with information. Externally, the
Tabular
process resembles working in Excel. This method is considered obsolete, but is still
layout
actively used. The fact is that it is suitable for standard projects with the possibility
of detailing and individualization.
This is a modern universal type of website layout, which is actively used to create
Block layout
high-quality web pages. Its principle is that all elements are located in blocks, or
72
 containers. They contain the necessary information and are themselves adjustable.
You can set their size, color and other parameters. Block layout design layout is
simpler, has more features and is able to implement any designer's ideas. The code is
cleaner and lighter, it is easy to read by browsers, which affects the ranking of the site
in search engines. In addition, the blocks guarantee a responsive design, so the
website displays correctly on various devices.
Source: Classified by the author based on data [13-15].

On the basis of generalization and structuring, the author identified the main
tools for coordinating the organization’s sites depending on their direction, and they
are shown in Table 7.
Table 7
Structuring the main tools for layout of company websites in modern
conditions
Directions for using tools for
Website layout tools
website layout
Adobe Photoshop, Gimp, Krita and other applications that
Image processing allow you to take elements from the layout and work with
visual content.
Notepad++, UltraEdit, Adobe DreamViewer, CSS3 Generator,
Working with programming
SublimeText, Firebug, CoffeeCup HTML Editor, Winless,
code
WinMerge and others.
Working with JS Front Page, NetBeans and many other tools
Crossbrowsertesting, Markup validtor, IE Tester,
Health check
Validator.w3, Dr Watson, Css validator and others.
Source: Structured by the author based on data [13-15].
In order to adapt to the website, you need to take into account the hardware
requirements and behavior of the elements, as not all animations will work well on
different devices. Particular attention should be paid to fonts, as fonts can be non-
standard and difficult. Website formatting is subject to strict laws. Otherwise, the
code will be incorrect and site performance will be reduced.
The elements are done correctly. If the elements are initially done correctly, the
process of formatting the website will be simple and does not contain difficulties.
Knowledge of the web development language is not enough, and a comprehensive
understanding of the business objectives, direction and characteristics of the site to
be developed, not all the designs drawn up can be implemented. The web designer
is technically at a high level, which is why the designer must clearly understand the
details of the design in order to immediately identify the possibilities. In practice,
the problem of a single standard has not been solved. Each web browser can display
the website element in its own way and the specialist must check the same elements
on multiple platforms. Basic testing involves using several scenarios where the
website is tested on different browsers and devices. To obtain a more accurate
73
assessment of performance, many tools and services are used. Website layout testing
is an integral part of formatting.
Based on this, the author has formed the main features of the correct formatting
of an organization's website, which are presented in Figure 31.
Layout must be cross-browser Styles are placed in a
and display correctly in Correctly structured
separate file, the page code headings, paragraphs,
different web browsers, is as short and light as
regardless of screen resolution their styles are thought out
possible

Block layout is considered The code is clear, has a

the highest quality, while it HTML and CSS content clear structure, opening
must be adaptive to all is in lowercase only and closing tags are
devices; visible

All images have the

Valid site layout - there CSS has advantages over JS, prescribed dimensions
should be no errors in the everything that can be done and the dimensions of the
code with styles is done only original layout are
through them preserved..

Fig. 31. The main features of the correct layout of the company's website
Source: Formed by the author based on data [15-16].

Steps to ensure correct website design:

 Checking the conformity of the layout with the design layout. For text, a discrepancy
of up to 5px is allowed, but a difference of 1-2px between blocks is recommended to be
corrected. The Pixel Perfect tool will help you with this.
 Cross-browser compatibility check. You need to make sure that the page is displayed
correctly in the browsers that are specified in the task.
 View the page at different resolutions. It's important to check how the page renders
on both large and small screen devices. In particular, this will help to identify errors with
a background image that should occupy the entire screen at any resolution. To do this, just
change the scale, emulating viewing on a device with a large screen.
 Check adaptability on different devices. You should check the page from a mobile
device in at least two browsers. To do this, it is enough to reduce the browser window to
the minimum width. You can also make sure that all page elements are adaptive using the
getbootstrap.com tool.
 Finding bugs in JavaScript. To do this, open the browser console (ctrl + shift + i) and
view the page code. Errors will be highlighted in red.
 HTML and CSS validation. To do this, you need to upload the HTML and CSS code
to the validator.

74
  Check download speed. Using the GTmetrix and PageSpeed Insights tools, you can
check the page loading speed and improve it. This will help speed up the indexing of web
pages by search engines.
 Check for availability of similar fonts for Windows, Mac and Linux. When non-
standard fonts are not loaded, the standard font is displayed. You need to simulate the
situation of not loading the font and make sure that the page looks normal with the default
font. To test this, you need to disable access to Google Fonts through the hosts file.
 Checking the interactivity of elements. You need to check all interactive elements by
pointing and clicking.
 Checking the work of links. Logos placed on internal pages must lead to the main
page of the website. Links to third-party websites need to be configured so that pages open
in a new tab. To do this, in the <a> </a> tag, you need to write the link destination attribute:
target =”_blank”.
 Check spelling and grammar. To do this, you can use the built-in validation in Word,
Google Docs, or the Grammarly service [16-17].
It should be noted that some services allow you to compare the finished layout
with the original website layout for compliance. During the layout check, the code
is examined for the presence of unclosed tags. It checks the correctness of the
semantic markup for search engines, cross-browser compatibility, as well as the
functionality of the page, even if images and JavaScript codes are disabled. After
verification, the website is given for further development. It is important and
necessary that when carrying out any kind of work on web programming, conflicts
and failures in the program code are possible, which cannot be predicted.
Therefore, it is important that web programmers have the opportunity to make
changes, test and improve the work of new functionality on a local and test
environment, and later submit it to you for approval without affecting the main
website. It should be stated that a valid and effective website code is also a tool for
its search engine optimization. If the main source of traffic to the company's website
is Google or other search engines, it is worth considering optimizing the code so that
search engine robots completely and quickly read it. To do this, it is mandatory to
get rid of the errors found by the validator, after which it is necessary to try to keep
the code simple and light. To do this, you need to highlight blocks of content
(headings, navigation) that are important for search.
To simplify the code, it is worth putting design elements and JavaScript into
separate files as much as possible. Text relevance is not just a matter of text
optimization. It's not enough to just mention keywords as often as possible on a web
page. It is better if they are placed in blocks at the beginning of the code, in different
tags. Non-text relevance and the already mentioned tags h1 - h6 for headings, alt for
images will have a positive effect [17].

75
 Whatever approach is chosen in the layout of the website, it must be
remembered that other webmasters and search engines still have to work with the
code, and most importantly, that the user wants to get an accessible and convenient
website.
It should be noted that in the course of designing and developing modern
websites, an important and integral stage is the layout of the website, which
determines the appearance of the website and its position in search engines. Layout
is a key element in the process of implementing modern websites, which are based
on innovative web development technologies, which will be discussed in more detail
in the next paragraph of the book.

76
 CHAPTER 5

PROGRAMMING LANGUAGES FOR WEBSITES

In modern conditions, the practice of organizing marketing in business is

associated with the use of innovative tools and methods for promoting the
organization’s brand, and one of the simplest such tools is a website that represents
the brand, ensuring the achievement of business goals and profitability of the
company. An organization depends on the effectiveness of its search engine
development and optimization. Particular attention must be paid to creating a
website.
The modern web is closely related to its design, prototyping and coordination, as
it cannot be applied without web development techniques. Web development
techniques are one of the modern and promising fields in the information technology
industry as these techniques allow professionals to create websites and web
applications, as well as work on other tasks in this field. It is important to note that
website development techniques span a variety of programming languages and full-
featured dynamic web development tools.
One of the fundamental aspects of web development is web programming, which
uses web-programming languages that provide a platform through which
instructions for a device and actions are executed. It should be noted that to control
the actions of a computer, a programming language is used, which, if the language
is well designed, allows instructions to be transmitted to the computer system. Since
the invention of computers, thousands of programming languages have been created,
more are created every year, and each language is unique. Some have different
specifications, while others have an appendix or link.
The main objective of this chapter is to identify the features of each programming
language and highlight the main benefits, tools and techniques of web programming
for websites which will be displayed in detail. Accordingly, the author identifies the
main factors based on which decisions are made on the use of a web programming
language, which is presented in Figure 32.

77
 Web Development
Scope

Support for tools,

elements and ways of Availability of libraries
editing, managing and capable of solving web
working programming tasks

The Flexibility of
Target Platform a Web
Programming
Language

Web Development Efficiency and speed

Language Domain of operation of
Compliance campilators
Fig.
32. Key factors that influence the decision to choose a web programming language
Source: Developed by the author based on data [1-3].

It should be noted that the presented factors in many cases serve as the main
criteria when choosing a specific web development language. In light of modern
conditions for the development of the IT industry around the world, there are a large
number of web programming languages, but it is impractical and impossible to know
everything [3-4].
Accordingly, the author, based on research into scientific approaches and practical
recommendations in the field of web programming, structured the most popular and
used web programming languages, which we display in the figure 33.
HTML

SQL CSS

Python JavaScript

C ++ PHP

Java
Fig. 33. Structuring the most relevant and popular web programming languages
Source: Compiled by the author based on data [2-4].

78
 It is an abbreviation for (HyperText Markup Language). It is one of the basic
technologies necessary for modern web development and programming, as it is the
basis for building the web. The markup language is used in designing web pages and
websites. It provides a structure or method for displaying texts, images, etc. on the
website, as this is the language is one of the oldest and most widely used languages
in designing web pages. It is not a programming language, but rather a language of
description. It gives the Internet browsing program a description of how it displays
the contents. It describes the dimensions of images, font formats, etc., and uses what
are known as tags to issue instructions to the browser.
These tags are placed between the signs greater than > and less than <, HTML
codes begin with the tag <HTML> and end with the tag </HTML>. The web browser
converts the lines of code in the HTML language into pages that are understandable
and easy to read for website visitors. This language is the basic structure of any page
or website on the web. Browser Internet needs to know the components of the page,
including sections, paragraphs, titles, quotes, texts, images, and links. The modern
version of this language, HTML5, is a combination of three types of code: HTML,
CSS, and JavaScript. Simply put, HTML5 is the tool through which developers can
create complex web applications in a faster and more streamlined way using these
three codes [5].

It is an acronym for (Cascading Style Sheets) which is known as Cascading

Style Sheets and it is a descriptive language that gives a website a beautiful look and
feel and a unique design that sets it apart from other websites. It is a simple
technology and web design language. Which aims to simplify the process of creating
web pages. List is not a programming language in itself, as its purpose is limited to
formatting web page elements, which are HTML elements, and therefore CSS can
only be applied to ready-made elements. web page written elements. Since it defines
the shape of the programming language (HTML), it deals with fonts, colors,
79
margins, defining width and height, and manages the images and background of
websites, since the language (CSS) is friendly to (HTML) because it accompanies it
when designing and creating web pages because it forms both of these languages.
The basis for every website is HTML, which is the basis for all elements of a
web page, while CSS is the basis for the design and form of a web page. site, without
it, websites would be plain text on a white background, because CSS allowed web
pages to be created and shaped in multiple and different ways to be able to
accommodate the degree of human creativity, such as the ability to define fonts.
Margins and spaces for site elements, specifying the color and size of elements,
applying colors to the background, moving elements freely and getting a lot of
movement on the site. Microsoft Internet Explorer was the first browser designed to
view and use CSS in 1998. Today, support for some CSS properties varies from
browser to browser because the W3C, which still controls and defines web
standards, released a new standard or version. CSS3, whose developers hope that all
major browsers read and render every property of the CSS language with the same
width and manner [6].

It is one of the most popular languages among developers and programmers,

and one of the most requested tools and software by companies due to its use in
websites. It is a lighter programming language than any other language that is widely
used as a scripting language for web pages, but is also used in other software
products such as node.js or Apache CouchDB - a template-driven, multi-paradigm,
dynamically typed language, which supports both prescriptive and object-oriented
programming styles. It was originally designed to add effects and interactions to web
pages and interactions means anything that is done or done at the browser level
without the need to reload the page as it is used to create more interactive pages of
a website and being able to control every part of a web page. Site because it converts
HTML pages from a static page to a dynamically changing page that makes the pages
come alive so that it makes them based on the commands entered by the user.
This language appeared in 1995, as it was previously called the Live Script
language, the JavaScript language is widely used with the HTML design language -
CSS, where this language gives dynamic content to web pages and can be used to

80
process information and interact with the user. We also note that JavaScript has
nothing to do with the Java language. Both languages have different structures,
connotations, and uses
JavaScript is not used to create applets or standalone applications. JavaScript
is often found in HTML documents and provides a level of interactivity to web pages
that simple HTML documents cannot achieve. One of its most important advantages
is its speed, as it speeds up the development of websites and applications, and
developers can easily perform maintenance and updates, and it is used with other
programming languages in the Internet area [10].

It is an abbreviation for Personal Home Pages, it is a web scripting language

used to create dynamic web pages open source and free of charge. It was originally
developed for use in designing and programming websites. It is considered an
effective tool for creating interactive and dynamic web pages, that is, pages that
change content, and this content changes because of user interaction with the page.
It is one of the most important and well-known programming languages, specializing
in the development of web applications on the server side and not on the user side,
that is, it works to receive and send data between the browser and the server.
In other words, if we write PHP code and try to open it directly in the browser,
it will not work, because it is simply not a language that works on the user side and
is not processed directly in the browser, for example, HTML is JavaScript, but
should be processed by the server and then delivered to the browser as a dynamic
web page that is rendered in HTML. This programming language is characterized
by its ease of writing code and avoiding the limitations that are found in other
languages, as well as its strength in terms of performance and security.
However, this does not mean that other web application programming
languages are not as strong and effective as there are now languages that have been
used for less than 10 years, but it is comparable to PHP, which allows you to create
sites of any complexity in this language, using it as a personal blog can be created
and the best example of this is the WordPress blogging platform written in this
language and also social networks can be created and the best example of this is
Facebook as it provides them.
The default language has a wide range of "features" that make programming
fun and easy. Because this language supports data storage in more than one way, it

81
supports Mysql and Mysqli databases by default in addition to XML file support,
and this language also supports object-oriented programming and no add-ons are
required to install it. in the browser, as in JAVA.

It is one of the most widespread and popular programming languages. It was

named Java in reference to the Java coffee which is produced in Indonesia, hence its
name is associated with a cup of coffee as it is defined as an advanced, complex yet
secure high level programming language invented by James Gosling in 1991 when
he worked at the labs of Sun Microsystems, now known as Sun Microsystems
(Oracle), which was to be used as the brainstem to power smart devices, Java has
come a long way and many different versions have been published.
Java has evolved from a universal language to a platform and a complete system
that combines various technologies used, which is one of the most popular
programming languages if the number of computers using this language in the world
exceeds 3 billion devices, according to the company, due to its many functions.,
which have prompted a huge number of programmers to learn and use it.
Areas of use of the Java language:
1. Mobile Applications.
2. The field of desktop programs and applications.
3. Desktop application development area.
4. Machine programming area.
5. Area of word processors and spreadsheets.
6. Field of robotics.
7. Web Application Domains
8. The field of artificial intelligence

It is one of the oldest programming languages still in use today and dominates
desktop applications along with the languages available from Microsoft. It is a
compiled and object-oriented programming language that includes many of the
benefits of high-level programming. This language is designed to run on all known
operating systems like Windows, Mac, Linux, Android, etc.

82
 It is considered to be one of the most powerful and well-known programming
languages and is called the mother of languages because it is a powerful language
that exists has been widely used for operating system development for a long time
and studying it will help you understand the principles and operation of programs
better and deeper, and will also help you understand how programs manage memory.
This allows you to fully manage the memory of the program you are developing
without any restrictions, since the C++ language allows you to create desktop
applications with high performance and fast response, and the Qt library is one of
the most popular libraries available for this purpose.
 C++ is one of the most popular and widespread languages. It has its roots in
the C language, which was developed in 1969-1973 at Bell Labs by programmer
Dennis Ritchie. In the early 1980s, Danish programmer Bjarne Stroustrup, who was
working at the time at Bell Labs, developed C++ as an extension of C. In fact, it
added C++ simply has some features of object-oriented programming. That's why
Bjarne Stroustrup called it "C with Categories". After that, the new language started
gaining popularity and new features were added to it, making it not just an addition
to C but a completely new programming language. As a result, “C with Classes” was
renamed to C++ and from then on both languages started developing independently
of each other [12].
In the IT industry, C++ is a powerful language and has inherited the rich
memory capabilities of C. It is a light and simple language that you can program
with even if your computer is weak or old. It can control memory usage greatly, with
the ability to easily convert code written in C to code in C++. It is also open source:
you will not pay any amount to work on it, as it is open source and free and will
remain free.

It is a high level programming language that is used in many complex scenarios.

As a high-level language, it deals with objects, variables, arrays, Boolean
expressions, complex arithmetic expressions, and other kinds of computer science-
related abstract concepts. This makes it more complete, as it is easy to read and write,
and is the fastest growing and most popular in the world, not only among software
developers, but also among mathematicians, data analysts, scientists, accountants,
network engineers, and even children.

83
 This programming language is beginner friendly and is a more used
programming language than what is considered. Learning this language is one of the
easiest tasks in programming. An open-source object-oriented programming
language allows you to quickly develop it. It is an interpreted and multi-purpose
language that is widely used in several areas such as building standalone programs
with graphical interfaces, and is often used to create and develop websites and
programs, automate tasks, and perform data analysis. It is a general-purpose
language, which means that it can be used to create many different programs and is
not specialized in any particular area of variety.

Structured query language "SQL" from English. Structured Query Language

is the standard query language used to work with relational databases.
A relational database stores information in the form of a table with rows and
columns that represent various data attributes and various relationships between
data values, with SQL statements that can be used to store, update, delete, search
and retrieve information from the database, which is also possible. use It is used
to maintain and improve database performance. It is a popular query language.
Often used in all kinds of applications, data analysts, and developers learn and
use the Structured Query Language (SQL) because it integrates well with various
programming languages.
The operations by which the user works with the database
 creating a new table in the database;
 adding new records to the table;
 changing records;
 deleting records;
 selection of records from one or more tables (according to the specified condition);
 changing table structures.
Types of SQL commands:
 Data Manipulation Language: this group contains sentences whose purpose
is to allow you to work with data without affecting its structure and general form, so
that you can query data and add, delete or change records.
 Data Definition Language: Commands falling under this group provide the
ability to define data, its form, and how it is related to each other through the use of
commands to create tables and create a database.

84
  Data Management Language: This set of commands helps define the
permissions that can be granted or denied to users in a database.
 Despite all the changes, SQL remains the most common application language
for interacting with databases. At the same time, database management systems, as
well as information systems using database management systems, provide the user
with advanced tools for visual query building. [13-14].
 SQL is used for “communication” between relational databases, and it is also
used in DBMS 2, such as MySQL3, PostgreSQL4, Oracle5, SQL Server6 and many
others. Over time, SQL became more complex - it was enriched with new constructs,
provided the ability to describe and manage new stored objects, and began to acquire
features characteristic of programming languages.
SQL is used to "communicate" between relational databases; it is also used in
DBMS such as MySQL, PostgreSQL, Oracle, SQL Server and many others. Over
time, SQL became more complex - enriched with new constructs, provided the
ability to describe and manage new stored objects, and began to acquire features
characteristic of programming languages. With all its changes, SQL remains the
most common linguistic means for the interaction of application software with
databases. At the same time, modern DBMS, as well as information systems using
DBMS, provide the user with advanced tools for visual query building. [13-14].
In modern conditions, there is a tendency to accumulate large amounts of data
- big data. SQL allows you to explore and visualize a dataset, identify the structure
and see what it actually looks like, letting you know if there are any missing values.
With filtering and sorting, SQL will allow you to understand how values are
distributed and how the dataset is organized, so this programming language is
suitable for the entire development direction. Based on the foregoing, the author
organized and reviewed the main features of the most used programming languages
that are required in the modern IT industry. Based on a detailed study and statistical
analysis of the features of the use of existing programming languages in the modern

2
DBMS is a set of software and linguistic tools of general or special purpose that provide management of
the creation and use of databases [13].
3
MySQL - a free relational database management system. MySQL is developed and supported by Oracle
Corporation, which acquired the rights to the trademark together with the acquired Sun Microsystems,
which previously acquired the Swedish company MySQL AB.
4
PostgreSQL - free object-relational database management system. Available in implementations for many
UNIX-like platforms, including AIX, various BSD systems, HP-UX, IRIX, Linux, macOS,
Solaris/OpenSolaris, Tru64, QNX, as well as Microsoft Windows.
5
Oracle - American corporation, the second largest software manufacturer by revenue, the largest
manufacturer of software for organizations, a major supplier of server equipment.
6
Microsoft SQL Server - a relational database management system developed by Microsoft Corporation.
The main query language used is Transact-SQL, created jointly by Microsoft and Sybase. Transact-SQL is
an implementation of the ANSI/ISO standard for a structured query language with extensions [13-14].
85
IT industry, the author has formed a comprehensive assessment of the commercial
use of programming languages in percent. Figure 39 shows a comprehensive
assessment of the commercial use of programming languages in %.
Clojure 0,10%
0,20%
Objective-C 0,20%
0,30%
Apex 0,60%
1,00%
Dart 1,00%
2,10%
Go 2,20%
3,30%
Swift 3,40%
3,40%
TypeScript 10,40%
10,60%
Python 11,20%
14,30%
C# 14,70%
16,80%
JavaScript 18,80%

Fig. 34. A comprehensive assessment of the commercial use of programming languages in %.

Source: Formed by the author based on data [15-16].

From the presented comprehensive assessment of commercial use, it should be

stated that in commercial use there is an intensive use of the programming languages
considered in this section, such as: JavaScript, HTML / CSS, Java, Python, PHP, as
well as a growing share of the use of new languages or programming languages that
are narrowly focused or specified on specific functionality. Based on this, in order
to obtain more correct results of the analysis, the author of the book analyzed the use
of modern programming languages for the scope, which is presented in detail in Fig.
40.
Kotlin 0,90% Go 1,20%
С++ 2,70% Арех 2,50%
JavaScript 3,00% С++ 2,70%
TypeSc… 3,30% Ruby 2,90%
Ruby 3,70% Python 4,50%
Go 4,40% Java 8,20%
Python 13,10%
TypeScript 10,10%
C# 17,80%
РНР 14,90%
PHP 17,90%
JavaScript 20,70%
Java 29,40% 27,30%
C#
Back-end Full Stack

86
 0,90%
10,10%

23,20%

65,80%

JavaScript TypeScript НТМL/CSS C#

Front-end
Fig.35. Use of programming languages beyond the scope of web development
Source: Formed by the author based on data [15-16].

It should be noted that depending on the scope of use, the popularity and
demand for programming languages is different, however, in all three selected areas
of application, there are leaders, among them PHP, JavaScript, HTML / CSS and
others. Web development frameworks are tools and libraries that developers use to
facilitate, simplify, and improve development in a particular language and increase
its efficiency. They provide interfaces to access commonly used functions as well as
abstractions that make complex things easier to understand and process. There are
front-end and server-side frameworks and various libraries that simplify Web
Development ProcessBased on the generalization of current developments in the
field of study, website building and web programming, the author has organized the
main types of frameworks and libraries that simplify the web development process,
as shown in Table 8.
Table 8.
The main types of frameworks and libraries that simplify the process of web
development in modern conditions
Name of the framework and Features of use
It is an open source library created by Google, and it is one of the most important
platforms for the JavaScript programming language. This platform plays an important
role for developers by facilitating the creation of various web applications and
websites. The most important feature of this framework is that it supports the creation
Angular of single-page applications and websites. Also creating testable web applications. A
framework is simply an environment that is pre-equipped with some tools, techniques,
and libraries that have been created, tested, and built by other programmers so that
anyone can easily use them to help and facilitate programming matters. It makes the
programmer start where others left off.
Node.js runs the JavaScript engine, and is designed for writing cross-platform
applications, as well as highly scalable applications such as web servers, allowing
Node.js programmers to write software. In the JavaScript language, it works outside the web
browser, and Node.js translates it into a language that the machine understands through
the JavaScript V8 engine developed by Google, which is used in the Chrome browser
and used by other browsers, built on the Chromium kernel, which allows programmers
to program many things using the JavaScript language and make them work outside

86
 Browser, such as back-end programming for websites (server-side), script
programming that runs on the command line, as well as programming applications with
graphical interfaces using technologies such as (Electron).
These collections of files, programs, routines, scripts, or functions can be integrated
when writing code. Libraries work by grouping pieces of code together to provide
functionality so you don't have to write the code yourself. Like a framework, they
Libraries reduce the risk of incorrect coding, make the development process more efficient, and
save resources. However, libraries are different from frameworks. The framework
defines and structures the assembly. Libraries are resources that are freely integrated
into the assembly of your own structure and web design.
A library built for programming in the JavaScript language. Facebook built it. It is a
library specialized in user interfaces, because it provides an easy, smooth, and powerful
React.js way at the same time to build interfaces and reduces the burden on programmers when
creating any interface. It is built based on the concept of a component that can be
reused. Super easily without having to rebuild it every time.
It is an open source front-end development framework based on the JavaScript
language. It is easy to use and learn, which means it can be used for part of an existing
project. Its importance lies in the ability to create entire websites from one page by
Vue.js integrating components. Multiple applications come together to achieve an integrated
interface and add multiple features that may require hundreds of lines using regular
JavaScript or even jQuery. The goal is to create an infrastructure that helps the
programmer complete his tasks quickly and with high efficiency.
This is a library used to integrate applications with Facebook. Using this library it is
Facebook possible to collect user data as it is transferred between your application and Facebook.
SDK The data can then be used to improve the advertising web application and provide
accurate metrics, such as, the number of downloads a user makes.
Source: Formed by the author based on data [16-17].

Visualizing what is provided in the framework and libraries inherently makes

the development process more efficient, as web developers have a set of necessary
code resources and libraries from which they can extract what is needed during
development.
Developing software features from scratch is when the framework and libraries
provide all the tools needed to create a website or application. Because frameworks
and libraries significantly speed up the development process, they are more cost-
effective than developing entirely new code. They also reduce development risks
because they are tested and reliable compared to writing code. New, untested. A
working knowledge of web development technologies allows today's business
owners and marketers to become more involved in the web design and development
process. They may not need to memorize any of this, but by keeping this book handy,
they will be able to gain the basic and important technical information they need to
make effective decisions about creating and growing a web project.
In modern conditions, digitalization and maximum computerization have
become so widespread that they are used almost everywhere in the global economy,
from the stage of product production to its sale using electronic distribution
channels. Without the use of computers and competent software, it is difficult to
imagine how it all worked, but the mindset is beginning to realize that in the reality
of modern life, programming is everything and even if there are no skills in this area,
88
programming affects everyone in one way or another. In the modern world, anyone
who is fully versed in programming can create a website. Its web application is easy.
More detailed information about the most popular programming languages will be
discussed in the next chapter.

89
90
 CHAPTER 6

USES OF THE HTML PROGRAMMING LANGUAGE

HTML is the basis for building the web. It is a markup language used to create
websites and web pages. It defines the structure and layout of websites and contains
many elements such as tags and attributes, which are the basic elements for creating
websites or web pages.
Hypertext is text that contains links, with its help, readers can easily move to
another section or to another page. At the same time, a markup language uses tags,
or plain text with specific tags, to define page sections such as headers and footers,
as well as other features such as tables and images. When creating web pages, it is
considered a markup language. HTML is one of the three most important tools. It
provides images, the appearance of text or structure, and other elements to a website.
Components such as formatting, colors, layout, and visual properties of these
elements are controlled by CSS.
Based on user behavior, JavaScript makes these elements behave in certain
ways. It is a unified language for displaying web pages in the browser. The web
browser receives the HTML document from the server via HTTP/HTTPS protocols
or opens it from a local disk. It then translates the codes into an interface that will
be displayed on Display screen [1-2].
It should be noted that the advantage of the HTML markup language is the
transformation of simple commands into visual objects. It is the most famous and
oldest coding tool, so based on a critical analysis of existing research on the use of
HTML, the author presented the basic structural elements of HTML used in creating
websites, which are presented in Fig. 37.

Text format
Colors
Strings
Addresses
Paragraphs
Lists
Multimedia
Hyperlinks
Tables
Frames

Fig. 37. Structuring the basic HTML elements that are used in the development of modern websites
Source: Structured by the author based on data [3-5].

91
 Based on the list of conceptual actions presented for a more detailed
understanding by the author of the book in order to create your first web page using
Notepad or TextEdit. It should be noted that web pages can be created and modified
using professional HTML editors, but for learning HTML, it is preferable to use a
simple text editor such as Notepad (Windows) or TextEdit (Mac).
Steps to create your first web page using Notepad or TextEdit:
First step: open a text editor
If you are using Windows, open Notepad - HTML Editor».
For Windows 8/10:
Open the Start screen (Windows icon in the lower left corner of the screen) - then
type notepad
For Windows 7:
Open Start > Programs > Accessories > Notepad».
For Mac 7:
Open Finder > Applications > TextEdit
Step Two: Write the HTML Code
Enter the following codes in a text editor, which are shown in fig. 39.

Fig. 39 HTML codes in a text editor

Source: Developed by the author based on data [3-4].

The characteristics of the key elements of the code are presented in the table 9.

92
 Table 9
Characterization of the key elements of the code
starting tag end marking Characteristic
This is a page type declaration telling the web browser that
<!DOCTYPE html>
this page is HTML5.
This line defines the encoding of the code you used to
>"meta charset="utf-8< program the page. UTF-8 is the most common
international encoding on the Internet
This is the root element of any HTML page and contains
<HTML> </HTML>
all the rest of the page's code.
This is a tag for information about the page and contains
<HEAD> </HEAD>
the URL of the website.
<TITLE> </TITLE> Used to specify the title of a web page.
This is a tag that applies to all visual elements of a
<BODY> </BODY>
website..
Source: Developed by the author based on data [7-8].
Step three: save the file
You need to save the file to your computer by choosing File > Save As from the
Notepad menu and naming the file "index.htm" and then choosing "UTF-8" from
the Encoding menu (this is the encoding you prefer to use in HTML files), as shown
in Figure 40.

Fig. 41. Encoding which is preferable to use in HTML files

Source: Developed by the author

Step Four: Viewing the HTML Page in a Browser

To do this, you need to open the HTML file that was saved in the previous step
in your preferred browser. You must double-click (double-click) the file, or right-
click once and then select "Open With". The result will be like the following figure
42.

93
 Fig. 42. View an HTML page in a browser
Source: Developed by the author

Text Formatting

It's important to note that HTML provides many tags that you can use to make
text on web pages look different than plain text, as well as formatting that you can
add as additional effects to text. Based on this, the author of the book proposed to
consider the classification of text and fonts in HTML [6], which are presented in
detail below.
Bold font
<B> ... </B>
<STRONG> ... </STRONG>
<B> Bold Text </B> Bold Text
<STRONG> Strong Text </STRONG> Strong Text

Italic font
<I> ... </I>
<EM> ... </EM>
<I> Italic Text </I> Italic Text
<EM> Emphasized Text </EM> Emphasized Text

Font underlined
<U> ... </U>
<U> Undelined Text </U> Undelined Text

Font with uppercase letters

<SUP> ... </SUP>
Superscript Text
<SUP> Superscript Text </SUP>

Font with small letters

<SUB> ... </SUB>
<SUB> Subscript Text </SUB> Subscript Text

It should be noted that in order to determine the difference between the <strong>
tag and the <b>

94
 The <strong> and <b> tags display text in bold by default, but the <strong> tag
indicates that its content is important, and the <b> tag is simply used to grab the
reader's attention without the importance of its content:
<html>
<body>
WARNING! Please
<p><strong>WARNING!</strong> Please
proceed with caution.
proceed with caution.</p>
<p>The concert will be held at <b>Hyde
The concert will be held
Park</b> in London.</p>
at Hyde Park in London.
</body>
</html>
Difference between <em> tag and tag <i>
The <em> and <i> tags display nested text in italics by default, but the <em>
tag indicates that its content stands out from the surrounding text, while the <i> tag
is used to emphasize text that is quoted from normal text for reasons for reading,
such as a technical term, an idiomatic phrase from another language, an idea, and so
on [9].
<html>
<body>
<p>Cats are <em>cute</em> Cats are cute animals.
animals.</p>
<p>The <i>Royal Cruise</i> sailed The Royal Cruise sailed last
last night.</p> night.
</body>
<html>
To form quotations, it is possible to form paragraphs that will be quoted from
other sources using the <blockquote tag>.
Quotes are often displayed with left and right margins, with a little extra space
added at the top and bottom .

95
 <html>
<body>
<p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,
consectetur adipiscing elit. </p> consectetur adipiscing elit.
<blockquote>
<p>Learn from yesterday, live for
Learn from yesterday, live
today, hope for tomorrow. </p>
for today, hope for tomorrow.
<cite>&mdash; Albert
Einstein</cite>
— Albert Einstein
</blockquote>
<p>Pulvinar leo id risus Pulvinar leo id risus
pellentesque vestibulum.</p> pellentesque vestibulum.
</body>
</html>
Some web pages contain street addresses or postal addresses that can be created
using the <address> tag to represent contact information (physical or digital) of
individuals or organizations. Most web browsers display the address in italics.
<html>
<body> Lorem ipsum dolor sit
<p>Lorem ipsum dolor sit amet, consectetur amet, consectetur
adipiscing elit. </p> adipiscing elit.
<address>
Mozilla Foundation<br> Mozilla Foundation
331 E. Evelyn Avenue<br> 331 E. Evelyn Avenue
Mountain View, CA 94041, USA Mountain View, CA
</address></body> 94041, USA
</html>

Colors

An important element of HTML is writing a tag that tells the web browser about
the work to be done, and a property that specifies how that work will be done. It
should be emphasized that to determine the background color is used:
Specify the background color
<BODY BGCOLOR="FFFFFF"> ... </BODY>

To select an image as the background for a web page is used:

<BODY BGCOLOR="#FFFFFF"
BACKGROUND="image.jpg">...</BODY>
By adding the BGCOLOR property to the <BODY> tag, it sets the background
color for the page.

96
 As for FFFFFF, this value includes the selected color, which here is white (note
that it is written between two ""). If you want to specify black, you must enter code
000000. Or code 6699 CC for blue, etc.

With properties in the <BODY> tag using the web, most hyperlinks that take
you to other pages or sites on the web are always marked in blue, and that links that
are actually visited can change their color to scarlet. These are the default colors of
browsers.
TEXT="#rrggbb" Specifies the color of the body text of the page
LINK="#rrggbb" Define the color of hyperlinks
VLINK="#rrggbb" Specifies the color of visited hyperlinks
Specifies the color of the active hyperlink when it
ALINK="#rrggbb"
is clicked
From the above, it should be noted that the presented properties of the color
codes are the same as the colors they represent.
<BODY BACKGROUND="backimag.jpg"
BGCOLOR="#ffff00"
TEXT="#000066"
LINK="#00ff00"
VLINK="#ff0000"
ALINK="#999999">
After this analysis, I concluded that I have set the image backimag.jpg as the
background of the page? Moreover, that I chose yellow for the background (in case
the previous image is not displayed as background)? In addition, that the text will

97
appear dark blue? Hyperlinks are green, visited links will appear in red, and active
links will appear in gray the moment you click on them with the mouse.

FONT

The tag for the fonts is: <FONT> ... </FONT>. This controls the fonts in terms of
type, color and size.
Determine the type of font we want

<FONT FACE=" Times New Roman">... Text ...</FONT>

Determine the font color

<FONT <FONT COLOR="#FF0000">... Text ...</FONT>

Determine font size

<FONT SIZE="4">... Text ...</FONT>
.Determine the font type and its characteristics for the entire page
<BASEFONT Name="Arial" COLOR="#FF0000" SIZE="5">

The <BASEFONT> tag Determine the type of font and its characteristics for
the entire page, that is, it determines the type of basic font that will be used on the
page from beginning to end and determines its color and size, which notices that it
is a single tag and does not contain an ending tag? Of course, there is no need for an
end tag as long as it deals with the page as a whole and its basic settings, and not
with a word, line, or paragraph in itself [10].
Therefore, this tag is usually written at the beginning of the file, preferably
immediately after the <BODY> tag. As for the properties used with it, they are
similar to the properties used with <FONT>, as we can use the name property with
it instead of the face in the same way without any differences.

Headings

Organizing content Headings help you define the hierarchy and structure of
your web page content. HTML has six levels of heading tags, from <h1> to <h6>.
The higher the number in the title, the more important it is. Therefore, the <h1>
defines the most important heading, while the <h1> tag defines the <h6> as the least
important heading on the web page. By default, browsers display headings in a font
that is larger and darker than plain text. Also <h1> headings are displayed in the
largest font and <h6> headings are displayed in the smallest font.

98
 Heading level 1
<html>
<body>
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
Heading level 2
<h4>Heading level 4</h4> Heading level 3
<h5>Heading level 5</h5>
<h6>Heading level 6</h6> Heading level 4
</body> Heading level 5
</html> Heading level 6

It should be noted that important discussion headings are essential to the careful
design of web page structure and should be used with care when discussing with the
user. Don't tag your headings to make text acceptable or bold. It is only used to
highlight the title of the web page and the order of its structure. Search engines like
Google use headings to index the structure and content of web pages and tag them
smartly. The <h1> tag is used to highlight the most important heading and usually
expands to the top of the page (first heading).

Paragraphs

Paragraphs are the main way to divide large text into small logical blocks.
These blocks are automatically indented from each other. Such text is much easier
to read and does not scare users. Paragraphs are mostly found inside large text. The
division goes on small semantic blocks. So not only is it more comfortable to read,
but you can also quickly find the information you need in a large text. Paragraphs
are created using a paired <p> tag, in the body of which a small part of the text is
placed [11-12]. Display two paragraphs on a web page:
<html>
<body> This is a paragraph.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
This is another paragraph.
</body>
<html>

Display empty spaces between words:

<html>
<body>
This is a paragraph.
<p>This is a paragraph .</p>
</body>
<html>
Display written text on more than one line
<html>
<body>
<p>This is a paragraph This is a paragraph This is another paragraph.
This is another paragraph.</p>
</body>
<html>
Note that the words after this. Remaining text should appear on a new line.

99
 <html>
<body>
This
<p>This <br> is a paragraph
is a paragraph This is another paragraph.
This is another paragraph.</p>
</body>
<html>
horizontal line hr (Horizontal Rule)). The <hr> tag is used to create horizontal
lines that separate sections of content on a web page. Like <br>, the <hr> element is
also an empty element. (empty element).
<html>
<body>
<p>This is a paragraph.</p> This is a paragraph
<hr>
<p>This is another paragraph.</p>
</body>
<html> This is another paragraph.

Lists

Lists are used to present a list of information in a nice and semantic way. There
are three different types of lists in HTML, and each one is used in a different way:
1. Unordered list: (Unordered list)
An unordered list is created with a <ul> element, and each list item starts with a
<li> element in unordered lists, list items are marked with a black circle.
<html>
<body>
<h2>HTML Unordered List</h2>
<ul>
<li>Chocolate Cake</li> HTML Unordered List
<li>Black Forest Cake</li>  Chocolate Cake
<li>Pineapple Cake</li>  Black Forest Cake
</ul>
 Pineapple Cake
<hr>
<h2>HTML Nested Unordered List</h2>
HTML Nested Unordered List
<ul>
<li>Chocolate Cake  Chocolate Cake
<ul> o Chocolate Velvet
<li>Chocolate Velvet Cake</li> Cake
<li>Chocolate Lava Cake</li> o Chocolate Lava Cake
</ul>  Black Forest Cake
</li>  Pineapple Cake
<li>Black Forest Cake</li>
<li>Pineapple Cake</li>
</ul>
</body>
<html>
2. Ordered list (Ordered list)
An ordered list is created using the <ol> element. Each list item starts with a <li>
element. Ordered lists are used when the order of the list items is important. List
items in an ordered list are labeled with numbers.

100
 <html>
<body>
<h2>HTML Ordered List</h2>
<ol>
<li>Fasten your seatbelt</li>
HTML Ordered List
<li>Starts the car's engine</li>
1. Fasten your seatbelt
<li>Look around and go</li>
2. Starts the car's engine
</ol>
3. Look around and go
<hr>
<h2>HTML Nested Ordered List</h2>
HTML Nested Ordered List
<ol>
1. Fasten your seatbelt
<li>Fasten your seatbelt</li>
2. Starts the car's engine
<li>Starts the car's engine</li>
3. Look around and go
<li>Look around and go
1. Check the blind spot
<ol>
2. Check surrounding for
<li>Check the blind spot</li>
safety
<li>Check surrounding for safety</li>
</ol>
</li>
</ol>
</body>
<html>

3. List of descriptions (Description list(

It is a list of elements with a description or definition for each element. A
description list is created using the <dl> element.
The <dl> element is used with a <dt> element that defines a term and a <dd>
element that refines the definition of a term.
Web browsers typically display lists of descriptions by placing terms and definitions
on separate lines, where the term definitions are slightly indented. [13-14].
<html>
<body>
<h2>HTML Definition List</h2>
HTML Definition List
<dl>
<dt>Bread</dt>
Bread
<dd>A baked food made of flour.</dd>
A baked food made of flour.
<dt>Coffee</dt>
Coffee
<dd>A drink made from roasted coffee
A drink made from roasted coffee beans.
beans.</dd>
</dl>
</body>
<html>

Multimedia

It is important to state the fact that for a better perception of text on a web page,
images are used. They help to navigate the text, break it down into its component
parts, and create a mood for the reader. Pictures on a page do not exist on their own.
They must first be uploaded to a directory on the server or to a special image hosting.

101
To insert an image on a page, an unpaired <img> tag is used, which has two required
attributes: src and alt [15].
The src attribute specifies the path to the image. This is also a link, just like in
the <a> tag, only now the user is not redirected, and the dt,-browser loads the image
at this path, if it exists. The path to the image can be either relative or absolute.

<img src="/images.png">
However, if the image is not currently available, then web browsers will display
a small image to indicate that the image is not available. For this, the alt attribute is
used, the value of which is text. It will be shown when the image cannot be loaded.
<img src="https://example.com/images.png" alt=" Buy a
book on web design and web programming ">

It should be noted that in addition to the “tell what could not be shown”
function, the alt attribute plays a crucial role for people who use screen readers. Since
the image cannot be read, programs read what was specified in the alt attribute. An
important component when working with images is its size.
When downloading an image from a third-party resource and inserting it into a
web page, the situation often arises that the image is very large and needs to be
reduced. To do this, there are the width and height attributes, which allow you to set
the width and height for the image.
<img src="https://example.com/images.png" alt=" Buy
a book on web design and web programming " width="320"
height="240">
The picture will be displayed at 320x240 pixels. It is important to remember
that using the width and height attributes does not change the physical size of the
image - it will weigh the same, only the visual size will change. To optimize a web
page, select pictures of the right size or reduce them using a graphic editor or special
services.
It should be noted that the <img> tag is used to include images in HTML pages.
As mentioned earlier, the <img> element is an empty element and contains only
attributes. Consider an example of inserting images into a web page:

102
 <html>
<body>
<img src="images/kites.jpg" alt="Flying Kites">
<img src="images/sky.jpg" alt="Cloudy Sky">
<img src="images/balloons.jpg" alt="Balloons">
</body>
<html>

It is important to state that each image must have at least two attributes: the src
attribute and the alt attribute. To define the width and height of an image.
Attributes are used to specify the width and height of an image. The values of
these attributes are interpreted in pixels by default.
<html>
<body>
<img src="images/kites.jpg" alt="Flying Kites" width="300"
height="300">
<img src="images/sky.jpg" alt="Cloudy Sky"
width="250" height="150">
<img src="images/balloons.jpg" alt="Balloons"
width="200" height="200">
</body>
<html>
To post a video, you need to pay attention to permissions. So video resolution
is something to look at when figuring out which videos can work for a user. In
general, 360p resolution works for all users.
The important properties of the <video> tag are shown in the table 10.
Table 10
Important tag properties <video >
To specify the width of the video window, the number we pass to it is the width
width in pixels.
To specify the length of the video window, the number we pass to it is the length height
in pixels.
Shows control buttons in the video window. control
For the <source> tag, these are its most important properties:
Select video path to display. src
Select video type to display. type
Source: Developed by the author based on data [14-15].

103
 <html>
<body>
<video controls >
<source src="examples/Videos/bird.mp4"
type="video/mp4">
<source src="examples/Videos/bird.ogv" type="video/ogg">
Your browser does not support the video
</video>
</body>
<html>
To add audio use:
<html>
<body>
<audio controls>
<source src="examples/audio/Bird.ogg" type="audio/ogg">
<source src="examples/audio/Bird.mp3" type="audio/mpeg">
Your browser does not support the Audio
</audio>
</body>
<html>

Links

During the development of websites to organize the movement between web

pages, the main element on the Internet was invented - hyperlinks. Hyperlinks can
not only link to another resource on the Internet, but also allow you to navigate
within the current document. To create a link, a paired <a> tag is used with the
obligatory href attribute, which indicates the address of the page to which the
transition will occur after clicking [15].
<a href="Document Link">Link Text</a>
A link or hyperlink is a connection from one web resource to another. Links
allow users to navigate seamlessly from one page to another on any server anywhere
in the world because a link has two ends, called anchors. The link starts at the source
point and points to the destination, which can be any web resource such as an image,
audio clip, video clip, PDF file, HTML page, element on a page, etc. By default,
links will look like this in most browsers:
Links that we haven't visited yet are shown in blue and underlined Unvisited Link
Links that we have previously visited appear in purple and are underlined. Visited Link
The active link is displayed in red and underlined. Active Link
The href attribute specifies the target of the link, its value can be an absolute or
relative address, an absolute address is an address that includes every part of the
address format such as protocol, hostname, document path:

104
 <html>
<body>
<p><a href="https://www.google.com" target="_blank">Google</a></p>
<p><a href="http://educationfactorys.com/">Education Factory</a></p>
<p>
<a href="images/kites.jpg">
<img src="images/kites-thumb.jpg" alt="kites">
</a>
</p>
</body>
<html>

It is also possible to create referral links so that users can go to a specific section
of a web page. Bookmarking is more useful if the web page is very long, it's a two
step process: first add an id attribute to the element you want to navigate to, then use
the value of the id attribute preceded by a (#) sign as the href attribute value of the
<a> tag , as shown in the following example:
<html> Jump to Section A
<body>
<p><a href="#sectionA">Jump to Section A</a></p> Jump to Section B
<p><a href="#sectionB">Jump to Section B</a></p>
<p><a href="#sectionC">Jump to Section C</a></p> Jump to Section C
<h2 id="sectionA">Section A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing Section A
elit.</p> Lorem ipsum dolor sit amet,
<h2 id="sectionB">Section B</h2> consectetur adipiscing elit.
<p>Pulvinar leo id risus pellentesque vestibulum.</p> Section B
<h2 id="sectionC">Section C</h2> Pulvinar leo id risus
<p>Nullam hendrerit justo non leo aliquet imperdiet.</p> pellentesque vestibulum.
</body> Section C
</html> Nullam hendrerit justo non
leo aliquet imperdiet.
It is possible to create links to download files in the same way as links to pages,
you must specify the destination address for the file you want to make available for
download:
<html>
<body>
Download Zip file
<p><a href="examples/download/test.zip">Download Zip file</a></p>
Download PDF file
<p><a href="examples/download/Links.pdf">Download PDF file</a></p>
Download Image file
<p><a href="examples/download/balloons.jpg">Download Image file</a></p>
</body>
<html>

Tables

It allows information to be presented in an organized manner and divided into

columns and lines. Tables are one of the most common forms of presenting

105
information about the product, multiplication tables, and documents. This
presentation makes it easy to compare the characteristics of some products. When
planning web pages, tables are used to the same extent, although their layout is
somewhat confusing. The thing is, a table is a composite element consisting of
several tags nested at once, this is similar to how lists are laid out [13-15]
The classification of the main tags for tables is presented in the table 11.
Table 11
Classification of main tags for tables
This is the main tag that can be placed to tell the browser to display the
<table> </table> data in the table.

<tr> </tr> Used to add a row to a table.

Used to add a field to a line representing a title, i.e. the text you paste is
<th> </th> shown in bold and in the middle.

Used to add a field to a string that represents ordinary information, i.e. the
<td> </td> text that is inserted into it.

Used to display the rows of a table, the number we assign to it is the size of
border the rows that will be placed between the rows and columns. <TABLE
GRAM="5">
It is used to specify the width of the table on its own, not for the browser.
width The number we give it represents the width of the table.
<TABLE WIDTH="80%">
It is used to specify the length of the table on its own, not for the browser.
height The number we give it represents the length of the table.
<TABLE HEIGHT="500">
Specifies the space between each table cell
CELLSPACING
<TABLE CELLSPACING="10">
Specifies the distance between the border and the beginning of the text in
each cell. Or let's say: specify the size of the margins for the cells of the
CELLPADDING table.
<TABLE CELLPADDING="10">
Specifies the left or right alignment of the table horizontally on the page.
ALIGN <TABLE ALIGNMENT="Left">
<TABLE ALIGNMENT="Right">
Used to specify the background color of the table.
BGCOLOR <TABLE BGCOLOR="#00FFFF">
Source: Developed by the author based on data [13-15]

106
 Details of the main structure are presented in table 12.
Table 12
Basic table structure
<html>
<body>
<h2>HTML Table (Default Style)</h2>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr> <tr> HTML Table (Default Style)
<td>1</td> No. Name Age
<td>Murad</td>
1 Murad 35
<td>35</td>
</tr> <tr> 2 Noor 30
<td>2</td>
<td>Noor</td>
<td>30</td>
</tr> <tr>
</tr>
</table>
</body>
<html>
Source: Developed by the author based on data [13-15]

When using an element such as a table, in most cases you will need to manage
its borders. The default table borders are set according to the following scenario,
which is presented in the table 13.
Table 13
Defining default table borders
<html>
<body>
<h2>Table with Separated Borders</h2>
<table>
<tr>
<th>No.</th> Table with Separated
<th>Name</th> Borders
<th>Age</th>
</tr> No. Name Age
<tr>
<td>1</td>
<td>Murad</td> 1 Murad 35
<td>35</td>
</tr>
<tr>
</tr>
</table>
</body><html>
Source: Developed by the author based on data [15-16]

107
 Also, when implementing the web pages of a website, in most cases complex
tables and mechanisms for recording them are used. If there is a need to combine the
columns of a table, there are two key properties that are presented by the author in
the table 14.
Table 14
Joining tables and basic tags
Used to merge cells that are on the same line. colspan
Used to combine fields into more than one line. rowspan
colspan and rowspan can only be used with <th> and <td> tags.
Source: Developed by the author based on data [15-16]
If there is a need to display numbers and letters in the table, then it will look like
the following:
<html>
<body>
<h2>Spanning Columns</h2>
<table>
<tr>
<th>Name</th> ЕSpanning Columns
<th colspan="2">Phone</th>
Name Phone
</tr>
<tr>
Hassan Al-
<td>Hassan Al-Ababneh </td> 0012002020 0055501520
Ababneh
<td>0012002020</td>
<td>0055501520</td>
</tr>
</table>
</body>
<html>
To combine cells from multiple rows, use rowspan
<html>
<body>
<h2>Spanning Rows</h2>
<table> Spanning Rows
<tr>
<th>Name:</th> Name: Hassan Al-Ababneh
<td> Hassan Al-Ababneh </td>
</tr>
0242505050
<tr>
<th rowspan="2">Phone:</th> Phone:
<td>0242505050</td> 0524050214
</tr>
<tr>
td>0524050214</td>
</tr> </table> </body><html>

108
 It should be noted that if you want to give a table a special title, then you need
to write the title inside the <caption> </caption> tag, and it should be placed as the
first tag in the table:
<html>
<body>
<h2>Table with Caption at the Top</h2>
<table>
<caption>Users Info</caption>
<tr>
<th>No.</th>
Table with Caption at the Top
<th>Name</th>
<th>Age</th> Users Info
</tr>
<tr>
<td>1</td> No. Name Age
<td> Hassan Al-Ababneh </td>
<td>35</td> 1 Hassan Al-Ababneh 35
</tr>
<tr>
<td>2</td> 2 Karam 27
<td> Karam </td>
<td>27</td>
</tr>
</table>
</body>
</html>
Source: Developed by the author based on data [15-16]

forms

A group of elements placed on the page with the aim of making the user enters
data into it. The basic idea of the form is to collect the information that the user
enters into the elements placed on it and send it all at once to the place where we
will save it. It is important to remember that HTML does not know how to process
the data that was sent from During the form, to interact with this data you need to
use web programming languages that run on the server, such as JavaScript or PHP,
as any form begins with the main <form> tag, inside which are the fill fields and
action buttons [16].
To interact with this data, you need to use web-programming languages running
on the server, such as JavaScript or PHP, which will be discussed in more detail in
the upcoming chapters. The main attribute of the <form> tag is the action path to the
file where the data processor is located. If this attribute is not specified, the data will
go to the same page from which the form was submitted. Moreover, the author
suggested creating the model step by step:

109
  Login form:
<html>
<body>
<form action="examples/pages/Confirmed.php"
method="post">
<label>Username: <input type="text" Username:
name="username"></label> Submit
<label>Password: <input type="password" Password:
name="userpass"></label>
<input type="submit" value="Submit">
</form> </body><html>

<html>
<body>
<form>
<label for="user-name">Username:</label>
<input type="text" name="username" id="user-name">
</form> Username:
</body>
<html>

<html>
<body>
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" Password:
id="user-pwd">
</form> </body>
<html>

 Radio buttons
It is also possible to use radio buttons to allow the user to select only one option
from a predefined set of options. It is created using an <input> element that has a type
attribute with a value of radio:
<html>
<body>
<form>
<input type="radio" name="gender" value="male"
id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" Male Female
id="female">
<label for="female">Female</label>
</form>
</body>
<html>

110
 Checkboxes
In order for the user to select one or more parameters from the proposed set of
parameters, checkboxes are used:
<html>
<body>
<form>
<input type="checkbox" name="sports" value="soccer"
id="soccer">
<label for="soccer">Soccer</label>
<input type="checkbox" name="sports" value="cricket"
id="cricket">
Soccer Cricket Baseball
<label for="cricket">Cricket</label>
<input type="checkbox" name="sports" value="baseball"
id="baseball">
<label for="baseball">Baseball</label>
</form>
</body>
<html>

 File Select box

It may also be possible for the user to find a local file and submit it as an
attachment with form data. Web browsers such as Google Chrome and Firefox offer
a file select input field with a browse button that allows the user to navigate to the
local hard drive and select a file. The file select field is also created using an <input>
element that has a type attribute that is set to file:
<html>
<body>
<form>
<label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
</form>
</body>
<html>

In many cases, the textarea is a control that provides a multi-line text field that
allows the user to enter more than one line of text:
<html>
<body>
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address"
id="address"></textarea>
</form> Address:
</body>
<html>

Menu options (Select Boxes) are also used - this is a drop-down list of options
that allows the user to select one or more options from the drop-down list of
options. Created with a <select> element and an <option> element that selects the
<option> elements inside the <select> element of the menu items:

111
 <html>
<body>
<form>
<label for="city">City:</label>
<select name="city" id="city" >
<option value="amman">Amman</option>
<option value="zarqa">Zarqa</option> City:
<option value="irbid">Irbid</option>
</select>
</form>
</body>
<html>

• Submit and Reset buttons

Also in practice, the submit and reset buttons Submit Reset are used. The Submit
button is used to submit the form data to the web server. When the submit button is
clicked, the form data is sent to the file specified in the action attribute inside the
<form> tag to process the submitted data.
The Reset button resets all controls on forms to their default values. For example,
entering a name in the text field and clicking the submit button to see it in action:
<html>
<body>
<form action="examples/pages/Confirmed.php" method="post">
<label for="first-name">First Name:</label>
First Name:
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit"> Submit Reset
<input type="reset" value="Reset">
</form>
</body>
<html>

Frames

Frames are pages that are divided into several sections, so that each of them
appears as a separate page, and appears separate from the other sections. You may
have clicked on a hyperlink in one section to bring up the related page in the other
section.
They are just ordinary pages that do not differ at all from the ones that I learned
to create, and each of them is not related to the other pages in terms of structure and
definition. Components of a frame page = the number of files of the page itself + the
page of the main file that compiles it.
<FRAMESET> ... <FRAMESET>
Used instead of <BODY> tags ... </BODY

So the frame master file does not include a definition using BODY

112
 Now we come to the properties: The first property that is used with these tags
is COLS, which defines the number and sizes of the vertical frames of the page.
Sizes are determined in two ways: the direct method and the relative method or
both together.
Table 16
Features of managing the properties of HTML frames
<FRAMESET Allows you to define two vertical windows, each taking up 50%
COLS="50%,50%"> of the screen size.
>/FRAMESET<
<FRAMESET Allows you to show three windows, the sizes of which are 20%,
COLS="20%,50%,30%"> 50% and 30% respectively of the screen size.

>/FRAMESET<
Allows you to define three vertical frames, the first 200px and
<FRAMESET the second 300px.
COLS="200,300,*"> As for the third *, that is, it is not limited to a specific size, but
>/FRAMESET< will be the remaining screen size (until we know the screen
resolution that the site visitor is using)
<FRAMESET Specifies four frames, the size of the first one is 200 pixels, the
COLS="200,*,15%,20%"> third one is 15% of the screen size, the fourth one is 20% of the
>/FRAMESET< screen size, the fourth one is the size of the rest of the screen.
<FRAMESET Selects three frames, the first has a size of 150 pixels. The
COLS="150,*,2*"> remaining space is divided based on the fact that the third frame
>/FRAMESET< is twice as large (*2) as the size of the second frame (*)
Source: Developed by the author based on data [16-17].

The second property is ROWS, and its function is to determine the number and
size of horizontal frames (rows) within the page. This is done in the same way as
with columns, which is, either using the relative or absolute method.
In more detail, the features of managing tire properties are presented in the table
17.

113
 Table 17
Features of managing ROWS properties of HTML frames
<FRAMESET Allows you to define two horizontal borders, each 50% of the
ROWS="50%,50%"> screen height.
>/FRAMESET<
<FRAMESET Allows you to define three horizontal frames whose height is
ROWS="20%,50%,30%"> 20%, 50% and 30% respectively of the screen height.
</FRAMESET>
<FRAMESET Allows you to define three horizontal frames, the first one will
ROWS="50,120,*"> have a height of 50px, the second -120px, and the third one the
</FRAMESET> remaining height of the screen.
<FRAMESET Allows you to define four horizontal frames, the height of the
ROWS="50,*,15%,20%"> first is 50px, the third is 15% of the screen height, the fourth is
</FRAMESET> 20% of the screen height, and the height of the second is the
remainder of the screen height.
<FRAMESET Allows you to set two frames, the height of the second is twice
COLS="*,2*"> the height of the first
</FRAMESET>
Source: Developed by the author based on data [16-17].
<html>
<body>
<FRAMESET COLS="50%,50%">
<FRAME SRC="thedome.jpg" MARGINHEIGHT="40">
<FRAME SRC="frame2.html">
</FRAMESET>
</body>
<html>
<html>
<body>
<FRAMESET ROWS="50,*,15%,20%" FRAMEBORDER="0">
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
<FRAME SRC="frame4.html">
</FRAMESET>
</body>
<html>
<html>
<body>
<FRAMESET COLS=".200,*">
<FRAME SRC="frame2.html">
<FRAME SRC="frame3.html">
</FRAMESET>
</body>
<html>
Emphasizing all the main points of working with HTML, it should be noted that
in the current conditions of the intensity of the development of information
technologies, methods and tools for developing modern websites, special attention
should be paid to the technologies used to implement them in the practical activities
of organizations. It should be noted that modern web development is unthinkable
114
without the well-thought-out possibilities of HTML as a tool for web page markup
of websites.
In today's conditions of intensive development of tools for the development,
development, design of company websites, one should carefully choose the tools
necessary to ensure the effectiveness of the development process and search engine
optimization to achieve all the company's business goals. Nothing described can be
imagined without the use of modern web programming languages, which will be
discussed below.

115
116
 CHAPTER 7

JAVASCRIPT
USES OF THE JAVASCRIPT PROGRAMMING LANGUAGE

JavaScript is a cross-platform programming language used by developers to

create interactive websites. It allows developers to create dynamically updated
content, use animations, pop-up menus, clickable buttons, multimedia control, and
more. JavaScript can be used on both the client and server sides, while HTML and
CSS are used to give structure and style to web pages.
JavaScript is used to add interactive elements that attract users. Without
JavaScript, web pages on the Internet would be static. It was developed in 1995 at
Netscape by Brendan Eich as a scripting language in the Netscape Navigator
browser. Initially it was called LiveScript but in the wake of the popularity of the
Java language it was renamed to JavaScript [1-2].
The most important uses of the JavaScript language are creating web pages,
web applications, designing presentations, building server applications, designing
games, and smart watch applications [3].
Here we will talk about how easy it is to add interactivity to a web page using
JavaScript. But before we get started, you should have some working knowledge of
HTML and CSS.
1. Add JavaScript code inside the web page. We can add JavaScript code
directly into web pages by placing it as content inside the <script> element. The
<script> element indicates the web browser contains executable script and not
HTML code.
<html>
<head>
<meta charset="utf-8">
<title> JavaScript</title>
</head>
<body>
Hello World!
<script>
var greet = "Hello World!";
document.write(greet);
</script>
</body>
</html>
2. Call an external JavaScript file you must place the JavaScript code itself in
a separate .js file, and then call this file on a web page through the src attribute of
the <script tag>
<script src="js/hello.js"> </script>

117
 It is important to state that this method is useful in case we need to make the same
JavaScript code available for multiple pages, in which case we do not need to repeat
the same task, which greatly simplifies the maintenance of the website.
<html>
<head>
<meta charset="utf-8">
<title> JavaScript </title>
</head>
Click Me
<body>
<button type="button" id="myBtn">Click Me<button>
<script src="js/hello.js"></script>
</body>
</html>
3. Place JavaScript code directly inside HTML tags:
onload onkeypress onmouseover onclick
It’s important not to put too much inline JavaScript code, as this will create a
mess between HTML and JavaScript and make your code difficult to maintain.
<html>
<head>
<meta charset="UTF-8">
<title>Inlining JavaScript</title>
</head>
Click Me
<body>
<button onclick="alert ('Hello World!')">Click
Me</button>
</body>
</html>
It is important to note that the <script> element can be placed in the <head> or
<body> section of an HTML document, but ideally scripts should be placed at the
end of the body section just before the closing </body> tag, which makes the web
page more user-friendly. Web pages load faster because they prevent page rendering
clogging. An infographic that prevents each <script> element from rendering the
page until the JavaScript code is fully loaded and executed, so it is placed in the
<head> section of the document without any valid ones. The root cause will greatly
affect website performance [4-5].
Understand JavaScript syntax
It is the set of rules that determine the construction of a properly structured
JavaScript program. The JavaScript language consists of statements that are placed
inside a <script> element on a web page or inside an external JavaScript file with a
.js extension.
var x = 5;
var y = 10;
var sum = x + y;
document.write(sum); print the value of the variable //
118
 Case sensitivity in JavaScript
Case sensitivity means that variables, language keywords, function names, and
other identifiers should always be written in consistent capital letters, for example
the variable myVar, not MyVar. Likewise, the function name getElementById() must
be written exactly in the same case, not getElementByID() [6].
• Variables in JavaScript
They are basic for all programming languages, as variables are used to store
data such as a series of texts, numbers, etc., with the ability to specify the data or
value stored in the variables, update them, and retrieve them when needed. In
general, variables are symbolic names for values, with the possibility of creating a
variable using the word var, while.Using the equal sign =, here it is known as the
assignment operator, to assign a value to a variable, as follows: var varName = value;
<html> Hassan Al-Ababneh
<head> 35
<meta charset="utf-8"> true
<title> JavaScript </title>
</head>
<body>
<script>
var name = " Hassan Al-Ababneh";
var age = 35;
var isMarried = true;
document.write(name + "<br>");
document.write(age + "<br>");
document.write(isMarried);
</script>
</body>
>/html<
In the presented, three variables have been created, the first variable has a string
type value, the second variable has a numeric value, and the last variable has a
Boolean value, since variables can contain different data types in JavaScript, we can
declare variables without specifying any initial values for him. This is useful for
variables that must contain values, such as user input ]7[.
Output generation in JavaScript
There are certain situations where we may need to generate output from
JavaScript code, you may need to see the value of a variable or write a message to
the browser console to help debug a problem running JavaScript code, etc.
Different Ways to Generate Output
1. Displays output in warning dialog boxes.
We can also use alert dialogs to display a message or data to the user. An alert dialog
is created using the alert () function, as in the following example:

119
 <html>
<head>
<meta charset="utf-8">
<title> JavaScript </title>
</head>
<body>
<script>
alert("Hello World!"); // Hello World!
var x = 10;
var y = 20;
var sum = x + y;
alert(sum);
</script>
</body>
</html>
It is also possible to use the document.write() function to write content to the status
page only while the page is being processed by the browser, as in the following
example:
<html> Hello World!
<head> 30
<meta charset="utf-8">
<title> JavaScript </title>
</head>
<body>
<script>
document.write("Hello World!");
document.write("<br>");
var x = 10;
var y = 20;
var sum = x + y;
document.write(sum); // 30
</script>
</body>
</html>
However, if the document.write () function is used after the page is loaded, it will
overwrite the entire content of that web page. Like the following example:
<html>
<head>
<meta charset="utf-8">
<title>Document.write()</title> This is a heading
</head>
This is a paragraph of
<body>
<h1>This is a heading</h1> text.
<p>This is a paragraph of text.</p> Click Me
<button type="button" onclick="document.write('Hello
World!')">Click Me</button>
</body></html>

120
 It is also worth noting that since it is impossible to change the value of a
constant, it must be initialized, that is, when defining it, you must provide it with an
initial value. However, for understanding, you should consider when in JavaScript
to use variables, and when constants should be considered in more detail.
If the web developer is sure that the given values in the program will not
change, then the values are defined as a constant. If, nevertheless, these nuances are
unknown, then it is definitely recommended to define the value as a constant, and if
you need to change it further, then it is simply possible to change the definition of
the value from const to var / let [8].
JavaScript is a loosely typed and dynamic web programming language. This
means that you do not need to determine the type of the variable in advance. The
type will be determined automatically during program execution, which allows you
to use one variable to store data of various types [9].
Based on this, the author of the book, on the basis of generalization and critical
analysis of scientific sources in the field of web programming, structured the main
data types that are used in JavaScript in modern conditions, which are shown in Fig.
46.

Null

Undefined Symbol

Типы данных в
Boolean JavaScript BigInt

String Object

Number

Fig. 46. Structuring the main data types that are used in JavaScript in modern conditions
Source: Developed by the author based on data [11-13].

Based on the presented structuring of the main data types that are used in
JavaScript in modern conditions, each of them should be considered in more detail:
 String data String is a data type that is used to represent text data (ie a
sequence of characters). Strings are created using single or double quotes
enclosing one or more characters [9-10].

121
 <html>
<head>
<meta charset="utf-8">
<title> String </title>
</head>
<body>
<script> Hi there!
var a = 'Hi there!'; Hi there!
var b = "Hi there!";
document.write(a + "<br>");
document.write(b);
</script>
</body>
</html>
 Number data type that is used to represent positive or negative numbers with
or without a decimal place, or numbers that are written using exponential notation
such as 1.5e-4 (equivalent to 1.5x10-4).
<html>
<head>
<meta charset="utf-8">
<title> Number</title>
</head>
<body>
<script>
var a = 25; 25
var b = 80.5; 80.5
var c = 4.25e+6; 4250000
var d = 4.25e-6; 0.00000425
document.write(a + "<br>");
document.write(b + "<br>");
document.write(c + "<br>");
document.write(d);
</script>
</body>
<html>
 Integer numbers is designed to represent very large integers. The BigInt type
is added in recent JavaScript standards to represent very large integers that are out
of range of the number type. This is not to say that it is not possible to work with
large numbers at all with the number type, but working with them in the case of the
number type will be fraught with problems.
 Boolean data is a type that can only have two values true or false. This data
type is used to store values such as yes true or no false , on (true) or off (false), etc.
As shown in example [11-12].

122
 <html>
<head>
<meta charset="utf-8">
<title> Boolean</title>
</head>
<body>
<script> true
var isReading = true; false
var isSleeping = false;
document.write(isReading + "<br>");
document.write(isSleeping);
</script>
</body>
</html>
 Undefined: An undefined data type can have only one value, the special value
undefined. If a variable is declared but no value is specified, its default value is
undefined.
<html>
<head>
<meta charset="utf-8">
<title> Undefined</title>
</head>
<body>
<script> undefined
var a; Hello World!
var b = "Hello World!"
document.write(a + "<br>");
document.write(b);
</script>
</body>
</html>
 Null data is a special data type that can have only one null value, null means
there is no value, but an empty string ("") or the value 0 is not null , null is just
nothing. A variable can be cleared of its current content by setting it to null [11-12].
<html>
<head>
<meta charset="utf-8">
<title> Null</title>
</head>
<body>
<script>
null
var a = null;
Hello World!
document.write(a + "<br>"); // null
null
var b = "Hello World!"
document.write(b + "<br>"); // Hello World!
b = null;
document.write(b) // null
</script>
</body>
</html>

123
  Symbol: represents a unique value that is often used to refer to the properties
of complex objects. A symbol is a unique and immutable primitive value that can be
used as a key for an object property (see below). In some programming languages,
symbols are called atoms. In the JavaScript runtime, a "symbol" value is created by
calling the Symbol() function, which dynamically creates an anonymous and unique
value. The only reasonable use is to store a symbol and then use the stored value to
create an object property.
 The data is of type object Object is a complex data type that allows you to
store data as collections. The object contains properties defined as a key-value pair.
The property key (property name) is always a string, but the value can be any data
type A such as strings, numbers, booleans, or complex data types such as arrays,
functions, or even other objects. [13].
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>Creating a JavaScript Object:</p>
<p id="demo"></p> JavaScript Objects
<script>
const person = new Object(); Creating a JavaScript Object:
person.firstName = "John";
person.lastName = "Doe"; John is 50 years old.
person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Having considered the structured data types that can be used in JavaScript in
modern conditions, one should pay attention to the functions that can be performed
and implemented in the process of web programming, which are presented in more
detail
 Data is of type Function:
In JavaScript, functions are first-class objects, that is: they are objects and you can
interact with them and pass them around just like any other object, functions are
Function objects. In many cases, JavaScript code is of type Function, which calls an
object that performs code block. Since functions are objects, they can be assigned to
variables, as in the example:

124
 <html>
<head>
<meta charset="utf-8">
<title> Function</title>
</head>
<body>
<script>
var greeting = function(){ function
return "Hello World!"; Hello World!
}
document.write(typeof greeting)
document.write("<br>");
document.write(greeting());
</script>
</body>
</html>
2. Operators : It should be noted that JavaScript has operators - symbols or
keywords that tell the JavaScript engine to perform some action. These characters
or keywords tell the JavaScript engine to perform certain actions, for example, the
plus (+) is an operator. which tells the engine to add two variables or values, while
the characters equal to (==), greater than (>) or less than (<) are arguments that tell
the JavaScript engine to compare two variables, values [13- 14].
However, JavaScript also has arithmetic operators that are used to perform
common arithmetic operations such as addition, subtraction, multiplication, and
others.
On the basis of what was described by the author, the main mathematical
operators often used in practical activities are collected, which are systematized and
standardized based on the generalization and analysis of scientific papers and
research in this area. The basic structure of an arithmetic operator in JavaScript is
shown in Table 21.
Table 21
Structuring Basic Mathematical Operators in JavaScript
Result Example Operator Description
Sum of x and y x+y Addition +
Subtract y from x x-y Subtraction -
Product of x and y x*y Multiplication *
Divide x by y x/y Division /
Remainder of dividing x x%y Modulus %
by y
X=y x=y Assign =
X=x+y x += y Add and assign +=
X=x–y x -= y Subtract and -=
assign
X=x*y x *= y Multiply and *=
assign

125
 X=x/y x += y Divide and /=
assign quotient
X=x%y x %= y Divide and %=
assign modulus
Increments x by one, then advance Pre-increment ++x
returns the value of x increase
Returns the value of x, subsequent Post-increment x++
then increments x by one increase
Subtracts one from the x preliminary Pre-decrement --x
value, then returns the x reduction
value
Returns the value of x, Subsequent Post-decrement x--
then subtracts one from the decline
value of x
True if both x and y are x && y And &&
true
True if either x or y is true x || y Or ||
True if x is false !x Not !
True if x is equal to y x == y Equal ==
True if x is equal to y and x === y Identical ===
the two variables have the
same data type
True if x is not equal to y x != y Not equal !=
True if x is not equal to y x !== y Not identical !==
or if they are two different
data types
True if x is less than y x<y Less than <
True if x is greater than y x>y Greater than >
True if x is less than or x <= y less than or <=
equal to y equal to
True if x is greater than or x >= y Greater than or >=
equal to y equal to
Source: Compiled by the author based on data [15-16].

3. Events:An event in JavaScript is what happens when a user interacts with a

web page, such as when they click a link or button, enter text into an input field or
text area, press a key on the keyboard, move the mouse cursor, submit a form. The
web browser itself fires events, such as loading and unloading events for a
company's web page. When an event occurs, it is possible to use an event handler to
detect it and execute a specific task or group of tasks. By convention, event handler
names always start with the word "on", so the click event handler is called onclick ,
similarly the load event handler is called onload , and the blur event handler is called
onblur. Because there are several ways to define an event handler, the easiest way is
to add it directly to the start tag of an HTML element using special event handler
attributes. For example, to set a click handler for a button element, use the onclick
attribute:

126
 <html>
<head>
<meta charset="utf-8">
<title> Event Handlers </title>
</head>
Press here
<body>
<button type="button" onclick="alert('Hello
World!')"> Press here </button>
</body>
</html>
Classification of events into four main groups
1. Mouse Events Mouse Events A mouse event fires when the user clicks an
element or hovers the mouse over an element. Here are some of the more important
mouse events and their event handlers.
2. The Click (onclick) event occurs when the user clicks on an element on a web
page, usually form elements or links. It is possible to handle the Click event with an
onclick event handler.
The example will show a warning message when clicking on elements:
<html>
<head>
<meta charset="utf-8">
<title>onclick</title>
</head>
<body>
<button type="button" onclick="alert('You Click here Click here
have clicked a button!');"> Press here
</button>
<a href="#" onclick="alert('You have
clicked a link!');"> Press here </a>
</body>
</html>
3. Mouseover (onmouseover) This event is fired when the user hovers over the
element, and the Mouseover event is handled by the nmouseover event handler. This
example will show us a warning message when you hover over the elements:
<html>
<head>
<meta charset="utf-8">
<title>onmouseover</title>
</head>
<body>
<button type="button" onmouseover="alert('You have placed
mouse pointer over a button!')">‫<ضع مؤشر الفأرة هنا‬/button>
<a href="#" onmouseover="alert('You have right-clicked a
link!')">‫<ضع مؤشر الفأرة هنا‬/a>
</body>
</html>

127
 4. The mouseout (onmouseout) event occurs when the user moves the mouse out
of the bounds of the element, we can handle the mouseout event using the
onmouseout event handler. The example will show us a warning message when the
mouse exit event occurs:
<html>
<head>
<meta charset="utf-8">
<title>onmouseover</title>
<style>
div {
min-height : 200px;
}
button {
border : 5px solid red;
font-size : 30px;
padding :30px;
}
a{
border : 5px solid blue;
font-size : 30px;
padding :25px;
}
</style>
</head>
<body>
<div>
<button type="button" onmouseout="alert('You have moved out
of the button!')"> Place your mouse here and move it out </button>
</div>
<div>
<a href="#" onmouseout="alert('You have moved out of the
link!')"> Place your mouse here and move it out </a>
</div>
</body>
</html>
2. Keyboard Events Keyboard Events - This keyboard event is fired when the user
presses or releases a key on the keyboard. Here are some of the most important
keyboard events and their event handlers.
 Keydown (onkeydown) this event occurs when the user presses a key on the
keyboard, but the keydown event can be handled using the onkeydown event
handler:

128
 <html>
<head>
<meta charset="utf-8">
<title>onkeydown</title>
<style>
body {
font-size :26px;
}
</style>
</head>
<body>
<input type="text" onkeydown="alert('You have pressed a
key inside text input!')">
<hr>
<textarea cols="30" onkeydown="alert('You have pressed a
key inside textarea!')"></textarea>
<p><strong> note:</strong> Try entering some text
inside the input box and text area </p>
</body>
</html>
 Keypress (onkeypress) event fires when the user presses a key on the keyboard
that has an associated value (letters, symbols, etc.). a keypress event, but it will emit
keypress and keypress events with the option to handle the keypress event with an
onkeypress event handler that will show us a warning message when a keypress
event occurs:
<html>
<head>
<meta charset="utf-8">
<title> Keypress</title>
<style>
body {
font-size :26px;
}
</style>
</head>
<body>
<input type="text" onkeypress="alert('You have
pressed a key inside text input!')">
<hr>
<textarea cols="30" onkeypress="alert('You have
pressed a key inside textarea!')"></textarea>
<p><strong> note:</strong> Try entering some text
inside the input box and text area </p>
</body>
</html>
4. Form Events. The form event is fired when the form control is focused or closed,
or when the user changes the value of the form control, such as entering text in a text
input element, or selecting any option in a select box, etc. Here are some of the most
important event forms and their treatment.
129
  Focus (onfocus) event occurs when the user focuses on an element on the
web page, and the focus event can be handled using the onfocus event handler in the
following example, the text input background will be yellow when the control has
focus:
<html>
<head>
<meta charset="utf-8">
<title>onfocus</title>
<style>
input , button {
font-size:20px;
}
</style>
</head>
<body> send
<script>
function highlightInput(elm){
elm.style.background = "yellow";
}
</script>
<input type="text"
onfocus="highlightInput(this)">
<button type="button"> send </button>
</html>
 Change (onchange) - This event occurs when the user changes the value of a
form element. We can handle the change event with an onchange event handler that
will show us a warning message when a parameter is changed in the options menu:
<html> Select
<head>
<meta charset="utf-8"> Note: Select any option from the list of options to see how it
<title>onchange</title> works
<style>
p, select {
font-size:20px;
}
</style>
</head>
<body>
<select onchange="alert('You have changed the
selection!');">
<option>Select</option>
<option>Male</option>
<option>Female</option>
</select>
<p><strong> note:</strong> Select any
option from the list of options to see how it works
</p>
</body>
</html>
Source: Compiled by the author based on data [15-17].

130
 5. Strings: A string is a string of letters, numbers, special characters, arithmetic
values, or a set of all. Strings can be created by enclosing the string literal (i.e., string
characters) in either single quotes (') or double quotes (').
Quotation marks are inside the string, as long as they do not match the quotes
surrounding the string. However, we can still use single quotes inside single-quoted
strings or double quotes inside double-quoted strings by escaping the quotes with a
backslash character The backslash character (\), the backslash (\) are called escape
characters, while the \' and \' sequences we used in the example above are called
escape sequences. As follows:
<html>
<head>
<meta charset="utf-8">
<title>‫<تخطي عالمات االقتباس‬/title>
</head>
<body> it's okay
<script> He said "Goodbye"
var str1 = 'it\'s okay'; 'She replied 'Calm down, please
var str2 = "He said \"Goodbye\"";
var str3 = 'She replied \'Calm down, please\'';
document.write(str1 + "<br>");
document.write(str2 + "<br>");
document.write(str3);
</script>
</body>
</html>
 Escape Sequences are sequences that are also useful in situations where you
need to use characters that cannot be typed using the keyboard. Below the author
highlights some of the most used Escape sequences in the table 22.
Table 22
Most Used Escape Sequences in JavaScript
Replaced with newline code. newline. \n
Replaces the tab character. \t
It is replaced by a carriage return, which moves the cursor to the beginning of the line \r
without moving to the next line.
Replaced by the return character backspace \b
Replaced with a single backslash (\) \\
Source: Compiled by the author based on [16-17].
Escape sequences in practice in JavaScript work according to the following
principle:

131
 <html>
<head>
<meta charset="utf-8">
<title>Escape Sequences</title>
</head>
<body>
<script> The quick brown fox
var str1 = "The quick brown fox \n jumps over the jumps over the lazy dog.
lazy dog.";
C:UsersDownloads
document.write("<pre>" + str1 + "</pre>");
var str2 = "C:\Users\Downloads"; C:\Users\Downloads
document.write(str2 + "<br>");
var str3 = "C:\\Users\\Downloads";
document.write(str3);
</script>
</body>
</html>
Summarizing the main findings of the considered features, details, logic,
functions and main web components of JavaScript, it should be noted that
JavaScript, as a web programming language is easy to learn even for a novice web
programmer.
This language is implemented and will be uniquely associated with HTML and
CSS, as they are interconnected. Using JavaScript, it is possible to create scripts that
automate processes that require manual correction, which is very in demand in
modern conditions of business development in various areas.

132
 CHAPTER 8

USES OF THE PHP PROGRAMMING LANGUAGE

PHP language is one of the important languages when creating and developing
websites. It is a database-related programming language as it deals with website user
data. It adds and records the data they enter, such as usernames, passwords and other
data, so the language has full support and connectivity to databases. The PHP
language was created by Danish programmer Rasmus Lerdorf and was originally a
set of Perl scripts. It is a server-processed programming language to create
interactive and advanced websites and is widely used. It is free to use and easy to
learn. It is an open-source language that any developer can contribute to and
improve. It facilitates the processing of text files and is used for graphical
programming, system administration, network programming, and database
programs CGI programming for the Internet [1].
If you are a programmer, website owner, or even a content writer, you need to install
and prepare the local server on your work device, which enables you to program,
and develop websites, as well as write content professionally with free tools. The
server in the device opens hosting that enables you to upload any website or script
to it. Without the need for an internet connection. The local server is a free tool that
enables you to use your private computer as a server that contains hosting and a
database, like any other hosting with the same capabilities, with the difference that
the local server works without an Internet connection and is like any server that has
an IP address and a domain name, as the local server is called the abbreviation "
wamp" because it contains four different programs [2-3].
Each letter of this abbreviation refers to one of these programs:
1. The letter W stands for Windows.
2. The letter A stands for Apache.
3. The letter M stands for MySQL.
4. The letter P stands for PHP.
With the possibility of calling it "LAMP", which is the same as the previous
abbreviation, with the difference that the letter L refers to the Linux operating
system.
The importance of installing the local server Localhost on the device:
1. Learn website programming from the server side.
2. Learn MySQL databases.
3. Learn programming environments, for example, Codeigniter.
4. Try any script that requires hosting.
5. Try some settings on the site before working on the original website.

133
 6. Experimenting or designing WordPress templates and plugins.
7. Writing professional content.
This, of course, is not a complete list of everything you can do after installing and
setting up the local server on the device, as the primary purpose of installing it
depends on the nature of the work.
1. Download the server from the official website free
1. Works only in operating systems Linux - Windows.
2. Go to the server page from here wampserver.com.
3. Click on the DOWNLOAD tab at the top of the website.
4. Choose whether your operating system is 32-bit or 64-bit to start
downloading:

5. After that, a form will appear that you can fill out or click directly on you can
download it directly:

6. If the download process does not start immediately, you need to click "Download
Latest Version" to start the download directly:

2: Install the server and adjust the settings:

Double-click the server software after downloading it to launch the installation
wizard.
134
 Select the appropriate language, then click "OK".

Accept the agreement, then click "I accepte the agreement", then click "NEXT" to
display the program information, just click "NEXT" again:

Select the location where the local server will be installed, and then click NEXT, the
default location for the disk installed in the operating system. It is possible to change
it, preferably so as not to lose important files, sites or previously programmed pages:

Select the versions you want to install of the PHP language, the MYSQL databases,
and the MariDB databases. It is preferable to choose the latest versions of them, or
choose an older version if you are going to try a script that does not support new
versions, then click on NEXT as the image shows:

135
 The WAMP local server installation wizard will tell you that it will begin the
installation process and will create a folder named Wampserver64 in the disk you
chose, as well as in the START menu, leave it as it is or change it to any other name
you support, then click NEXT as the picture shows:The wizard in this step will
explain all the settings that have been selected in the previous steps. You must click
INSTALL to run the wizard that installs the server directly:

In this step, the wizard will explain all the settings that you chose in the previous
steps. You can of course go back by clicking BACK and modify anything, or click
INSTALL and the wizard will begin installing the server directly:

Wait a little while until the wizard finishes the server installation process.
The wizard tells you that it uses Internet Explorer for the local server. Choose
YES if you want to change it or NO to complete the installation process.

136
 After that, the wizard will show some information about the server, all you have
to do is click "NEXT" and then "FINISH". Now the server is on the device and ready
to go [3-4] .
3. How to operate and use the server:
 Click on the server icon on the desktop A from the START menu or by
navigating to the path where it is installed, which was selected in the fifth step of the
installation steps.
 After that, black screens will appear, the server is running in the background.
 After that, you need to enter enter in the browser localhost or 127.0.0.1 to see
the screen showing that the server is running successfully, as shown in the figure:

To run any file on the local server, follow these steps:

 Go to the WWW folder in the setup file.
 Create a new folder with any name, for example test.
 Place the script in a new test file or create a php or html file like index.php
 To open the generated file, you must enter localhost/test/index.php in the browser
In order to create a database on the server itself, you need to do the following:
 Login to the local server as described above by typing localhost or 127.0.0.1 in a browser.
 Click on Phpmyadmin as shown in the last image.
 Enter the username "root" and leave the password blank, then log in.

137
  Select “Create” in the side menu, then write the name of the database and select the
appropriate encoding for Arabic, then click “Create”, as shown in the image:

It is important to state that PHP is a dynamically typed web development and

programming language, which means that by default there is no need to specify the
type of a variable, as it will be determined at runtime. However, it is possible to
statically type certain aspects of the language using type declarations. Types restrict
the type of operations that can be performed on them. However, if the
expression/variable is used in an operation that its type does not support, PHP will
attempt to convert the value to a type that does support the operation [5].
Based on this, the author of the book carried out a detailed analysis and study
of the features of PHP and the main types of data that are used in the development,
which are classified in more detail and presented in Fig. 49.

int float
callable
whole (fractional array
(functions)
numbers) numbers)

null
mixed (any resource
(lack of object
type) (resources)
meaning)

bool
string (lines)
(boolean type)
Fig.
49. Classification of basic types, PHP data, which are used in modern conditions
Source: Compiled by the author based on data [4-5].

It should be noted that in comparison with other programming languages in

PHP, the same variable can be assigned values of different types. Therefore, in PHP,
types should be referred not to a variable, but to a value. The key feature of PHP is
the fact that PHP supports many simple data types, which are shown in Fig. 50,

138
however, they can be structured according to their typification, which is formed by
the author of the book and is shown in Fig. 50.

Scalar types:
Pseudotypes:
- boolean Mixed types: Special types:
-mixed
- integer - array - resource
-number
- float -object - NULL
-сallback
- string

Fig. 50. Typification of types given by PHP in modern conditions

Source: Formed by the author based on data [6-7]

It should be noted that to get the type of a variable, the gettype () function is used,
which returns the name of the variable type, for example, integer (integer), double
(float), string (string), boolean (boolean), null, array (array), object (object), or
unknown type. Based on the presented, it is necessary to consider in more detail the
features of the PHP syntax. The server processes PHP files and the resulting HTML
page is sent to a web browser for display with the ability to place PHP code anywhere
in the document:
Syntax
It starts with the tag
<?php
It ends with the tag
?>
It is important to note that the PHP file extension ends with .php. A php file can
contain both php and html codes. The reason is that any code outside of the php start
and end tags will be ignored by the server and only the code inside the tag will be
processed. Here is a simple example php page that contains html codes and half of
them php codes. PHP processing by the server and html processing by the web
browser:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
</head>
<body> My first PHP page
<h1> My first php page </h1> Hello World!
<?php
echo " Hello World ";
?>
</body>
</html>
It should be emphasized that inside the php code, the echo function is used,
which is one of the simplest php functions, to display the Hello World text in a web
browser, the command ended with a semicolon (;), since another command after the
139
echo function can be dispensed with without the semicolon because the closing tag
will add that comma.
Comments
Comments can also be used, which are lines in a file that are ignored by the
server; their main purpose is to be notes to whoever reads the code. They are useful
for remembering what is needed from this command. When many code commands
and many files are written, it will be difficult to remember everything that is written,
or even when looking for errors. In practice, it is good to implement a lot of
comments and notes on any code that is written, because it makes it easier to work
in the future:
 One line note
single line note //
single line note#
 Note with more than one line
Note with more than one line /*
It contains more information
It will be ignored by the server
*/
<!DOCTYPE html>
<html>
<body>

<?php
// This is a single-line comment

# This is also a single-line comment

/* This is a
multi-line comment */
?>

</body>
</html>
 Enter sensitivity status in PHP
Variables in PHP are sensitive when writing and defining any variable you want to
display. You must ensure that all characters are similar to what was written and
defined exactly, for example for a variable. However, certain functions, classes, and
conditional functions are not write-sensitive.
$one;" " =
Not like this
$ONe;" " =
<?php
ECHO " Hello World <br>";
echo " Hello World <br>";
EcHo" Hello World <br>";

140
 Variables
The same echo function is presented here, but in more than one way of writing,
but they will all work without problems because they are not case sensitive.
However, it is important to remember that variables are fields or a container that
holds and stores information for later use. Store numeric and text values for a
variable, or even perform a mathematical operation that can name variables anything
with abbreviations like X and other letters, or name them with text to indicate stored
content, such as age to contain a value indicating age, or name to contain a value
indicating the name, in line with the desire to make the code easier to read in the
future.
PHP Variable Naming Rules:
 Variable starts with a dollar sign $ followed by the variable name;
 Variable must start with a letter or underscore (_);
 A variable name cannot start with a number. Place an _ in front of the number
to be accepted;
 The name must consist of letters of the alphabet and numbers or a sign )_(
 Variable names are spelling sensitive, e.g. $y is not the same as $Y. Each
variable has its own value [7-8] .
It should be argued that there is no command in PHP to tell the server that this is
a variable, but the variable is created directly by putting its values inside it. Writing
variables in PHP There is no command in PHP to tell the server that this is a variable,
but the variable is created directly if you put values inside it.
<?php
$txt=" Hello world!";
$x=8;
$y=14;
?>
However, when the server processes this code, the txt variable will contain the
number Hello world, the x variable will contain the number 8, and the y variable will
contain the number 14.
Note: when placing a text value for any variable, you must write the text inside
the quote "text" or " text" .
By default, variables are always assigned by value. That is, when an expression
is assigned to a variable, the entire value of the original expression is copied into
that variable.
This means, for example, that once one variable is assigned a value to another,
changing one of them does not affect the other. PHP also offers another way to assign
values to variables: assignment by reference.

141
 This means that the new variable simply refers to (in other words, "becomes an
alias" or "points to") the original variable. Changes in the new variable are reflected
in the original, and vice versa.
To assign by reference, simply add an ampersand (&) to the beginning of the
name of the assigned (source) variable. For example, the following code snippet
prints 'My name is Mir' twice:
<?php
$foo = 'world'; // Sets $foo to 'World'
$bar = &$foo; // Referencing $foo via $bar.
$bar = "My name is $bar"; // Change $bar...
echo $bar;
echo $foo; // also changes $foo.
?>
It is important to note that only named variables can be assigned by reference.
<?php
$foo = 25;
$bar = &$foo; // This is a valid assignment.
$bar = &(24 * 7); // Wrong; reference to an unnamed expression.
function test()
{
return 25;
}
$bar = &test(); // Wrong.
?>
It is important to argue that it is good practice to initialize variables, although
this is not a requirement in PHP. Uninitialized variables have a default value based
on their type, which is determined from the context of their first use: booleans are
false, integers and floats are zero, strings (for example, when used in echo) are the
empty string, and arrays become empty arrays [7].
The strength of PHP lies in the functions it provides to make it easy to work
with any type of data as it provides over 1000 functions. The key types of PHP
functions are shown in Table 22.

142
 Table 22
Basic types of PHP functions
These are the features at the core of the language and are what Built-in Functions
PHP provides for immediate use.
Functions that are created and used in software projects User Defined Functions
Additional library functions, such as the GD Image Library, must be installed and enabled
in order to be able to use them.
Source: Compiled by the author based on data [8-9].

It is important to state that the PHP functions provided are defined and created
for use when writing PHP code. It is a set of codes defined in a specific format to
create a function.
This function can be used in more than one place in software project files. When
defining any new function in a file, its contents will not be executed directly. When
the file is opened in the browser, the contents of the function will be executed
directly when the function is called.
Functions are a block of instructions that can be called multiple times in
different parts of the program.
Functions allow you to divide a program into smaller functional parts. A
function definition begins with the function keyword followed by the name of the
function.
Based on the above, it should be noted that arrow functions are also used in
PHP. It is important to note that arrow functions make it easier to write anonymous
functions that return some value, while arrow functions automatically have access
to variables from the external environment. An arrow function is defined using the
fn operator:
f n(parameters) => actions;
The fn statement is followed by a list of parameters in parentheses. It is
necessary to consider in more detail the main functions of working with variables,
which are structured by the author of the book in the table 23.
Table 23
Structuring key functions of PHP working with variables in modern
conditions
PHP function name Description and characteristics of the PHP function for
working with variables
boolval Returns the boolean value of a variable
debug_zval_dump Outputs a string representation of the internal zval structure
floatval Returns the value of a variable as a floating point number
Returns the type name of a variable in a form suitable for
get_debug_type
debugging
get_defined_vars Returns an array of all defined variables

143
 get_resource_id Returns an integer identifier for the given resource
get_resource_type Returns the resource type
gettype Returns the type of a variable
intval Returns the integer value of a variable
is_array Determines if a variable is an array
is_bool Checks if a variable is boolean
Checks that the value can be called as a function in the current
is_callable
scope
is_countable Check if the content of a variable is a countable value
is_numeric Checks if a variable is a number or a string containing a number
is_scalar Checks if a variable is a scalar value
unserialize Creates a PHP value from a stored representation
serialize Generates a storeable representation of a variable
var_dump Displays information about a variable
Displays or returns an interpreted string representation of a
var_export
variable
Source: Structured by the author based on data [10-11].

Then the => operator is specified, and after it are the actions of the function
that return some result. Example:
$a = 8;
$b = 10;
$closure = fn($c) => $a + $b + $c;
$result = $closure(22);

In the example shown, the arrow function definition is:

$closure = fn($c) => $a + $b + $c;
The yield statement is used to return a value from a function. But unlike return,
the yield statement preserves the state of a function, allowing it to continue where it
left off. To do this, define the simplest generator function:
function generator(){
yield 21;
}
Here, the generator function actually returns only one number, 21. However, it
is possible to iterate over the result of the generator function in a loop as a standard
array:
foreach(generator() as $number)
{
echo $number; // 21
}

144
 A similarly presented generator can return more values:
function generateNumbers()
{
for ($i = 0; $i <= 5; $i++) {

yield $i;
}
}
foreach(generateNumbers() as $number)
{
echo $number;
}
In this case, the generator function generateNumbers () loops to generate values
from 0 to 5 inclusive. Based on the above, it should be noted that PHP development
is carried out quickly, the resulting projects are highly secure, they are easy to
maintain. Writing functions and defining them is very easy and all you have to do is
define the function using the word function and then write the name of the function
and right after that use brackets () followed by square brackets {} and inside square
brackets {} put the code of the commands that must be executed when calling the
function, a simplified example of the formula for writing the Simple function:
function functionName() {
code to be executed;
}
Based on the presented, you should define the first simple function that prints
the text in the browser when visiting the file:
<?php
// define the function
function name() {
echo "Hello ali!";
}
In the example shown, the first function is defined and given a name, and it
prints a message to the web browser when the file is visited via localhost, but the
contents of the function will not be executed until the function is called, which is
very simple. file from a browser using a local server, to complement the previous
example, you need to change the code as follows:
<?php
// define the function
function name() {
echo "Hello ali!";
}
// call the function
name();

145
 For a more detailed study and specification of PHP features, you should consider
the data types that PHP web developers encounter. Since the classification of data
types found in PHP was presented in detail earlier in this chapter of the book, each
of them should be considered:
String
Strings are text strings or even words like "hello" in PHP. Anything written
within double quotes " " or single quotes " " is treated as text.
<?php
$a = "Hi";
var_dump($a);
echo "<br>";
$b = 'Hello ';
var_dump($b);

Integer
Integers are any number without a decimal point, and it can be a negative
number or a positive number, and it contains at least one digit (0 - 9), and it does not
contain decimal points, with the possibility of writing integers in three systems, for
example decimal number system, hexadecimal number system, or octal number
system.
<?php
$a = 123; // positive number
var_dump($a);
echo "<br>";
$b = -123; // negative number
var_dump($b);
echo "<br>";
$c = 0x8C; // hexadecimal
var_dump($c);
echo "<br>";
$d = 047; // octal
var_dump($d);

146
 Float - Decimal number
It is any number that contains a decimal point, such as 10.30, or exponential
numbers, and decimal numbers are sometimes called floating-point numbers, that is,
floating point numbers.
<?php
$a = 1.234; // A number with a decimal point
var_dump($a);
echo "<br>";
$b = 1.2e3; // A number with a decimal point and an exponent
var_dump($b);
echo "<br>";
$c = 7E-10;
var_dump($c);
echo "<br>";

Booleans
One of the simplest data types in PHP, which is either TRUE - true or FALSE -
false in writing, so they can be written in that form as true, true, or TRUE, and they
all have the same result.

<?php
$foo=true;
var_dump($foo);
echo "<br>";
$boo=false;
var_dump($boo);
echo "<br>";
Arrays
An array is multiple values that are stored in a variable. For example, you have
information about a person such as their name, age, and place of residence.
These values can be stored in one variable as an array. We can simplify the
definition, this is a special variable that can store more than one value, and it can be
simplified so that the array is a phrase of the remote keys.
Keys and values, where each key has a value. Let's say you have a list of student
names and you want to store them in variables that will look like this:

147
 $student1 = "Ahmed";
$student2 = "Khaled";
$student3 = "Mohammed";
<?php
$person = array('ali', 20, 'KSA');
var_dump($person);
Based on the presented, attention should be focused on the existing types of
matrices that are used in PHP and structured by the author of the book and are
presented in the table. 24.
Table 24
Structuring Matrix Types Used in PHP
Type Characteristic
When storing values without defining an index for the values, PHP
Indexed arrays
directly assigns zero-based integer values as keys to the stored values
When we define an index for each value we store, the array becomes
Associative arrays
that type.
Multidimensional It is a matrix that contains values and some of those values are also a
arrays matrix i.e. matrices that intertwine with several other matrices
Source: Structured by the author on the basis of [10-12]
1. Indexed arrays
<?php
$person = array('Ali', 'Khaled', 'Mohammed');
// for loop example
for ($i=0; $i < count($person); $i++) {
echo $person[$i] . '<br>';
}
// foreach loop example
foreach ($person as $value) {
echo $value . '<br>';
}

2. Associative arrays
<?php
$students = array("Ali"=>"29", "Khaled"=>"30", "Mohammed"=>"35");
// foreach example
foreach ($students as $key => $value) {
echo $key . " is " . $value . " years old. <br>";
}

148
 3. Multidimensional arrays
<?php
$students = array(
array('Ali', 29, 'KSA'),
array('Khaled', 30, 'KSA'),
array('Mohammed', 35, 'KSA')
);
// for eaxample
for ($row = 0; $row < count($students); $row++) {
echo "<p><b>Row number $row</b></p>";
for ($col = 0; $col < count($students[$row]); $col++) {
echo $students[$row][$col] . "<br>";
}
}
// foreach eaxample
foreach ($students as $student) {
echo "<p><b>Student Information</b></p>";
foreach ($student as $key => $value) {
echo $value . "<br>";
}
}

NULL Value
NULL is a special value which means that a variable has no value and is
considered the only value for any variable with no defined value.
You can also define or clear any variable from its value using the NULL word
and assign it.

149
 Also, when you try working with an undefined variable, PHP assigns the value
NULL with an error indicating that the variable is unknown [12-13].
<?php
// Define a variable and set its value to NULL
$a = NULL;
var_dump($a);
echo "<br>";
// Define a variable and store text inside it
$b = '3alampro.com';
// We dump the variable with NULL
$b = NULL;
var_dump($b);
echo "<br>";
// Attempt to print an undefined variable
var_dump($c);
echo "<br>";

Objects
Objects fall under object programming in a simplified way. This is a separate
data type. We store information, data and how we work with that data. We must
define an object before we start using it. It can be summarized in simple steps. to
create any object
 You must define a class with the class keyword
 In this class, we define properties and methods for storing and manipulating
data.
 We then make a copy of the class and store it in a variable using the new
keyword.
 This variable has become an object that we can work with and access all the
methods and properties stored in it.
<?php
class foo
{
function do_foo()
{
echo "Doing foo.";
}
}
$bar = new foo;
$bar->do_foo();

150
 Resources
These separate variables contain a link to external data sources. These sources
are created by user-defined functions. Here is a list of all these features. List of
original functions [13].
Examples of sources:
1) Working with databases,
2) Working with files when opening, creating, etc.,
3) Working with PDF files. You can also find out the resource type using the
get_resource_type function
<?php
// prints: stream
$fp = fopen("foo", "w");
echo get_resource_type($fp);

In today's environment, approximately 79% of websites use the PHP language,

which helps web developers while creating web projects. Various libraries and PHP
frameworks, based on this, the author has organized the main types of PHP libraries
and frameworks on the web.

CakePHP
Zend
Symfony
Framework

CodeIgniter Major PHP Web Phalcon

Libraries and
Frameworks

Laravel FuelPHP

Yii Slim

Fig. 48. Structuring the main PHP web libraries and frameworks that are used in modern conditions
Source: Developed by the author based on data from [14-15].

Based on the main libraries and frameworks of the PHP language presented by
the author, the most common and popular have been highlighted with the possibility
of changing or supplementing their list depending on the characteristics and features
of the web-programming environment. When discussing the presented
151
characteristics and features of the web libraries and frameworks most commonly
used in modern PHP conditions, since many of them It improves the work of web
developers and web projects themselves.
For a more detailed study and highlighting the main characteristics of the PHP
web library and the frameworks provided, one should take into account each of them,
which are presented in the following table 25
Table 25
Characteristics and features of modern PHP web libraries and frameworks
PHP Web Library/Framework and Their Characteristics and Features
A simple yet high performance general-purpose framework based on a
component structure. It is known for its high performance, but it is primarily
Yii known for its simplicity. It does not allow you to use third-party code, and its
Gii code generator allows you to quickly create basic structures from which you
can build your own solutions.
A framework that is known for requiring a minimal amount of configuration to
bring it into working condition. The size of the framework, including
documentation, does not exceed 2 MB, but despite this compactness, it offers
CodeIgniter
developers many standard modules for creating components that are reliable and
suitable for reuse. This makes CodeIgniter a great choice for those building
dynamic websites.
Includes a built-in testing system and is based on an extensive MVC framework.
Symfony This makes it an ideal choice for large-scale web projects created at the
organization level. It also supports working with various databases.
A built-in subsystem called "Components and Helpers" makes the work of web
developers easier by eliminating the need to do a lot on their own, but to choose
CakePHP from a set of libraries that implement many useful features. Suitable for the
implementation of web projects that implement some rare or non-standard
functionality.
The free open source PHP framework most commonly used by web developers.
Laravel One of the main reasons for this is that Laravel makes it easier, faster, and safer
to develop complex web applications than any other framework.
Allows you to load the necessary components as separate libraries. At the same
Zend time, it is possible, without much difficulty, to integrate into projects and
Framework external libraries. When using it, it is extremely easy to organize the reuse of
code.
High performance in-memory framework covering all levels of web
Phalcon development. In addition to speed, quality, a resource management system and
a universal automated resource loading system are organized.
Allows you to create web projects of different scales. It features a robust and
well-thought-out security system with support for Output Encoding, with
protection against CSRF and XSS attacks. It has a unique command line utility,
FuelPHP
but its useful features are not limited to this. Among them is a very advanced
built-in ORM. Other features include support for RESTful API development, a
good routing system, and built-in vulnerability protection mechanisms.
152
 It is one of the best frameworks for beginners. It is very easy to learn and has
friendly and simple documentation. It is worth a look for those who are
Slim
interested in RESTful-API development. It facilitates tasks such as routing,
cookie encryption, client-side HTTP caching.
Source: Formed by the author on the basis of data [16-17].
In the global practice of web development, it is quite normal for a PHP
professional to use PHP frameworks and web libraries to create a web project. The
IT industry has moved forward so much and the choice of these tools is so large and
diverse that at first glance all frameworks seem to be exactly what you need, yet all
the author and presenter have provided a number of their own nuances and features
for their use [16-17].
When choosing a framework, it is worth noting that they all provide the
infrastructure for a web application that helps speed up the development process, but
at the same time they differ in terms of documentation, community, security,
scalability, database support and ease of use. As a result, each PHP framework has
its strengths and weaknesses. Its own, so when choosing a web framework and
libraries it is necessary to have comprehensive detailed requirements for the web
project in order to evaluate its scope and make an informed decision in choosing
PHP web libraries and frameworks.
When clarifying what is discussed in this chapter, it should be noted that in
modern conditions the analogues of PHP - Angular, React, Node.js and Python,
which were discussed in the previous chapters of the book, come into play. It has
been developed and used in global practice.
However, some web developers swear by switching to Java and C, but many
choose PHP, since about 79% of website development in the world is done using
PHP. Developing skills and studying modern web programming languages ensures
an effective development process. Web and implementation of modern websites.

153
154
 CHAPTER 9

PROMOTION AND SEARCH OPTIMIZATION OF THE WEBSITE

Modern business systems require innovative technologies and tools that

increase efficiency and improve marketing activities, with the ability to link search
engines to these technologies and tools, since the website is considered a marketing
interface for organizations and an effective marketing tool. The number of websites
is increasing, their number has reached millions, and they are similar in their field
of activity. Which require that each site has priority access through search engines,
since it has become difficult to navigate through pages on sites without search
engines. Since the history of search engines begins in the eighties and nineties of the
last century, and the purpose of all search engines is designed to search for data that
is available on the Internet at the user’s own discretion. Before the advent of search
engines, the Internet was a collection of websites that users browsed by directly
entering the website address or using specialized directories and listings as the list
of web servers grew larger and the need for better website searches increased.
Search system
A search engine is a computer program that is designed to search for
documents that are stored on the Internet to help users search for specific content on
the Internet by entering keywords about the content or topic they want into the search
engine, after which the search engine displays a group of web -sites. which contain
the keywords entered by the user and present the search results, usually in the form
of a list of results, commonly referred to as "search engine results pages", and the
results can be images, videos, audio clips, articles, etc..
SEO
SEO is an integral part of digital marketing because people conduct trillions of
searches each year, often for the marketing purpose of getting information about
products and services, and search is often the main source of digital traffic for brands
as well as other marketing channels. Being more visible and ranking higher in search
results than your competitors can have a significant impact on your bottom line.
However, over the past few years, search results have changed to give users more
answers and direct information that is more likely to keep users on the results page
rather than directing them to other websites.
It should be emphasized that the main tasks of search engines are to ensure
optimal performance and efficiency of search and equal access to all resources, full
coverage of network information. These tasks are solved based on statistical
processing of information. Any search engine is unique, all used methods of
indexing and ranking documents are a trade secret, but the basic principles of search
155
engines are similar. Based on this, it is necessary to argue the structure of the search
engine, which should be presented in the following form, which is shown in Fig. 49.
Search
crawler

Indexer Document
database

Ranking Web user

module interface

Fig. 49. Argumentation of the structure of the search engine

Source: Developed by the author based on data [1-2]

Crawler
Sometimes referred to as a spider or spider bot, often shortened to crawl, is an
Internet robot that surfs the World Wide Web, systematically searching for new
content to be added to the Internet, and is commonly used by search engines to index
the web. A search bot scans Online Documents to select new documents for
inclusion in a search engine's index and database, the process of entering information
is called indexing because search engines have a registration mechanism that allows
website owners to manually add their pages to the indexing queue.
Search crawl tasks:
A. It examines web pages against a list of URLs (Uniform Resource Locator)
obtained from a previous crawl of the Internet.
B. Extracts links from pages to other websites.
C. Checks addresses added manually by webmasters (registration in a search
engine).
Indexer
This is where the pages found during the scanning process are stored. The
search engine parses the content of the page and stores all the information in its
index, arranging it the way it will appear on the search results page. A list of
document words is compiled that are potential keywords for queries from Internet
users and for each engine. Finding your own indexing algorithms and index file
formats.
Database
It is a set of organized information or data stored electronically or on a
computer system in such a way as to allow easy access, modification and
management through database management systems. After creating a database and
156
calculating the internal and external characteristics of the pages, determine their
relevance and ranking in further issuance by search engines for specific queries. The
relevancy algorithm is an algorithm with hundreds of pieces of information that can
change daily, and in the process of matching a website to a query, the search engine
assigns each page a score indicating how well it matches the search engine's
relevancy formula.
Ranking Model
This is the step in which the content is retrieved from the search engine index
and displayed to the user on the search results page, ordered according to its
relevance to the query. At the request of users, the web server accesses the index
server and searches for pages containing keywords that match the query.
Web user interface
The database searches for the necessary pages, and sorting (sorting) the process
of selecting pages from the search engine database that match the user's query and
ordering them in descending order of relevance to the query [3-4].
The schematic representation of the search engine operation presented by the
author confirms the complexity of its architecture and structure, and its effective
management is possible due to the unification of all possible algorithms for ranking,
indexing and typing both web pages, sites, and the queries themselves. On the
Internet, many users search for various information and formulate queries based on
their search goals. It is worth noting that if a person wants to buy, watch or listen,
he adds an action to his search query. If he wants to know the answer to a question,
he asks it right in the search bar. Depending on the content of the query or the
purpose of the search, they are classified by type. The types of search queries and
the content of the site pages must be made consistent with each other. For a more
detailed study of the features of the work of search engines, it is worth noting that
when creating a site and pages, it is necessary to adhere to a certain typology and
classification of web pages. There are different types of search engines that can get
you the information you need. Based on the presented scenario of the search engine,
it is necessary to consider a schematic representation of the work of the search
engines of the world, which are shown in Fig.50.

157
 Search Engine Indexer Search engine website
interface
(Uploads information for each
(Display information on the
page to the search engine
website according to indexing
database)
and ranking algorithm)

Ranking
Indexing
algorithm
algorithm
Search engine database
(Information is entered
according to the algorithm for
indexing website pages)

Fig. 50. Schematic reflection of the work of search engines in the world
Source: Developed by the author based on a critical analysis of data [3-5].

To structure and single out a unified approach, a typification of the search

engines of the world has been developed, which, unlike existing approaches, is based
on and depends on which mechanism they use. Structuring the types of search engines
depending on the mechanism of work is shown in fig. 51.

2. Search engines operating

1. Search engines using using the mechanism of
the scanner-crawler directories that are
mechanism controlled by a person

3. Search engines working 4. Search engines working

using a hybrid mechanism with other search engines

Fig. 51. Structuring types of search engines depending on the mechanism of work
Source: Developed by the author based on critical analysis [4-5].

1) Crawl mechanism: All crawler-based search engines use crawlers, bots, or

crawlers to crawl and index new content in the search database. Crawl frequency
varies by search engine, and it can take several days between crawls. Search results
will display new updated content as soon as search engines crawl the website again.
158
 An important factor in the search engine is indexing. The identified words are
called keywords and the page is assigned to the identified keywords. Sometimes,
when the crawler does not understand the meaning of the page, the site may rank
lower in the search results. In this case, you need to optimize the pages for search
robots so that the content is easily understandable. Once the search bots pick up the
right keywords, the page will be assigned to those keywords and rank high in the
search results. The search engine compares the search string in the search query with
indexed pages from the database. Because the search string can be on more than one
page, the search engine performs a relevancy calculation for each page in its index
using the search string. It should be noted that Google, Bing, Yahoo!, Baidu, Yandex
are based on search engines that use crawlers and use the above technology to
display search results. [1-2].
2) Open Directory Mechanism It relies on the use of a human-controlled
directory mechanism. The website owner submits a brief description of the website
to the directory, along with the category in which it should be listed. The submitted
site is then manually reviewed and added to the appropriate category or rejected for
inclusion in the list. The keywords will be matched. Entered in the search field with
website descriptions. This means that changes made to the content of web pages are
not taken into account, since only the description is important. A good website with
good content is likely to get a higher organic rating. From a bad content site. An
example of this on search engines is the Yahoo directory. However, automated
search engines like Google have pushed all human-driven directory-like search
engines off the Internet [3].
3) Hybrid search engine mechanism use both crawler indexing and manual
indexing to include sites in search results. Most crawler-based search engines like
Google mainly use crawlers as the primary engine and human-managed directories
as the secondary mechanism. It is worth noting that when a website is identified as
spam, the website owner must take corrective action and resubmit the website to
search engines. Experts manually review the submitted website before re-entering it
into the search results. Thus, while search robots manage processes, management is
done manually to track and display search results naturally [4].
4) Support search engine mechanism use other search engines operate using
various combinations of existing tools. Search engines have different types of bots
to display images, videos, news, products, and local listings exclusively. Take
Google News as an example, this page can only be used to search for news from
different newspapers. Some search engines, such as Dogpile, collect meta
information about pages from other search engines and directories to display in
search results. This type of search engine is called a metasearch engine. Semantic

159
search engines such as swoogle provide accurate search results in a specific area by
understanding the contextual meaning of search queries. [5].
The structuring of types of search engines developed by the author, depending
on the mechanism of work, made it possible to bring and state the fact that
innovations and automation of the maximum range of business processes are
replacing the old methods and approaches in organizing work. However, it should
be noted that the work of search engines depends not only on its types described
above, but depends on many factors, including such as its type. Due to the lack of a
unified approach to the classification of types of search engines in the scientific
REFERENCE, based on critical analysis and generalization, a classification of
search tools is presented, which is shown in Fig. 52.
• Universal
Global • Specialized
Search • Thematic
Engines

• local
Local search • search by individual resource
engines

Fig. 52. Classification of types of search engines in the modern world

Source: Developed by the author based on a critical analysis of data [4-5].

1. Global search engine: It allows users to search for any type of content such
as text, graphics, audio, and video. Searches are performed across all Internet
resources. The most famous global search engine is Google, and it is relevant for
what it does due to its reliance on smart algorithms that help in displaying more
accurate results that users search for, the global search engines include Yandex in
the CIS countries, and Baidu in China. In addition to other general search engines:
Bing and Yahoo! Mail.ru, Nigma, DuckDuckGo.
2. Specialized search engines: This type of engine is located within a private
organization, library, or research laboratory, and the organization’s database is
included only to facilitate the process of searching for information within that
organization.
3. Objective search engines: Designed to search for information of interest to
specific social groups (religious, professional, etc.) In modern conditions, there are
almost no objective search engines anymore. Global search engines that provide
effective search results in any direction [6] have replaced them.

160
 Based on the foregoing, it is worth noting that the optimization of the site of a
company or organization requires considerable effort and a lot of time to determine
the main goal, objectives and strategy of the site. Before embarking on SEO site
promotion, it is advisable to initially understand how search engines work in order
to get positive results. The selected ones will allow you to build your own strategy
for optimizing the site for the necessary search queries so that you are sure to be on
the first page of search engine results. The main tasks of search engines are:
1) Provide the correct and expected response to the user's request. This will
satisfy the user's need to search for information, which will ensure loyalty to the
search engine and will not give a reason to use another search engine. To ensure this
result, the TOP 10 search queries should be as relevant as possible to the user's query.
2) Ensuring the monetization of website traffic. First of all, it is necessary to
produce a result that will contribute to obtaining financial reward-profit for site
owners, business owners, which is provided by standard marketing elements such
as: positioning, advertising and PR [7].
Therefore, in order for a site to get into the TOP-3 or TOP-10, it is necessary
to study, analyze or know all the main criteria of search engines and try to optimize
it in such a way that it meets them. These criteria can be divided into two main
groups: textual, non-textual.
1) Text criteria of search engines. This criterion is characterized by the fact that
the ranking of the site is based on the assessment of the quality of the text content of
the pages. Work with them is carried out at the stage of creating the semantic core
of the site and filling it with text content. It is assumed that the search engine
produces results on the first page of the search that are most relevant to the user's
query. That is, their content meets the required criteria as much as possible and must
satisfy them. In addition, at the same time, attention is paid to the correct filling of
the title phrase, page description and the presence of a key query in the headings.
2) Non-text criteria of search engines. Work with this criterion occurs after the
publication of the site and its indexing. The principles for determining the rating of
Internet resources according to non-textual criteria are not based on assessing the
quality of their content. They contain a slightly different website ranking factor - an
external link profile score. The system works on the principle of taking into account
the number of links to a web resource, assessing the authority of referring resources,
checking registrations in website directories [8].
Search engine optimization is the optimization of website pages for a marketing
strategy aimed at increasing the target audience and expanding the sector using
innovative methods and tools. It is an important step in enhancing marketing
business and increasing relevant traffic [9].

161
 Based on the above, the author conducted a critical analysis of the existing
research in this field and on the basis of the generalization that allowed the
identification of the main stages shown in Figure 53.

6.External
optimization of the
5. Website internal company website
linking

3. Internal
optimization
4. Content
optimization
1.Seo audit of the
company's
website
2. Formation of the
semantic core of the
company's website
Fig.
53. Key stages of SEO-optimization of a company website in modern conditions
Source: Developed by the author based on data [10-9].

1. SEO audit of the company's website. Before deciding to promote a

company's website keywords, it is important to conduct a comprehensive analysis of
several indicators. In particular, the competitive environment, topics and conduct a
full analysis of the company's website. It should be noted that having received all
the necessary access, the SEO specialist performs an analysis of the visibility of the
website by keywords, conducts an analysis of competitors to understand what
strategy they are following, performs an analysis of market leaders in order to
determine how best to move specifically for the company. in line with its strategic
business objectives.
The specialist also analyzes the structure of competitors' websites in the top
search results, their content content and link profile. Based on this, a specialist can
determine what budget will be needed to promote the company's website in Google,
what should be the rate of growth of backlinks to the site, what will be the cost of
writing content. It is important to note that it is best if the first month of work is
given to the technical optimization of the website with all the necessary global
changes and subsequent refinement.
2. Formation of the semantic core of the company's website. Collecting the
semantic core is an important stage in the optimization process, since it is the correct
selection of key phrases that is the key to how the client will find the company's
162
website. Based on the formed and clustered semantic core of the website, the website
structure, landing pages and blog pages are created, as well as the writing of texts,
the creation of linking, the generation of meta-data. For the successful promotion of
any site, you will need a semantic core - a complete list of all keywords related to
the topic of the resource, divided into groups that are similar in meaning.
Semantics is used not only when creating and optimizing a site, but also when
launching an advertising campaign. The collection of semantics is carried out
manually and using various online services. Keywords (keys) are selected by
analyzing the goods and services provided on the website, as well as the semantic
cores of competitors. The main attention is paid to the statistics of the use of search
queries, taking into account their seasonality. The main task is to create pages on the
website for all queries that best meet the needs of the target audience [10-11].
3. Internal optimization of the company's website. It is important to note that
before starting the internal optimization of an organization's website, the SEO
specialist will conduct a comprehensive review to identify the key issues that need
to be addressed as shown in Figure 54.
Quality of the
Title and internal links Web page title organization's website
content

Website responsiveness Alternative text for web Organization website

page images address

Website loading speed Structured Coding Site meta tag

Fig. 54. Internal search engine optimization elements for the organization's website.
Source: Developed by the author based on data [13-12].

Internal search engine optimization strategy tasks:

1) Formation of the address of pages on the website;
2) Improving the speed of server response and website page loading;
3) Removal of duplicates using permanent redirects, canonical addresses, no index;
4) Creating an XML sitemap;
5) Pagination page optimization;
6) Optimization of server response code and page headers;
7) Micro markup setup.
All presented elements and tasks are mandatory in order to achieve the company's business
goals.

163
 4. Optimizing the content of the company's website. It is worth noting that
content is an important component, without which it will be difficult for a website
to move to the top of the search engine. That is why this part of the work has a lot
of requirements. Conducting a comprehensive audit of a website, an SEO optimizer
checks the uniqueness of the content, its saturation with keywords, quality, and the
availability of all elements on the page [14]. Content helps to convince the visitor of
the expertise of the authors of the text and company employees, to tell professional
details and provide useful information to the user, which can satisfy his interests
with which he entered the search engine. However, it should be noted that SEO-
optimization of content also has its own conceptual features and must be carried out
according to certain rules, namely:
 Content must be unique. From 90 to 100% for different instruments.
 Content must be useful and readable.
 Pages must use key phrases, but do not spam them. It is important to remember that the
content will be read by real people, so it is important to write for them first, rather than for
the search engine..
5. Website internal linking. In the real conditions of the existence of many
companies, often the reason for poor ranking of a website is poorly organized
internal linking of the website that is, filling the page with static weight. It is
important not only to create landing pages, but also to organize internal linking
(internal links of website pages to other pages within the website) so that both
users and the search robot can easily get to other pages. Otherwise, they may not
appear in the search engine index.
6. External optimization of the company's website. Off-page website
optimization is not just about links. It also refers to actions taken outside of a website
to influence its SERP rankings. Issuance, or search results, (Search engine results
page, SERP) is a page that displays search results for queries. The user enters his
query (keywords) in the search bar and submits it for processing [16-15].
When we talk about search engine optimization, we mean making incremental
changes and improvements to a website, and these actions can have a noticeable
impact on the page rankings of those sites in natural search results when combined
with other improvements, which is why you should optimize your site. A site is
designed to meet the needs of users; one of these users is a search engine that helps
other users find your content. It should be noted that website ranking is the sorting
of all existing web resources based on the suitability and usefulness of the resource
for the user. However, the main goal of an SEO specialist is to increase the site's
ranking for relevant queries. The content of a business website should not only be
broken down into inline images but should also be properly organized using essential
elements that will ensure that the website is effectively optimized. Since there is no

164
single list of these elements in scientific reference books, the author has organized a
list of the main elements that ensure the improvement of the site and contribute to
its promotion and classification, which are presented in Table 26.
Table 26
Structuring key content elements that affect website optimization and ranking
Content element Impact on Website Ranking and SEO
Website names should be short, easy to remember, easy to write, and
easy to pronounce. Processing fluency is a concept that we memorize
and have more positive associations with things that we can easily say
and think easily that have the potential to articulate in our mind, so stay
away from website names that include numbers or other non-standard
Titles
characters, use unusual spelling, or longer than 15 characters, etc. As
the search engine increasingly relies on accessibility and usability as a
ranking factor, the easier it is for a human to read a domain (or URL),
the better for search engines, which is reflected in page rankings,
which has a significant impact on ranking levels.
Website speed is one of the most important factors that has a huge
impact on search engine rankings, user satisfaction, and customer
Website speed conversion rates. A slow website speed is highly repulsive to visitors
and is not wasted. Not only potential traffic, but also harm to your SEO
rankings. Thus, it is important to improve website speed.
Thus, it is important to improve website speed. The description of a
page is the first motive to visit a site in parallel with ranking the site on
the first page, and from here it was important to learn how to write this
Page description
description better, which helps to attract more visitors to the site. The
description of the page affects the ranking, if the description is
suitable, the traffic will be high.
To get more traffic to your site through free search results, you need to
prepare your site for search engines, because they display site pages,
including texts, videos, and images, and arrange them in proportion to
Keyword citation
users. The appearance of search results depends on many factors, such
frequency
as the popularity of the site, the degree of trust in the search engines,
the percentage of daily visitors and the number of keyword searches on
the site, and this allows you to increase the ranking of the site.
Volume of content The volume of content must be optimized to at least 2000 words.
Number of
Due to the large number of keywords, the search engine identifies the
keywords in the
page and website as appropriate.
text
Key synonyms in
Allows you to recognize the essence of the publication and increase its
text and
relevance and ranking in the search engine.
headings
Labeled lists and The use of such tools makes the content understandable and more
tables enjoyable to read.
Page convenience The usability of the page characterizes the quality.
Once potential keywords are identified, content marketing begins its
role and its quality is what helps to attract the target audience and
Content affects search engine rankings, for this you need to write attractive and
Authenticity organized content that provides target customers with information,
which they are looking for. Good content takes a lot of effort to
prepare. Therefore, when writing it, it is necessary to focus on what is
165
 suitable for the target audience so as not to waste your time and effort,
since good content is also more likely to be shared on social networks
and attract links, and trust emphasizes the relevance, relevance and
quality of the content created by the web site.
Keywords are sentences and phrases that individuals enter into the
search box in any browser to search for what they want. Choosing
keywords is one of the foundations of search engine optimization
because it relies on them to understand the topic of the content published
on the site, and uses them to link sites with research targeting those
Keywords keywords and before publishing any Content on your site You must first
conduct a search for the most appropriate keywords for that content, the
keywords should express the published content and be popular in search
engines, and if the site is new, it is advisable that it not have great
competition to ensure that the site has the best chance of issuing results
. in the targeted keywords
They are the links that other sites place to your site and it is one of the
most important factors in ranking sites, as Google considers the number
of backlinks to your site as an indicator of their quality, Google analyzes
backlinks through the PageRank algorithm that searches for backlinks
Canonical Links
to your site and classifies them according to their quality and
accordingly ranks your site relative to Other sites, and the Google
algorithm not only counts the number of backlinks, but also takes into
account their importance.
It is known that content is king and that its quality is what helps you
attract the target audience and affects the ranking in the search engines,
for this you have to write attractive and organized content that provides
targeted customers with the information they are looking for and it is
Frequent content
preferable to write the content in a storytelling way because it is the most
updates
attractive to them And make them feel that you are directing your
conversation to them and not to the search engines. Updating the
information will signal to visitors about the relevance and reliability of
the information.
The greater the age of the site, the greater its chance of obtaining a good
ranking on the search engines. This is what an ahrefs analysis study that
The age of the site included more than two million sites found that 78% of the sites that
occupy the first ten ranks in the search results on Google are at least a
year old, and that 60 % of them are more than three years old.
Social signals have a direct and indirect effect on increasing your
ranking in search engines. The direct effect comes from the number of
people who like your business identity on Facebook, the number of
people who share your posts on Facebook, the number of followers on
Social cues
Twitter, and the number of tweets that mention the name of your
business identity. The indirect effect is In increasing the incoming links
to your website, which increases the awareness of the business identity
and the presence of positive feedback from customers.
Multimedia allows to attract more visitors and build brand awareness in
a powerful and unique way, since different segments of your target
The presence of
market may require different marketing tactics, you may find that you
multimedia
have to mix social media with TV and print to reach as many potential
customers as possible and customers.
Content writing is the queen of digital marketing in our current era, and
Content Difficulty
websites cannot be promoted without the presence of explanatory and
166
 marketing content. As it is necessary for each website to have distinct
content that describes the work, mission, vision, and objectives of the
entity to which this site belongs, and that the content is useful,
understandable, and accessible to the visitor to it for perception.
Errors in the text The more errors, the lower the ranking of the website.
You must use links from trusted sites that are closely related to the
content you provide, or links to other articles that support the article, or
a link to an e-book that covers the topic in depth so that the reader can
Links within the
use it, or a link to a video that explains in a simple way. When creating
content
a link, you need to make sure that it opens in a new window, and not in
the same window, so as not to exhaust it by transitions between your site
and other sites.
Improving the site structure is an important thing to consider when
designing it. A well-defined and hierarchical site structure makes it
easier for search engines to read, index, and understand the site faster,
which improves your chances of ranking in search engines.
The way search engines work is:
They discover the particular website over the internet and start crawling
Link structuring the homepage and then follow all the links from there and try to learn
the structure of the site in order to better understand how the pages/posts
link and which pages of the site are more valuable than others. And when
you have an optimized structure you make this task very easy for them
and that means better site ranking and on the other hand, if the site
structure is flat or non-hierarchical then search engines can index the
pages but they don't have enough clues about how the pages are related.
It has a significant impact on the site's ranking to show how much the
High PageRank
site's external and internal links are evaluated.
Avoid using Javascript or Ajax when creating your own navigation as
they overburden the site, and the best way to make navigation between
site sections for search robots is to use plain HTML tags with CSS for
styling as they are lightweight and do not overburden the site. Do not
HTML correctness
use images to create special navigation links, but use text, that is, writing
only, so as not to burden the site, as images occupy space, and put the
section link under the text, and this is available in all blogs called
categories.
A source: Developed by the author on the basis of critical analysis [18-17]
Organizations having their own websites has become a fairly normal and
common practice these days. A web resource is not only a channel for disseminating
information about the organization and its activities, it is also a flexible tool for
establishing partnerships with the target audience, allowing quick response to user
requests and changing market trends.

167
168
 CHAPTER 10

WEB DESIGN AND DEVELOPMENT TRENDS

Website development trends are increasing over time. Not a day goes by without
the discovery of new technologies for creating websites. Developers are always
looking for new ways to innovate; to stay competitive in the market and attract more
customers, they need to anticipate and adapt to these changes. Their functionality
and attractive appearance, and one of the most important tips for the user distinguish
modern websites when choosing a website is its appearance and functions, ensuring
the implementation of all the functions necessary for the user. With the popularity
of websites constantly increasing, every web designer must know how to create a
competitive website so that they can find the information they need and purchase
relevant products and services so that the organization can meet the growing
demands.
The only problem is that this area is constantly evolving, and solutions
implemented just a year or two ago may seem ineffective and outdated today. To
keep the organization's websites competitive, the team needs to develop the site and
brand online, as well as stay on top of all the trends that are emerging in the industry.
Since web design trends are characterized by simplicity and conciseness, they are
based on content rather than appearance, and must be specifically designed keeping
in mind the area and theme. The author presented the main characteristics of modern
online website design, shown in Figure 57.
Practicality.
Ease of adaptation. The principle of such web
Flat website can be easily design is that the designer
adapted to smartphone, tablet completely minimizes the
and PC number of styles, animations
and the website loads faster.

Ease of use.
Beauty. The user can quickly find the
Flat websites look quite information they need on the
attractive, stylish and really, website. In addition, it is
they cling. perceived much easier and more
understandable.

Fig. 56. The main features of modern web design on the Internet
Source: Developed by the author based on data [1-2].

169
 Website design development trends:
1. Single Page Websites: These are sites that use a single page on the web to
display the content of a project or organization, and the content is divided into
sections and does not contain traditional tab menus that are different pages, and
therefore the website visitor can access all the content by scrolling a long page so
that it navigates between information by scrolling instead of clicking and viewing
each page individually. Some web design of a single page website may seem simple,
light, direct, and visually impressive, in addition to being responsive and adaptable
to mobile phones, tablets, and various screen sizes. Since, most companies need to
develop their websites from time to time or start to emerge and have a digital
presence in order to keep up with the latest web design trends and keep customers
satisfied and keep up with the competition.
2. Graphic web design. Graphic web design is constantly evolving and developers
can rely on graphic design to create a unique visual experience for users. In 2023,
the focus will be on adding moving and 3D visuals to the design.
3. Simplicity. Some websites just want simplicity given their target demographics.
If most of your users are the elderly, you can keep it traditional and simple so they
can easily find the products they need. On the other hand, if the company's audience
is generation Z, then more modern web design elements are needed, and there is no
need to worry about learning how to use the website. This generation has excellent
technical skills. [3].
4. Scrolling transitions. Effective web design allows online users to better interact
with website content. One way to increase the number of online interactions is to
pass referrals. Ideally, web designers want website visitors to recognize and interact
with content as they browse various web pages. In other words, going through the
transitions saves online users from having to look for the next section on the website.
Instead, website information is displayed to users continuously as they scroll.
Visually, scrolling transformation can include various elements to attract, retain and
engage online users.
5. Simplicity in color schemes: Colors play an important role in improving the
user experience on websites, as choosing the appropriate color ensures ease of use,
as well as the clarity and ease of reading the information displayed on the screen.
The appropriate contrast between the text color and the background color is one of
the necessities of the user experience. If Users can read the content easily, they will
no doubt leave the website, and bright colors help create an emotionally stimulating
experience. Bright colors activate and encourage action, which is why many call-to-
action buttons are bright red or orange. News sites often use red to draw attention to
breaking or important news. On the other hand, calmer and less vibrant colors help
the user relax while watching.
170
 6. Use a light website background. Over the past few years, dark mode has
become a very popular design trend. However, in 2022, this trend was less and less
common. Light colors will take its place in website design, such as websites with
all-white or other neutral backgrounds. Just as textured backgrounds make e-
commerce websites feel less cold and distant, light mode will make online shopping
easier and more enjoyable. This change is necessary for consumers who have been
forced to look at the screens of their devices much more often than usual for the last
year and a half.
7. Use of website micro-animation. The use of small animations is one of the
most important trends in web design that has been widely used on websites recently.
They are simple animations specially designed to guide the customer through
interaction with the digital product. It is fully integrated with the user experience to
simplify the selling process. An important and useful element when it comes to
directing a customer towards a specific destination while browsing a website. The
goal is often to make a conversion or complete a purchase. Technical experts believe
that small animations have become one of the latest web design trends for marketing
websites, since they help... Existing and future customers can see their actions and
activities before deciding to complete an online purchase [6].
8. Sophisticated website filters. As the popularity of the online mode grows in all
areas of the world economy, the number of services and goods offered on the Internet
is growing, and it often includes a large number of similar goods and services. The
website should be such that buyers can easily find the options they need. Filters are
very actively used in modern websites in the process of making purchases, orders
and consultations online. Soon filters will resemble contact forms, in which each
field is designed specifically for the fastest possible entry of certain data. [7].
9. Interactive website search. The search widget can also be added to the sidebar
of an e-commerce website. Often times when you are designing a big and complex
functional website, that is not enough. Handy enough is the use of the magnifying
glass icon in the top right corner of the website—exactly where buyers expect it to
be. Clicking opens a large search field to make it easy for customers to enter text.
However, if the website is complex architecturally and functionally, then there are
many other options and ways to place search parameters.
10. Application features in the mobile version of the website. While the number
of customers shopping on smartphones has long outnumbered those who use a
computer, the transition has been slow. As the online leaning audience is constantly
growing, we will see that many people will start using mobile devices for online
shopping. To encourage smartphone owners to do this, companies are developing e-
commerce websites with functionality similar to mobile applications. Since users
spend most of their time in applications, such an interface and functions will allow
171
them to feel more comfortable on the site. The easiest way to do this is to add
elements like a header, bottom navigation bar, floating buttons, etc. [8].
11. Fast loading website: With the update of the Google Core Web algorithm in
Vitals in 2021, the speed of loading mobile pages has become the most important
factor in ranking a website in search results pages, as ultra-fast loading time is one
of the most important web design criteria. Therefore, the benefit of improving your
site’s speed includes: Two things: It contributes to improving the likelihood of the
site ranking on search engines, and it also improves the user experience and often
increases the conversion rate, as there are many tools available to accomplish this
task, such as fast hosting, caching components, and so on.
12. Web programming PWА (Progressive Web Applications), It is a type of
application software developed using popular web technologies such as HTML and
JavaScript. Progressive web applications may run on any device with a regular
browser, which has gained this technology great popularity thanks to its ability to
provide a high-quality user experience, and it is widely used for several other
reasons, including its ability to replace the development of native mobile
applications, as it provides a fast experience. The user is offline or connected to an
unreliable network, and many web design companies globally have started offering
progressive web application solutions to their clients, and besides the amazing user
experience it has other features such as real-time notifications and offline access to
cached content [10].
Progressive Web Application - is a term that describes web applications that
provide both the benefits of applications that can be installed on various operating
systems, and applications that run through Internet browsers, such as google chrome-
mozilla-firefox and others, which means that it is an application that runs through a
web browser and can be installed on the system. Operation to work regardless of the
browser, apparently as if it were a normal application installed on the system.
Because web applications are easily discovered and experimented by individuals
because they run through a browser without the need for installation, in addition to
being able to publish them via their link. PWA is a hybrid solution and allows you
to open the application using a mobile web browser. At the same time, the
functionality of the native application is fully preserved:
1. sending push notifications (except for devices running iOS);
2. work offline;
3. access to the device hardware (with restrictions);
4. Installation of a shortcut (icon) on the desktop of a mobile device that does not visually
differ from the shortcut of a native application, etc.

172
 Based on this, the author of the book carried out a detailed analysis and formed
the key advantages of progressive PWA web applications in modern conditions,
which are shown in Fig. 57.

Reducing the cost

Increase Increasing the
of the web Reduction of web
Ability to work download speed conversion rate
development development and
fully offline and save gadget and audience
process, support release time
memory engagement
and updates

Fig. 57. Key Benefits of PWA Progressive Web Apps in Modern Conditions
Source: Developed by the author based on data [10-11].

It should be noted that modern trends do not end with progressive PWA web
applications; there is also a direction of WebAR technologies that is intensively
developing. Augmented reality technologies are already actively used in mobile web
development, especially in educational, medical IT products and game development
[13].
Today, AR technologies can be used directly on websites in a browser, which
is why this direction has become known as WebAR. This innovation improves
interaction with customers and has other important advantages, especially for
commercial IT products:
1. Users can try on the product before buying
2. User experience improves
3. Online shopping becomes more tangible
4. Reduced customer service time
WebAR minimizes the gap between the online environment and the real world,
improves the quality of customer service. Intensively developing and rapidly
becoming popular is the trend of using smart assistants and artificial intelligence.
All kinds of assistants and bots based on artificial intelligence are considered one of
the most influential trends of 2023.
The ability of artificial intelligence to learn, quickly collect and analyze data,
and solve more and more complex problems is steadily growing, so bots and
assistants based on it are becoming more and more in demand by both web
development customers and end users. Voice bots are considered the most promising
area of artificial intelligence for web development. They engage people better and

173
communicate with them more effectively, positively influencing behavioral factors
and website and app conversions. In online chats, artificial assistants speed up the
resolution of customer issues and keep in touch with them.
13. Voice search: It is important to state that voice search optimization can simply
be defined as the process of optimizing web pages for display in voice search.
Devices using voice recognition are rapidly gaining popularity thanks to voice
assistants and the Internet. Technology has evolved so exponentially that by next
year, these devices will be able to recognize the voices of different people and
provide a personalized experience based on artificial intelligence. In the field of web
development, the latest innovations are standalone voice-activated devices that
optimize sound for apps and websites.
With more AI-enabled devices, voice recognition saves time and helps you
multitask. It is estimated that 8 billion digital voice assistants will be in use by the
end of 2023. Exponential growth will impact how voice search optimization
becomes inevitable on the list of the latest web development technologies.
Conceptually speech interpretation as one of the rapidly developing technologies in
web development. The voice assistant market is projected to grow to 11.2 billion by
2026, and 53% of users are already using voice search to search for queries on search
engines, buy products, etc. [12-14].
14. Voice optimization: Voice optimization is also important for websites, and
large companies want to seize the opportunity, because it will determine the future
of the Internet. As a result, digital products are being augmented with voice search
capabilities. This helps to get a number of advantages for users and businesspersons.
The main advantages of these technologies include:
1) the ability to order more goods in a shorter period.
2) a good tool for analyzing customer behavior.
15. Machine learning: An innovative approach should also be to extract
personalized content using machine learning. Machine learning content
personalization, also known as predictive content personalization, is an advanced
AI-based approach to displaying content that works best for each user. Machine
learning (ML) techniques are used in the development of websites to provide users
with an enhanced experience. Developers rely on machine learning to enable
software to analyze incoming data, spot patterns, and personalize content.
Many companies are also using this technology to improve user experience.
Machine learning helps personalize content without focusing on the entire user
segment. Where you can identify each specific user and view content according to
their interests. The algorithms also provide personalized content based on user
interests. Content personalization using machine learning is a great trend that allows
you to modify content by analyzing visitor behavior.
174
 Benefits of machine learning content personalization in website development:
• Analysis of site navigation paths, browsing periods, etc.
• Get more information about A/B testing results.
• Simplified web page optimization.
Machine learning is an important part of web services, but business owners
need to add the technology to their services in the right way. To do this, you will
need to adjust the content itself and make an in-depth analysis of customer behavior.
Users themselves will not be able to know that the owners of the website or program
are using algorithms, but their satisfaction will be noticeable, affecting engagement,
conversion [17].
16. Data security: With the development of the Internet, web applications and
websites, there are more cybercriminals. Any web application that processes large
amounts of information is attractive to scammers. They want to steal customer data,
company data, or simply ruin services, which incurs large losses, damage to
reputation, and other negative factors. The next trend in the development and
development of websites was the security of the service, which has become a priority
for any modern company. To ensure security, the developed web services and
websites must adhere to the security principles:
 Do not refuse to test the security of a web resource. It can be performed during
the development of a web project. It allows you to exclude information leakage and
it is important to test any changes in the application.
 Use resources to monitor websites. With the help of algorithms, you can
monitor all requests and find, recognize suspicious activities, notifying the owner.
Timely response will help to quickly respond and protect the program.
 Pay attention to the choice of third-party services. Web developers should
make sure that the provider of such services can be trusted.
 Encryption of confidential information. If a cybercriminal can get their hands
on the database, they will not be able to benefit from such data when encrypted [15].
16. Blockchain technologies: Blockchain technology, which is an encrypted
database storage system, is gaining momentum. Unlike traditional systems, it stores
information in blocks that are linked to each other in a chain. One of the many
benefits of this technology is that it makes transactions more secure and error-free.
This technology also supports the digital currency bitcoin. The use of this
cryptocurrency has skyrocketed over the past decade due to the decision of major
payment systems to accept bitcoin for their transactions.
In 2019, over 34 million blockchain wallets were used worldwide. This allows
participants to make transactions online without the intervention of third parties.
This technology is characterized by its ability to revolutionize various areas of
business by reducing the risks of cybercrime. In addition, it allows web developers
175
to use open-source systems in their projects, which further simplifies the
development process. Benefits of blockchain technology in website development:
 Blockchain technology works on consensus algorithms, which makes
hacking almost impossible.
 Data is stored online, making it available to users.
 The blockchain system is decentralized and therefore less prone to errors.
 Data can be transferred over the network without the need for
intermediaries.
17. Cybersecurity: In recent years, cybersecurity has become a top priority in
web development. Security has become one of the top concerns of Internet users as
cyber attacks such as information loss, identity theft; hacking, spying and other
malware can discredit a website. Websites that provide security guarantees to their
users will grow faster in 2020 and beyond, so security must be present at all stages
of website development. Especially on websites that request or store personal data
of their visitors or that are associated with financial transactions such as online the
shops, we cannot predict the future as these expectations are only guesses based on
current data and we do not know what the future holds. One thing we are sure of is
that web development trends in 2020 will continue to change, new technologies will
emerge, and others will emerge. If you are a developer or website owner, it is
important to keep an eye on these trends as they carry many possibilities.
It should be argued that, in addition to the recommendations and principles
described above, formed by the author of the book, there are two more important
elements that can ensure the security of information and applications; this is the
strengthening of the security of applying the presented trends in web development
and the introduction of blockchain technologies to ensure cybersecurity.
The development of the presented trends in the field of web technologies is
inextricably linked with the use of modern and innovative web programming
languages. Which are discussed in this book and can serve as a reference book for
the development, creation, design of web design of modern websites and their further
implementation based on the use of reviewed web programming languages.

176
 REFERENCE

REFERENCES TO THE CHAPTER 1

1. Ertsen, M. W. (2007). The development of irrigation design schools or how history structures
human action. Irrigation and Drainage: The journal of the International Commission on Irrigation
and Drainage, 56(1), 1-19.
2. Kim, N. (2006). A history of design theory in art education. Journal of Aesthetic
Education, 40(2), 12-28.
3. Baker, L. (2012). A History of School Design and Its Indoor Environmental Standards, 1900
to Today. National Clearinghouse for Educational Facilities.
4. Findeli, A. (1995). Design history and design studies: Methodological, epistemological and
pedagogical inquiry. Design Issues, 11(1), 43-65.
5. Wilson, N., Keni, K., & Tan, P. H. P. (2019). The effect of website design quality and service
quality on repurchase intention in the e-commerce industry: A cross-continental analysis. Gadjah
Mada International Journal of Business, 21(2), 187-222.
6. Benyon, D. (2019). Designing user experience. Pearson UK.
7. Haydary, J. (2019). Chemical process design and simulation: Aspen Plus and Aspen Hysys
applications. John Wiley & Sons.
8. Theodosiou, M., Katsikea, E., Samiee, S., & Makri, K. (2019). A comparison of formative
versus reflective approaches for the measurement of electronic service quality. Journal of
interactive marketing, 47, 53-67.
9. Pordelan, N., & Hosseinian, S. (2022). Design and development of the online career
counselling: a tool for better career decision-making. Behaviour & Information Technology, 41(1),
118-138.
10. Zafarov, O. Z., & Irisqulova, K. N. Q. (2022). Modern technologies of road
construction. Science and Education, 3(2), 312-319.
11. Bernstein, M. T., Reynolds, K. A., Jakobson, L. S., Petty, S. K., Pryor, T. A., Stoesz, B. M.,
... & Furer, P. (2022). Do anxiety websites have the answers people are looking for?. Patient
Education and Counseling, 105(4), 933-941.
12. Vlachogianni, P., & Tselios, N. (2022). Perceived usability evaluation of educational
technology using the System Usability Scale (SUS): A systematic review. Journal of Research on
Technology in Education, 54(3), 392-409.
13. Parlakkiliç, A. (2022). Evaluating the effects of responsive design on the usability of
academic websites in the pandemic. Education and Information Technologies, 27(1), 1307-1322.
14. Lai, S. T., Susanto, H., & Leu, F. Y. (2022). Project Management Mechanism Based on
Burndown Chart to Reduce the Risk of Software Project Failure. In Advances on Broad-Band
Wireless Computing, Communication and Applications: Proceedings of the 16th International
Conference on Broad-Band Wireless Computing, Communication and Applications (BWCCA-
2021) (pp. 197-205). Springer International Publishing.
15. Csontos, B., & Heckl, I. (2022). Improving accessibility of CMS-based websites using
automated methods. Universal Access in the Information Society, 21(2), 491-505.
16. Safira, M. P., & Effendi, E. (2022). Validity of Interactive Instructional Media Based on
CMS-WordPress Website on Hydrocarbon Topic For Senior High School Learning. Entalpi
Pendidikan Kimia, 3(1), 40-48.
17. Al Said, N., & Al-Said, K. M. (2022). The effect of visual and informational complexity of
news website designs on comprehension and memorization among undergraduate students. AI &
SOCIETY, 37(1), 401-409.

177
 REFERENCES TO THE CHAPTER 2
1. Raudvere, U., Kolberg, L., Kuzmin, I., Arak, T., Adler, P., Peterson, H., & Vilo, J. (2019).
g: Profiler: a web server for functional enrichment analysis and conversions of gene lists (2019
update). Nucleic acids research, 47(W1), W191-W198.
2. Beaird, J., Walker, A., & George, J. (2020). The principles of beautiful web design.
Sitepoint.
3. Hoffswell, J., Li, W., & Liu, Z. (2020, April). Techniques for flexible responsive
visualization design. In Proceedings of the 2020 CHI Conference on Human Factors in Computing
Systems (pp. 1-13).
4. Kompen, R. T., Edirisingha, P., Canaleta, X., Alsina, M., & Monguet, J. M. (2019).
Personal learning Environments based on Web 2.0 services in higher education. Telematics and
informatics, 38, 194-206.
5. Xing, Y., Shell, J., Fahy, C., Wen, C., Da, Z., & Kwan, H. Y. (2022, March). Web XR
user interface study in designing 3D layout framework in static websites. In 2022 IEEE Conference
on Virtual Reality and 3D User Interfaces Abstracts and Workshops (VRW) (pp. 243-246). IEEE.
6. De Haan, C. (2022). Website Prototype Design Animation Study Program Based
Content Management System Wordpress. Jurnal Mantik, 6(2), 1971-1979.
7. Luís, A. F., Martins, G., Caldeira, J. M., & Soares, V. N. (2022). Prototype
implementation of a smart locker. International Journal of Engineering and Advanced Technology,
12(2), 34-43.
8. Xing, Y., Shell, J., Fahy, C., Xie, T., Kwan, H. Y., & Xie, W. (2022). Web XR User
Interface Research: Design 3D Layout Framework in Static Websites. Applied Sciences, 12(11),
5600.
9. Nham, T. (2022). Developing an E-commerce application prototype with ReactJS
and Firebase.
10. Solutions, W. P. (2023). Professional ERP and UI Website Designing &
Development Company.
11. Androsiuk, I., Zhylinska, O., & Balan, V. (2021). Stochastic model of project
implementation of the new generation ecological materials–sulfur polymers in key branches of the
economy. In E3S Web of Conferences (Vol. 255, p. 01004). EDP Sciences.
12. Satapathy, A., Sahoo, S. S., Raj, H., Gupta, Y., & Maity, S. (2021). Website on Smart
Project Management System by Application of Scrum Technology. In Intelligent and Cloud
Computing (pp. 675-683). Springer, Singapore.
13. Rodrigues, E., Krikler, B., Burr, C., Smirnov, D., Dembinski, H., Schreiner, H., ... &
Das, P. (2020). The Scikit HEP Project overview and prospects. In EPJ Web of Conferences (Vol.
245, p. 06028). EDP Sciences.
14. Swathi, B., Kumar, A., Kumar, I., & Venkat, V. (2020). Implementation of Improved
Billing System. International Journal of Scientific Research in Computer Science, Engineering and
Information Technology© 2020 IJSRCSEIT, 6(3), 2456-3307.
15. Rohmadi, A., & Yasin, V. (2020). Desain dan penerapan website tata kelola
percetakan pada CV Apicdesign Kreasindo Jakarta dengan metode prototyping. Journal of
Information System, Informatics and Computing, 4(1), 70-85.
16. Robinson, A. (2019). Sketch2code: Generating a website from a paper mockup.
arXiv preprint arXiv:1905.13750.
17. Hidayat, R. (2022). Pembangunan Sistem Informasi Kepegawaian Rumah Sakit Bakti
Timah Karimun Berbasis Website Menggunakan Metode Prototyping. Jurnal Aksara Komputer
Terapan, 11.
REFERENCES TO THE CHAPTER 3

178
 1. Vu, K. P. L., Proctor, R. W., & Hung, Y. H. (2021). Website design and evaluation.
Handbook of human factors and ergonomics, 1016-1036.
2. Cohen, D., Naim, O., Toch, E., & Ben-Gal, I. (2021). Website categorization via design
attribute learning. computers & security, 107, 102312.
3. Xilogianni, C., Doukas, F. R., Drivas, I. C., & Kouis, D. (2022). Speed Matters: What to
Prioritize in Optimization for Faster Websites. Analytics, 1(2), 175-192.Chauhan, S., Akhtar, A., &
Gupta, A. (2022). Customer experience in digital banking: A review and future research directions.
International Journal of Quality and Service Sciences.
4. Longstreet, P., Brooks, S., Featherman, M., & Loiacono, E. (2022). Evaluating website
quality: which decision criteria do consumers use to evaluate website quality?. Information
Technology & People, 35(4), 1271-1297.
5. Reddy, H. B. S., Reddy, R. R. S., Jonnalagadda, R., Singh, P., & Gogineni, A. (2022).
Usability Evaluation of an Unpopular Restaurant Recommender Web Application Zomato. Asian
Journal of Research in Computer Science, 13(4), 12-33.
6. Kuo, L., Chang, T., & Lai, C. C. (2022). Multimedia webpage visual design and color
emotion test. Multimedia Tools and Applications, 81(2), 2621-2636.
7. Al Said, N., & Al-Said, K. M. (2022). The effect of visual and informational complexity of
news website designs on comprehension and memorization among undergraduate students. AI &
society, 1-9.
8. Fabisiak, L., & Jagielska, B. (2022). Designing “Landing Page” for Websites Based on the
User Experience: Review, Analysis, and Interpretation. Updates on Software Usability.
9. Herrada-Lores, S., Iniesta-Bonillo, M. Á., & Estrella-Ramón, A. (2022). Weaknesses and
strengths of online marketing websites. Spanish Journal of Marketing-ESIC, (ahead-of-print).
10. Yakunin, A. V., & Bodrunova, S. S. (2022). Cumulative Impact of Testing Factors in
Usability Tests for Human-Centered Web Design. Future Internet, 14(12), 359.
11. Oppenlaender, J., Tiropanis, T., & Hosio, S. (2020). CrowdUI: Supporting Web Design with
the Crowd. Proceedings of the ACM on Human-Computer Interaction, 4(EICS), 1-28.
12. Dianat, I., Adeli, P., Jafarabadi, M. A., & Karimi, M. A. (2019). User-centred web design,
usability and user satisfaction: The case of online banking websites in Iran. Applied ergonomics,
81, 102892.
13. Benaida, M. (2022). Significance of culture toward the usability of web design and its
relationship with satisfaction. Universal Access in the Information Society, 21(3), 625-638.
14. Casas, C. A., Garzón, L., Ruiz, P. H., Muñoz, L. F., & Agredo-Delgado, V. (2023, January).
Building a Usability Guide for the Design of Interactive Mobile Applications. In Human-Computer
Interaction: 8th Iberoamerican Workshop, HCI-COLLAB 2022, Havana, Cuba, October 13–15,
2022, Revised Selected Papers (pp. 51-67). Cham: Springer International Publishing.
15. Ara, J., Sik-Lanyi, C., & Kelemen, A. (2023). Accessibility engineering in web evaluation
process: a systematic REFERENCE review. Universal Access in the Information Society, 1-34.

REFERENCES TO THE CHAPTER 4

1. Ongsakul, V., Ali, F., Wu, C., Duan, Y., Cobanoglu, C., & Ryu, K. (2021). Hotel website
quality, performance, telepresence and behavioral intentions. Tourism Review, 76(3), 681-700.
2. Jankowski, J., Hamari, J., & Wątróbski, J. (2019). A gradual approach for maximising
user conversion without compromising experience with high visual intensity website
elements. Internet Research, 29(1), 194-217.
3. Flavian, C., Gurrea, R., & Orus, C. (2009). Web design: a key factor for the website
success. Journal of Systems and Information Technology, 11(2), 168-184.
4. Fan, R. Y., Xie, J. Y., Yu, N., Chai, Y. M., & Dong, B. (2022). Interface design and
composition regulation of cobalt-based electrocatalysts for oxygen evolution reaction. International
Journal of Hydrogen Energy.

179
 5. Lilleaas, A. (2023). Building Traditional Web Apps with HTML and CSS. In Pro Kotlin
Web Apps from Scratch: Building Production-Ready Web Apps Without a Framework (pp. 161-
195). Berkeley, CA: Apress.
6. Wilson, D., Hassan, S. U., Aljohani, N. R., Visvizi, A., & Nawaz, R. (2022).
Demonstrating and negotiating the adoption of web design technologies: Cascading Style Sheets
and the CSS Zen Garden. Internet Histories, 1-20.
7. Pan, L., & Ma, J. S. (2022, November). HTML+ CSS Implementation based on Image
Intelligent Scene Recognition Algorithm. In 2022 International Conference on Augmented
Intelligence and Sustainable Systems (ICAISS) (pp. 532-536). IEEE.
8. Indah, P. S., Azzahrah, A., Isnaini, F. Q., Nurkumala, L., & Thamita, A. (2022).
Perancangan sistem absensi pegawai kantoran secara online pada website berbasis HTML dan
CSS. Blend sains jurnal teknik, 1(1), 8-15.
9. Wilcox, R. G., & Munir, F. (2022, April). Knowledge Maps for Building Conceptual and
Transferable CSS Knowledge. In CHI Conference on Human Factors in Computing Systems
Extended Abstracts (pp. 1-4).
10. Rahaman, A., Gayatri, V., Kiran, C. S., Pavan, K. S., Bhumika, B., & Sateesh, V.
Development of Web Applications by Integrating Frontend and Backend Tools.
11. Althomali, I., Kapfhammer, G. M., & McMinn, P. (2022, April). Automated Repair of
Responsive Web Page Layouts. In 2022 IEEE Conference on Software Testing, Verification and
Validation (ICSTNeupane, K. R. (2022). Serverless full-stack web application development
guidelines with AWS Amplify framework.) (pp. 140-150). IEEE.
12. Lesmana, F., & Ambat, Y. T. (2022). Study of DI’s Way Daily Layout in Hermeneutics
Viewed from its Layout Elements. Jurnal Spektrum Komunikasi, 10(1), 104-109.
13. Kuo, L., Chang, T., & Lai, C. C. (2022). Affective psychology and color display of
interactive website design. Displays, 71, 102134.
14. Barua, S. S., Zulkarnain, I. M., Roy, A., Alam, M., Rabiul, G., & Uddin, M. Z. (2022).
Sketch2FullStack: Generating Skeleton Code of Full Stack Website and Application from Sketch
using Deep Learning and Computer Vision. arXiv preprint arXiv:2211.14607.
15. Wei, L., Zhao, L., Yuan, G., Yang, Q., Liu, Z., Zhu, R., & Wen, X. (2022). Design of
ITER neutron flux monitor system back-end electronics. Fusion Engineering and Design, 180,
113167.
16. Yılmaz, T., Anil, Ö., & Erdem, R. T. (2022, January). Experimental and numerical
investigation of impact behavior of RC slab with different opening size and layout.
In Structures (Vol. 35, pp. 818-832). Elsevier.
17. Qian, C., Tan, R. K., & Ye, W. (2022). An adaptive artificial neural network-based
generative design method for layout designs. International Journal of Heat and Mass Transfer, 184,
122313.

REFERENCES TO THE CHAPTER 5

1. Gomes, L. M., Martins, F., & Guerra, H. (2020). Teaching web programming using the
MEAN stack. In The Impact of the 4th Industrial Revolution on Engineering Education:
Proceedings of the 22nd International Conference on Interactive Collaborative Learning
(ICL2019)–Volume 2 22 (pp. 256-262). Springer International Publishing.
2. Pritchard, B. P., Altarawy, D., Didier, B., Gibson, T. D., & Windus, T. L. (2019). New basis
set exchange: An open, up-to-date resource for the molecular sciences community. Journal of
chemical information and modeling, 59(11), 4814-4820.
3. Gyani, J., Ahmed, A., & Haq, M. A. (2022). MCDM and various prioritization methods in
AHP for CSS: A comprehensive review. IEEE Access.
4. Kaushal, U., Singh, G., & Parashar, T. (2022, October). Responsive Webpage Using HTML
CSS. In 2022 International Conference on Cyber Resilience (ICCR) (pp. 01-04). IEEE.

180
 5. Lilleaas, A. (2023). Building Traditional Web Apps with HTML and CSS. In Pro Kotlin
Web Apps from Scratch: Building Production-Ready Web Apps Without a Framework (pp. 161-
195). Berkeley, CA: Apress.
6. Rifandi, F., Adriansyah, T. V., & Kurniawati, R. (2022). Website Gallery Development
Using Tailwind CSS Framework. Jurnal E-Komtek, 6(2), 205-214.
7. Farrell, J. (2022). Java programming. Cengage Learning.
8. Aung, S. T., Funabiki, N., Syaifudin, Y. W., Kyaw, H. H. S., Aung, S. L., Dim, N. K., &
Kao, W. C. (2021). A proposal of grammar-concept understanding problem in Java programming
learning assistant system. J. Adv. Inform. Tech.(JAIT), 12(4).
9. Theisen, K. J. (2019). Programming languages in chemistry: a review of
HTML5/JavaScript. Journal of Cheminformatics, 11(1), 11.
10. Ye, G., Tang, Z., Tan, S. H., Huang, S., Fang, D., Sun, X., ... & Wang, Z. (2021, June).
Automated conformance testing for JavaScript engines via deep compiler fuzzing. In Proceedings
of the 42nd ACM SIGPLAN international conference on programming language design and
implementation (pp. 435-450).
11. Lee, G., Gommers, R., Waselewski, F., Wohlfahrt, K., & O'Leary, A. (2019). PyWavelets:
A Python package for wavelet analysis. Journal of Open Source Software, 4(36), 1237.
12. Monteiro, F. R., Gadelha, M. R., & Cordeiro, L. C. (2022). Model checking C++
programs. Software Testing, Verification and Reliability, 32(1), e1793.
13. Khan, W., Kumar, T., Cheng, Z., Raj, K., Roy, A. M., & Luo, B. (2022). SQL and NoSQL
Databases Software architectures performance analysis and assessments--A Systematic Literature
review. arXiv preprint arXiv:2209.06977.
14. Ilić, M., Kopanja, L., Zlatković, D., Trajković, M., & Ćurguz, D. (2021, June). Microsoft sql
server and oracle: Comparative performance analysis. In The 7th International conference
Knowledge management and informatics (pp. 33-40).
15. Giorgi, F. M., Ceraolo, C., & Mercatelli, D. (2022). The R language: an engine for
bioinformatics and data science. Life, 12(5), 648.
16. Xu, F. F., Alon, U., Neubig, G., & Hellendoorn, V. J. (2022, June). A systematic evaluation
of large language models of code. In Proceedings of the 6th ACM SIGPLAN International
Symposium on Machine Programming (pp. 1-10).
17. Lu, S., Duan, N., Han, H., Guo, D., Hwang, S. W., & Svyatkovskiy, A. (2022). ReACC: A
retrieval-augmented code completion framework. arXiv preprint arXiv:2203.07722

REFERENCES TO THE CHAPTER 6

1. Frain, B. (2020). Responsive Web Design with HTML5 and CSS: Develop future-proof
responsive websites using the latest HTML5 and CSS techniques. Packt Publishing Ltd.
2. Do Xuan, C., Nguyen, H. D., & Tisenko, V. N. (2020). Malicious URL detection based
on machine learning. International Journal of Advanced Computer Science and Applications, 11(1).
3. Zhang, S., & Balog, K. (2020). Web table extraction, retrieval, and augmentation: A
survey. ACM Transactions on Intelligent Systems and Technology (TIST), 11(2), 1-35.
4. Roldán, J. C., Jiménez, P., & Corchuelo, R. (2020). On extracting data from tables that
are encoded using HTML. Knowledge-Based Systems, 190, 105157.
5. Shyam, A., & Mukesh, N. (2020). A django based educational resource sharing website:
shreic. Journal of scientific research, 64(1), 138-152.
6. Deng, X., Shiralkar, P., Lockard, C., Huang, B., & Sun, H. (2022). DOM-LM: Learning
Generalizable Representations for HTML Documents. arXiv preprint arXiv:2201.10608.
7. Rebah, H. B., Boukthir, H., & Chedebois, A. (2022). Website Design and Development
with HTML5 and CSS3. John Wiley & Sons.

181
 8. Aljofey, A., Jiang, Q., Rasool, A., Chen, H., Liu, W., Qu, Q., & Wang, Y. (2022). An
effective detection approach for phishing websites using URL and HTML features. Scientific
Reports, 12(1), 8842.
9. Rahmawati, N. I., Ikashaum, F., Wahyuni, S., & Cahyo, E. D. (2022). Pendampingan
Pembuatan Media Pembelajaran Interaktif Ispring Presenter Berbasis HTML 5. Society: Jurnal
Pengabdian Masyarakat, 1(2), 59-64.
10. Hussein, A. K. (2022). Chat network study and design using HTML and PHP web
programming. Indonesian Journal of Electrical Engineering and Computer Science, 27(1), 442-
446.
11. Wang, Q., Fang, Y., Ravula, A., Feng, F., Quan, X., & Liu, D. (2022, April). Webformer:
The web-page transformer for structure information extraction. In Proceedings of the ACM Web
Conference 2022 (pp. 3124-3133).
12. Asiri, S., Xiao, Y., Alzahrani, S., Li, S., & Li, T. (2023). A Survey of Intelligent Detection
Designs of HTML URL Phishing Attacks. IEEE Access.
13. Gur, I., Nachum, O., Miao, Y., Safdari, M., Huang, A., Chowdhery, A., ... & Faust, A.
(2022). Understanding HTML with Large Language Models. arXiv preprint arXiv:2210.03945.
14. Li, Y., Yang, Z., Chen, X., Yuan, H., & Liu, W. (2019). A stacking model using URL
and HTML features for phishing webpage detection. Future Generation Computer Systems, 94, 27-
39.
15. Tan, S. M. G. Y. W., & Ramakrishnan, I. V. (2003). Automatic discovery of semantic
structures in html documents. In Proceedings (Vol. 2, p. 245). IEEE Computer Society.
16. Mukherjee, S., Yang, G., & Ramakrishnan, I. V. (2003). Automatic annotation of content-
rich html documents: Structural and semantic analysis. In The Semantic Web-ISWC 2003: Second
International Semantic Web Conference, Sanibel Island, FL, USA, October 20-23, 2003.
Proceedings 2 (pp. 533-549). Springer Berlin Heidelberg.
17. Lim, S. J., & Ng, Y. K. (2001, April). An automated change-detection algorithm for
HTML documents based on semantic hierarchies. In Proceedings 17th International Conference on
Data Engineering (pp. 303-312). IEEE

REFERENCES TO THE CHAPTER 7

1. Frisbie, M. (2019). Professional JavaScript for Web Developers. John Wiley & Sons.
2. Qi, H., Funabiki, N., Wai, K. H., Lu, X., Kyaw, H. H. S., & Kao, W. C. (2022). An
Implementation of Element Fill-in-Blank Problems for Code Understanding Study of JavaScript-
Based Web-Client Programming. International Journal of Information and Education Technology,
12(11), 1179-1184.
3. Ivanova, S., & Georgiev, G. (2019, May). Using modern web frameworks when
developing an education application: a practical approach. In 2019 42nd International Convention
on Information and Communication Technology, Electronics and Microelectronics (MIPRO) (pp.
1485-1491). IEEE.
4. Persson, M. (2020). JavaScript DOM Manipulation Performance: Comparing Vanilla
JavaScript and Leading JavaScript Front-end Frameworks.
5. Malik, R. S., Patra, J., & Pradel, M. (2019, May). NL2Type: inferring JavaScript
function types from natural language information. In 2019 IEEE/ACM 41st International
Conference on Software Engineering (ICSE) (pp. 304-315). IEEE.
6. Han, H., Oh, D., & Cha, S. K. (2019, February). CodeAlchemist: Semantics-Aware
Code Generation to Find Vulnerabilities in JavaScript Engines. In NDSS.
7. Fass, A., Backes, M., & Stock, B. (2019, December). Jstap: A static pre-filter for
malicious javascript detection. In Proceedings of the 35th Annual Computer Security Applications
Conference (pp. 257-269).

182
 8. Staicu, C. A., Torp, M. T., Schäfer, M., Møller, A., & Pradel, M. (2020, June).
Extracting taint specifications for javascript libraries. In Proceedings of the ACM/IEEE 42nd
International Conference on Software Engineering (pp. 198-209).
9. Li, G., Andreasen, E., & Ghosh, I. (2014, November). SymJS: automatic symbolic
testing of JavaScript web applications. In Proceedings of the 22nd ACM SIGSOFT International
Symposium on Foundations of Software Engineering (pp. 449-459).
10. Jang, D., Jhala, R., Lerner, S., & Shacham, H. (2010, October). An empirical study of
privacy-violating information flows in JavaScript web applications. In Proceedings of the 17th
ACM conference on Computer and communications security (pp. 270-283).
11. Zhang, M., Belhadi, A., & Arcuri, A. (2022, April). Javascript instrumentation for
search-based software testing: A study with restful apis. In 2022 IEEE Conference on Software
Testing, Verification and Validation (ICST) (pp. 105-115). IEEE.
12. Kluban, M., Mannan, M., & Youssef, A. (2022, May). On measuring vulnerable
JavaScript functions in the wild. In Proceedings of the 2022 ACM on Asia Conference on Computer
and Communications Security (pp. 917-930).
13. Ikkala, E., Hyvönen, E., Rantala, H., & Koho, M. (2022). Sampo-UI: A full stack
JavaScript framework for developing semantic portal user interfaces. Semantic Web, 13(1), 69-84.
14. Guha, A., Saftoiu, C., & Krishnamurthi, S. (2010). The essence of JavaScript. In
ECOOP 2010–Object-Oriented Programming: 24th European Conference, Maribor, Slovenia, June
21-25, 2010. Proceedings 24 (pp. 126-150). Springer Berlin Heidelberg.
15. Klein, D., Barber, T., Bensalim, S., Stock, B., & Johns, M. (2022, June). Hand Sanitizers
in the Wild: A Large-scale Study of Custom JavaScript Sanitizer Functions. In 2022 IEEE 7th
European Symposium on Security and Privacy (EuroS&P) (pp. 236-250). IEEE.
16. Rågstad, W. (2022). A JavaScript Backend for the Miking Compiler.
17. Abelson, H., & Sussman, G. J. (2022). Structure and Interpretation of Computer
Programs: JavaScript Edition. MIT Press.

REFERENCES TO THE CHAPTER 8

1. Odeh, A. H. (2019). Analytical and Comparison Study of Main Web Programming
Languages‒ASP and PHP. TEM Journal, 8(4), 1517-1522.
2. Tatroe, K., & MacIntyre, P. (2020). Programming PHP: Creating dynamic web pages.
O'Reilly Media.
3. Laaziri, M., Benmoussa, K., Khoulji, S., Larbi, K. M., & El Yamami, A. (2019). A
comparative study of laravel and symfony PHP frameworks. International Journal of Electrical and
Computer Engineering, 9(1), 704.
4. Endra, R. Y., Aprilinda, Y., Dharmawan, Y. Y., & Ramadhan, W. (2021). Analisis
Perbandingan Bahasa Pemrograman PHP Laravel dengan PHP Native pada Pengembangan
Website. EXPERT: Jurnal Manajemen Sistem Informasi dan Teknologi, 11(1), 48-55.
5. Muqorobin, M., & Rais, N. A. R. (2022). Comparison of PHP Programming Language with
Codeigniter Framework in Project CRUD. International Journal of Computer and Information
System (IJCIS), 3(3), 94-98.
6. Kudratovna, S. D., & Shoyqulov, S. Q. (2022). PHP is one of the main tools for creating a
Web page in computer science lessons. Texas Journal of Engineering and Technology, 9, 83-87.
7. Baskaran, G., Saundariya, K., Prabakaran, D., & Senthilkumaran, R. (2022, February). A
Web Application Based Administration Panel For Handyman Services. In 2022 IEEE Delhi Section
Conference (DELCON) (pp. 1-5). IEEE.
8. Tenzin, S. (2022). PHP Framework for Web Application Development. International
Advanced Research Journal in Science, Engineering and Technology, 9(2), 144-147.
9. Rabheru, R., Hanif, H., & Maffeis, S. (2022, June). A hybrid graph neural network approach
for detecting PHP vulnerabilities. In 2022 IEEE Conference on Dependable and Secure Computing
(DSC) (pp. 1-9). IEEE.
183
 10. Powers, D., & Powers, D. (2022). Php: A quick reference. PHP 8 Solutions: Dynamic Web
Design and Development Made Easy, 41-80.
11. Muqorobin, M., & Rais, N. A. R. (2022). Comparison of PHP Programming Language with
Codeigniter Framework in Project CRUD. International Journal of Computer and Information
System (IJCIS), 3(3), 94-98.
12. Jang, S., Shen, H. K., Ding, X., Miles, T. F., & Gradinaru, V. (2022). Structural basis of
receptor usage by the engineered capsid AAV-PHP. eB. Molecular Therapy-Methods & Clinical
Development, 26, 343-354.
13. Marqas, R. B., Almufti, S. M., & Asaad, R. R. (2022). Firebase Efficiency in CSV Data
Exchange Through PHP-Based Websites. Academic Journal of Nawroz University, 11(3), 410-414.
14. Gupta, S., & Gupta, B. B. (2015, May). PHP-sensor: a prototype method to discover
workflow violation and XSS vulnerabilities in PHP web applications. In Proceedings of the 12th
ACM international conference on computing frontiers (pp. 1-8).
15. Yadav, N., Rajpoot, D. S., & Dhakad, S. K. (2019, November). LARAVEL: a PHP
framework for e-commerce website. In 2019 Fifth International Conference on Image Information
Processing (ICIIP) (pp. 503-508). IEEE.
16. Laaziri, M., Benmoussa, K., Khoulji, S., & Kerkeb, M. L. (2019). A Comparative study of
PHP frameworks performance. Procedia Manufacturing, 32, 864-871.
17. Rambe, A. (2022). Asistensi Implementation of Database-Based CodeIgniter PHP
Framework on School Alumni Data (Case Study of Alumni Data for SMK Taman Siswa Medan).
INFOKUM, 10(02), 1042-1049.

REFERENCES TO THE CHAPTER 9

1) Iskandar, M. S., & Komara, D. (2018, August). Application marketing strategy search engine
optimization (SEO). In IOP Conference Series: Materials Science and Engineering (Vol. 407, No.
1, p. 012011). IOP Publishing.
2) Papagiannis, N. (2020). Effective SEO and content marketing: the ultimate guide for
maximizing free web traffic. John Wiley & Sons.
3) Lammenett, E. (2021). Praxiswissen Online-Marketing: Affiliate-, Influencer-, Content-,
Social-Media-, Amazon-, Voice-, B2B-, Sprachassistenten-und E-Mail-Marketing, Google Ads,
SEO. Springer Gabler.
4) Lammenett, E. (2019). Praxiswissen Online-Marketing: Affiliate-, Influencer-, Content-und
E-Mail-Marketing, Google Ads, SEO, Social Media, Online-inklusive Facebook-Werbung.
Springer-Verlag.
5) Paul, P., & Aithal, P. S. (2018, April). Business Information Sciences with Special Reference
to the Digital Marketing and SEO as a field of study. In Proceedings on National Conference on
quality in higher education challenges & opportunities (pp. 37-47).
6) Kumar, A., Syed, A. A., & Pandey, A. (2021). Adoption of online resources to improve the
marketing performance of SMES. Asia Pacific Journal of Health Management, 16(3), 137-144.
7) Das, S. (2021). Search engine optimization and marketing: A recipe for success in digital
marketing. CRC Press.
8) Bala, M., & Verma, D. (2018). A critical review of digital marketing. M. Bala, D. Verma
(2018). A Critical Review of Digital Marketing. International Journal of Management, IT &
Engineering, 8(10), 321-339.
9) Andonov, A. D. (2020). The Application of Search Engine Optimization in Internet
Marketing. In 2020 55th International Scientific Conference on Information, Communication and
Energy Systems and Technologies (ICEST) (pp. 37-41). IEEE.
10) Gupta, N. (2020). Digital marketing: Trends, opportunities, and challenges. Asian Journal
of Management, 11(4), 434-440.
11) Barzola, L., Jara, J., & Aviles, P. (2019). Importancia del Marketing Digital en el Comercio
Electrónico. e-idea Journal of Business Sciences, 1(3), 24-33.
184
 12) Erdmann, A., Arilla, R., & Ponzoa, J. M. (2022). Search engine optimization: The long-term
strategy of keyword choice. Journal of Business Research, 144, 650-662.
13) Ebietomere, E. P., & Ekuobase, G. O. (2023). Semantic Search Engine in Industry 4.0.
In Semantic Technologies for Intelligent Industry 4.0 Applications River Publisher,23
14) Saura, J. R., Reyes-Menendez, A., & Van Nostrand, C. (2020). Does SEO Matter for
Startups? Identifying Insights from UGC Twitter Communities. In Informatics (Vol. 7, No. 4, p.
47). MDPI.
15) Bhandari, R. S., & Bansal, A. (2018). Impact of search engine optimization as a marketing
tool. Jindal Journal of Business Research, 7(1), 23-36.
16) Panchal, A., Shah, A., & Kansara, K. (2021). Digital marketing-search engine optimization
(SEO) and search engine marketing (SEM). International Research Journal of Innovations in
Engineering and Technology, 5(12), 17.
17) Nasir, M. F. (2021). Advertise Right by Addressing the Concerns: An Evaluation of
Women's/Breast Imaging Radiology Fellowship Website Content for Prospective Fellows. Current
Problems in Diagnostic Radiology, 50(4), 484.
18) Jokila, S. В. (2019). International student recruitment strategies in Finland and China: An
analysis of website content. Nordic Journal of Comparative and International Education
(NJCIE),3(4), 17.

REFERENCES TO THE CHAPTER 10

1. Mbunge, E., & Muchemwa, B. (2022). Towards emotive sensory Web in virtual health
care: Trends, technologies, challenges and ethical issues. Sensors International, 3, 100134.
2. Gad, A. G., Mosa, D. T., Abualigah, L., & Abohany, A. A. (2022). Emerging trends in
blockchain technology and applications: A review and outlook. Journal of King Saud University-
Computer and Information Sciences.
3. Chawla, R. N., & Goyal, P. (2022). Emerging trends in digital transformation: a
bibliometric analysis. Benchmarking: An International Journal, 29(4), 1069-1112.
4. Manni, M., & Nicolini, A. (2022). Multi-objective optimization models to design a
responsive built environment: A synthetic review. Energies, 15(2), 486.
5. Balajee, R. M., Jayanthi Kannan, M. K., & Murali Mohan, V. (2022). Web Design
Focusing on Users Viewing Experience with Respect to Static and Dynamic Nature of Web Sites.
In Inventive Computation and Information Technologies: Proceedings of ICICIT 2021 (pp. 51-60).
Singapore: Springer Nature Singapore.
6. Xing, Y., Shell, J., Fahy, C., Xie, T., Kwan, H. Y., & Xie, W. (2022). Web XR user
interface research: Design 3D layout framework in static websites. Applied Sciences, 12(11), 5600.
7. Bizzotto, N., Marciano, L., de Bruijn, G. J., & Schulz, P. J. (2023). The Empowering Role
of Web-Based Help Seeking on Depressive Symptoms: Systematic Review and Meta-
analysis. Journal of medical Internet research, 25, e36964.
8. BAYTAR, C. U. Dynamics of Web 2.0: A Software Application" Web 2.0 Meter". Gazi
University Journal of Science, 1-1.
9. Ismail, A., & Kuppusamy, K. S. (2022). Web accessibility investigation and identification
of major issues of higher education websites with statistical measures: A case study of college
websites. Journal of King Saud University-Computer and Information Sciences, 34(3), 901-911.
10. Tang, K. Y., Chou, T. L., & Tsai, C. C. (2020). A content analysis of computational
thinking research: An international publication trends and research typology. The Asia-Pacific
Education Researcher, 29(1), 9-19.
11. Brodić, D., Amelio, A., Brodić, D., & Amelio, A. (2020). New trends and challenges in
CAPTCHA programming. The CAPTCHA: Perspectives and Challenges: Perspectives and
Challenges in Artificial Intelligence, 105-122.
12. Bowman, W. J., & Garcia, R. Trends in Functional Programming.

185
 13. Smith, D., & Ali, A. (2014). Analyzing computer programming job trend using web data
mining. Issues in Informing Science and Information Technology, 11(1), 203-214.
14. Nurkholis, A., & Anggela, Y. (2022). Web-Based Geographic Information System For
Lampung Gift Store. Jurnal Teknoinfo, 16(1), 34-39.
15. Naeem, U., Bosman, L., & Gill, S. S. (2022, March). Teaching and Facilitating an Online
Learning Environment for a Web Programming Module. In 2022 IEEE Global Engineering
Education Conference (EDUCON) (pp. 769-774). IEEE.
16. Naeem, U., Bosman, L., & Gill, S. S. (2022, March). Teaching and Facilitating an Online
Learning Environment for a Web Programming Module. In 2022 IEEE Global Engineering
Education Conference (EDUCON) (pp. 769-774). IEEE.
17. Almutairi, A. A., Mishra, S., & AlShehri, M. (2022). Web Security: Emerging Threats
and Defense. Comput. Syst. Sci. Eng., 40(3), 1233-1248.

186
 Epilogue,
In the Name of Allah—the Most Compassionate, Most Merciful.

“Say, “Work. Allah will see your work, and so will His Messenger, and
the believers. Then you will be returned to the Knower of secrets and
declarations, and He will inform you of what you used to do.” Surat At-
Tawaba verse 105.
Praise be to God Almighty, who has enabled us to introduce this book.
We have presented in this book Website Design, and we have made every
effort to bring this book out in this form. We hope that we made
contributions to knowledge and we wish it will be beneficial for every
reader and learner. We have made our best efforts to review the most
important ideas for this topic as much as we can and we do not claim
perfection because perfection belongs to God Almighty only. If we
succeed, then it is from God Almighty. If we fail, it is from ourselves, and
the honor of trying is sufficient for us. Finally, we hope to that you will
like this book.
may the blessings and peace of Allah be upon him our teacher, beloved
and master Muhammad.

Peace, God's mercy and blessings be upon you

187
188
 Author wrote
1. E-Marketing
2. E-Marketing Principles
3. Online Consumer Behavior
4. E-Banking Marketing
5. E-Advertising Technology
6. Search Engine Marketing
7. E-Marketing Communications
8. E-Marketing Strategy
9. Website Design
10. Social Media Marketing

189
190
 191

View publication stats