ICT 6012: Web Programming

Transcription

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 Final Examination is on 19/03/2003

2 Growth of the Internet Number of Hosts on the Internet 1969 : : : : : : 159, : 2,056, : 10,540,000

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 rapidly developing Navigator web browser.

4 Growth of the WWW Number of Web Servers on the Internet: 1993 : : 10, : 23, : 603, : 1,681, : 3,689, : 9,560, : 22,282, : 31,299,592

5 Web Programming Static Web Pages Dynamic Web Pages Server Side Dynamic Web Pages Client Side

6 Static Web Pages HTML Hyper Text Markup Language Essentially allows for three-dimensional text Inherently static information, not dynamic

7 Static Web Pages HTTP Hyper Text Transfer Protocol HTTP is used specially for the communication of HTML documents HTTP provides the WWW, Just one capability of the Internet

8 Static Web Pages URL Uniform Resource Locator <protocol>://<server name>/<file or path on server> e.g., Server name identified by the DNS Each part of the name identifies a domain (e.g., www, yahoo, com) Suffixes such as.com are called top-level domains

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: ftp : port 21 telnet : port 23 finger : port 79 SMTP : port 25 HTML : port 80

10 Dynamic Web Pages Server Side Web pages can be dynamic by actions performed by the server Historically, before Java, the only way to have dynamic web pages was by running code on 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 Can be written in any language (e.g., Perl, C, Java)

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 dynamic HTML, HTML with some added actions.

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. JavaScript was developed by Netscape, whereas Java was developed by Sun Microsystems.

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 ) Not allowed to access files of server that it came from.

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 loaded. Java applets are loaded after a web page is loaded.

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). The Current recommended version of HTML is 4.01.

17 General HTML Features Content tags e.g., <title>.. </title> Scripting Code e.g., JavaScript Images and Image Maps Absolute Positioning Forms Frames

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> Text

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 e.g., <b><i> bold italic text </i><b>

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 Contains the actual contents of the document (the part shown in browser window

21 HTML Skeleton <html> <head> <title> Document Title</title> </head> <body> Contents of Document </body> </html>

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> Attributes to this tag affect the entire document.

23 Background Color & Images <body bgcolor= #FF0000 >, using RRGGBB <body bgcolor= peach >, using named colors <body background= URL >, For an image file specified in the URL

24 Special Characters e.g., < Cannot use as part of text Must use < for < In general, use &char name; for special characters

25 Information Ignored by Line Breaks Browsers 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 Comments

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 <table>, <blockquote>

27 Character Fonts <FONT COLOR= RED > red text </FONT> <FONT SIZE= +1 >text one size bigger than default</font> <FONT FACE= arial, courier> arrial first choice text</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 Definition lists use <dt> and <dd>

29 Hyperlinks Anchor tag <a> is used to provide a link Link may be a URL <a href= link text </a>

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= section> link text </a>