INTRO TO

WEB DEVELOPMENT

Slides Prep By – Maj Murad Ahmed

UNDERSTANDING
HOW WEB WORKS
 INTRODUCTION TO WEB

• World Wide Web (WWW), which is also commonly known as W3

or web is an interconnected system of public webpages
• Websites contain text pages, digital images, audio, videos, etc
as contents
• Users can access the content of these sites from any part of the
world over the internet using their devices
• WWW, along with the internet, enable the retrieval and display
of text and media to user devices.
 UNIFORM RESOURCE LOCATION (URL)

• Webpages are given an online address called 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:
 INTERNET vs WWW
• Most people use the terms “Internet” and “WWW”
interchangeably.
• Internet and WWW are two completely different entities.
• The Internet is a worldwide network of connected
computing devices which enables data communication
between remote locations.
• The WWW (or web) is one of many applications built on
top of the Internet which enables easier global exchange
of information through standard protocols.
 HISTORY OF WWW
• Development of the World Wide Web was
begun in 1989 by Tim Berners-Lee and his
colleagues at CERN. He created a protocol,
HyperText Transfer Protocol (HTTP), which
standardized communication between servers
and clients.
• Internet and the hypertexts were already available
technology by that time, but no one thought
about how to use the internet to share data with
another. Tim focused on three main technologies
HTML, URL, and HTTP.
• 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
 WHO CONTROLS WWW?

• As WWW gained popularity, 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.
• 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.
• W3 Consortium works continuously so that it can introduce new web standards
before it is phased out.
 SERVER-CLIENT ARCHITECTURE

• The Web works on the basic client-server architecture.

• 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.
• 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.
 HTTP

• 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.
• Presently two versions of HTTP are in use, plain HTTP and HTTPS.
HTTP uses port 80 while HTTPS uses port 443.
 HTTP REQUESTS & REPONSES
• 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.

• 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.
 HTTP vs HTTPS

• The full form of HTTPS is Hypertext Transfer Protocol Secure. 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 HTTPS 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.
 WEB BROWSERS

• 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.
• 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.
• Few of the most common and popular modern web browsers include
Chrome, Mozilla Firefox, Internet Explorer (IE), Opera, UC Browser and
Safari.
 WEB DEVELOPMENT
• Frontend and Backend are the two paradigms used in web development.
• The part of a website that the user interacts with directly is termed the Frontend
or ‘client side’ of the application. HTML, CSS, and JavaScript are the languages
used for frontend development. HTML acts as the skeleton, CSS works like skin
or fashion accessories and JavaScript be termed as the brain for the website.
• Backend is the server-side of the website and does not come in direct contact
with the users. It stores and arranges data, interacts with the database, and also
makes sure everything on the client-side of the website works fine. Activities like
writing APIs, creating libraries, and writing database interaction methods are
examples of backend development. Few popular backend development
languages are PHP, C++, Java, Python, C# etc.
• Fullstack development is the combination of frontend and backend
development. This implies that a fullstack developer is an expert on both
technologies.
INTRODUCTION TO
HTML
 INTRODUCTION TO HTML

• 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.
• 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.
• 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.
• An HTML document is essentially a text document having .html or .htm extension.
 HISTORY OF HTML
• HTML was created by Berners-Lee in late 1991.
• HTML v2.0 was the first standard HTML specification which was
published in 1995.
• HTML v4.01 was a major version of HTML and it was published in late
1999.
• 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.
• Originally, HTML was developed with the intent of defining the
structure of documents but currently, HTML5 has evolved into such a
complex technology that supports images, multimedia and a wide
variety of graphical applications.
STRUCTURE OF AN HTML PAGE

<!DOCTYPE html> is called doctype declaration

<html> element is the root element of an HTML page
<head> element contains meta information of the page
<title> element specifies a title for the HTML page
<body> element is a container for all contents
<h1> element defines a heading
<p> element defines a paragraph
 HTML SYNTAX
• All HTML pages begin with a DOCTYPE declaration.
• DOCTYPE is the first line of code required in every HTML
document. The DOCTYPE declaration is an instruction to
the web browser about the HTML version of the page.
• HTML document itself is enclosed with a root component
called as “html”.
• Few information describing the contents of the webpage
appears within the “head” component.
• Visible contents of the web page are enclosed by a “body”
component.
 HTML ELEMENTS
• An HTML element is an individual component of an HTML document. It
represents semantics or meaning.
• 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.
HTML ELEMENTS STRUCTURE
 HTML TAG & ATTRIBUTE
HTML TAG
• 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 <>.
HTML ATTRIBUTES
• HTML attributes are special declarations which define additional properties or
information about the elements.
• Attributes are always specified in the start tag (or opening tag).
• Attributes 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 names.
 HTML GENERAL PURPOSE ATTRIBUTES
There are a few attributes 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.]
HTML TAG & ATTRIBUTE
 HTML HEAD
• The <head> element 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:
o Describe the document title.
o Provide meta information like character set.
o 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.
 HTML BODY & META
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.
Meta
• Usually, within the head tag, additional important information about a
document is described in a variety of ways enclosed by the <meta> tag.
• 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.
• It may be used by search engines for indexing purposes.
 HTML HEADINGS

• 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.
• 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
HTML HEADINGS
 HTML PARAGRAPHS
• 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 lines between
sentences, the browser reduces them to a single line.
 HTML DIVS & SPAN
Div
• The <div> tag or division tag is used in HTML to make divisions of content
on the web page. This is a block level element and is the most used element
in modern HTML.
• 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.
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.
 HTML 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.
<img src="image_url" height="90" width="90" alt="img_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.
 HTML LISTS

• HTML Lists are used to display information in list form.

• All lists contain at least one or more list items <li>.
• There are three different types of HTML lists each with a very
specific purpose:
o Unordered Lists
o Ordered Lists
o Dictionary Lists
 HTML LISTS
Unordered Lists
• <ul> tag is used to create an unordered list of items, in no
particular order list items are marked with bullets.
• Here the relative order of the list items is not important.
 HTML LISTS
Ordered Lists
• <ol> tag is used to create an ordered list of items, in a
specific order and list items are marked with numbers.
• Here the relative order of the list items is important.
 HTML LISTS
Description Lists
• <dl> tag is used to create a list of terms and their descriptions.
• <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.
 HTML LINKS
• An HTML link or hyperlink is a connection from one 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 href=”url”>Link Content</a>

href attribute specifies the target of the link
[Task: Study and practice the use of target attribute for HTML links]
 HTML LINE BREAKS & HORIZONTAL RULES

Line Breaks
• <br> tag is used to insert a line break (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.

Horizontal Rules
• <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
visually.
• It is an empty tag, so an end tag is not required.
 HTML TABLES
• The <table> tag is used to define a table in HTML.
• A table in HTML consists of table cells organized into rows and
columns. By default, table elements do not have any borders.
o Rows. Each table row starts with a <tr> tag which means table row.
o 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.
o Table Headers. Headers are essential in tables to provide data
descriptions. Table headers are displayed using <th> tags.
• In addition, there are number of attributes to modify various properties
of table element.
• By default table element is rendered without any borders.
HTML TABLES
 HTML INPUTS
• The HTML <input> tag is used to declare an input element .
• It is an element that allows the user to input data.
• A wide variety of inputs are available which is defined by a “type” attribute.
• Inputs are mostly used as building blocks for any HTML form.
• It is always a good practice to provide a description for any input field with
the <label> tag.
<input type=”desired_input_type”>

[Task: Study and practice the use of type attribute for HTML inputs.
Read about other attributes for input elements as well]
 HTML INPUT TYPES

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 to select multiple options
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
 HTML FORMS
• HTML Forms are required to collect different kinds of user inputs, such as contact
details like survey data, personal information, credit card information, etc.
• Users complete a form by modifying its input 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.
• Most important form attributes are:

Specifies the URL of the program or script on the web

action server that will be used for processing the information
submitted via form.
Specifies the HTTP method used for sending the data to
method the web server by the browser. The value can be either
get (the default) and post.
HTML FORMS
 HTML 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.
 HTML HOLY GRAIL LAYOUT

• Holy Grail is a layout pattern that was

very common on the web in the early
2000s.
• It consists of a header, the main content
area with fixed-width navigation on the
left, content in the middle and a fixed-
width sidebar on the right and a footer.
• This layout provides the most basic and
practical form in which a webpage
structure can be defined and contents
can be grouped for display based on
their purpose.
INTRODUCTION TO
CSS
 INTRODUCTION TO CSS

• 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.
• 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.
 WHY IS CSS REQUIRED?
• 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, spacing, sizes,
background.
• CSS is extensively used because of the following characteristics:
i. CSS is easier to learn and use.
ii. Webpages load much faster with CSS.
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.
 UNDERSTANDING CSS SYNTAX
• A single line of CSS is called as a CSS rule or a declaration.
• CSS rules are interpreted by the browser and then applied to the
corresponding elements in your document.
• A browser engine is designed in a way to paint elements of the page
with specific features, like colors, positioning, or decorations.
• Each CSS rule is delimited by a “;” (semi-colon) at the end.
• A CSS rule mainly has two parts: property-value pair.
• Property-value pairs are enclosed within a pair of curly braces after
the selector.
• Multiple rules can be applied to a single selector at the same time, in
this case the group of applied rules is called as a CSS block.
 UNDERSTANDING CSS SYNTAX

• Practically CSS block is made of three parts:

o Selector − A selector is an HTML tag at which a style will be
applied. This could be any tag like <h1> or <table> etc.
o Property − A property is a type of attribute of HTML tag. Put
simply, all the HTML attributes are converted into CSS properties.
They could be color, border etc.
o Value − Values are assigned to properties. For example, the
color property can have value either red or #F1F1F1 etc.
 ADDING CSS TO HTML

Inline styles
Using the style attribute within the HTML start tag.
 ADDING CSS TO HTML

Embedded style
Using the <style> element within the head section of a
document.
 ADDING CSS TO HTML

External style sheets

• Using the <link> element within the head element, pointing to an
external CSS file.
• Out of all these methods, the external CSS method is the most
efficient in terms of maintenance and performance (reduced page
load time). Therefore, this is the most widely used method also, the
most advised one.
UNDERSTANDING CSS SYNTAX