1 / 99

Syllabus

Syllabus. Week 1 Understanding HTML A simple Web page Linking to other Web pages Publishing your HTML pages. Week 2 Text alignments, lists, and special characters Advanced text formatting and links Creating HTML forms Creating your own web page graphics. Week 2

oren
Download Presentation

Syllabus

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Syllabus Week 1 • Understanding HTML • A simple Web page • Linking to other Web pages • Publishing your HTML pages

  2. Week 2 • Text alignments, lists, and special characters • Advanced text formatting and links • Creating HTML forms • Creating your own web page graphics

  3. Week 2 • Putting graphics on a Web page • Custom backgrounds and colours • Creating animated graphics • Page design and layout

  4. Week2 &3 • Graphics links and imagemaps • Advanced layout with tables • Using style sheets • Embedding multimedia in Web pages

  5. Week 3 • Multimedia in web pages • Interactive pages with Applets and ActiveX • Web page scripting for non-programmers • Setting pages in motion with Dynamic HTML • Multi page layout with frames

  6. Style Classes • A style class is a custom set of formatting specifications that can be applied to any passage of text in a Web page by first defining the tag • The syntax is the name of the tag followed by a set of rules enclosed in left and right curly brace delimiters • The first part of the tag name must be an HTML tag and the second optional part is up to the user e.g h2.headings {font:24pt times roman; }

  7. Style Classes • To use the above class within the page you would use the following line of code <h2 class=“headings”>City College London. </h2> The word City College London will appear in 24-point Times Roman to people whose browsers support Times Roman • You can create a style class that could be applied to any text rather than specific headings. This can be done by associating the style class with the <div> tag • e.g div.footnote {font-size: 9pt; line-height:12pt; text-align: centre;}

  8. Specifying inline styles • In some cases specific styles will be used only in a particular web page. • This can be implemented by enclosing the style sheet between the <style> and </style> tags at the top of the HTML document between the </head> and <body> tags • To specify a style for only a small part put the style attribute within the <p>, <div> or <span> tag • <span> is a dummy tag that does nothing except to specify a range of text to apply to any style attributes you define

  9. Specifying inline styles • The only difference between the <div> and <span> is that <div> forces a line break whereas <span> doesn’t <p style=“color: green”> This text is green, but <span style=“color: red”> This text is red.</span> Back to green again, but … </p> <p> ..now the green is over, and we are back to the default colour for this page</P>

  10. Positioning and layers <body> <span style=“margin-left: 50px; margin-top: 40px”> <img src=“pretty.gif /> </span> <span style=“margin-left: 60px;”> This is a pretty picture </span> • The above code will position the first image on the page exactly 50 pixels to the left and 40 pixels down from the top-left corner of the browser window. • Finally it will indent the text exactly 60 pixels from the left edge of the browser window

  11. Positioning and layers • The code below shows how to position an image exactly 50 pixels to the left and 40 pixels down from the top edge of the browser window <span style=“position:absolute; left: 50px;top:40px”> <img src=“pretty.gif” /> </span> If you leave the position: absolute measurements will be relative to wherever the text or image would normally appear on the page

  12. Multimedia in web pages • Multimedia is a popular buzzword for sound, motion video and interactive animation • The issues still to be resolved are: - There are many incompatible multimedia file formats from which to choose, and none has yet been standardized - Each new Web browser uses different HTML tags to include multimedia in Web pages

  13. Multimedia in web pages • The simplest way to put a multimedia on your web page is to use the <a href> tag e.g <a href=“titanic.avi> Play the Titanic video</a> • Depending on the plug-in in the user computer the application will open the titanic.avi video file • If no appropriate software is found to download the .avi file then the browser will offer the web link to the appropriate site from where the software can be downloaded

  14. Embedding sound in a web page • Using the <embed /> tag any file type can be placed directly on any Web page • For the media to appear on the web page the user should have the supporting plug-in or OLE-compatible helper application software • Media players come bundled with Netscape and IE can handle WAV, AU, MPEG, MID, EPS, VRML media types • The following line of code will include a media file named hello.wav and will display the playback controls at the current position of the page <embed src=“hello.wav “ />

  15. Embedding sound in a web page • Within the <embed> tag you can also include the width, height and align attributes • The <embed /> tag also enables to set any number of optional parameters, which are specific to the plug-in or player program e.g <embed src=atune.mid” width=“1” height=“1” autostart=“true” loop=“true” hidden=“true” /> This causes the file atune.mid to play whenever the page is displayed

  16. Embedding sound in a web page • autostart, loop and hidden are not standard attributes of the <embed /> tag, so these will be passed on to the plug-in program to interpret • If a suitable plug-in can’t be found then the windows 98 or 2000 versions of Netscape and IE will embed an Object-linking and embedding (OLE)-compliant application to play the media file • Therefore, the sound will play successfully in both NN and IE

  17. Understanding JavaScript (JS) • Web scripting languages, such as JavaScript, are one of the easiest ways to spice up a Web page and to interact with users in new ways • Since HTML is a simple text mark-up language, it can’t respond to the user, make decisions, or automate repetitive tasks • Interactive tasks like these require a more complex language: a programming language, or a scripting language

  18. Scripts and Programs • A movie or play follows a script- a list of actions (or lines) for the actors to perform • A Web script provides the same type of instructions for the browser • A script in JavaScript can range from a single line to a full-scale application • Some programming languages must be compiled, or translated into machine code, before they can be executed • JavaScript, on the other hand, is an interpreted language: The browser executes each line of script as it comes to it.

  19. JS • There is one main advantage to interpreted languages: Writing or changing a script is very simple • Changing a JavaScript is as easy as changing a typical HTML document, and the change is enacted as soon as you reload the document in the browser

  20. Java Applet <html><head><title>Oh Happy Day</title></head> <body><div align="center"> <applet code="Bounce.class" width="500" height="300"> No Java? How sad. </applet> <applet code="RnbText.class" width="500" height="50"> <param name="text" value="B E H A P P Y , L IK E M E !!!" /> </applet> </div></body></html>

  21. Introducing JavaScript • JavaScript was developed by Netscape Communications Corporation, the makers of the popular Netscape Navigator Web browser • JavaScript was the first Web scripting language to be introduced, and it is by far the most popular • JavaScript was originally called LiveScript and was first introduced in Netscape Navigator 2.0 in 1995. It was later renamed JavaScript to indicate its relationship with Java

  22. Things you can do with JavaScript • Add scrolling or changing messages to the browser’s status line • Validate the contents of a form and make calculations (e.g an order form can automatically display a running total as you enter item quantities) • Display messages to the user, either as part of a Web page or in alert boxes • Animate images or create images that change when you move the mouse over them • Detect the browser in use and display different content for different browsers • Detect installed plug-ins and notify the user if a plug-in is required

  23. JavaScript vs. Java • Java is a programming language developed by Sun Microsystems that can be used to create applets, or programs that execute within a Web page • Java is a compiled language, but the compiler produces code for a virtual machine rather than a real computer • The VM code is then interpreted by a Web browser. • This portability of Java applets allows the same code to execute the same way on PCs, Macintoshes, and UNIX machines, and on different browsers- at least in theory!! • JavaScript and Java are entirely different languages

  24. Java vs JavaScript • Java applets are compiled into class files to be used on a Web page; JavaScript uses simple text commands, which can be included in the HTML document itself • Java applets are generally displayed in a box within a Web Document; JavaScript can affect any part of the Web document itself • While JavaScript is best suited to simple applications and adding interactive features to Web pages, Java can be used for incredibly complex applications

  25. How JavaScript fits into a Web page • To add JavaScript to a page use the <SCRIPT> tag • The <script> tag tells the browser to start treating the text as a script, and </script> tag returns to the regularly scheduled HTML • In most cases, you can’t use JavaScript statements except within <script> tag. The exception is event handlers.

  26. <html><head><title>Our Home Page</title></head><body><h1>The American EggplantSociety</h1><p>Welcome to our Web page. Unfortunately,it's still under construction.We last worked on it on thisdate:</p><script LANGUAGE="JavaScript" type="text/javascript">document.write(document.lastModified);</script></body></html>

  27. The document.write statement sends output as part of the Web document. In the above example it displays the modification date and time of the document • Language=“JavaScript” specifies the scripting language to the browser

  28. Where to place the scripts ? • In the body of the page. In this case the output of the script is displayed as part of the HTML document when the browser loads the page • In the header of the page, between the <head> tags. Scripts in the header aren’t executed immediately, they can be referred to by other scripts. Often used when defining functions • Within an HTML tag. This is called an event handler and allows the script to work with HTML elements. (you don’t need to use the script tag) • In an entirely separate file. JavaScript files can be saved with the .js extensions. These can be included by specifying the file within the <script> tag

  29. Browsers and JavaScript • Unlike HTML, the results of browser incompatibility with JavaScript are more drastic • Rather than simply displaying your text incorrectly, the script may not execute at all, may display an error message, or may even crash the browser

  30. Versions of JavaScript • JavaScript 1.0, the original version, is supported by Netscape 2.0 and IE 3.0 • JavaScript 1.1 is supported by Netscape 3.0 and mostly supported by IE 4.0 • JavaScript 1.2 is supported by Netscape 4.0, and partially supported by IE 4.0 • JavaScript 1.3 is supported by Netscape > 4.5

  31. The <script> tag can specify a JavaScript version • One of the feature is to prevent older browsers from accessing the script • The JavaScript language has been submitted to the ECMA, a European standards committee • This committee has finalized the ECMA-262 specification, a standard for the language • JavaScript 1.3 follows the ECMA-262 standard

  32. Alternatives to JavaScript VBScript • VBScript is Microsoft’s answer to JavaScript • VBScript syntax is loosely based on Microsoft Visual Basic, a popular programming language for Windows machines • To begin a VBScript, use the <script language =“VBScript”> tag • Easier to learn than JavaScript • It is closely integrated with ActiveX, Microsoft’s standard for Web-embedded applications • Disadvantage: Only supported by IE. JS supported by IE and NN

  33. Common Gateway Interface (CGI) • CGI is not a language, but a specification that allows programs to run on Web servers • CGI programs can be written in a number of languages, including Perl, C, and Visual Basic • CGI programs are heavily used on the Web • The main difference between CGI and JavaScript is that CGI executes on the server, while JavaScript applications execute on the client • The main disadvantage of CGI is that, since the data must be sent to the Web server and back, response time may be slow!! • It can read and write files on the server. While a client-side JavaScript program can read information from a form and manipulate it, it can’t store the data

  34. ActiveX • ActiveX is a specification developed by Microsoft that allows ordinary Windows programs to run within a Web page • ActiveX programs can be written in languages such as Visual C++ and Visual Basic, and they are compiled before they are placed on the Web server • ActiveX applications, called controls are downloaded and executed by the Web browser, like Java applets. Unlike Java applets, controls can be installed permanently when they are downloaded, eliminating the need to download them again • Fortunately, ActiveX includes a signature feature that identifies the source of the control and prevents controls from being modified. You can specify which sources of controls you trust

  35. ActiveX <html><head><title>Label Control</title></head> <body> <object id="labelA" classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" type="application/x-oleobject" width="240" height="240" align="left"> <param name="Angle" value="30" /> <param name="Alignment" value="4" /> <param name="BackStyle" value="0" /> <param name="Caption" value="Wowza!" /> <param name="FontName" value="Arial" /> <param name="FontSize" value="36" /> <param name="ForeColor" value="#9900FF" /> </object> </body></html>

  36. ActiveX has two main disadvantages: 1. It isn’t as easy to program as a scripting language to Java 2. ActiveX is proprietary: It works only in IE and only under Windows platform

  37. Questions ?? • Can a Web page include more than one set of <script> tag ? Yes. • Can you make scripts that work on both NN and IE ? Yes. But not always easy. JavaScript can detect the browser and then run the code for the appropriate browser • What happens if a user’s browser doesn’t support JavaScript at all? You can use the HTML comments to prevent older browsers from displaying JavaScript code

  38. Questions ?? • Why do JavaScript and Java have similar names? Although they are different languages, JavaScript’s syntax is based on Java • When a user views a page containing a JavaScript program, which machine actually executes the script ? JavaScript programs execute on the Web browser • Which of the following languages is supported by both IE and NN? . VBScript . ActiveX . JavaScript

  39. Tools for Scripting • For Windows computers, few recommended editors are: - Homesite – An excellent HTML editor that includes JavaScript supports - Microsoft FrontPage 2000- Microsoft’s visual HTML editor. The script builder components allows you to easily create simple scripts - NetObjects ScriptBuilder – A script-oriented editor that simplifies the process of writing scripts

  40. A simple JavaScript 1: <script language=“JavaScript1.3”> 2: now = new Date(); 3: y2k = new Date(“Jan 01 2000 00:00:00”); 4: seconds = (now – y2k)/ 1000; 5: document.write(“Seconds after the year 2000: “ + seconds); 6: </script> • Lines 2 and 3 assigns a value ( a date) to a variable • Line 2 creates a variable called now and stores the current date and time in it • Line 3 creates a variable called y2k and stores the first moment of the year 2000 in it • Notice the semicolon at the end of the above statements. These tell the browser that it has reached the end of statement

  41. The Date is a built-in JavaScript object seconds = (now – y2k)/ 1000; • The above line will give the number of milliseconds after the year 2000 • The script then converts the value to seconds and stores it inside the third variable seconds • The parenthesis tells the computer the subtraction happens before the division

  42. Creating Output • JavaScript displays information using the document.write statement • The document.write statement displays text, a number, or anything else you throw at it document.write(“Seconds after the year 2000: “ + seconds); • The output will display some text followed by the contents of the seconds variable • The ‘+’ sign tells the browser to combine the two values into one string of text

  43. <html> <head><title> The year 2004</title></head> <body> <hr /> <script language=“JavaScript1.3”> now = new Date(); yk = new Date(“Jan 01 2004 00:00:00”); seconds = (yk – now) / 1000; document.write(“seconds until the year 2004:”+ seconds); </script> </body> </html>

  44. Questions ?? 1. What software do you use to create and edit JavaScript programs? A. A browser B. A text editor C. A pencil and a piece of paper 2. What are variables used for in JavaScript programs? A. Storing numbers, dates, or other values B. Varying randomly C. Causing high school algebra flashbacks

  45. 3. What should appear at the end of your JavaScript? A. The <script language=“javascript”> tag B. The </script> tag C. The END statement

  46. Improving a Site’s User Interface • Using the Status Line The status line is the grey strip at the bottom of the browser window that is found in all of today’s fashionable browsers. It usually serves two purposes - Displaying descriptions of menu and toolbar items - Displaying the URL of links as the mouse pointer moves over them • Using JS you can take control of the status line yourself. • Scrolling messages in the status line is one of the most popular uses of the JavaScript

  47. One common example of JavaScript is to replace the URL display in the status line with a description of the link the mouse pointer is over • JavaScript can be used to navigate Web sites • The drop-down lists on Web pages where you can select a page’s title from the list to load a particular page is usually accomplished with JS

  48. Pop-up Windows and Other Features • You can create pop-up alert, confirmation, or prompt messages with JS • A simple example of an alert message is shown below ! This is an alert OK • These can alert the user to an error, present a warning or disclaimer, or prompt for information

  49. Graphics and Animation • Using JS you can create dynamic images, which allows the designer to replace one image on a page with another image without reloading the page • One of the most common uses of this JS feature is to create images that change when the mouse moves over them. This is usually used to highlight an image used as a link as the user moves the mouse pointer across it • Graphics that change when the mouse pointer passes over them are variously known as rollovers or mouseovers

  50. JS can also be used to replace images in a sequence, creating a full-scale animation • JS can be used to detect the user’s browser type and version and either send him/her to the appropriate customized page or use JS to customize the output from a single page • You can use JS script to detect whether the browser has a particular plug-in installed and modify the HTML page appropriately. If the plug-in is not available, your script can send the user to a different page, or even send him to the download page for the plug-in

More Related