1).What is World Wide Web?
World Wide Web, which is also known as a Web, is a collection of websites or web pages
stored in web servers and connected to local computers through the internet. These
websites contain text pages, digital images, audios, 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 internet, enables the retrieval
and display of text and media to your device.
2).History of the World Wide Web:
The World Wide Web was invented by a British scientist, Tim Berners-Lee in 1989. He was
working at CERN at that time. Originally, it was developed by him to fulfill the need of
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.
3). Internet and WWW, HTTP Protocol:
The Hypertext Transfer Protocol (HTTP) is the foundation of the World Wide Web
and is used to load web pages using hypertext links. HTTP is an application layer
protocol designed to transfer information between networked devices and runs on top of
other layers of the network protocol stack.
World Wide Web, which is also known as a Web, is a collection of websites or web pages
stored in web servers and connected to local computers through the internet.
For example, when a URL is entered into the browser, the browser sends an HTTP
command to the web server directing it to search and transmit the requested web
page.
Types of HTTP:
The most commonly used HTTP request methods are GET, POST, PUT, PATCH,
and DELETE. These are equivalent to the CRUD operations (create, read, update,
and delete). GET: GET request is used to read/retrieve data from a web server.
4). Request and Response, Web browser and Web
servers:
S.
No. Parameters Web Browser Web Server
Web Browser is an
Application program that A web server is a
displays a World wide program or the
web document. It usually computer that provide
uses the internet service services to other
1. Basics to access the document. programs called client.
The Web server
accepts, approves, and
The Web browser responds to the
requests the server for request made by the
the web documents and web browser for a web
2. Function services. document or service.
A web browser is a The web server is
programme that uses responsible for
websites to search the connecting websites
3. Responsibility internet for information. and web browsers.
The web server is a
The web browser acts as software or a system
an interface between the which maintain the web
server and the client and applications, generate
displays a web document response and accept
4. Interface to the client. clients data.
request–response or request–reply: is one of the basic methods
computers use to communicate with each other in a network, in which the first
computer sends a request for some data and the second responds to the request.
5).Features of Web 2.0 Web Design:
In general, the key characteristics of Web 2.0 are: -
Web-based applications can be accessed from anywhere.
Simple applications solve specific problems.
Value lies in content, not the software used to display content.
Data can be readily shared.
Distribution is bottom-up, not top-down.
Advantages of Web 2.0: -
Available at any time, any place.
Variety of media.
Ease of usage.
Learners can actively be involved in knowledge building.
Can create dynamic learning communities.
Everybody is the author and the editor, every edit that has been made can
be tracked.
User-friendly.
Updates in the wiki are immediate and it offers more sources for
researchers.
It provides real-time discussion.
6). What is concept of effective web design?
An effective website design should fulfil its intended function by conveying its
particular message whilst simultaneously engaging the visitor. Several factors
such as consistency, colours, typography, imagery, simplicity, and functionality
contribute to good website design.
10 Principles of Good Web Design: -
Less is More – Simplicity Rules.
Innovative but Not Distracting.
Aesthetically Appealing – To the RIGHT Users.
Respectful, Honest, and Engaging.
Designed for Usability and Functionality.
Cohesive in Design, Down to the Details.
Easily Understood.
Design Elements Inspire Users to go Deep
The 6 Key Elements of a Successful Website: -
A Clear Homepage Message. First impressions count for everything in business,
especially online. ...
Comprehensive Contact Details. ...
Great Design & Navigation. ...
Effective Calls to Action. ...
Mobile-Friendly. ...
SEO
7).Web design issues including Browser, Bandwidth
and Cache:
Web design issues:
• There's no clear path. ...
• Outdated design. ...
• Overused stock images and icons. ...
• Too many textures and colors. ...
• Design for the wrong reasons. ...
• Cute that doesn't cut it. ...
• Your site isn't optimized for mobile. ...
• You play hard to get
Common activities that can cause bandwidth
problems include:
• Streaming videos on YouTube, Netflix.
• Large file transfers between computers (greater than 100 megabytes
in size).
• Constant stream of data (surveillance footage from security cameras).
• Downloading files from the internet.
Cache: -
Caching as a solution to the performance/latency/throughput
problems means there is more complexity, which will lead to more
bugs. Bugs with caches can be subtle and difficult to debug, and
bugs with caches can also cause live site outages. When browsers
use cache files when they should be downloading the files, cache
issues occur.
8). Display resolution, Look and Feel of the Web
Display Resolution
• Display resolution always affect in visualization of web site.
• While designing web site, you have to consider possible
display resolutions of your expected user’s client.
• Display resolution is measured in terms of pixels. 800 X
600 and 1024 X 786 are common resolutions.
• Look and feel of the web site decide the overall
Look and feel-
appearance of the website. It includes all the design,
aspects such as website theme, web typography, graphics,
visual structure, navigation etc.
Website Theme-
• Website theme emphasizes on the unification of design that
should be reflected in each element of the design such that all
pages of website hold together and give the impression of a
single unit.
• Website theme should reflect the objective of the organization
and convey the message of it.
Font, Graphics and colors-
• On paper, we are all used to reading serif fonts and
Times New Roman.
• On screens, however, sans‐serif fonts are easier to
read.
• The most readable screen font is Verdana, Century
• Gothic, Tahoma and Arial.
9).HTML: Basics of HTML, formatting and fonts,
commenting code, color, hyperlink, lists, tables, images,
forms:
HTML stands for HyperText Markup Language. It is used to design web pages using
the markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between the web pages and markup language
defines the text document within the tag that define the structure of web pages.
HTML Basics by understanding all the basic stuff of HTML coding. There are
various tags that we must consider and include while starting to code in HTML.
These tags help in the organization and basic formatting of elements in our script
or web pages. These step-by-step procedures will guide you through the process of
writing HTML.
HTML Formatting Elements
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
10).Browser architecture and Web site structure.
The architecture of a web browser has certain components. They
are Controller/Dispatcher, Interpreter, and Client Programs. The control unit in a
CPU is a controller that takes in the input, interprets it, and then instructs the device
to work in a certain way.
User Interface: This is the user interface for the browser. It includes the
Address Bar, back button, Bookmarking options, Refresh button, etc.
The Browser Engine: The browser engine marshals actions between the
browser’s user interface and the browser’s rendering [Link] you
type in a new website and press the enter key, the browser UI will tell the
browser engine, which will then communicate with the rendering engine.
The Rendering Engine: The rendering engine will start by getting the
contents of the requested document from the networking layer.
Networking Layer: The Networking Layer is responsible for making network
calls to fetch resources.
JavaScript Engine: The JavaScript Engine is used to parse and execute
JavaScript code on the DOM or CSSOM. The JavaScript code is provided by
the web server, or it can be provided by the web browser (browser
extensions or features of the browser like automatic ad-blocking).
UI Backend: This layer is responsible for drawing the basic widgets like
select or input boxes and windows. Underneath it uses operating system
UI methods.
Data Storage: The browser needs to save data locally (cookies, cache,
etc.) so the Data Storage component handles this part.
Website: Website, as the name suggests, is basically a set of
interconnected webpages that contain text, images, video, etc. and share a
unique domain name. Its primary goal is to increase sales, products, etc.,
that in turn increase the growth of business.
It includes content, information, images, videos, hyperlinks to visit
different web pages, etc.
The four types of website structures we'll be going over are: hierarchical,
webbed, linear and database.
Hierarchical website structure (AKA tree model) ...
Linear website structure (AKA sequential model) ...
Webbed website structure (AKA network model) ...
Database website structure…
11). Overview and features of HTML5.
It allows developers to embed a video or audio on their website. HTML5 video can
use CSS and CSS3 to style the video tag. You can change the border, opacity,
reflections, gradients, transitions, transformations, and even animations.
HTML5 makes adding video super-fast and without having to build a video
player.
New Semantic Elements − These are like <header>,
<footer>, and <section>.
Forms 2.0 − Improvements to HTML web forms where new
attributes have been introduced for <input> tag.
Persistent Local Storage − To achieve without resorting to
third-party plugins.
WebSocket − A next-generation bidirectional communication
technology for web applications.
Server-Sent Events − HTML5 introduces events which flow
from web server to the web browsers and they are called
Server-Sent Events (SSE).
Canvas − This supports a two-dimensional drawing surface
that you can program with JavaScript.
Audio & Video − You can embed audio or video on your
webpages without resorting to third-party plugins.
Geolocation − Now visitors can choose to share their physical
location with your web application.
12). introduction to CSS, basic syntax and structure.
A CSS Syntax rule consists of a selector, property, and its value. The selector
points to the HTML element where CSS style is to be applied. The CSS
property is separated by semicolons. It is a combination of selector name
followed by the property: value pair that is defined for the specific selector.
It sets the background color, font-size, font-family, color, … etc property of elements
on a web page.
There are three types of CSS which are given below:
Inline CSS.
Internal or Embedded CSS.
External CSS.
.Structre of css.
<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<title>My CSS experiment</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
13).Introduction to XML, uses of XML, simple XML,
XML keycomponents.
XML (Extensible Markup Language) is a markup language similar to HTML, but without
predefined tags to use. Instead, you define your own tags designed specifically for your
needs. This is a powerful way to store data in a format that can be stored, searched, and
shared.
XML - declaration is not a tag. It is used for the transmission of the meta-
data of a document.
<?xml version="1.0" encoding="UTF-8"?>
Thousands of XML formats exist, in many different industries, to
describe day-to-day data transactions:
Stocks and Shares.
Financial transactions.
Medical data.
Mathematical data.
Scientific measurements.
News information.
SimpleXML is an extension that allows us to easily manipulate and get
XML data. SimpleXML provides an easy way of getting an element's name,
attributes and textual content if you know the XML document's structure or
layout.
Components of an XML file are:
Processing Instructions: An XML Documents usually begins with the XML
declaration statement called the Processing Instructions.
Tags: Tags are used to specify a name for a given piece of information.
Elements.
Attributes.
Entities.
14). Using XML with application
XML has a variety of uses for Web, e-business, and portable applications. The
following are some of the many applications for which XML is useful: Web
publishing: XML allows you to create interactive pages, allows the customer to
customize those pages, and makes creating e-commerce applications more intuitive.
15). Transforming XML using XSL and XSLT PHP:
Create a processor by creating a new XsltProcessor object: $processor = new
XsltProcessor ; Parse the XML and XSL files into DOM objects: $xml = new
DomDocument ; $xml -> load ( $filename ); $xsl = new DomDocument ; $xsl -> load
( $filename );
16). Introduction and basic syntax of PHP, decision and
looping with examples,
A PHP file normally contains HTML tags, and some PHP scripting code. Below, we have an
example of a simple PHP file, with a PHP script that uses a built-in PHP function " echo " to
output the text "Hello World!"
PHP has three types of comment syntax:-
/* */which serves as block comments, and // as well as # which are used for
inline comments. Many examples use the print function instead of the echo
function.
PHP provides us with four conditional statements:
if statement
if…else statement
if…elseif…else statement
switch statement
<?php
$x = 12;
if ($x > 0) {
echo "The number is positive";
}
?>
17). PHP and HTML.
PHP is used for server-side programming which will interact with databases to retrieve
information, storing, email sending, and provides content to HTML pages to display on the
screen. HTML is used for specifying colors, text formatting, aligning, etc. PHP is easy to
learn but not as much as HTML
PHP is a scripting language, whereas HTML is a markup language. HTML
determines the general structure and content of a web page, while PHP provides dynamic
content through scripts. PHP is typically a server-side language, while HTML is client-side.
18). Object Oriented Programming with PHP
From PHP5, you can also write PHP code in an object-oriented style. Object-Oriented programming
is faster and easier to execute.
The PHP Object-Oriented Programming concepts are:
Class
Objects
Inheritance
Interface
Abstraction
Magic Methods
<?php
class phpClass {
var $var1;
var $var2 = "constant string";
function myfunc ($arg1, $arg2) {
[..]
}
[..]
}
?>
19). PHP and MySQL: Basic commandswith PHP
examples:
php $servername = "localhost"; $username = "username"; $password = "password";
try { $conn = new PDO("mysql:host=$servername;dbname=newDB", $username,
$password);
// setting the PDO error mode to exception $conn->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
$sql = "CREATE DATABASE newDB"; // using exec()
[Link] MySQL Database at the Localhost. Create Database. Create a Folder in htdocs.
Create Database Connection File In PHP. ...
[Link] MySQL Database at Cloudways Server. Create Database Connection. MySQLi
Procedural Query. ...
[Link] MySQL.
[Link] MySQL Management tools. MySQL Workbench. Navicat For MySQL. ...
[Link].
20). Connection to server, creating database, selecting a
database:
Creating a database is simple, mostly because there’s nothing much to it. Use the
SQL statement CREATE DATABASE. You will have to provide a name for the database
with this SQL statement. You could call it something bland like db1.
CREATE DATABASE rookery;
DROP DATABASE rookery;
CREATE DATABASE rookery
CHARACTER SET latin1
COLLATE latin1_bin;
SHOW DATABASES;
+--------------------+
| Database |
+--------------------+
| information_schema |
| rookery |
| mysql |
| test |
+--------------------+
CREATE TABLE birds (
bird_id INT AUTO_INCREMENT PRIMARY KEY,
scientific_name VARCHAR(255) UNIQUE,
common_name VARCHAR(50),
family_id INT,
description TEXT);
21). PHP myadmin and databasebugs:
phpMyAdmin is an open-source software tool introduced on September
9, 1998, which is written in PHP. Basically, it is a third-party tool to
manage the tables and data inside the database. phpMyAdmin supports
various type of operations on MariaDB and MySQL. The main purpose of
phpMyAdmin is to handle the administration of MySQL over the web.
Features of phpMyAdmin:-
o phpMyAdmin can create, alter, browse, and drop databases, views,
tables, columns, and indexes.
o It can display multiple results sets through queries and stored
procedures.
o phpMyAdmin use stored procedure and queries to display multiple
results sets.
o It supports foreign keys and InnoDB tables.
o phpMyAdmin can track the changes done on databases, views, and
tables.
o We can also create PDF graphics of our database layout
Prerequisite
o Web server - Apache, Nginx, IIS
o PHP
o Database - MySQL, MariaDB
o Web Browser
