Chapter 1

Introduction to web design

Introduction of Internet

The Internet is a worldwide network of computer networks that connects university,

government, commercial, and other computers in over 150 countries. There are thousands
of networks, tens of thousands of computers, and millions of users on the Internet, with the
numbers expanding daily. Using the Internet, you can send electronic mail, chat with
colleagues around the world, and obtain information on a wide variety of subjects.

Three principal uses of the Internet are:

Electronic mail. Electronic mail, or e-mail, lets you electronically "mail" messages to users
who have Internet E-mail addresses. Delivery time varies, but it's possible to send mail
across the globe and get a response in minutes. LISTSERVs are special interest mailing lists
which allow for the exchange of information between large numbers of people.

USENET newsgroups. USENET is a system of special interest discussion groups, called

newsgroups, to which readers can send, or "post" messages which are then distributed to
other computers in the network. (Think of it as a giant set of electronic bulletin boards.)
Newsgroups are organized around specific topics, for example, alt.education.research,
alt.education.distance, and misc.education.science.

Information files. Government agencies, schools, and universities, commercial firms, interest
groups, and private individuals place a variety of information on-line. The files were originally
text only, but increasingly contain pictures and sound.

WWW : World Wide Web

The World Wide Web (WWW), commonly known as the Web, is an information
system where documents and other web resources are identified by Uniform Resource
Locators (URLs, such as https://www.example.com/), which may be interlinked by hypertext,
and are accessible over the Internet. The resources of the WWW are transferred via
the Hypertext Transfer Protocol (HTTP) and may be accessed by users by a software
application called a web browser and are published by a software application called a web
server.

English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first
web browser in 1990 while employed at CERN near Geneva, Switzerland. The browser was
released outside CERN in 1991, first to other research institutions starting in January 1991
and then to the general public in August 1991. The World Wide Web has been central to the
development of the Information Age and is the primary tool billions of people use to interact
on the Internet. Web resources may be any type of downloaded media, but web pages are
hypertext media that have been formatted in Hypertext Markup Language (HTML). Such
formatting allows for embedded hyperlinks that contain URLs and permit users to navigate to
other web resources. In addition to text, web pages may contain references to images,
video, audio, and software components which are displayed in the user's web browser as
coherent pages of multimedia content.

Multiple web resources with a common theme, a common domain name, or both, make up a
website. Websites are stored in computers that are running a program called a web server
that responds to requests made over the Internet from web browsers running on a user's
computer. Website content can be largely provided by a publisher, or interactively where
users contribute content or the content depends upon the users or their actions. Websites
may be provided for a myriad of informative, entertainment, commercial, governmental, or
non-governmental reasons.

What is website?

Website is a collection of related network web resources, such as web pages, multimedia
content, which are typically identified with a common domain name, and published on at
least one web server. Notable examples are wikipedia.org, google.com, and amazon.com.

Websites can be accessed via a public Internet Protocol (IP) network, such as the Internet,
or a private local area network (LAN), by a uniform resource locator (URL) that identifies the
site.

Websites can have many functions and can be used in various fashions; a website can be a
personal website, a corporate website for a company, a government website, an
organization website, etc. Websites are typically dedicated to a particular topic or purpose,
ranging from entertainment and social networking to providing news and education. All
publicly accessible websites collectively constitute the World Wide Web, while private
websites, such as a company's website for its employees, are typically part of an intranet.

Web pages, which are the building blocks of websites, are documents, typically composed in
plain text interspersed with formatting instructions of Hypertext Markup Language (HTML,
XHTML). They may incorporate elements from other websites with suitable markup anchors.
Web pages are accessed and transported with the Hypertext Transfer Protocol (HTTP),
which may optionally employ encryption (HTTP Secure, HTTPS) to provide security and
privacy for the user. The user's application, often a web browser, renders the page content
according to its HTML markup instructions onto a display terminal.

Hyperlinking between web pages conveys to the reader the site structure and guides the
navigation of the site, which often starts with a home page containing a directory of the site
web content. Some websites require user registration or subscription to access content.
Examples of subscription websites include many business sites, news websites, academic
journal websites, gaming websites, file-sharing websites, message boards, web-based
email, social networking websites, websites providing real-time stock market data, as well as
sites providing various other services. End users can access websites on a range of devices,
including desktop and laptop computers, tablet computers, smartphones and smart TVs.
How do websites work?

Before you begin creating your own website and launch it to the Internet, it’s important to
know how websites work.

Here are some basic terms:

->A website is simply a collection of web pages of codes – codes that describes the layout,
format and content on a page.

->The web server is a internet-connected computer that receives the request for a web page
sent by your browser.

->The browser connects your computer to the server through an IP address. The IP address
is obtained by translating the domain name. (Don’t worry, this part is all done automatically
by your browser so you don’t have to look up the IP addresses yourself.)

In other words, in order to display your website on the Internet, you will need:

● A website
● A domain name
● A server

A website

A website is typically a collection of web pages, images and other elements that are linked
together to form a larger, structured document. Think of a website as a book and each
individual page is a web page.

A website can be made up of a single page or it could have thousands of pages. Each page
will have its own text, images and other elements. All web pages and elements are then
placed in a folder and stored on your web host server.

Each web page is written in codes and these codes describe the layout, format and content
on the page. The most common coding language used to create web pages is HTML.

Creating a website

But just because a web page is written in codes doesn’t mean you need to be an IT geek to
create one yourself. In fact, you don’t even need to know code or possess any technical
skills or knowledge to create a website nowadays. Technology has advanced tremendously
and there are a lot of website creators that allows you build functional and
professional-looking websites without much or any technical knowledge.

If you have little to no technical knowledge and experience, the best is to use a website
builder to create your website.

The majority of website builders on the market are designed for the non-tech person in mind:
Everything is online-based. There is nothing to download, nothing to install. Just open your
web browser, type in the URL of the website builder, sign in and start building your website.

No technical knowledge required. The website builders are created and managed by
professionals so you don’t have to mess around with the technical aspects. You can create
your entire website with all the bells and whistles without ever touching one line of code.

It’s visual. Website builders typically use a WYSIWYG (What You See Is What You Get)
editor that lets you create your website by dragging and dropping website elements into the
desired location.

Professionally-designed templates. You don’t have to worry about mismatched color

schemes or disjointed layout as most website builders come with an extensive library of
professional design templates.

Examples of easy-to-use website builders include Website.com, Wix, Weebly and

Squarespace. All of the Doteasy web hosting plans include Website.com Website Builder
service for FREE. Click here to read more details about Website.com Website Builder
service.

For those have some technical knowledge and experience and are looking to build a
powerful, flexible, highly customized website, there is always the option to choose a content
management system, such as WordPress or Joomla. But do keep in mind that these site
building applications often has a steep learning curve.

A domain name

A domain name is the address that you type into your web browser address bar to get to a
website. An example of a domain name is www.doteasy.com. A domain name is unique to a
website. In other words, no two websites can have the same domain name.

While it is true that you don’t necessarily need a custom domain name for your website.
Many website builders offer free plans that comes with a free website address. But these
free website addresses come in the form of a sub-domain. . For example, if your website
builder is “example.com” your free web address may be http://yourname.example.com.

This type of web address poses many problems:

Your website becomes a “hostage” – because you don’t own example.com, you also don’t
own any sub-domain or sub-folder variations of that domain name. The website builder has
the right to create and delete any sub-domains and/or sub-folders they wish, with or without
warning.

Many customers do not want to do business with a company that doesn’t have its own
domain name. A custom domain name (and a custom domain email address) gives you the
professionalism, credibility and trust that you and your business needs.

Search engines such as Google and Bing give preferences to domain names rather than
sub-domains.

Custom domain names are not free, but nowadays you can easily get one for free from
many service providers when you signup for an annual service plan.
A web server

A web server is the computer that receives the request for a web page sent by your browser.

Consider this: your company is hiring for a position that has just opened up and you are in
charge of writing the job ad. You may have crafted the most compelling ad but unless you
post the ad on a job board, no one will see it.

This is the same with websites. You could create the most stunning website but unless it’s
uploaded to a web server, it is not accessible or viewable on the Internet.

You can certainly set up your own server at home, but it would require a huge amount of
knowledge, time and resources (ie. power and Internet connection). Paying a web hosting
service provider would be the more logical, economical and practical thing to do. Think if it
like renting a space on a web host’s server. For a monthly fee, web hosting providers lets
you use space on their servers to host your website, and because it’s their server, they as
take care of all the technical aspects of setting up and maintain the server, as well as all the
resources needed to run the server, so you don’t have to worry about anything.

How it all comes together

Say you open your web browser and type in a domain name, your browser will display the
web pages of the domain name you’ve entered.

But have you wondered how your web browser knows what information to display?

Each website will have a website address, or a domain name, and each domain name is tied
to the IP address of the web server it resides on. IP addresses are managed and tracked via
the Domain Name Server (or DNS for short).

DNS works very similarly to the Contacts app on your mobile phone – you open up the
Contacts app, type in a person’s name and your mobile phone returns with the person’s
phone number and other contact information you might have entered. You can then decide if
you want to call, email or text that person.

When you type in a domain name in your web browser, your web browser is actually
conducting a series of inquiries that include looking up the IP address of the domain name,
locating the web server that hosts the web pages of the domain name, submitting a request
to that server for a copy of the web page(s), receiving the web page(s) from the server and
finally translating the codes on the web page to present the information on your screen.

Web page
A web page (also written as webpage) is a specific collection of information found on the
World Wide Web that is displayed to the user in a web browser. The name "web page" is a
metaphor of paper pages bound together into a book. Websites typically have many web
pages linked together in a coherent fashion.

The core element of a web page is one or more text files written in the Hypertext Markup
Language. In addition, JavaScript for dynamic behavior and Cascading Style Sheets for
presentation semantics are elements of most web pages, as are images and videos.
From the perspective of server-side website deployment, there are two types of web pages:
static and dynamic. Static pages are retrieved from the web server's filesystem without any
modification, while dynamic pages must be created by the web server on the fly, typically
drawing from a database to fill out a web template, before being sent to the user's browser.

Front End and Back End:

Frontend and Backend are two most popular terms used in web development. These terms
are very crucial for web development but are quite different from each other. Each side
needs to communicate and operate effectively with the other as a single unit to improve the
website’s functionality.

Front End Development:

The part of a website that user interacts with directly is termed as front end. It is also referred
to as the ‘client side’ of the application. It includes everything that users experience directly:
text colors and styles, images, graphs and tables, buttons, colors, and navigation menu.
HTML, CSS, and Javascript are the languages used for Front End development. The
structure, design, behavior, and content of everything seen on browser screen when
websites, web applications, or mobile apps are opened up, is implemented by front End
developers. Responsiveness and performance are two main objectives of the front End. The
developer must ensure that the site is responsive i.e. it appears correctly on devices of all
sizes no part of the website should behave abnormally irrespective of the size of the screen.

Front end Languages: The front end portion is built by using some languages which are
discussed below:

HTML: HTML stands for Hyper Text Markup Language. It is used to design the front end
portion of web pages using markup language. HTML is the combination of Hypertext and
Markup language. Hypertext defines the link between the web pages. The markup language
is used to define the text documentation within tag which defines the structure of web pages.

CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language
intended to simplify the process of making web pages presentable. CSS allows you to apply
styles to web pages. More importantly, CSS enables you to do this independent of the HTML
that makes up each web page.

JavaScript: JavaScript is a famous scripting language used to create the magic on the sites
to make the site interactive for the user. It is used to enhancing the functionality of a website
to running cool games and web-based software.

Front End Frameworks and Libraries:

AngularJS: AngularJs is a JavaScript open source front-end framework that is mainly used
to develop single page web applications(SPAs). It is a continuously growing and expanding
framework which provides better ways for developing web applications. It changes the static
HTML to dynamic HTML. It is an open source project which can be freely used and changed
by anyone. It extends HTML attributes with Directives, and data is bound with HTML.
React.js: React is a declarative, efficient, and flexible JavaScript library for building user
interfaces. ReactJS is an open-source, component-based front end library responsible only
for the view layer of the application. It is maintained by Facebook.

Bootstrap: Bootstrap is a free and open-source tool collection for creating responsive
websites and web applications. It is the most popular HTML, CSS, and JavaScript
framework for developing responsive, mobile-first web sites.

jQuery: jQuery is an open source JavaScript library that simplifies the interactions between
an HTML/CSS document, or more precisely the Document Object Model (DOM), and
JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and
manipulation, browser event handling, DOM animations, Ajax interactions, and
cross-browser JavaScript development.

SASS:It is the most reliable, mature and robust CSS extension language. It is used to
extend the functionality of an existing CSS of a site including everything from variables,
inheritance, and nesting with ease.

Some other libraries and frameworks are: Semantic-UI, Foundation, Materialize,

Backbone.js, Express.js, Ember.js etc.

Backend Development:
Backend is server side of the website. It stores and arranges data, and also makes sure
everything on the client-side of the website works fine. It is the part of the website that you
cannot see and interact with. It is the portion of software that does not come in direct contact
with the users. The parts and characteristics developed by backend designers are indirectly
accessed by users through a front-end application. Activities, like writing APIs, creating
libraries, and working with system components without user interfaces or even systems of
scientific programming, are also included in the backend.

Back end Languages: The back end portion is built by using some languages which are
discussed below:

PHP: PHP is a server-side scripting language designed specifically for web development.
Since PHP code executed on the server side so it is called server-side scripting language.

C++: It is a general purpose programming language and widely used now a days for
competitive programming. It is also used as backend language.

Java: Java is one of the most popular and widely used programming language and platform.
It is highly scalable. Java components are easily available.

Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.

JavaScript: Javascript can be used as both (front end and back end) programming
languages.

Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside of a browser. You need to remember that NodeJS is not a
framework and it’s not a programming language. Most of the people are confused and
understand it’s a framework or a programming language. We often use Node.js for building
back-end services like APIs like Web App or Mobile App. It’s used in production by large
companies such as Paypal, Uber, Netflix, Wallmart and so on.

Back End Frameworks:

The list of back end frameworks are: Express, Django, Rails, Laravel, Spring, etc.

The other back end program/scripting languages are: C#, Ruby, REST, GO etc.

Difference between Frontend and Backend: Frontend and backend development are quite
different from each other, but still, they are two aspects of the same situation. The frontend is
what users see and interact with and backend is how everything works.

Frontend is the part of the website users can see and interact with such as the graphical
user interface (GUI) and the command line including the design, navigating menus, texts,
images, videos, etc. Backend, on the contrary, is the part of the website users cannot see
and interact with.

The visual aspects of the website that can be seen and experienced by users are frontend.
On the other hand, everything that happens on the background can be attributed to the
backend.

Languages used for front end are HTML, CSS, Javascript while those used for backend
include Java, Ruby, Python, .Net .

Server side and Client side Programming

Server-side Programming :

It is the program that runs on server dealing with the generation of content of web page.

1) Querying the database

2) Operations over databases

3) Access/Write a file on server.

4) Interact with other servers.

5) Structure web applications.

6) Process user input. For example if user input is a text in search box, run a search
algorithm on data stored on server and send the results.

Examples :

The Programming languages for server-side programming are :

1) PHP
2) C++

3) Java and JSP

4) Python

5) Ruby on Rails

Client-side Programming :

It is the program that runs on the client machine (browser) and deals with the user
interface/display and any other processing that can happen on client machine like
reading/writing cookies.

1) Interact with temporary storage

2) Make interactive web pages

3) Interact with local storage

4) Sending request for data to server

5) Send request to server

6) Work as an interface between server and user

The Programming languages for client-side programming are :

1) Javascript

2) VBScript

3) HTML

4) CSS

5) AJAX

What Is Responsive Web Design?

Responsive Web design is the approach that suggests that design and development should
respond to the user’s behavior and environment based on screen size, platform and
orientation.

The practice consists of a mix of flexible grids and layouts, images and an intelligent use of
CSS media queries. As the user switches from their laptop to iPad, the website should
automatically switch to accommodate for resolution, image size and scripting abilities. One
may also have to consider the settings on their devices; if they have a VPN for iOS on their
iPad, for example, the website should not block the user’s access to the page. In other
words, the website should have the technology to automatically respond to the user’s
preferences. This would eliminate the need for a different design and development phase for
each new gadget on the market.
Static website and dynamic website
There are basically two main types of website - static and dynamic.
A static site is one that is usually written in plain HTML and what is in the code of the page is
what is displayed to the user.

A dynamic site is one that is written using a server-side scripting language such as PHP,
ASP, JSP, or Coldfusion. In such a site the content is called in by the scripting language from
other files or from a database depending on actions taken by the user.

Relative merits of static and dynamic websites

Static sites - advantages

Flexibility is the main advantage of a static site - every page can be different if desired, to
match the layout to different content, and the designer is free to put in any special effects
that a client may ask for in a unique way on different pages. This allows theming - for
instance an author may want a different theme for a different book and associated pages or
perhaps for a series of books, in order to match the cover designs or the context of the
stories.

Cost is generally lower up-front than a dynamic site.

Static sites - disadvantages

The main problem with any static site appears when you wish to update the content. Unless
you are conversant with HTML and the design methods used in the site then you have to go
back to the designer to have any content changes made. This may be perfectly ok when a
new page is required which needs design input, but if all you want to do is change some text
then it can be a nuisance for both client and designer.

The second main problem is scalability. If you wish to sell products on your site and you
have a lot of them then you may have to construct individual pages for each one, which can
take considerable time, effort and cost.

Costs - there are ongoing costs for updating the content.

Dynamic sites - advantages

The main advantages of dynamic sites are that by connecting them to databases you can
easily pull in information in an organised and structured way to create product pages or
categories of related products sorted in a variety of different ways depending on how the
user wants to view them.

This ability to connect to a database means that you can also create a content management
system - an interface which allows the client to input and manage data via a web-based
series of administration pages. That content can be text for their pages and images to go
along with the text, or items in their product range with categories, specifications, short and
long descriptions, images, etc. In both these cases it can be as simple or as complex as the
client requires.
There are little or no ongoing costs unless there is a change in the basic design or an extra
capability added.

Dynamic sites - disadvantages

The design of a dynamic site is more fixed than a static one because many of the pages are
essentially a template into which data and content is poured to create multiple pages of a
similar type. So for instance all your product pages will be essentially the same page layout
with different data being displayed. While some customisation cabability can be built in it is
usually quite limited, such a selecting from a set of pre-defined options. Individual layout
changes to particular pages are not usually possible.

Costs are higher initially than for a static site, and additional functionality may also cost
more, particularly if it's something that wasn't envisaged originally and requires re-writing of
the core code or database.