Scribd
Upload
45 views25 pages

01introductiontowebdevelopment 090306114001 Phpapp01

This document provides an introduction to web development. It discusses key topics like HTML, CSS, servers, databases, and dynamic web pages. The document outlines the basic web development process, which involves creating HTML files, testing pages locally, uploading files to a web server, and further testing on the live server. It emphasizes testing pages on multiple browsers and platforms due to differences in how browsers render pages. The document also distinguishes between static web pages delivered as raw HTML versus dynamic pages generated by server-side programs interacting with databases.

Uploaded by

Judielyn Cualbar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
45 views25 pages

01introductiontowebdevelopment 090306114001 Phpapp01

This document provides an introduction to web development. It discusses key topics like HTML, CSS, servers, databases, and dynamic web pages. The document outlines the basic web development process, which involves creating HTML files, testing pages locally, uploading files to a web server, and further testing on the live server. It emphasizes testing pages on multiple browsers and platforms due to differences in how browsers render pages. The document also distinguishes between static web pages delivered as raw HTML versus dynamic pages generated by server-side programs interacting with databases.

Uploaded by

Judielyn Cualbar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

EASING

INTO WEB
DEVELOPMENT
1 Introduction
1. I t d ti
1 INTRODUCTION
2 HTML
3 TABLES
4 FORMS
5 HTTP
6 CSS
7 CSS FRAMEWORKS
8 DIGITAL MEDIA
2 9 USABILITY
Overview of Web Applications
3

 Web applications refers to all types of applications


in which some part of the application is hosted
within a web browser.
Evolution of Internet
4

 O
Over the
h past ten years, the
h Internet
I has
h evolved
l d from
f
 a hypertextual information system offering static
information,,
 to a
 marketplace for the buying and selling of goods and
services,
 and now to a
 widely-used
id l d iinfrastructure
f t t for
f the
th development
d l t and
d hhosting
ti
of software applications within an enterprise.
 Thus,, over time,, the Internet has moved from p
principally
p y
static page content to dynamically-generated content
via programs running on web servers.
Intranets
5

 An Intranet is a private network that uses web


technology and that can be accessed only by
authorized persons, usually members or employees
of that organization
How Does the Web Work?
6

 The browser (or client) requests and displays


information.
 Browsers make requests of servers, then servers
process those requests
p q based on a set of rules
(called a protocol).
 On the server
server, a web server software processes the
requests and returns information to the client.
Web
Server Other
D t b
Databases
Server Scripts Servers
Process Forms for accessing
resources on
Dynamic Pages server

HTTP for
p
Transport

HTML/CSS/Javascript
p y
for Display

The Internet
HTML
B
Browsers

7
Web Site Structure
8

 A web
b site
it is
i typically
t i ll composed
d off many fil
files.
 A web site will have:
 HTML files
 These are ASCII text files. Most sites will have many HTML files.
 These HTML files may also include client-side scripting (usually Javascript).
 image
g files (optional)
( p )
 There are two file formats (GIF and JPG) that are supported by all browsers.
 object files (optional)
 Files that require a helper application or plug
plug-in.
in.
 Sound files, video files, Flash files, Java files, etc
 server-side scripts (optional)
 programs for accessing server-based resources such as databases.
databases
 Typically CGI-Perl, ASP, ASP.NET, JSP, Cold Fusion, etc.
Web Site Structure
9

programs.htm

index.htm courses.htm

faculty.htm
index.html

Javascript
for image
roll-over

Links to
Image other HTML
files files

Link to
server side
server-side
script

Links to
server-side
scripts

10 Javascript to
validate form input
Basic Web Development Process
11

1 Create
1. C t HTML file(s)
fil ( ) 2 Test
2. T t llocally
ll on browser(s)
b ( )
<HTML><HEAD></HEAD><BODY
BACKGROUND="images/mainback.gif"
BGCOLOR="#999966" TOPMARGIN="8"
LEFTMARGIN="8">
<TABLE BORDER="0" WIDTH=544 CELLSPACING=0>
<TR><TD WIDTH="31"><IMG SRC="images/pixel.gif"
WIDTH="31" HEIGHT="8"></TD><TD
WIDTH="58"><IMG SRC="images/pixel.gif"
WIDTH="58" HEIGHT="8"></TD><TD
WIDTH="30"><IMG SRC="images/pixel.gif"
WIDTH "30" HEIGHT
WIDTH="30" HEIGHT="8"></TD>
"8" /TD
</TR></TABLE>

3. Upload file(s) to web server 4. Test page(s) on web server

upload via FTP


Web server
your computer
What You Need for the Basics
12

Several Web Browsers

HTML Editor
R
Required
i d
Image Editor

FTP

More Complex IDE

Flash Optional

Media editors
Why Several Browsers?
13

 The original
Th i i l iintention
i b behind
hi d HTML was that
h iti describes
d ib
meaning, not formatting.
 That is, it is up to the browser to determine the formatting of
tags.
 Thus, the same tags can be displayed differently on
different browsers.
browsers
 As well, Netscape, and then later, Microsoft, added
their own proprietary tags.
 Many of these special tags added physical formatting,
tables, frames, etc.
 The browsers can vary in how they display pages.
 CSS and Javascript, in particular, vary on the browsers.
Different Browsers, Different
14
Pages?
 Given the different capabilities of the different
browsers, it is almost impossible to design a web
page that will look the same for all viewers.
Different Browsers, Different Pages?
15

 St t i for
Strategies f dealing
d li with
ith differing
diff i b browsers:
 Different versions for different browsers
 Too difficult and time-consuming
g
 Lowest common denominator design
 Design for safest HTML standard (HTML 3.2)
 Current version design
 Design for most current versions of browsers
 Splitting the difference
 Design web pages that take advantage of newest
features, but are still usable and attractive for those
with older browsers.
 Standards-based design
 Design pages for current web standards, regardless
of browser support.
 Use CSS and XHTML 1.0
Browser Market Share
16
Test, Test, Test
17

 Always test your pages on as many browsers as


possible.
 Always test your pages on as many computer
platforms as possible.
p p
Static vs Dynamic Web Pages
 Most web pages that you view are not static HTML
pages.
 Instead they are output from programs that run on
web servers.
 Theseprograms can interact with server resources like
databases and XML Web services.

18
Static Web Content

19
Dynamic Web Content

20
Dynamic Web Technologies
 There are quite
Th i a number
b off different
diff technologies
h l i for f
dynamically generating Web content.
 ASP.NET
 ASP
 CGI
 ColdFusion
 JSP
 PHP
 Ruby on Rails
 All of these technologies share one thing in common:
 Using programming logic, they generate HTML on the server
and send it back to the requesting browser.
21
Web Frameworks
22

 More and more web development is being done


M
within pre-existing web frameworks, such as Content
M
Management t SSystems
t (CMS) and
d Blog
Bl engines,
i or
Javascript frameworks such as JQuery.
 CMSs
CMS and
d Bl
Blogs are complex
l programs running i on th
the
server that construct pages by combining content
residing within databases on the server with HTML
HTML+CSS
CSS
templates.
 While no to little p
programming
g g knowledge
g is required,
q ,
HTML and CSS knowledge is still required in order to
use these frameworks effectively.
Web Frameworks
23
Template Industry
24

 Not everyone has visual design skills.


 Because of this,, there are many
y web template
p sites
available from which one can purchase or freely
use.
 Again, HTML and CSS knowledge is still required in
order to use or customize these templates.
 If you make use of someone else’s template you MUST
attribute it in the footer and within the HTML.
Template Industry
25

You might also like