33
WEB BASE APPLICATION DEVELOPMENT NASRULLAH KHAN

NASRULLAH KHAN. Lecturer : Nasrullah Email :[email protected] Website :

Embed Size (px)

Citation preview

Page 1: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

WEB BASE APPLICATION

DEVELOPMENTNASRULLAH KHAN

Page 2: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Introduction to web Development

Lecturer : Nasrullah

Email :[email protected]

Website :http://iba-s13-cse308.wikispaces.com

Page 3: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

World wide web

The World Wide Web, (WWW) is a system of

interlinked hypertext documents accessed via

the Internet. With a web browser, one can view

web pages that may contain text, images,

videos, and other multimedia and navigate

between them via hyperlinks

Page 4: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Just two things(IT IS ALL ABOUT)

Web browser (client)

Web server (on which web site is hosted).

Page 5: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

What is web browser A browser is an application that displays

websites from remote server through the

internet.

web browser is a software application for

retrieving, presenting, and traversing information

resources on the World Wide Web.

Most popular web browsers ?

Page 6: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Web server

A web server is a piece of software that manages web pages and makes them available to client browsers via a local network or over the internet.

Web server :- Apache,IIS,Iplanet’s Enterprise server

We had to install IIS 7.0 services on our machine to make our machine a web server.

Page 7: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Web server

The primary function of a web server is to deliver

web pages on the request to clients. This means

delivery of HTML documents and any additional

content that may be included by a document,

such as images, style sheets and scripts.

Page 8: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Hyper text transfer protocol

HTTP, short for HyperText Transfer Protocol, is the protocol for transferring hypertext documents that makes the World Wide Web possible. A standard web address

http://www.google.com/ is called a URL; the prefix (http in the example) indicates its protocol.

Page 9: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Hyper text Hypertext is text displayed on a computer or

other electronic device with references (hyperlinks) to other text that the reader can immediately access, usually by a mouse click or key press sequence.

Page 10: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

HYPER TEXT MARKUP LANGUAGE Hypertext Markup Language, a standardized

system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.

HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a

markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages

Page 11: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

WEB APPLICATION

Web applications are applications that use the Internet’s infrastructure to delivere their functionality.

A web application is an application that is accessed over a network such as the Internet or an intranet.

Web Applications do not use the more traditional client/server technologies,but are using web technologies such as web browsers and web servers.

Page 12: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

WEB APPLICATION The Internet carries a vast range of information

resources and services, such as the inter-linked hypertext documents of the World Wide Web (WWW) and the infrastructure to support electronic mail.

intranet is a private computer network that uses Internet Protocol technology to securely share any part of an organization's informationlectronic mail. It is an organization's internal website

Page 13: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Benefits Web applications do not require any complex

"roll out" procedure to deploy in large organizations. A compatible web browser is all that is needed

Browser applications typically require little or no

disk space on the client

They require no upgrade procedure since all

new features are implemented on the server and automatically delivered to the users

Page 14: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Benefits

Web applications integrate easily into other server-side web procedures, such as email and searching.

They also provide cross-platform compatibility in most cases (i.e., Windows, Mac, Linux, etc.) because they operate within a web browser window.

Page 15: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Advantages of Web Applications

No special configuration or changes are need on user's PCs.

Lower costs. Centralised data is secure and easy to backup.

Updates can be made quickly and easily. Information is accessible to a wide audience anywhere in the world.

Available 24 hours a day, 7 days a week. Everybody has a browser - familiar interface

encourages. Always up-to-date.

Page 16: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

WEB APPLICATION

Web server: a system on the internet containg one or more web site

Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website

Page 17: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Staic web site or page A static website contains Web pages with fixed

content. Each page is coded in HTML and

displays the same information to every visitor.

Static sites are the most basic type of website

and are the easiest to create.

Page 18: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :
Page 19: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Limitations of static web page

?

Page 20: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

We need to generate the html after the page is requested.

Page 21: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Dynamic web pages

Client side dynamic web pages:-

Server side dynamic web pages

Page 22: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Client side dynamic web page

Page 23: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Server side dynamic web page

Page 24: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Client side technologies for providing dynamic content

Javascript Vbscript activeX Controls Java Applets Curl

Page 25: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

Server side technologies for providing dynamic content

CGI ASP JSP COLDFUSION PHP

ASP.NET

Page 26: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

HTML

<HTML> <HEAD> <TITLE>IBA</TITLE> </HEAD> <BODY> IBA </BODY> </HTML>

<HTML> <HEAD> <TITLE>IBA</TITLE> </HEAD> <BODY> IBA </BODY> </HTML>

Page 27: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

HTML

1.Use an text editor such as Notepad to write the document.

2.Save the file as filename.html on a PC. This is called the Document Source.

3.Open internet Explorer (or any browser) Off-Line

4.Switch to Explorer.

5.Click on File, Open File and select the filename.html document that you just created.

6.Your HTML page should now appear in Explorer.

Page 28: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

HTML

7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Internet Explorer click on RELOAD and view the new HTML Document switch to Notepad with the Document Source......

Page 29: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

<HEAD>...</HEAD>-- contains information about the document The <head> element is a container for all the head

elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<TITLE>...</TITLE>-- puts text on the browser's title bar.

Heading: <H1> </H1>

Center:<Center> </Center>

Line Break <P> ,<Br>

Phrase Markups: <I></I> ,<B></B>

Unordered list : <UL><li>

Ordered list: <OL><li>

Nested

Page 30: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

ADD IMAGEUse <IMG SRC=imagefilename> tagsAttributes of IMG tag

-width, height

-Alt

-Align

-<Img src=my.gif width=50 height=50 align=right

alt=“My image”>

Use <A href=filename|URL></a>tags

Page 31: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

<head>

<HEAD>...</HEAD>-- contains information about the document The <head> element is a container for all the head elements.

Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

Page 32: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

<img>

<!DOCTYPE html> <html> <body>

<h2>Norwegian Mountain Trip</h2> <img border="0" src="/images/pulpit.jpg" alt="Pulpit

rock" width="304" height="228">

</body> </html>

Page 33: NASRULLAH KHAN.  Lecturer : Nasrullah  Email :alnasrkhan@gmail.com  Website :

<table>

<table border="1"><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>