AN INTRO TO

WEB DESIGN & DEVELOPMENT

STC&S
SCHOOL OF SIGNAL
Disclaimer:
This book is a compilation of notes on various web technologies from diverse resources.
You can learn more about all these technologies at: https://www.w3schools.com.

Compiled by: Maj Murad Ahmed, SUP, Sigs

 Table of Contents

Chapter-1: Understanding How WWW Works

101. Introduction
102. History of WWW
103. Who Controls the WWW?
104. The Server-Client Architecture
105. HTTP
106. Web Browsers
107. Frontend vs Backend

Chapter-2: HTML
201. Introduction
202. History of HTML
203. Structure of HTML Web Page
204. Understanding HTML Syntax
205. Heading
206. Paragraph
207. Div
208. Span
209. Images
210. Tables
211. Lists
212. Html Links
213. Html Inputs
214. Html Forms
215. Line Breaks
216. Horizontal Lines
217. Semantic Tags
218. Holy Grail Web Layout
Chapter-3: CSS
301. Introduction
302. Why is CSS Required?
303. Methods to Add CSS to HTML
304. Understanding CSS Syntax
305. Styling Text Elements
306. Styling Div Elements
307. Positioning Div Elements to Make a Layout
308. Styling a Holy Grail Web Layout with CSS
309. Responsive Web Design
310. Responsive CSS Frameworks
Chapter-4: Web Development With WordPress
401. Introduction
402. Why Use any CMS Like WordPress?
403. Installing WordPress
404. The WordPress Dashboard
405. WordPress Settings
406. Understanding Posts
407. Understanding Pages
408. Changing WordPress Appearance with Themes
409. WordPress Menus
410. Extending WordPress Functionalities with Plugins
411. The Gutenberg Page Editor
1
Compiled by: Maj Murad Ahmed, SUP, Sigs
 CHAPTER-1
UNDERSTANDING HOW WWW WORKS
101. Introduction.
a. World Wide Web (WWW), which is also commonly known as
W3 or web is an interconnected system of public webpages
accessible through the internet. These websites contain
text pages, digital images, audio, videos, etc. Users can
access the content of these sites from any part of the world
over the internet using their devices such as computers,
laptops, cell phones, etc. The WWW, along with the internet,
enable the retrieval and display of text and media to your
device.
b. Webpages are the building blocks of the web (WWW) and
are mainly formatted with HTML. Normally the webpages are
linked to each other by links named as hyperlinks. Anyone
can access these webpages using specific client software
called as web browsers and a specific application layer
protocol called as HTTP (hypertext transfer protocol).
c. All web pages are given an online address called a
Uniform Resource Locator (URL). A website is actually a
collection of web pages that belong to a specific URL group
or the same domain. Any URL is composed of the following
parts:

Fig-101: Components of URL structure.

d. Most people use the terms “Internet” and “WWW”
interchangeably, confusing each with the other. But in
fact, the internet and the web are two completely different
entities. The Internet is a worldwide network of connected
computing devices (eg computers, laptops, tablets, etc)
which enables data communication between remote locations.
On the contrary, the Web is one of many applications built

2
Compiled by: Maj Murad Ahmed, SUP, Sigs
on top of the Internet which enables easier global exchange
of information through standard protocols.

102. History of WWW.

a. The development of the World Wide Web was begun in 1989
by Tim Berners-Lee and his colleagues at CERN. They created
a protocol, HyperText Transfer Protocol (HTTP), which
standardized communication between servers and clients.

Fig-102: Tim Berners-Lee at CERN.

b. Originally, it was developed by Tim Berners-Lee to
enable automated information sharing between scientists
across the world, so that they could easily share the data
and results of their experiments and studies with each
other. The Internet and the hypertexts were already
available technology by that time, but no one thought about
how to use the internet to link or share one document with
another. Tim focused on three main technologies that could
make computers understand each other, HTML, URL, and HTTP.
c. In 1991, Tim created the world's first website and Web
Server. This webpage can still be found in the following
address:
http://info.cern.ch/hypertext/WWW/TheProject.html
d. Soon Tim’s invention became an instant hit. All major
software companies like Microsoft and Apple saw its
potential and included built-in support for web browsers in
their OSs to make HTTP access readily available for the
users.

3
Compiled by: Maj Murad Ahmed, SUP, Sigs
e. By the early 90s the Internet was rapidly booming and
all the major corporate companies wanted to have an online
presence on the internet. So, all of them created their own
websites resulting in millions of websites readily
available on the Internet by 2000. At the same time, other
associated technology companies also grabbed the
opportunity to expand their business so that the web can be
more available and easier to access. This created huge
economic opportunities and grew into a full-fledged
industry. This phenomenon is popularly known as the “WWW
Boom”.
103. Who Controls the WWW?
a. As WWW rapidly evolved into a mammoth technology
dominating the entire Internet, soon it was felt that
standardization of WWW is required for smooth operation and
interoperability. To avoid monopolization of the Web, World
Wide Web Consortium or, W3 Consortium an organization that
sets standards to ensure the Web runs smoothly and continues
to evolve with new technologies was established.
b. W3 Consortium formulates vocabulary, standards and
protocols which ensures that if you create a website or Web
app, it will be rendered the same on all different browsers
and devices.
c. With rapid development in technologies and devices, WWW
standards often become obsolete or, there is a requirement
for new standards. For this reason, W3 Consortium works
continuously so that it can introduce new web standards
before it is phased out. For example, till now W3 Consortium
has introduced version 5 of HTML and version 3 of CSS to
respond to changes to how any users access and consume web
content.
104. The Server-Client Architecture.
a. The Web works on the basic client-server architecture.
The servers store and transfer web pages or information to
client computers on the network when requested.
b. A web server is a software program which serves the web
pages. The computer of a user who requests documents from
a server is known as a client. Browser, which is installed
on the user's computer, allows users to view the retrieved
documents.

4
Compiled by: Maj Murad Ahmed, SUP, Sigs
c. When the client types in a web address, an HTTP request
is initiated to the server. HTTP requests are mainly of 5
types (GET, POST, PUT, DELETE, PATCH). The server checks
the request and if it is valid (if the webpage requested
exists on the server), sends the requested webpage as a
response.

Fig-103: Popular modern web browsers.

105. HTTP.
a. The Hypertext Transfer Protocol (HTTP) is the
foundation of the WWW and is used to load web pages using
hypertext links. HTTP is an application layer protocol
designed to transfer information between networked devices.
A typical flow over HTTP involves a client machine making
a request to a server, which then sends a response message.
b. An HTTP request is the way internet communications
platforms such as web browsers ask for the information which
they need to load a website. A typical HTTP request
contains:
i. HTTP version.
ii. Requested URL.
iii. HTTP method.
iv. HTTP request header.
v. Optional HTTP body.
c. An HTTP response is what web clients (often browsers)
receive from a web server in answer to an HTTP request. A
typical HTTP response contains:
i. HTTP response code.
ii. HTTP response header.
iii. Optional HTTP body.
d. Presently two versions of HTTP are in use, plain HTTP
and HTTPS. HTTP uses port 80 while HTTPS uses port 443. The
full form of HTTPS is Hypertext Transfer Protocol Secure.
5
Compiled by: Maj Murad Ahmed, SUP, Sigs
This protocol allows transferring the data in an encrypted
form. The HTTP protocol does not provide the security of
the data and data is transferred in plain form, while HTTP
ensures the security of the data. Therefore, we can say
that HTTPS is a secure version of the HTTP protocol. The
use of HTTPS protocol is mainly for transferring sensitive
information such as user login, password and financial
data.

Fig-104: HTTP vs HTTPS.

106. Web Browsers.
a. A web browser, which is commonly known as a browser,
is a program that displays text, data, pictures, videos,
animation, and more. It provides a software interface that
allows you to click hyperlinked resources on the World Wide
Web.
b. The first web browser was Mosaic. But the first widely
used and popular web browser is “Netscape Navigator”.
Earlier versions of web browsers were completely text-
based, but now they have evolved into very sophisticated
software which can be used for e-mailing, transferring
multimedia files, and using social media sites.
c. Few of the most common and popular modern web browsers
include Chrome, Mozilla Firefox, Internet Explorer (IE),
Opera, UC Browser and Safari.

Fig-105: Popular modern web browsers.

6
Compiled by: Maj Murad Ahmed, SUP, Sigs
107. Frontend VS Backend.
a. Frontend and Backend are the two paradigms used in web
development and are quite different from each other. Each
side needs to communicate and operate effectively with the
other as a single unit to improve any website’s
functionality.
b. The part of a website that the user interacts with directly
is termed the Frontend. It is also referred to as the ‘client
side’ of the application. HTML, CSS, and JavaScript are the
languages used for frontend development. The structure, design,
behaviour, and content of everything seen on browser screens
when websites, and web applications are the primary focus of
frontend development.
c. Of the main frontend technology, HTML acts as the skeleton
by providing a basic structure to the website layout. CSS on
the other hand provides a presentation outlook to the website
and works like skin or fashion accessories. JavaScript provides
improved interactivity with users by making the website smarter
and thus can be termed as the brain for the website.
d. Backend is the server-side of the website. It stores and
arranges data, interacts with the database, and also makes sure
everything on the client-side of the website works fine. It is
the portion of software that does not come in direct contact
with the users but 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 writing database interaction methods are
examples of backend development.
e. Few popular backend development languages are PHP,
C++, Java, Python, C# etc.

f. Fullstack development is the combination of frontend

and backend development. This implies that a fullstack
developer is an expert on both technologies.

7
Compiled by: Maj Murad Ahmed, SUP, Sigs
 CHAPTER-2
HTML
201. Introduction.
a. HTML stands for Hyper Text Markup Language, which is
the most widely used language on the Web to develop web
pages. It defines the meaning and structure of web content.
b. It is imperative to remember that HTML is not at all a
programming language, rather a markup language. A markup
language is an encoding system to format different elements
on the page for display and printing. It is interpreted by
different internet browsers and controls how a document is
displayed. Markup languages contain two main data types:
the text that will be displayed and then the markup to
describe how to display it.
c. There are more than a hundred other markup languages,
but HTML is the most common one. More than 94% of all web
pages are written in HTML.
d. An HTML document is essentially a text document having
.html or .htm extension.

202. History of HTML.

a. HTML was created by Berners-Lee in late 1991 but "HTML
2.0" was the first standard HTML specification which was
published in 1995. HTML 4.01 was a major version of HTML
and it was published in late 1999. Though HTML 4.01 is
widely used, we are currently using HTML5, which is an
extension to HTML 4.01 and was published in 2012. HTML
versions are maintained by W3 Consortium.
b. Originally, HTML was developed with the intent of
defining the structure of documents like headings,
paragraphs, lists, and so forth to facilitate the sharing
of scientific information between researchers. But
8
Compiled by: Maj Murad Ahmed, SUP, Sigs
currently, HTML5 has evolved into such a complex technology
that supports images, multimedia and a wide variety of
graphical applications.

203. Structure of HTML Web Page.

a. The image attached after this paragraph illustrates
various parts of a bare minimum html page with some
contents.

Fig-201: Structure of an HTML page.

b. In this example:
i. <!DOCTYPE html> is called doctype declaration
which defines that this is an HTML5 document.
ii. <html> element is the root element of an HTML page.
iii. <head> element contains meta information of the
HTML page.
iv. <title> element specifies a title for the HTML page
v. <body> element defines the document's body, and is
a container for all the visible contents.
vi. <h1> element defines a large heading.
vii. <p> element defines a paragraph.

c. If we open the above page with a web browser, the page

is not displayed with associated elements but rendered as
a readable page. To see the HTML structure of any webpage
like our example, you have to right click on the page window
and select the “View/See Page Source” option.

204. Understanding HTML Syntax. As we have seen in the

above example, all HTML pages begin with a DOCTYPE
9
Compiled by: Maj Murad Ahmed, SUP, Sigs
declaration. HTML document itself is enclosed with a root
component called as “html” and visible contents of the web
page are enclosed by a “body” component.
a. DOCTYPE. HTML document type declaration, also
known as DOCTYPE, is the first line of code required
in every HTML. The DOCTYPE declaration is an
instruction to the web browser about what version
of HTML the page is written.

b. Elements. An HTML element is an individual

component of an HTML document. It represents semantics
or meaning. For example, the title element represents
the title of the document. Most HTML elements are
written with a start tag (or opening tag) and an end
tag (or closing tag), with content in between. HTML
elements are again of two types:
i. Block Level. A block level element makes up
the document structure. A block element occupies
100% of the available width and it is rendered with
a line break before and after. Few block level
elements are <div>, <p>, <form>, <footer>, <table>
etc.
ii. Inline. An inline element adds some format to
the content. It does not take up full width but
just occupies as much space as the content needs.
Also, inline elements are not rendered with any
new line break. For example, <a>, <span>, <img>,
<input> etc.

Fig-202: Structure of an HTML element.

c. Tags. HTML tags are keywords which define how web
browsers will format and display the content. HTML tags
contain three main parts: opening tag, content and
closing tag. But some HTML tags are unclosed tags. All
tags are enclosed within <>.

10
Compiled by: Maj Murad Ahmed, SUP, Sigs
 d. Attributes. HTML attributes are special
declarations which define additional properties or
information about the elements or attributes are the
modifiers of the HTML element. Attributes are always
specified in the start tag (or opening tag) and usually
consist of name/value pairs like name=”value”.
Attribute values should always be enclosed in quotation
marks (double or single). There are a few attributes
in HTML5 that do not consist of name/value pairs but
consist of just name.

Fig-203: HTML elements with attributes.

There are a few attributes such as id, class, style,
and title that apply to all available HTML elements.
These are called as general purpose attributes. Their
usages are described below:
 id: This attribute is used to give a unique
name or identifier to an element within a document.
 class: This attribute is used to give a group
name or identifier to a number of elements within
a document or across multiple documents.
 title: This attribute is used to provide
advisory text or hint about an element or its
content.
 style: This attribute is used to specify CSS
styling rules such as color, font, border, etc.
for the content directly within the element.
[Note: id and class attributes are used to select
the element using CSS or JavaScript.]
e. Head. The <head> element primarily is the
container for all the head elements, which provide
extra information about the document (metadata), or
reference to other resources that are required for the
document to display or behave correctly in a web
browser. The head elements collectively describe the
properties of the document such as:
 Describe the document title.
11
Compiled by: Maj Murad Ahmed, SUP, Sigs
  Provide meta information like character set.
 Instruct the browser where to find the style
sheets or scripts.
The HTML elements that can be used inside
the <head> are: <title>,<link>, <style>, <meta> and
<script> etc.
f. Body. The <body> element contains all the contents
of an HTML document, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc. The <body> tag
is the last child of <html> tag. There can be only one
<body> tag in any HTML document.
g. Meta. Usually, within the head tag, additional
important information about a document is described in
a variety of ways. The <meta> tag is commonly used to
provide additional information such as keywords,
descriptions, author information, and other metadata
that may be used by the browser to render the document
correctly, or it may be used by the search engines for
indexing purposes.
205. Heading. An HTML heading tag is used to define the
headings of a page. By default, browsers display headings
in larger and bolder font than normal text. HTML offers six
levels of heading tags, <h1> through <h6>; The lower the
heading level number, the greater its importance. Therefore
<h1> tag defines the most important, whereas the <h6> tag
defines the least important heading in the document.

Fig-204: HTML headings with default styles.

Headings in HTML are not used to make any text large or
bold, rather they are used to define the title for any block
of HTML elements or part of the HTML document.
206. Paragraph. The <p> tag in HTML defines a paragraph.
These have both opening and closing tags. So anything
mentioned within <p> and </p> is treated as a paragraph.
If a user adds multiple spaces within words, the browser
reduces them to a single space. If a user adds multiple

12
Compiled by: Maj Murad Ahmed, SUP, Sigs
lines between sentences, the browser reduces them to a
single line.

Fig-205: HTML paragraph with default styles.

207. Div. The <div> tag or division tag is used in HTML to

make divisions of content on the web page. It is used as a
generic container for HTML elements, which can be
eventually styled with CSS or manipulated with JavaScript.
The <div> tag is normally identified by using the class or
id attribute. This is a block level element and is the most
used element in modern HTML.
208. Span. Like <div> tag, <span> also acts as a generic
container for displaying content. But span is not a block
level element like div, which means it does not take 100%
width of its parent element. Also, it does not introduce
any new lines at the beginning or at the end.
209. Images. HTML <img> tag is used to display image on the
web page. Images are not directly inserted into the
document; they are linked to the HTML pages.
The <img> element creates a holding space to embed the
referenced image. A complete <img> tag example is given
below:
<img src="image_url" height="90" width="90" alt="image alt text">
 src - Specifies the path to the image, it is a required
attribute that must be provided to display the
referenced image correctly.
 alt - Specifies an alternate text for the image, if the
image for some reason cannot be displayed. This is also
a required attribute for accessibility.
 width - Specifies the image width in pixels, it is an
optional attribute.
 height - Another optional attribute that specifies the
image height in pixels.

210. Tables. The <table> tag is used to define a table

in HTML. A table in HTML consists of table cells organized
13
Compiled by: Maj Murad Ahmed, SUP, Sigs
into rows and columns. By default, table elements do not
have any borders.
 Rows. Each table row starts with a <tr> tag
which means table row.
 Columns. Each table column starts with a <td> tag
which means table data. Columns or table data elements
are the data containers of table elements. They can
contain any kind of HTML elements.
 Table Headers. Headers are essential in tables to
provide data descriptions. Table headers are displayed
using <th> tags.

In addition to these, row and column widths can be modified

using ‘rowspan’ and ‘colspan’ attributes respectively.

Fig-206: HTML Table with default output.

211. Lists. HTML Lists are used to display information in
list form. All lists contain one or more list items <li>.
There are three different types of HTML lists each with a
very specific purpose:
a. Unordered List. The <ul> tag is used to create a
list of items, in no particular order. Here the
relative order of the list items is not important. The
list items in unordered lists are marked with bullets.

14
Compiled by: Maj Murad Ahmed, SUP, Sigs
 Fig-207: HTML Unordered List.
b. Ordered List. The <ol> tag is used to create a list
of related items, in a specific order. In this case,
the relative order of the list items is important. The
list items in an ordered list are marked with numbers.

Fig-208: HTML Ordered List.

c. Description List. The <dl> tag is used to create a

list of terms and their descriptions. The <dl> element
is used in conjunction with the <dt> element which
specifies a term, and the <dd> element which specifies
the term's definition. Browsers usually render the
definition lists by placing the terms and definitions
in separate lines, where the term's definitions are
slightly indented.

Fig-209: HTML Description List.

15
Compiled by: Maj Murad Ahmed, SUP, Sigs
212. HTML Links. An HTML link or hyperlink is a connection
from one Web resource to another. Links allow users to move
seamlessly from one page to another, on any server anywhere
in the world. HTML <a> tag (anchor tag) defines a hyperlink.
A hyperlink essentially does not need to be text only,
images or any other HTML element can be hyperlinked. Any
content that appears between <a> tag becomes a part of the
hyperlink. If any user brings a mouse cursor on any link,
it changes to a hand pointer. A hyperlink syntax is as
follows:

<a href=”url”>Link Content</a>

The href attribute specifies the target of the link.

213. HTML Inputs. The HTML <input> tag is used to declare
an input element − an element that allows the user to input
data. A wide variety of inputs are available which can be
defined by a “type” attribute. Inputs are mostly used as
building blocks for any HTML form.

<input type=”desired_input_type”>

Some of the most commonly used input types are given below:
Input Type Description
text Defines a single line text input field
textarea Defines a multiline text input field
password Defines a password input field
submit Define button to submit the form to server
reset Defines a button to reset all values in form
radio Defines a radio button which allows select one
option
checkbox Defines checkboxes which allow select multiple
options form
button Defines a simple button, which can be
programmed to perform a task on click
file Upload a file from device storage
image Defines a graphical submit button
Table: HTML input types.
It is always a good practice to provide a description for
any input field with the <label> tag.

16
Compiled by: Maj Murad Ahmed, SUP, Sigs
 Fig-210: HTML Description List.

214. HTML Forms. HTML Forms are required to collect

different kinds of user inputs, such as contact details
like name, email address, phone numbers, or details like
credit card information, etc. Users complete a form by
modifying its controls e.g., entering text, selecting
items, etc. and submitting this form to a web server for
further processing. The <form> tag is used to create an
HTML form.
The most important form attributes are:
Specifies the URL of the program or script on the
action web server that will be used for processing the
information submitted via form.
Specifies the HTTP method used for sending the
method data to the web server by the browser. The value
can be either get (the default) and post.

Fig-211: HTML Form Example.

17
Compiled by: Maj Murad Ahmed, SUP, Sigs
215. Line Breaks. The <br> tag is used to insert a line
break (to introduce a new line) on the web page. It is an
empty tag, which means the closing tag </br> is not
required. It is useful to present text with the desired
line format. For example:

Fig-212: HTML line break with default output.

216. Horizontal Lines. The <hr> tag in HTML stands for
horizontal rule and is used to insert a horizontal rule or
a thematic break in an HTML page to divide or separate
document sections. The <hr> tag is an empty tag, and it
does not require an end tag.

Fig-213: HTML horizontal rule with default output.

217. Semantic Elements. Semantic HTML elements are those

which clearly describe their meaning in a human and machine
readable form. HTML5 emphasizes greatly on semantics as it
is easier to understand the html page contents and also it
improves accessibility for physically impaired users.
Elements such as <header>, <footer> and <article> are all
considered semantic because they accurately describe the
purpose of the element and the type of content that is
inside them.
218. Holy Grail Web Layout. Holy Grail is a layout pattern
that was very common on the web in the early 2000s. It
consists of a header, a main content area with fixed-width
navigation on the left, content in the middle and a fixed-
width sidebar on the right and then a footer. This layout
provides the most basic form in which a webpage structure
can be defined and contents can be grouped for display based
on their purpose.

18
Compiled by: Maj Murad Ahmed, SUP, Sigs
 Fig-208: Holy Grail layout of web design.

CHAPTER-3
CSS
301. Introduction.
a. CSS stands for Cascading Style Sheet, which is a simple
design language intended to simplify the process of making
web pages presentable. It is generally used with HTML to
change the style of web pages and user interfaces.
b. CSS is created and maintained through a group of people
within the W3C called the CSS Working Group. The current
existing version of CSS is CSS3 which was introduced along
with HTML5.
302. Why is CSS Required?
a. CSS handles the look and feel part of a web page. Using
CSS, we can control the colour of the text, the style of
fonts, the spacing between paragraphs, how columns are
sized and laid out, what background images or colours are
used, layout designs, and variations in display for
different devices and screen sizes as well as a variety of
other effects.
b. CSS is extensively used because of the following
characteristics:
i. CSS is easier to learn and use.
ii. Webpages load much faster with CSS.
19
Compiled by: Maj Murad Ahmed, SUP, Sigs
 iii. CSS saves a lot of time for defining or changing
the styles of all or a few elements in a webpage.
iv. CSS makes it easier to maintain a website.
v. CSS supports almost all device types.
vi. CSS adds a nice look to HTML pages which are
usually rendered completely plain.

303. Methods to Add CSS to HTML.

304. Understanding CSS Syntax.

305. Styling Text Elements.

306. Styling Div Elements.

307. Positioning Div Elements to Make a Layout.

308. Styling a Holy Grail Web Layout with CSS.

309. Responsive Web Design.

Media Queries.

310. Responsive CSS Frameworks.

Making Use of Bootstrap.

CHAPTER-4
WEB DEVELOPMENT WITH WORDPRESS
401. Introduction

402. Why Use any CMS Like WordPress?

403. Installing WordPress

404. The WordPress Dashboard

405. WordPress Settings

406. Understanding Posts

Adding A Post
Post Status
Adding Post Thumbnail
Editing a Post
Deleting a Post

20
Compiled by: Maj Murad Ahmed, SUP, Sigs
407. Understanding Pages
Adding a Page
Editing a Page

408. Changing WordPress Appearance with Themes

Installing a Theme
Switching Themes
Deleting Themes
The Customizer

409. WordPress Menus

Adding a Menu
Adding Links to Menu
Menu Positions

410. Extending WordPress Functionalities with Plugins

Adding an Image Slider
Adding a Contact Form

411. The Gutenberg Page Editor

Blocks
Heading Block
Paragraph Block
Image Block
Third Party Blocks

21
Compiled by: Maj Murad Ahmed, SUP, Sigs