ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

4. Internet Programming 1

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Reference H.M. Deitel, P.J. Deitel and T.R. Nieto, Internet and World Wide Web: How to Program, Prentice Hall, 2002

2

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Web site development z

3

To develop a Web site, three steps: 1. Obtain the appropriate equipment z Web Server – hardware and software 2. Register the Web Server to an Internet Service Provider (ISP) z Obtain the IP address and DNS address 3. Develop the contents z Internet Programming

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Internet Programming z z z

Web service is a kind of client / server process Need interaction between client and server Programming for providing Web service can also be divided into – –

4

Client-side programming: to define the operation to be performed on the client’s machine Server-side programming: to define the operation to be performed on the server

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Internet Database Web Server

5

Web Client

Server-side Programming

Client-side Programming

Skills that are often required: • CGI • PHP • ASP • Perl • Java Servlet, …

Skills that are often required: • XHTML • Javascript • Java • Dreamweaver • Flash • SMIL, XML …

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

4.1 XHTML – Extensible HyperText MarkUp Language

6

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

Web programming using XHTML z

Nowadays, there are many tools that help to develop Web page –

z z z

Provide sophisticated tools to allow Web page developed in a graphical manner Finally, the job of these tools is to convert the user design to XHTML code Understanding of XHTML allows us – –

7

Dreamweaver, Visual studio

fine tuning the codes generated by these tools understand the source of a Web page

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

What is XHTML? z

z z z z

z

8

Unlike procedural programming languages, e.g. C, C++, XHTML is a markup language that specifies the format of of document to be seen in browser XHTML has replaced the HTML as the primary means of describing the Web page content Become a World Wide Web Consortium (W3C) recommendation W3C is an industry consortium Seeks to promote standards for the evolution of the Web and interoperability between WWW products by producing specifications and reference software Compared with HTML, XHTML provides more robust, richer and extensible features

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

Features of XHTML z

Platform independent –

z

Text-based – –

z z

Program is written with ASCII characters Can be written using a text editor, such as notepad

An XHTML file must have an extension of .html or .htm Information is generally enclosed inside paired tags – –

9

The same piece of code can give the same display in Mac, Linux and Windows

E.g. … There are many tags in XHTML. They specify different information required to display the Web page content

start tag

end tag (with a /)

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

Basic Structure of XHTML This is title, describing the content

This is body, main part of the page

10



ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

useful usefulfor forvalidating validatingthe thecode codeto to see seeififthey theymeet meetthe thexhtml xhtmlstandard standard



comment comment

define definethe thenamespace namespaceof ofhtml html

Internet and WWW How to Program Welcome define definethe thetitle titleof ofthe theweb webpage page

11

Welcome to XHTML!

- new paragraph

- new paragraph

Example Example

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

See the title defined in head

12

That’s the content defined in body

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming - XHTML

z z

An XHTML document can be divided into 2 sections head section – –

z

body section – –

13

contains information of how the page is formatted e.g. … can be found in head section to indicate the title of the Web page when it is shown in browser contains the actual page contents e.g.

Welcome to XHTML!

shows a line of text “Welcome to XHTML!

on the new paragraph

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Tags z

Tags: case insensitive –

z z z z

is same as

Browse will not display information within tag that does not understand Tags: no precise positioning Many start tags define attributes that provide additional information E.g. start tag

14

attribute name

attribute value

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Common Tags – Headers z z

Some text may be more important the others XHTML provides six headers, called header elements, for specifying the relative importance of information –

z z

15

…

,

…

to

…

It is assumed the text in

is more important than that in

and so on so forth By default, the size of the text that is more important is bigger

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Internet and WWW How to Program Headers

Level

Level

Level

Level

Level

Level

16



1 2 3 4 5 6

Header

header header header header header

66headers headersare areall allused used to toindicate indicatethe therelative relative importance importanceof oftext text

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Text Textunder under

has hasthe thelargest largestsize size

17

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Meta Tag z

HTML interacts with the search engines through using meta tag These Thesewords wordsare arecompared compared with withwords wordsin insearch searchrequests requests



18

Description Descriptionof ofaapage pageseen seenon onsearching searching

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Linking Webpage z

One of the most important XHTML features is the hyperlink –

z

Link to another resources, such as web page, image, etc.

Achieve by using the anchor tag : –

To a web page: PolyU

anchor anchorattribute attribute

19

Value Valueof ofthe theattribute: attribute: The Theaddress addressof ofthe theWeb Webpage page

The Thename nameon onthe theWeb Web page pagethat thatrepresents representsthis this link link

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Here are my favorite sites

strong strongtag taglets letsthe thetext textto tobe be displayed displayedwith withbold boldfont font Other Othersimilar similartags tagsinclude include underline underlineand and italic italic

Click a name to go to that page.

Four Fourlinks linkscreate create

PolyU

EIE

Dr Daniel Lun's Home

ENG224 Home page

20

Don’t Don’tintroduce introducespaces spacesbetween between different partsof ofaaURL URLaddress address differentparts

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

This Thisline lineisisshown shownwith withaabold boldfont font Four Fourlinks linksare areincluded included

21

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Linking Email Addresses z

To a mail address: Email me

z

With a subject: Email me

z

22

Multiple recipients: Email me

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Linking Images z

Background Image can be defined as an attribute of the body tag:

z

To show an Image inside a page:

z

23

We can create an image hyperlink

ENG224 INFORMATION TECHNOLOGY – Part I 4. Internet Programming

Will Willscale scaleto tothis thissize sizeto todisplay display