ICT 6012: Web Programming

Full text

(1)

ICT 6012: Web Programming

• Covers HTML, PHP Programming and JavaScript • Covers in 13 lectures – a lecture plan is supplied. • Please note that there are some extra classes and

some cancelled classes

• Mid-Term - I is scheduled on 08/01/2003 • Mid-Term-II is on 29/01/2003

(2)

Growth of the Internet

• Number of Hosts on the Internet

(3)

History of WWW

• 1n 1991, the World Wide Web (WWW)

was released by CERN, the European

Particle Physics Laboratory.

• 1993, Mosaic, the first popular web

browser, developed at the National Center

for Supercomputing Applications (NCSA)

• 1n 1994, Netscape was formed and began

(4)

Growth of the WWW

• Number of Web Servers on the Internet:

(5)

Web Programming

• Static Web Pages

(6)

Static Web Pages

• HTML – Hyper Text Markup Language

(7)

Static Web Pages

• HTTP – Hyper Text Transfer Protocol

– HTTP is used specially for the communication of HTML documents

(8)

Static Web Pages

• URL – Uniform Resource Locator

– <protocol>://<server name>/<file or path on server>

– e.g., http://www.yahoo.com/index.html – Server name identified by the DNS

– Each part of the name identifies a domain (e.g., www, yahoo, com)

(9)

Static Web Page

• Server Ports

– Actually one physical connection to a Server, but a

number of “virtual” connections known as “ports”

– Some port numbers are standard, and many others

are available for general use:

(10)

Dynamic Web Pages – Server Side

• Web pages can be dynamic by actions

performed by the server

(11)

Dynamic Web Pages – Server Side

• CGI – Common Gateway Interface

– A method that lets web pages communicate with programs on an HTTP server

– The running of a program in a special directory on the server (e.g., /cgi-bin), which processes information to be included on the web page returned to the client

(12)

Dynamic Web Pages – Client Side

• Historically, Java was the first way to

include dynamic content in web pages

executed on the client side, by use of

“applets”, small downable Java Programs.

• There are number of ways now to produce

(13)

Dynamic Web Pages – Client Side

• JavaScript

– One way is to use JavaScript.

– JavaScript is a Scripting Language embedded into HTML so that actions can occur.

– JavaScript is actually not very similar to Java.

(14)

Dynamic Web Pages – Client Side

• Java Applets

– Applets also adds dynamic content to web pages.

– Applets run in a protected environment on the client (within a “sandbox”)

(15)

Dynamic Web Pages – Client Side

• Comparison of Java Applets and Java

Scripts

– Applets can communicate back to the server. JavaScript cannot communicate back to the server.

– JavaScript is loaded as the web page is being

(16)

HTML Overview

• HyperText Markup Language is the Language used to create web documents.

• Special Instructions (tags) mark up the text to create web documents.

• These tags are not displayed but rather tell the browser how to display the contents of the document.

• HTML standards are developed under the authority of the World Wide Web Consortium (W3C).

(17)

General HTML Features

• Content tags

– e.g., <title> ….. </title>

• Scripting Code

– e.g., JavaScript

• Images and Image Maps • Absolute Positioning

(18)

3 types of HTML Content

• Comments

– <! --- comment --

• Tags

– Most tags are content-based

• e.g.,<title> Document Title </title>

– Some tags are physical style tags

• e.g. <b> bold text </b>

(19)

Basic HTML Syntax

• General Form of Tags

– <tag> or <tag attribute>

• Attributes may have values

– e.g., <hr width-”35%” align=right>

• Most tags delimit a region of text and have a start and end tag

– e.g., <b> bold text </b>

• End tags never contain attributes

• Tags can be nested using multiple tags to achieve a desired effect on a single element

(20)

Document Structure

• HTML documents are divided into 2 major portions:

– HEAD

• Contains information about the document such as its title and “meta” information

• HEAD information is not displayed in the browser window when page is loaded

• Mainly used for helping search engines with page descriptions • Content of the HEAD section are run first by the browser

• Can contain other elements for adding JavaScript or style sheets

– BODY

(21)

HTML Skeleton

<html> <head>

<title> Document Title</title> </head>

<body>

Contents of Document </body>

(22)

Skeleton Tag Definitions

• <Html>

– Tells the browser the document is composed in HTML. – HTML standard requires that the entire document

appears within the <HTML> container.

• <HEAD>

– Contains information about the document.

– It has no attributes but serves as a container for other header tags such as <META> and <BASE>.

• <TITLE>

– Specifies the title of the document.

– It appears in the top of the browser window.

• <BODY>

(23)

Background Color & Images

• <body bgcolor=“#FF0000”>, using

RRGGBB

• <body bgcolor=“peach”>, using named

colors

(24)

Special Characters

• e.g., “<”

• Cannot use as part of text

• Must use &lt; for “<”

(25)

Information Ignored by

Browsers

• Line Breaks

– Text elements wrap until they encounter <BR> or <P>

• Tabs and Multiple Spaces

– Can add space to the flow of an HTML document by using the non-breaking space character entirely

(&nbsp;)

– Use of the <PRE> tag will allow for the display of multiple spaces in general text

(26)

Heading & Spacing

• White spaces generally ignored • Text braks – <P> paragraph – <BR> line break • Heading Tags – <H1>….<H6> • Horizontal Lines <hr> • Performatted Text

– Spaced and formatted exactly as typed

• Others

(27)

Character Fonts

• <FONT COLOR=“RED”> red text

</FONT>

• <FONT SIZE=“+1”>text one size bigger

than default</FONT>

(28)

Lists

• Unordered Lists <UL>….</UL> • Ordered lists <OL>…</OL>

• Definition lists<DL>…</DL> • Unordered/Ordered use <li>

– <ul>

– <li> first item – <li> second item – </ul>

• Can specify the style and numbering of lists with tag attributes

(29)

Hyperlinks

• Anchor tag <a> is used to provide a link

• Link may be a URL

(30)

Hyperlinks

• Links may be within same document

<a name=“Applet Section”>

<a href=“#Applet Section”> link text </a>

• Name after # a “fragment identifier”

• Can link to section of another document

<a href=http://www.buet.ac.bd/department#eee section>

link text

Figure

Updating...

References

Updating...

Related subjects :