MODULE 2 : BASIC WEB SCRIPTING

1. MODULE 2 : BASIC WEB SCRIPTING ● Aliza Abdul Latif ● Dept. of Information System ● College of Information Technology ● Universiti Tenaga Nasional ● aliza@uniten.edu.my ● ● Masyura Ahmad Faudzi ● Dept. of Graphics & Multimedia ● Universiti Tenaga Nasional ● masyura@uniten.edu.my ●

2. Chapter 1 AN INTRODUCTION TO HTML

3. Objective • Upon completion of this module, you should be able to understand the followings: • General Terms and Concepts • What is HTML? • Appearance of an HTML Document • HTML Tools • Planning an HTML Document

4. General Terms and Concepts • Web Page • A Web page is a simple text file that contains not only text, but also a set of HTML tags that describe how the text should be formatted when a browser displays it on the screen. • A Web site is a collection of Web pages that are created and maintained by a company, a university or college, a government agency, or even an individual.

5. General Terms and Concepts • Web sites contain more than just text, they also contain graphics, sound and video files.

6. General Terms and Concepts • URL • URL (Uniform Resource Locator) is a naming system that compactly describes the location of every resource on the Internet and the protocol to retrieve it. • A URL can be broken into three parts: "http://www.jack.com/myDir/myPage.html" Domain Name Transfer Protocol File Path Name

7. General Terms and Concepts • Web Server • A Web server is a program that runs on a computer connected to the Internet. • The Web server watches the Internet connection and waits for requests from the Web browser. • When it receives a requests, if this is static HTML document, it finds the document and sends it back to the browser that requested it; for dynamic page, some server side scripts (programs) will run first and generate the information then return back to the requested clients.

8. What is HTML? • HTML stands for HyperText Markup Language, a language for creating web pages. • Hypertext is text, in any format, with an added feature: parts of the text is linked to other parts of the text, making it easy to jump from one part of the text to another.

9. The Concept of Hypertext

10. What is HTML? • HTML is a markup language. What this means is that it takes a document and marks specific parts of it, giving them special meaning.

11. Example of a HTML Document

12. The HTML Code in Notepad

13. Appearance of an HTML Document • A browser can display a Web page with a variety of fonts and styles. • Different browsers might make different choices of font. One browser might apply a Times New Roman font to text in the document heading, while another might use an Arial font.

14. Example Of Two Different Browsers Displaying The Same File

15. Appearance of an HTML Document • The Web must work across computer platforms, a feature known as portability. Because each computer differs in terms of what, if any, fonts it can display, the browser determines how text is to be displayed. • While it might be possible to include exact specifications on how to display each character within the Web document, doing so would increase both file size and time required to retrieve it.

16. A Teaching Tool • To see a copy of the file that your browser reads to generate the information in your current window, select View Source (or the equivalent) from the browser menu. • The file contents, with all the HTML tags, are displayed in a new window.

17. A Teaching Tool • This is an excellent way to see how HTML is used and to learn tips and constructs.

18. HTML Tools • The only software package you need to create them is a basic text editor like the Windows Notepad application. • If you want a software package to do some work of creating an HTML document, you can use an HTML converter or an HTML editor.

19. HTML Tools • HTML converter • An HTML converter takes text in one format and converts it to HTML code. • For example, you can create the source document with a word processor like Microsoft Word and then have the converter save the document as an HTML file. • HTML editor • An HTML editor helps you create an HTML file by inserting HTML codes for you as you work.

20. Planning an HTML Document • Create an Outline • The outline should include a list of all the elements for your page, including its title, an introductory paragraph, links to other sites, an optional graphic image, and a contact address. • Enter text in a document • Use a text editor to create the document that will be the Web page. • Insert HTML tags around each element on the page • Type HTML tags around the elements in your document.

21. Planning an HTML Document • Add graphics • Insert HTML-compatible graphic files to add value to your page and make it attractive. • Add links to other Web Sites • Create links in your document to other Web sites that would be of interest to your readers. • Save the document • Save your work often to prevent loss of data.

22. Planning an HTML Document • View the page • Periodically examine your page using a Web browser. Correct any errors to the HTML codes as you go. • Test the links • Make sure the links in your HTML page are correct and function properly. Verify that you have entered the URLs correctly and go to those sites to be sure they are still active.

23. Chapter 2 UNDERSTANDING HTML SCRIPTS

24. Objective • Upon completion of this module, you should be able to understand the followings: • Index file • HTML Basic Page • HTML Text • HTML Layout • Tag Overview

25. Index File An "index page" is the Web page that appears when someone visits the top level of your Web site (or a directory within the site) without specifying a particular file name. For example, if someone visits http://www.example.com/, the Web server will need to choose a default page, because the URL address doesn't include a file name.

26. Index File • To make sure your Web site works when a visitor goes to http://www.example.com/ without specifying a page name, you should be sure that the top level of your Web site contains a file named "index.html“. The file must be at the top level; the Web server won't be able to find the file if it's inside a folder or directory you published. • When the Web server gets a request for something which is the name of a folder, it looks for a list of files with special names. If it finds one of these files, it shows the file, otherwise it shows a directory listing.

27. INDEX FILE • By putting an index file in every directory you create, you not only save on having to type in a filename when you create links to the main file, but you also make it easier for people to get to your site. • For example, let's say you want to create a homepage for the subject CISB334, in the /aliza/CISB334/ folder. If you start with an index.html file as the homepage, its URL will be http://metalab.uniten.edu.my/aliza/CISB334/index.shtml, but people will be able to see it by going to http://metalab.uniten.edu.my/aliza/CISB334/ as well. If you did not create an index file, anyone who used the second address would be able to see a listing of all the files in that directory. 27

28. Directory Listing

29. HTML Basic Page • All HTML documents should begin with the following set of tags: <HTML><HEAD><TITLE>Write your title here.</TITLE></HEAD><BODY>Begin your main body of text here.

30. HTML Basic Page • All HTML documents should end with the following set of tags: </BODY></HTML>

31. HTML Basic Page

32. HTML Basic Page - HTML • <HTML>… </HTML> • The <HTML> tag identifies a file as being an HTML file or a Web page. • The entire document goes between HTML tags.

33. HTML Basic Page - HEAD • <HEAD>…</HEAD> • Appears just below the HTML tag in every HTML document. • It contains information about the document but does not appear on the Web page.

34. HTML Basic Page - TITLE • <TITLE> • The TITLE element is used to identify the title of the document and is required to be placed inside the <HEAD> container. • Note that the title is not displayed within the actual page. Rather, the title appears at the top of your browser.

35. HTML Basic Page - TITLE • The title is a required part of Web page, and it is important for three reasons: • People who visit your page may use the title in a Bookmark, Favorite, or Hot list Entry. It should help them define the contents of the page so they can easily return to that page if they wish.

36. HTML Basic Page - TITLE • An Internet search site (i.e. Goggle, Yahoo, etc) or cataloging program may return only the title as a description of your page. People may make decision whether to visit your page or not based on this information. • People who are surfing the Net and come upon your page should have some idea of the contents when they arrive.

37. HTML Basic Page - TITLE • Titles must be descriptive and brief many geographical browsers place the title in the bar across the top of the screen and long lines may cut off.

38. Basic HTML Page - Body • <BODY>…</BODY> • Contains all the text and images that will appear on the Web page, together with all the HTML elements that provide the control/formatting of the page. • Anything within the <BODY></BODY> container is called the “body content”.

39. Basic HTML Page - Body • Additional attributes to the tag <BODY> allow a user to specify global coloring of the web page. Attributes of this tag include:

40. Basic HTML Page - Body • For example, to create a web page with a background colour of green normal text in red and links in blue is specified with the following attributes to the tag <BODY>. <BODY BGCOLOR="#00FF00" TEXT="red" LINK="#0000FF">

41. HTML Text – Text Formatting Tags • The <CENTER>text</CENTER> is centered. • The <B>text</B> is bolded. • The <I>text</I> is italicized. The text is centered. The text is bolded. The text is italicized.

42. HTML Text – Text Formatting Tags • The <U>text</U> is underlined. • The <B><I><U>text</U></I></B> is bolded, italicized and underlined. The text is underlined. Thetext is bolded, italicized and underlined.

43. HTML Text – Text Formatting Tags • The <TT>text</TT> is in a teletype font. • The <FONT SIZE="+2" COLOR="RED">text</FONT>is 2 sizes larger and the text is in red.  The textis in a teletype font. The text is 2 sizes larger and the text is in red.

44. HTML Layout –Line Breaks • HTML does not really do anything with normal line breaks it just skips them. • The basic tag for this purpose is the <BR> or line break. • HTML does not really care about regular line breaks.

45. HTML Layout –Line Breaks

46. HTML Layout – Paragraph • When you want to skip a line, using the BR tag won’t always work. Even if you use dozens. • To this purpose there is another tag, the paragraph tag: <P>.It skips a line and starts a new paragraph of text. • While not strictly necessary, it is advisable to use a closing </P> tag for paragraphs.

47. HTML Layout – Paragraph

48. Chapter 3 Hypertext Markup Language

49. Hypertext Links • Web has the ability to create links from one page to another. • For example, a link to Uniten’s homepage would look like this: UNITEN • A click on the word UNITEN will direct user’s straight to the Uniten’s website. • The code behind this is: <a href="http://www.uniten.edu.my/">UNITEN</a>

50. Hypertext Links • Code :<a href = "http://www.uniten.edu.my/">UNITEN</a> • Result: UNITEN • The text between the <a> and the </a> is used as a caption to the link. • Caption is normally blue in color.