Web Eng PDF
Web Eng PDF
Web Eng PDF
Static Websites
A static site is a website that is written entirely using HTML. Each web page is a separate
document and there are no databases or external files that are drawn upon.
This means that the only way to edit this type of website is to go into each page and edit the
HTML. So you would have to do it yourself using a web page editor such as FrontPage or
Dreamweaver, or pay your web developer to make updates for you.
Dynamic Websites
A dynamic website is written using more complex code such as PHP or ASP and has a
greater degree of functionality. For instance, many dynamic websites can be controlled by a
content management system. This means that you will potentially be able to make updates
without needing any knowledge of HTML or any website software.
Each page of a dynamic website is generated from information stored in a database or external
file. And the content management system that you may use to maintain your website directly
modifies this stored information.
future addons such as data feeds or a comprehensive site search. They also make it impossible to
destroy the layout, as might happen if you edit it from a web page editor.
There are some drawbacks to using dynamic websites. First, they usually cost more to develop,
because they require more complex coding, as well as the development of a content management
interface to enable you to maintain your website. Second, you will need to obtain web hosting
which supports databases and dynamic languages. Fortunately, most hosts do offer these features
by default.
If you realize that you do want a dynamic website which will enable you to maintain your own
content, you can save costs by opting for a website that is only partly dynamic. For example,
certain pages such as About Us or Contact Us pages can be static, whereas galleries or
product catalogues can be dynamic. Also, consider opting for an open source CMS.
To determine which is best for your website, also consider asking your web developer for their
opinion on which would be best.
Quick to develop
Cheap to develop
Cheap to host
Web browser
A web browser (commonly referred to as a browser) is a software application for retrieving,
presenting, and traversing information resources on the World Wide Web. An information
resource is identified by a Uniform Resource Identifier (URI/URL) and may be a web page,
image, video or other piece of content.[1] Hyperlinks present in resources enable users easily to
navigate their browsers to related resources.
Although browsers are primarily intended to use the World Wide Web, they can also be used to
access information provided by web servers in private networks or files in file systems.
The major web browsers are Firefox, Internet Explorer/Microsoft Edge,[2][3][4] Google Chrome,
Opera, and Safari.
Function
The primary purpose of a web browser is to bring information resources to the user ("retrieval"
or "fetching"), allowing them to view the information ("display", "rendering"), and then access
other information ("navigation", "following links").
This process begins when the user inputs a Uniform Resource Locator (URL), for example
http://en.wikipedia.org/, into the browser. The prefix of the URL, the Uniform Resource
Identifier or URI, determines how the URL will be interpreted. The most commonly used kind of
URI starts with http: and identifies a resource to be retrieved over the Hypertext Transfer
Protocol (HTTP).[17] Many browsers also support a variety of other prefixes, such as https: for
HTTPS, ftp: for the File Transfer Protocol, and file: for local files. Prefixes that the web browser
cannot directly handle are often handed off to another application entirely. For example, mailto:
URIs are usually passed to the user's default e-mail application, and news: URIs are passed to the
user's default newsgroup reader.
In the case of http, https, file, and others, once the resource has been retrieved the web browser
will display it. HTML and associated content (image files, formatting information such as CSS,
etc.) is passed to the browser's layout engine to be transformed from markup to an interactive
document, a process known as "rendering". Aside from HTML, web browsers can generally
display any kind of content that can be part of a web page. Most browsers can display images,
audio, video, and XML files, and often have plug-ins to support Flash applications and Java
applets. Upon encountering a file of an unsupported type or a file that is set up to be downloaded
rather than displayed, the browser prompts the user to save the file to disk.
Information resources may contain hyperlinks to other information resources. Each link contains
the URI of a resource to go to. When a link is clicked, the browser navigates to the resource
indicated by the link's target URI, and the process of bringing content to the user begins again
The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the
browser renders the page in standards mode. The DOCTYPE has no other purpose and
is therefore optional for XML. Documents with an XML media type are always handled
in standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML
syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML
language was SGML-based and therefore required a reference to a DTD. With HTML5
this is no longer the case and the DOCTYPE is only needed to enable standards mode
for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE
html>.
What is contextual selector?
Use a class when you want to consistently style multiple elements throughout the
page/site. Classes are useful when you have, or possibly will have in the future, more
than one element that shares the same style. An example may be a div of "comments"
or a certain list style to use for related links.
Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
Use the ID when you have a single element on the page that will take the style.
Remember that IDs must be unique. In your case this may be the correct option, as
there presumably will only be one "main" div on the page.
Examples of ids are: main-content, header, footer, or left-sidebar.
A good way to remember this is a class is a type of item and the id is the unique name
of an item on the page.
Inheritance
Inheritance in CSS is the mechanism through which certain properties are passed on from
a parent element down to its children. Its quite similar to inheritance in genetics, really.
If the parents have blue eyes, their children will probably have blue eyes, too.
Not all CSS properties are inherited, because it doesnt make sense for some of them to
be. For instance, margins are not inherited, since its unlikely that a child element should
need the same margins as its parent.
Using inheritance, you can for example specify the font properties for the html or body
elements and they will be inherited by all other elements. You can specify background
and foreground colours for a specific container element and the foreground colour will
automatically be inherited by any child elements in that container. The background
colour isnt inherited, but the initial value for background-color is transparent,
which means the parents background will shine through. The effect is similar to what
youd get if the background colour were inherited, but consider what would happen if
background images were inherited!
Every child would have the same background image as its parent and the result would
look like a jigsaw puzzle put together by someone with a serious drug problem, since the
background would start over for each element.
The cascade
CSS means Cascading Style Sheets, so it shouldnt come as a surprise that the cascade is
an important concept. Its the mechanism that controls the end result when multiple,
conflicting CSS declarations apply to the same element. There are three main concepts
that control the order in which CSS declarations are applied:
1. Importance
2. Specificity
3. Source order
I will look into these concepts below, one by one.
Importance is most er important. If two declarations have the same importance, the
specificity of the rules decides which one will apply. If the rules have the same
specificity, then source order controls the outcome.
Importance
A user agent style sheet is the built-in style sheet of the browser. Every browser has its
default rules for how to display various HTML elements if no style is specified by the
user or designer of the page. For instance, unvisited links are usually blue and underlined.
A user style sheet is a style sheet that the user has specified. Not all browsers support
user style sheets, but they can be very useful, especially for users with certain types of
disabilities. For instance, a dyslexic person can have a user style sheet that specifies
certain fonts and colours that help reading
String
Integer
Float (floating point numbers - also called double)
Boolean
Array
Object
NULL
Resource
PHP String
A string is a sequence of characters, like "Hello world!".
A string can be any text inside quotes. You can use single or double quotes:
Example
<?php
$x = "Hello world!";
$y = 'Hello world!';
echo $x;
echo "<br>";
echo $y;
?>
PHP Integer
An integer is a whole number (without decimals). It is a number between -2,147,483,648
and +2,147,483,647.
Rules for integers:
In the following example $x is an integer. The PHP var_dump() function returns the data
type and value:
Example
<?php
$x = 5985;
var_dump($x);
?>
Run example
PHP Float
A float (floating point number) is a number with a decimal point or a number in
exponential form.
In the following example $x is a float. The PHP var_dump() function returns the data
type and value:
Example
<?php
$x = 10.365;
var_dump($x);
?>
Run example
PHP Boolean
A Boolean represents two possible states: TRUE or FALSE.
$x = true;
$y = false;
Booleans are often used in conditional testing. You will learn more about conditional
testing in a later chapter of this tutorial.
PHP Array
An array stores multiple values in one single variable.
In the following example $cars is an array. The PHP var_dump() function returns the data
type and value:
Example
<?php
$cars = array("Volvo","BMW","Toyota");
var_dump($cars);
?>
Run example
You will learn a lot more about arrays in later chapters of this tutorial.
PHP Object
An object is a data type which stores data and information on how to process that data.
In PHP, an object must be explicitly declared.
First we must declare a class of object. For this, we use the class keyword. A class is a
structure that can contain properties and methods:
Example
<?php
class Car {
function Car() {
$this->model = "VW";
}
}
// create an object
$herbie = new Car();
// show object properties
echo $herbie->model;
?>
Run example
You will learn more about objects in a later chapter of this tutorial.
PHP Resource
The special resource type is not an actual data type. It is the storing of a reference to
functions and resources external to PHP.
A common example of using the resource data type is a database call.
We will not talk about the resource type here, since it is an advanced topic.
Fundamental Difference is probably the Visibility - GET request is sent via the
URL string (appended to the URI with a question-mark as separator), which is
visible whereas POST request is encapsulated in the body of the HTTP request
and can't be seen.
Length - Since, GET request goes via URL, so it has a limitation for its length. It
can't be more than 255 characters long (though this is browser dependent, but
usually the max is 255 characters only). Whereas no such maximum length
limitation holds for the POST request for the obvious reason that it becomes a part
of the body of the HTTP request and there is no size limitation for the body of an
HTTP request/response.
Performance - GET request is comparatively faster as it's relatively simpler to
create a GET request and the time spent in the encapsulation of the POST request
in the HTTP body is saved in this case. In addition, the maximum length
restriction facilitates better optimization of GET implementation.
Type of Data - GET request is sent via URL string and as we all know that URL
can be text-only, so GET can carry only text data whereas POST has no such
restriction and it can carry both text as well as binary data.
Caching/Bookmarking - again for the obvious reason that a GET request is
nothing but an URL hence it can be cached as well as Bookmarked. No such
luxuries with a POST request.
FORM Default - GET is the default method of the HTML FORM element. To
submit a FORM using POST method, we need to specify the method attribute and
give it the value "POST".
Data Set - GET requests are restricted to use ASCII characters only whereas
POST requests can use the 'enctype' attribute with a value "multipart/form-data" to
use the Universal Multiple-Octet Coded Character Set (UCS).
PHP Operators
Operators are used to perform operations on variables and values.
PHP divides the operators in the following groups:
Arithmetic operators
Assignment operators
Comparison operators
Increment/Decrement operators
Logical operators
String operators
Array operators
Name
Example
Result
Addition
$x + $y
Sum of $x and $y
Subtraction
$x - $y
Difference of $x and $y
Show it
Show it
The PHP assignment operators are used with numeric values to write a value to a
variable.
The basic assignment operator in PHP is "=". It means that the left operand gets set to the
value of the assignment expression on the right.
Assignment
Same as...
Description
Show it
x=y
x=y
x += y
x=x+y
Addition
Show it
Name
Example
Result
Show it
==
Equal
$x == $y
Show it
===
Identical
$x === $y
Show it
Name
Description
Show it
++$x
Pre-increment
Show it
$x++
Post-increment
Show it
--$x
Pre-decrement
Show it
$x--
Post-decrement
Show it
Name
Example
Result
Show it
and
And
$x and $y
Show it
or
Or
$x or $y
Show it
Name
Example
Result
Concatenation
$txt1 . $txt2
Concatenation of $txt1
and $txt2
.=
Concatenation
assignment
$txt1 .= $txt2
Name
Example
Result
Show it
Union
$x + $y
Union of $x and $y
==
Equality
$x == $y
Show it
What is MySQL?
The data in a MySQL database are stored in tables. A table is a collection of related data,
and it consists of columns and rows.
Databases are useful for storing information categorically. A company may have a
database with the following tables:
Employees
Products
Customers
Orders
What is PHP
PHP is a scripting language that is often embedded into HTML to add functions HTML
alone can't do. PHP allows you to collect, process and utilize data to create a desired
output. In short, it let's you interact with your pages.
PHP is able to preform a number of tasks including printing data, making numeric
calculations (such as addition or multiplication), making comparisons (which is bigger,
are they equal, etc) and making simple boolean choices.
From this you can create more complex loops and functions to make your page generate
more specialized data.
What is MySQL
MySQL is a relational database system that is used to store information. MySQL can
store many types of data from something as tiny as a single character to as large as
complete files or graphics. Although it can be accessed by most programing languages, it
is often coupled with PHP because they work together with ease.
Information stored in a MySQL database hosted on a web server can be accessed from
anywhere in the world with a computer.
This makes it a good way to store information that needs the ability to change over time,
but also needs to be accessed over the net. Some examples that can utilize MySQL are a
web message board or a customer's shipping status.
mysql>
Add a database called books, enter:
mysql> CREATE DATABASE books;
Now, database is created. Use a database with use command, type:
mysql> USE books;
Next, create a table called authors with name, email and id as fields:
mysql> CREATE TABLE authors (id INT, name VARCHAR(20),
email VARCHAR(20));
To display your tables in books database, enter:
mysql> SHOW TABLES;
Sample outputs:
+-----------------+
| Tables_in_books |
+-----------------+
| authors
|
+-----------------+
1 row in set (0.00 sec)
Finally, add a data i.e. row to table books using INSERT statement, run:
mysql> INSERT INTO authors (id,name,email)
VALUES(1,"Vivek","xuz@abc.com");
Sample outputs:
Query OK, 1 row affected (0.00 sec)
Superglobals were introduced in PHP 4.1.0, and are built-in variables that are always
available in all scopes.
$GLOBALS
$_SERVER
$_REQUEST
$_POST
$_GET
$_FILES
$_ENV
$_COOKIE
$_SESSION
PHP $GLOBALS
$GLOBALS is a PHP super global variable which is used to access global variables from
anywhere in the PHP script (also from within functions or methods).
PHP stores all global variables in an array called $GLOBALS[index]. The index holds the
name of the variable.
The example below shows how to use the super global variable $GLOBALS:
Example
<?php
$x = 75;
$y = 25;
function addition() {
$GLOBALS['z'] = $GLOBALS['x'] + $GLOBALS['y'];
}
addition();
echo $z;
?>
In the example above, since z is a variable present within the $GLOBALS array, it is also
accessible from outside the function!
PHP $_SERVER
$_SERVER is a PHP super global variable which holds information about headers, paths, and
script locations.
The example below shows how to use some of the elements in $_SERVER:
Example
<?php
echo $_SERVER['PHP_SELF'];
echo "<br>";
echo $_SERVER['SERVER_NAME'];
echo "<br>";
echo $_SERVER['HTTP_HOST'];
echo "<br>";
echo $_SERVER['HTTP_REFERER'];
echo "<br>";
echo $_SERVER['HTTP_USER_AGENT'];
echo "<br>";
echo $_SERVER['SCRIPT_NAME'];
?>
Run example
The following table lists the most important elements that can go inside $_SERVER:
Element/Code
Description
$_SERVER['PHP_SELF']
$_SERVER['GATEWAY_INTERFACE']
$_SERVER['SERVER_ADDR']
$_SERVER['SERVER_NAME']
$_SERVER['SERVER_SOFTWARE']
$_SERVER['SERVER_PROTOCOL']
$_SERVER['REQUEST_METHOD']
$_SERVER['REQUEST_TIME']
$_SERVER['QUERY_STRING']
Returns the query string if the page is accessed via a query string
$_SERVER['HTTP_ACCEPT']
$_SERVER['HTTP_ACCEPT_CHARSET']
$_SERVER['HTTP_HOST']
$_SERVER['HTTP_REFERER']
$_SERVER['HTTPS']
$_SERVER['REMOTE_ADDR']
Returns the IP address from where the user is viewing the current
page
$_SERVER['REMOTE_HOST']
Returns the Host name from where the user is viewing the
current page
$_SERVER['REMOTE_PORT']
$_SERVER['SCRIPT_FILENAME']
$_SERVER['SERVER_ADMIN']
$_SERVER['SERVER_PORT']
Returns the port on the server machine being used by the web
server for communication (such as 80)
$_SERVER['SERVER_SIGNATURE']
Returns the server version and virtual host name which are
added to server-generated pages
$_SERVER['PATH_TRANSLATED']
$_SERVER['SCRIPT_NAME']
$_SERVER['SCRIPT_URI']
PHP $_REQUEST
PHP $_REQUEST is used to collect data after submitting an HTML form.
The example below shows a form with an input field and a submit button. When a user submits
the data by clicking on "Submit", the form data is sent to the file specified in the action attribute
of the <form> tag. In this example, we point to this file itself for processing form data. If you
wish to use another PHP file to process form data, replace that with the filename of your choice.
Then, we can use the super global variable $_REQUEST to collect the value of the input field:
Example
<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_REQUEST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
</body>
</html>
Run example
PHP $_POST
PHP $_POST is widely used to collect form data after submitting an HTML form with
method="post". $_POST is also widely used to pass variables.
The example below shows a form with an input field and a submit button. When a user submits
the data by clicking on "Submit", the form data is sent to the file specified in the action attribute
of the <form> tag. In this example, we point to the file itself for processing form data. If you
wish to use another PHP file to process form data, replace that with the filename of your choice.
Then, we can use the super global variable $_POST to collect the value of the input field:
Example
<html>
<body>
<form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
Name: <input type="text" name="fname">
<input type="submit">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// collect value of input field
$name = $_POST['fname'];
if (empty($name)) {
echo "Name is empty";
} else {
echo $name;
}
}
?>
</body>
</html>
Run example
PHP $_GET
PHP $_GET can also be used to collect form data after submitting an HTML form with
method="get".
$_GET can also collect data sent in the URL.
Assume we have an HTML page that contains a hyperlink with parameters:
<html>
<body>
<a href="test_get.php?subject=PHP&web=W3schools.com">Test $GET</a>
</body>
</html>
When a user clicks on the link "Test $GET", the parameters "subject" and "web" is sent to
"test_get.php", and you can then access their values in "test_get.php" with $_GET.
The example below shows the code in "test_get.php":
Example
<html>
<body>
<?php
echo "Study " . $_GET['subject'] . " at " . $_GET['web'];
?>
</body>
</html>
what is javascript?
JavaScript (/dvskrpt/[5]) is a high level, dynamic, untyped, and interpreted
programming language.[6] It has been standardized in the ECMAScript language
specification.[7] Alongside HTML and CSS, it is one of the three essential technologies of
World Wide Web content production; the majority of websites employ it and it is
supported by all modern web browsers without plug-ins.[6] JavaScript is prototype-based
with first-class functions, making it a multi-paradigm language, supporting objectoriented,[8] imperative, and functional programming styles.[6] It has an API for working
with text, arrays, dates and regular expressions, but does not include any I/O, such as
networking, storage or graphics facilities, relying for these upon the host environment in
which it is embedded.[7]
IMPORTANCE OF JAVASCRIPT IN WEB DESIGN
Since 1995, when Netscape first introduced Javascript to the World Wide Web as a
simple client-side scripting language for web browsers, Javascript has become the most
misunderstood, disliked and disdained programming language. Users and developers
were quick to point out its many design errors. Vendors implemented buggy versions of
Javascript in their also buggy web browsers. No wonder users chose to disable their
browsers ability to run Javascript code!
But now, eighteen years after Javascript first appeared, it has become the dominant
programming language of the web. All modern web browsers implement the Javascript
language, thus making it the only one deployed on all personal computers and mobile
devices around the world. Javascript has become a powerful, dynamic and fullyfunctional object-oriented programming language on par with more traditional languages
like C++. Ruby, or Java. It has advanced features such as prototypal inheritance,
modules, namespaces, anonymous (lambda) functions, and even metaprogramming. Fullblown applications such as Gmail and Google Maps are programmed in Javascript.
Today, you cannot be a web developer and not know Javascript. Its a language a serious web
developer must learn and master for the reasons discussed in this article.
Javascript is also an interpreted language. You can pause the program at a specific line of
code, modify that line and resume program execution at that line. There is no time
consuming edit-compile-execute cycle to contend with. Memory management and data
types are managed by the browser.
You can modify the code in real time and see your modifications immediately take
effect.
#3: AJAX
AJAX stands for Asynchronous Javascript and XML. It is a set of interrelated web
development technologies which enable web browsers to interact asynchronously with
the web server. Using AJAX, webpages get updated in the background without reloading
and refreshing the webpage. This means the users surfing experience is not only
uninterrupted but also dynamic because the content of the webpage is continuously
updating to the newest version. Whereas initially the web was a place for viewing static
webpages, AJAX has now transformed the web into a place where users can interact with
websites and other users as well.
#4: Powerful and Free Frameworks and Libraries
The Javascript ecosystem continues to grow, and the demand for developers who
know pure Javascript and specific Javascript libraries and frameworks is high. The
graph below shows that Javascript demand has grown more than any other
programming language.
Growth in popularity (based on jobs available) from 2012 2013
There is also a thriving community of users and developers who are not only willing to
share their experiences in various forums and conferences, but who also make their tested
and reliable code freely available in various libraries and frameworks. There are also
numerous websites offering free tutorials and training in Javascript programming.
JavaScript To Find Greatest Among 3 Numbers
/* The Following Script will display the greatest among three numbers*/
[html]
<html>
<head>
<h1>Greatest Among Three Numbers</h1>
</head>
<body>
<script type="text/javascript">
var a=10,b=20,c=7;
/* checks a>b and a>c if both conditions satisfied, A is greater */
if (a>b && a>c)
{
document.write("<b>A is greater</b>");
}
/* checks b>a and b>c if both conditions satisfied, b is greater */
if (b>a && b>c)
{
document.write("<b>B is greater</b>");
}
/* if the above two conditions were false c is greater*/
else
{
document.write("<b>C is greater</b>");
}
</script>
</body>
</html>
[/html]
The Output will be:
Greatest Among Three Numbers
B is Greater