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
Growth of the Internet
• Number of Hosts on the Internet
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
Growth of the WWW
• Number of Web Servers on the Internet:
Web Programming
• Static Web Pages
Static Web Pages
• HTML – Hyper Text Markup Language
Static Web Pages
• HTTP – Hyper Text Transfer Protocol
– HTTP is used specially for the communication of HTML documents
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)
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:
Dynamic Web Pages – Server Side
• Web pages can be dynamic by actions
performed by the server
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
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
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.
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”)
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
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).
General HTML Features
• Content tags
– e.g., <title> ….. </title>
• Scripting Code
– e.g., JavaScript
• Images and Image Maps • Absolute Positioning
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>
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
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
HTML Skeleton
<html> <head>
<title> Document Title</title> </head>
<body>
Contents of Document </body>
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>
Background Color & Images
• <body bgcolor=“#FF0000”>, using
RRGGBB
• <body bgcolor=“peach”>, using named
colors
Special Characters
• e.g., “<”
• Cannot use as part of text
• Must use < for “<”
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
( )
– Use of the <PRE> tag will allow for the display of multiple spaces in general text
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
Character Fonts
• <FONT COLOR=“RED”> red text
</FONT>
• <FONT SIZE=“+1”>text one size bigger
than default</FONT>
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
Hyperlinks
• Anchor tag <a> is used to provide a link
• Link may be a URL
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
