Ecommerce Technologies File
Ecommerce Technologies File
HTML is a markup language used by the browser to manipulate text, images, and
other content, in order to display it in the required format. HTML was created by Tim
Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first
standard version was HTML 2.0, published in 1995.
1. Hyper Text: HyperText simply means "Text within Text." A text has a link within
it, is a hypertext. Whenever you click on a link which brings you to a new
webpage, you have clicked on a hypertext. HyperText is a way to link two or
more web pages (HTML documents) with each other.
3. Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A
Web page can be of the static or dynamic type. With the help of HTML only, we
can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages
with the help of styling, and which looks in a nice format on a web browser. An
HTML document is made of many HTML tags and each HTML tag contains different
content.
HISTORY OF HTML:-
The most popular markup language among the developers HTML was started at
CERN in 1989 with the idea of creating a hypertext system for the internet by Sir Tim
Berners-Lee.
HTML was first launched in 1991 with the first version of the language, HTML 1.0,
which was released in the same year. The first version of HTML was called HTML
1.0 Strict and was released in 1993.
HTML was then released in 1994 with the second version of the language, HTML 2.0,
which was released in 1995. The second version of HTML was called HTML 2.0
Transitional and was released in 1997.
Tim Berners-Lee wrote the browser and server software for HTML in 1990. Berners-
Lee and another data system engineer collaborated in 1990 to request funding but
CERN rejected the project.
In late 1991 Tim Berner-Lee publicly posted the description of HTML in a document
called HTML Tags. The first version of HTML had 18 elements which were mostly
influenced by SGML (Standard Generalized Markup Language) except for
the hyperlink. 11 of those 18 elements exist in HTML4.
The basic characteristics for each element were defined in the browsers and these
characteristics can be modified and enhanced using CSS.
DOCUMENT STRUCTURE:-
1. HTML document structure:-
HTML document is basically separated in two segments: the head (HTML head
element) and the body (HTML body element), both contained by the 'HTML' element.
You add a Document Type Declaration on top of it and get the basic document
structure for a web page.
2. The !DOCTYPE declaration:-
Every well-written HTML document begins with a basic declaration that defines what
type of document it is. This declaration is made using the HTML! DOCTYPE tag and
is the very first thing in all the document. It's intended to tell the processing agent
(e.g., browser, search engine, etc.) for which standard is designed the document that's
about to process.
A normal declaration for a document written according to the XHTML 1.0 Strict
standard should look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The content of the HTML element can be basically Divided into two parts: the head
(HTML head element) and the body (HTML body element).
BASIC TAGS:-
1. Heading Tags:-
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>,
<h4>, <h5>, and <h6>. While displaying any heading, browser adds one line before
and one line after that heading.
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
2. Paragraph Tag:-
The <p> tag offers a way to structure your text into different paragraphs. Each
paragraph of text should go in between an opening <p> and a closing </p> tag as
shown below in the example −
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
The <br /> tag has a space between the characters br and the forward slash. If you
omit this space, older browsers will have trouble rendering the line break, while if you
miss the forward slash character and just use <br> it is not valid in XHTML.
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
4. Centering Content:-
You can use <center> tag to put any content in the center of the page or any table cell.
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
5. Horizontal Lines:-
Horizontal lines are used to visually break-up sections of a document. The <hr> tag
creates a line from the current position in the document to the right margin and breaks
the line accordingly.
For example, you may want to give a line between two paragraphs as in the given
example below −
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
6. Preserve Formatting:-
Sometimes, you want your text to follow the exact format of how it is written in the
HTML document. In these cases, you can use the preformatted tag <pre>. Any text
between the opening <pre> tag and the closing </pre> tag will preserve the formatting
of the source document.
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
7. Nonbreaking Spaces:-
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a
browser to split the "12, Angry" and "Men" across two lines −
An example of this technique appears in the movie "12 Angry Men."
In cases, where we do not want the client browser to break text, you should use a
nonbreaking space entity instead of a normal space. For example, when
coding the "12 Angry Men" in a paragraph, you should use something similar to the
following code −
EXAMPLE:-
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie
"12 Angry Men."</p>
</body>
</html>
FORM ELEMENTS:-
<form> is a HTML element to collect input data with containing interactive controls.
It provides facilities to input text, number, values, email, password, and control fields
such as checkboxes, radio buttons, submit buttons, etc., or in other words, form is a
container that contains input elements like text, email, number, radio buttons,
checkboxes, submit buttons, etc. Forms are generally used when you want to collect
data from the user. For example, a user wants to buy a bag online, so he/she has to
first enter their shipping address in the address form and then add their payment
details in the payment form to place an order.
Forms are created by placing input fields within paragraphs, preformatted text, lists
and tables. This gives considerable flexibility in designing the layout of forms.
Syntax:
<form>
<!--form elements-->
</form>
FORM ELEMENTS:-
These are the following HTML <form> elements:
1. <label>: It defines label for <form> elements.
2. <input>: It is used to get input data from the form in various types such as text,
password, email, etc by changing its type.
3. <button>: It defines a clickable button to control other elements or execute a
functionality.
4. <select>: It is used to create a drop-down list.
5. <textarea>: It is used to get input long text content.
6. <fieldset>: It is used to draw a box around other form elements and group the
related data.
7. <legend>: It defines caption for fieldset elements.
8. <datalist>: It is used to specify pre-defined list options for input controls.
9. <output>: It displays the output of performed calculations.
10. <option>: It is used to define options in a drop-down list.
11. <optgroup>: It is used to define group-related options in a drop-down list.
INTRODUCTION :-
Advantages of CSS :-
CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as
many Web pages as you want.
Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison to
HTML attributes.
Multiple Device Compatibility − Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
Global web standards:- Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.
Types of CSS (Cascading Style Sheet):-
Cascading Style Sheet(CSS) is used to set the style in web pages that contain HTML
elements. 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
1. Inline CSS:- Inline CSS contains the CSS property in the body section attached
with element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute
And the output is shown in the adjoining page.
3. External CSS:- External CSS contains separate CSS file which contains only
style property with the help of tag attributes (For example class, id, heading, … etc).
CSS property written in a separate file with .css extension and should be linked to
the HTML document using link tag. This means that for each element, style can be
set only once and that will be applied across web pages.
Example: The file given below contains CSS property.
link tag is used to link the external style sheet with the html webpage.
href attribute is used to specify the location of the external style sheet file.
The CSS Box Model:-
In CSS, the term "box model" is used when talking about design and layout.The CSS
box model is essentially a box that wraps around every HTML element. It consists of:
margins, borders, padding, and the actual content. The image adjoining illustrates the
box model.
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an end outside the border. The margin is transparent rea outside
the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
between elements.
Width and Height of an Element:-
In order to set the width and height of an element correctly in all browsers, you need
to know how the box model works.
Important:- When you set the width and height properties of an element with CSS,
you just set the width and height of the content area. To calculate the full size of an
element, you must also add padding, borders and margins.
Example:-
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also
350px.</div>
</body>
</html>
OUTPUT :-
To Design a Website or webpage, we need basic knowledge of HTML and CSS.
HTML along with CSS can design a webpage (in HTML5). Till XHTML/HTML4,
html tables were used to design a webpage which is hard to maintain and complex in
structure. Also table based layouts are slow.
menus of canteen:-
PHP
INTRODUCTION:-
PHP is an open-source, interpreted, and object-oriented scripting language that can be
executed at the server-side. PHP is well suited for web development. Therefore, it is
used to develop web applications (an application that executes on the server and
generates the dynamic page.).
PHP was created by Rasmus Lerdorf in 1994 but appeared in the market in 1995. PHP
7.4.0 is the latest version of PHP, which was released on 28 November. Some
important points need to be noticed about PHP are as followed:
HISTORY:-
PHP was conceived sometime in the fall of 1994 by Rasmus Lerdorf. Early non-
released versions were used on his home page to keep track of who was looking at his
online resume. The first version used by others was available sometime in early 1995
and was known as the Personal Home Page Tools. It consisted of a very simplistic
parser engine that only understood a few special macros and a number of utilities that
were in common use on home pages back then. A guestbook, a counter and some
other stuff. The parser was rewritten in mid-1995 and named PHP/FI Version 2. The
FI came from another package Rasmus had written which interpreted html form data.
He combined the Personal Home Page tools scripts with the Form Interpreter and
added mSQL support and PHP/FI was born. PHP/FI grew at an amazing pace and
people started contributing code to it.
It is difficult to give any hard statistics, but it is estimated that by late 1996 PHP/FI
was in use on at least 15,000 web sites around the world. By mid-1997 this number
had grown to over 50,000. Mid-1997 also saw a change in the development of PHP. It
changed from being Rasmus' own pet project that a handful of people had contributed
to, to being a much more organized team effort. The parser was rewritten from scratch
by Zeev Suraski and Andi Gutmans and this new parser formed the basis for PHP
Version 3. A lot of the utility code from PHP/FI was ported over to PHP3 and a lot of
it was completely rewritten.
Open Source:
PHP source code and software are freely available on the web. You can develop all the
versions of PHP according to your requirement without paying any cost. All its
components are free to download and use.
Embedded:
PHP code can be easily embedded within HTML tags and script.
Platform Independent:
PHP is available for WINDOWS, MAC, LINUX & UNIX operating system. A PHP
application developed in one OS can be easily executed in other OS also.
Database Support:
PHP supports all the leading databases such as MySQL, SQLite, ODBC, etc.
Error Reporting -
PHP has predefined error reporting constants to generate an error notice or warning at
runtime. E.g., E_ERROR, E_WARNING, E_STRICT, E_PARSE.
Security:
PHP is a secure language to develop the website. It consists of multiple layers of
security to prevent threads and malicious attacks.
Control:
Different programming languages require long script or code, whereas PHP can do the
same work in a few lines of code. It has maximum control over the websites like you
can make changes easily whenever you want.
Output:
9223372036854775807
Floating point number – decimal numbers e.g. 3.14. they are also known as
double or real numbers. The maximum value of a float is platform-dependent.
Floating point numbers are larger than integers.
Character string – e.g. Hello World
Boolean – e.g. True or false.
PHP Variable
A variable is a name given to a memory location that stores data at runtime.
The scope of a variable determines its visibility.
A Php global variable is accessible to all the scripts in an application.
A local variable is only accessible to the script that it was defined in.
Think of a variable as a glass containing water. You can add water into the glass, drink
all of it, refill it again etc.
The same applies for variables.
Variables are used to store data and provide stored data when needed. Just like in
other programming languages, PHP supports variables too. Let’s now look at the rules
followed when creating variables in PHP.
All variable names must start with the dollar sign e.g.
Variable names are case sensitive; this means $my_var is different from
$MY_VAR
All variables names must start with a letter follow other characters e.g. $my_var1.
$1my_var is not a legal variable name.
Variable names must not contain any spaces, “$first name” is not a legal variable
name. You can instead use an underscore in place of the space e.g. $first_name.
You cant use characters such as the dollar or minus sign to separate variable
names.
Let’s now look at how PHP determines the data type depending on the attributes of
the supplied data.
<?php
$my_var = 1;
echo $my_var;
?>
Output:
1
Character strings
<?php
$my_var ="Hypertext Pre Processor";
echo $my_var;
?>
Output:
Hypertext Pre Processor
Use of Variables
Variables help separate data from the program algorithms.
The same algorithm can be used for different input data values.
For example, suppose that you are developing a calculator program that adds up two
numbers, you can create two variables that accept the numbers then you use the
variables names in the expression that does the addition.