Web - Gozips.uakron.edu

cornawakeΛογισμικό & κατασκευή λογ/κού

4 Νοε 2013 (πριν από 3 χρόνια και 10 μήνες)

105 εμφανίσεις

2440: 211

Interactive Web Programming

Introduction to the Internet

& the World Wide Web

Introduction to Web Design

2

World Wide Web


Also called the
Web


A resource on the
Internet

to access data


Origins
started at
around 1989 at the
European
particle physics (nuclear) research laboratory
(
CERN)
near
Geneva, Switzerland


By
Timothy Berners
-
Lee and other researchers


Hypertext

was used to organize interconnected data
sources to be accessed through
hyperlinks

Introduction to Web Design

3

Web Terminologies


Link

(
hyperlink

or
hypertext

link
)


text, graphic, or
other Web elements that connects to additional data on
the Web


Web Page



a document on the Web


Uniform Resource Locator

(
URL
)
-

a unique address
used to identify documents on the Web


Web Browser



software for displaying Web pages


E.g. Mosaic, Navigator, Internet Explorer, Mozilla, Opera


Web server


makes Web pages available to the Web


HyperText Transfer Protocol

(
HTTP
)


program used
to help transfer files over the Web


HyperText Markup Language

(
HTML
)


the language
used to define the
structure

and
content

of Web pages

Introduction to Web Design

4

HTML


HTML (
HyperText

Markup Language)


Used to be the heart of every Web page


A derivative of SGML (Standard Generalized
Markup Language)


SGML

is an international standard for representing
text in an electronic form for exchanging documents
independently

Introduction to Web Design

5

XML


XML (eXtensible Markup Language)


A set of guidelines for delimiting text
through a system of tags


Follows rigid guidelines

Introduction to Web Design

6

XHTML


eXtensible HyperText Markup Language


Slowly replacing HTML


Combines the strict rules and syntax
guidelines of XML (eXtensible Markup
Language) with HTML

HTML & XHTML


HTML versions 1.0, 2.0, 3.0, 3.2, 4.01 released
from 1989 through 1999


XHTML versions 1.0, 1.1 released in 2001, 2002
respectively


XHTML version 2.0 was discontinued


HTML 5.0 and XHTML 5.0 in development


HTML


by Web Hypertext Application Technology
Working Group (WHATWG) led by Ian
Hickson

(from
Google, formerly of Opera Software)


XHTML 5.0


by an HTML
Working Group

Introduction to Web Design

7

Introduction to Web Design

8

Versions of HTML & XHTML

Introduction to Web Design

9

HTML Page Format


HTML pages follow a basic structure as follows

1.
<html>

2.
<head>

3.
<title> </title>

4.
</head>

5.
<body>

6.
</body>

7.
</html>


Introduction to Web Design

10

XHTML Page Format


XHTML pages follow a basic structure as
follows

1.
<?xml version”1.0”?>

2.
<!DOCTYPE html public “
-
//W3C//DTD XHTML 1.0
Stric//EN
http://www.w3.org/TRxhtml1/DTD/xhtml1
-
stric.dtd

3.
<html xmlns=“http://www.w3.org/19999/xhtml”>

4.
<head>

5.
<title></title>

6.
</head>

7.
<body>

8.
</body>

9.
</html>


Introduction to Web Design

11

XHTML Page Format…


Below are the explanations to the
XHTML page structure

1.
XML declaration


identifies document as
XHTML document

2.
Document Type Definition (DTD)


URL
points to a file that outlines the available
elements, attributes, and usage

3.
Name Space


URL points to a files that
gives detailed information about the
particular XML vocabulary (XHTML)


Introduction to Web Design

12

DTDs

-
Transitional



supports many of the presentational
features of HTML, including the deprecated elements
and attributes

-
Best used for older documents with deprecated features

-
Frameset



used for documents containing frames, and
also supports deprecated elements and attributes

-
Strict



does not allow any presentational features or
deprecated HTML elements and attributes

-
Does not support frames or inline frames

-
Best used for documents that need to strictly conform to the
latest standards

Introduction to Web Design

13

Creating Valid XHTML
Documents


The DTD used depends on the content of the
document and the needs of your users


To support old browsers, use the
transitional
DTD


To support old browsers in a framed Web site,
use the
frameset

DTD


To support more current browsers and to weed
out any use of deprecated features, use the
strict

DTD

Introduction to Web Design

14

Creating a Valid Document


Elements
not

allowed under the strict
DTD:


applet



-

iframe


basefont


-

isindex


center



-

menu


dir



-

noframes


font



-

s


frame



-

strike


frameset


-

u

Introduction to Web Design

15

Attributes Prohibited in the Strict
DTD

Introduction to Web Design

16

Required XHTML Attributes

Introduction to Web Design

17

Inserting the DOCTYPE
Declaration



The DOCTYPE declaration tells XML
parsers what DTD is associated with the
document


<!DOCTYPE
root type “id” “url”
>

Introduction to Web Design

18

The XHTML Namespace


A namespace is a unique identifier for
elements and attributes originating from a
particular document type (like XHTML or
MathML)


Two types of namespaces:

-
Default: applied to a root element and any
element within it

-
<
root
xmlns=“
namespace
”>

New Perspectives on HTML and XHTML, Comprehensive

18

Introduction to Web Design

19

The XHTML Namespace



Local: applies to only select elements


Each element in the local namespace is
marked by a prefix attached to the element
name


xmlns:
prefix
=“
namespace



Identify any element belonging to that
namespace by modifying the element name in
the tag:


prefix:
element

Introduction to Web Design

20

Setting the XHTML Namespace


To set XHTML as the default namespace
for a document, add the xmlns attribute to
the html element with the following value:


<html
xmlns=http://www.w3.org/1999/xhtml>

New Perspectives on HTML and XHTML, Comprehensive

20


Introduction to Web Design

21

Using Style Sheets and XHTML


Parsed character data (PCDATA)
is text
parsed by a browser or parser


Unparsed character data (CDATA)
is
text not processed by the browser or
parser



A CDATA section marks a block of text as
CDATA so that parsers ignore any text within
it

New Perspectives on HTML and XHTML, Comprehensive

21

Introduction to Web Design

22

HTML vs. XHTML


Some major differences between HTML and
XHTML include the following:


All element attributes names are in lowercases


E.g. <p> instead of <P>


All attribute values must be contained within single or
double quotes


E.g. <body bgcolor=“#ffffff”> instead of <body bgcolor=#ffffff>


All nonempty elements must have a closing tag


E.g. <p>XHTML</p> instead of <p>HTML


All empty tags should be written with a space and a /
symbol at the end of the tag


E.g. <br /> instead of <br>

Introduction to Web Design

23

HTML vs. XHTML

Introduction to Web Design

24

Creating a Well
-
Formed
Document


XHTML documents must also include a
single root element that contains all other
elements


For XHTML, that root element is the html
element


Attribute minimization

is when some
attributes lack attribute values


XHTML doesn’t allow attribute minimization

Introduction to Web Design

25

File
-
Naming Conventions


XHTML is much more restrictive


The following restrictions relate to file
-
naming conventions:


Do not use spaces


Avoid capital letters


Avoid illegal characters

Introduction to Web Design

26

Attribute minimization in HTML
and XHTML

Introduction to Web Design

27

CSS


CSS (Cascading Style Sheet)


Used for many different purposes


Used mainly to separate
presentation

from the
structure

of a page


Presentation


“looks” of a page


Structure


“meaning” of a page’s content

Introduction to Web Design

28

CSS Versions


CSS1 (1996)


introduced styles for:


Fonts


Text


Color


Background


Block
-
level elements


CSS2 (1998)


added support for:


Positioning


Visual formatting


Media types


Interfaces


CSS3 (still in development)

Introduction to Web Design

29

DHTML


DHTML (Dynamic HTML)


A collection of different technologies
including:


XHTML


JavaScript


DOM (Document Object Model)


CSS

Introduction to Web Design

30

JavaScript


Developed by Netscape in 1996


Has become almost as popular as HTML


Has nothing to do with the Java
Programming Language


But Netscape licensed the name from Sun
Microsystems in hopes of increasing
acceptance of the new scripting protocol

Introduction to Web Design

31

Web Application


Web site that delivers dynamic data


Other names include:


Data
-
driven


Database
-
driven


Dynamic sites


Involves tools like:


Database


Server
-
side scripting


such as like Active Server
Pages (ASP), Java Server Pages (JSP), ASP.NET,
ColdFusion, PHP, etc

Introduction to Web Design

32

JavaScript


A
client
-
side scripting

language


Language that runs (
interpreted
) on a local Web browser


An
interpreter

executes the language with a
scripting engine



Enables interactivity on Web pages


Developed by Netscape in 1996


First introduced in the Netscape Navigator browser as
LiveScript


Different from the Java programming language


Microsoft developed a version of JavaScript called
JScript

for its
Internet Explorer browser


European Computer Manufacturers Association (ECMA)



developed a standard called
ECMAScript

to avoid the differences in
commands between JavaScript and Jscript


Some Jscript commands cannot be executed on the Navigator browser


Some JavaScript commands cannot be executed on the Internet
Explorer browser

Introduction to Web Design

33

JavaScript vs. Java


Below is a comparison between JavaScript and
Java

JavaScript

Java

An interpreted language

A compiled language

Requires a text editor

Requires a Java Developers Kit (JDK) for create
applets

Requires a browser that can interpret code

Requires a Java Virtual Machine (JVM) or
interpreter to run applets

Program files are integrated with HTML/XHTML
code

Program files are distinct from the HTML/XHTML
code

Source code is accessible to the user

Source code is hidden from the user

Simpler, requiring less programming knowledge
and experience

Powerful, requiring programming knowledge and
experience

Object
-
based language

Object
-
oriented language

Introduction to Web Design

34

Versions of JavaScript


JavaScript 1.0 (1995)


JavaScript 1.1 (1996)


JavaScript 1.2 (1997)


JavaScript 1.3 (1998)


JavaScript 1.5 (2001)


Both JScript 5.5 and JavaScript 1.5 conform
to ECMAScript 3


Web browsers still refer to ECMAScript as
JavaScript

Introduction to Web Design

35

Web Application


Web site that delivers dynamic data


Uses resources like:


Client
-
side scripting


Server
-
side scripting


Databases

Introduction to Web Design

36

Client
-
Side Scripting


Scripting language that runs on a local
Web browser


Examples


JavaScript


by Netscape


JScript


by Microsoft Corporation


ECMAScript


standards by ECMA


VBScript


by Microsoft Corporation

Introduction to Web Design

37

Server
-
Side Scripting


Scripting language that executes on a Web
server


Examples:


Active Server Pages (ASP)


uses JavaScript or VBScript


ASP.NET


uses C# or Visual Basic


Java Server Pages


uses Java


PHP: HyperText Preprocessor (PHP)


syntax borrowed from
C, Java & Perl


ColdFusion


Common Gateway Interface (CGI)


mostly with Perl


Perl


has features from C, BASIC, etc

Introduction to Web Design

38

Databases


A collection of information about related entities


Entity

(
relation

or
table
)


a set of records


Record

(tuple or
row
)


a collection of fields


Field

(
attribute

or
column
)


a property or
characteristic of an entity


Relationship



an association between entities


Defined and manipulated using the
Structured
Query Language

(
SQL
) on
DataBase
Management Systems

(
DBMS
)


SQL



the universal language for database definition,
and management


DBMS



the software for managing databases