Section 4

1. Section 4 This section forms the core of the TU170 course. Web Skills Prepared by: Mr. Zakaria Al-Rababa’h zakaria@aou.org.bh Mr. Ammar Al-Qaragholi aalqaragholi@aou.org.bh Mr. Ahmad Kananah kananah@aou.org.bh MR. Mahmoud Mustafammustafa@aou.org.bh

2. Aims By the end of this section • You will have a clear idea of the potential of the Web. • You will have taken a few steps towards becoming a competent Web author and publisher. • You will learn the basics of the HTML: the language of the Web. This will be covered in two main: • Finding Information on the Web. • Creating web pages using HTML.

3. The WEB • The Webis a system that connects information, regardless of where it is stored. The Web is just a part of the Internet, it is the most accessible and user friendly part, as well as the fastest growing. Other pieces of the Net include newsgroups and mailing lists, FTP, Gopher and Telnet. • The Web is one of manyservices that run on the Internet. E-mail is another service. The Web went public in 1991. It was invented for people to provide information and links to each other's documents. It is also defined by a set of standards such as: • HTTP (Hypertext Transfer Protocol). This standard specifies how information exchange between machines should be handled.

4. The WEB • URL (Universal Resource Locator = Uniform Resource Locator), which defines the location at which documents are stored. • HTML standard (Hypertext Markup Language). Any document which confirms to HTML standard can be put on the Web (WWW), and can be read using "browsers"

5. The Internet: • It is a way of linking large multi-user computers. Such a connection consists of physical links that were set up between them. This connection consisted of wires when the internet was developed in 1969, but now, it includes microwave link, Satellite links, Optical fibers and wireless connection. • The Internet includes also the standards and mechanisms for routing information from one computer to the next which ensure that all computers connected to it can understand the information on it. Such standards are called TCP/IP (Transmission Control Protocol/ Internet Protocol).

6. The difference between Internet and Web • The Internet is a way for computers to communicate. It is all the word's computer Networks connected together with smaller and slower moving Networks connected to it. • The net has an enormous amount of information available for any one to access and it provides an instantaneous delivery of information around the world. This allows people worldwide to communicate with each other within seconds or minutes rather than hours or days. • It is noticeable that people's knowledge and use of the Internet has been increasing day by day over the last ten years.

7. Web Importance • It hides the complexity of Internet addresses and commands. • It summarizes most of the different features of the Internet into a single interface used by Web applications. • It allows you to see pictures, and even hear sounds or watch movies while you are reading/writing texts. WWW is the most popular on-line medium. It displays a rich variety of text, graphics and interactive information. The basic technology defining the Web is the hypertext that jumps you to another file or to some specified location within a document. Graphics can also serve as links.

8. The Net Who owns of the Network? Many people are astonished (surprised) by the fact that no one owns the Internet. It is run by volunteers. It has no central headquarter, no centrally offered services, and no comprehensive index to tell you what information is available on the Net. Your job is to look for it!!

9. The Net What is the core of the Internet? There is some thing called the "Backbone of the Internet", which is the core of the Internet. It is a group of host computers linked by a dedicated high speed telecommunication connection. Service providers (ISPs) get their high speed connection by connecting to the backbone group; others (networks, regional companies, educational institutes, governments…) can connect into service providers and the regional or educational networks.

10. Finding Information on the Web. By the end of this subsection, you should • Know useful information sources. • Organize bookmarks and favorites. • Know what search engines are. • Know how to find links for your Web channel. • Be able to find free software. Different sites and links are useful in achieving the above objectives, such as www.google.com. Here, you should complete five exercises, namely E20-E24.

11. Finding Information on the Web. • All the major browsers offer some means of storing the names and URLs of sites that you like so that you can easily return to them later. • As an example, in Netscape Navigator these stored site addresses are called bookmarks; in Internet Explorer, they are called favorites. • If you accumulate a lot of bookmarks/favorites, you may want to organize them into folders. If you upgrade to a new version of the same browser, your bookmarks/favorites will be there for you automatically.

12. Organizing your Favorites/Bookmarks To keep track of your favorite and frequently visited Web sites, you can organize them into folders. Most browsers (such as Netscape Navigator and Internet explorer) have features that allow you to save your favorite Web sites and displays the history of the Web pages you have visited. • Exercise: Store the address of the Web site you are viewing in a new folder. • To quickly open a favorite page, click the Favorites option on the menu bar and then click the site you want to open. • Solve the designated exercises E20-E24.

13. Free Software Software that is distributed freely, together with the original programmer's “source code”. Another name for free software is open source software. Why do programmers produce free software? Some people produce such free software for fun or for the prestige and appreciation they get for doing something of value to the community. The Free Software Foundation (FSF) is a non-profit organization based in Boston, USA. It relies on support from individuals to carry out our mission to preserve, protect and promote the freedom to use, study, copy, modify, and redistribute computer software, and to defend the rights of all Free Software users.

14. Benefits of free software Other programmers could • Improve the program • Learn what clever tricks the first programmer had used. • Build on the best of each other's ideas • Catch and correct errors they had found. • Have other sources of income

15. Shareware A shareware is a software that allows free copying and trial use, but asks users to pay a small fee if they like and use it. • No source code is included • Is not meant for use by programmers. • Asks users to voluntarily pay a small fee if they like and use it.

16. Freeware Is a gift from the programmer to the user community. • There is a variety of software available ranging from small utilities to games, internet tools, business tools and educational tools. • An example of a site for downloading software is: CNET’s download.com. • No source code is included • Is not meant for use by programmers. • Is the gift of the programmer to the user community.

17. Plug-ins • PlugIns are another type offree software. • They are extensions to other software such as browsers or graphics software. • Some good general purpose sites for getting plug-ins are: • “Netscape's plug-in page” gives links to plug-ins for its browser. • “Browser watch” gives up to date information about browsers and plug-ins for them. • One of the most popular types of plug-ins at present is that which plays music in the 'MP3' format.

18. Creating Web pages using HTML: • Here, you will learn how to set up facilities on the internet by creating Web pages and mounting them on the World Wide Web. This section or Web page creation strategies helps you to choose the proper tool for the task at hand. It teaches you design principles and shows how to layout Web page elements effectively. • You will learn how to create a home page and how to publish documents on the Web.

19. Creating Web pages using HTML: As you complete this part of the section you will learn: • Web Page strategies and design. • Basics of HTML and how it works. • How to put images on Web pages. • How to use tables for advanced Web page layout. • How to make local Web and home page.

20. HTML • What is HTML? HTML is an abbreviation for Hyper Text Markup Language. A text markup language is a way of describing what the document text means, or what it is supposed to look like, using instructions embedded within the document,. • A markup language is just a collection of codes, embedded in the document, which explain the meaning or desired formatting for the marked text.

21. HTML What HTML contains. • HTML contains commands, called tagsor elements, to mark text as heading, paragraphs, lists, quotations, and so on. It also contains tags for including images within the documents or for including fill-in forms that accept user input, and, most important, for including hypertext links connecting the document being read to other documents or internet resources. • HTML specifies where other documents are through using URLs (Uniform Resource Locators), which is included in HTML markup instructions and used by the user's browser to find the designated resource.

22. Creating HTML Documents • HTML is designed to be an "extensible" language. "Extensible" simply means that new features, commands, and functionality can be added to the language, without "breaking" older documents that don't use these new features. • HTML was not designed to be the language of a "What You See Is What You Get" (WYS|WYG) such as in word processing. Instead, HTML takes "What You Get Is What You Meant" approach (WYG|WYM).

23. Creating HTML Documents • You can construct HTML documents with sections of text (and/or images and other embedded objects, such as Java applets) marked as logical entities, such as titles, paragraphs, lists, quotations, …etc. • HTML is a structured language, which means that there are rules for where elements can and can not go. • There are other types of software that have been adapted to create HTML. The simplest is the word processor which often has a "save as HTML“ saving option.

24. Creating HTML Documents • Do Exercise 25 learns you how to prepare an HTML document. • Do Exercise 26 to Learn how to create a simple web page and publish it.

25. Basic elements of HTML Main ingredients HTML has been developing rapidly since it was invented. Earlier HTML versions had only three main commands which are well standardized across different browsers These are: Headings, Lists, and Hyperlinks to other pages and to pictures. More recent major ingredients are: • Tablets, Frames, and Forms (for interactivity including buttons, pop-up menus, and text fields) These recent ingredients are useful for improving the format of a Web page and for making them interactive. However, they are not well standardized.

26. Headings • There are 5 levels of headings in HTML. A heading must have a heading tag, like <H1>, to mark its start, and an ending tag, like </H1>, to mark its end. <H1>This is a first level heading.</H1> This is a first level heading. <H2>This is a second level heading.</H2> This is a second level heading. <H3>This is a third level heading.</H3> This is a third level heading. <H4>This is a fourth level heading.</H4> This is a fourth level heading. <H5>This is a fifth level heading.</H5> This is a fifth level heading.

27. Paragraphs • In HTML, paragraphs must be explicitly indicated with the paragraph tag <P>. An ordinary 'return' character in the editor will not be seen by the HTML browser. Look carefully at the following example and see if you can understand why the paragraph breaks appear in different places in the browser version and in its HTML source. • You should use carriage returns freely in your text editor to make the style clearer. Put in paragraph tags when you want a new paragraph in HTML. • Note that most browsers put blank lines between paragraphs. • It is best to end a paragraph with </P>, although most browsers will assume it is there if it is missing. This 'closing tag' is required for more advanced HTML so it is best to get into the habit of using it.

28. Paragraphs

29. Lists There are several kinds of lists in HTML. The two main ones are: 1. Ordered lists, with numbers in front of each item (the browser inserts the numbers) 2. Unordered lists, with bullets '•' in front of each item • Following is an example of an ordered list. Notice that an ordered list has the tag <OL> in front of it and the tag </OL> at its end. Each line of the list has the tag <LI> in front of it. Notice that the lines are not numbered in the HTML source. • Strictly speaking, it is best to end a line of a list (ordered or unordered) with </LI>, although most browsers will assume it is there if it is missing. This 'closing tag' is required for more advanced HTML so it is best to get into the habit of using it.

30. Lists

31. Lists • An unordered list uses bullets "•" instead of numbers. The HTML tags are <UL> and </UL> at the beginning and end, and again, <LI> to mark each line.

32. Nested Lists Use lists freely to help to structure your document. You can even have nested lists within lists, as shown in the following example. Notice that the outer list has bullets not numbers, and so is an unordered list.

33. Nested Lists

34. Links • Links are the most exciting part of HTML. They are what make an HTML document into a 'hypertext' document. You can include links to: • Graphics which you want included in your document. • External sites anywhere on the World Wide Web. • Another part of the same document. • A separate document related to the same document. • And a 'Mailto:' link which lets people send you e-mail.

35. links to Images A link can be used to display a graphic, which is in a separate file.

36. links to Images In this example the graphic file ‘TU170logo.gif' was stored locally in the same directory as the file which is calling it. However, the technique works equally well for a graphic stored anywhere on the web. Just put in its full URL.

37. links to other files A link is usually indicated in the browser by colored underlined text. In the HTML source, the text which is to be underlined is marked with a tag of the form: <A HREF="URL of reference"> at its start, and </A> at its end. Notice that there are quotation marks around the address. The following example shows links: a) To a document elsewhere on the Web, and b) To a separate document stored on the same computer as the original document.

38. links to other files Notice that in the HTML source of the first link, the full URL is given. In the second, only the file name is given. That means that the file being linked has to be stored in the same directory as the file it is being linked from. Notice that in the HTML source of the first link, the full URL is given. In the second, only the file name is given. That means that the file being linked has to be stored in the same directory as the file it is being linked from.

39. links to other files

40. links to other files

41. Links within the same document: The Anchor is a place within a document where you want to jump-to when selecting some link. To link to an anchor, • Mark the 'anchor' by <A NAME= "name of anchor"> • Then mark the link by: <A HREF="#name of anchor"> text you wish to appear underlined</A>

42. Links within the same document:

43. Links within the same document:

44. Links to Email client To establish a “send an email message” link: <A HREF="mailto:e-mail address of recipient">name you wish to be underlined </A> When someone clicks on such a link, their e-mail program should open up and start a new message to the e-mail address given in the link. This does not always work because some browsers are not set up to do this It is advisable to include your e-mail address visibly on the page

45. Links to Email client

46. Summary of basic HTML commands Headings • <H1>first level heading.</H1> • <H2>second level heading.</H2> • <H3>third level heading.</H3> • <H4>fourth level heading.</H4> • <H5>fifth level heading.</H5> Paragraphs • <P>a paragraph</P>

47. Summary of basic HTML commands Lists • Ordered list • <OL> • <LI>the first item.</LI> • <LI>the second item.</LI> • <LI>And so on...</LI> • </OL> • Unordered list • <UL> • <LI>the first item.</LI> • <LI>the second item.</LI> • <LI>And so on...</LI> • </UL>

48. Summary of basic HTML commands Links To display a graphic on a web page: • <IMG SRC="http://URL of graphic"> To a document somewhere else on the Web: • <A HREF="http://URL of target site">text you wish to appear underlined</A>

49. Summary of basic HTML commands To someplace within the same document: • The 'anchor' (place you want to jump to) is marked by <A NAME= "name of anchor"> • Then the link is marked by: • <A HREF="#name of anchor">text you wish to appear underlined</A> To send an email message: • <A HREF="mailto:e-mail address of recipient">name you wish to be underlined</A>

50. Using HTML editor to build a webpage You should use a suitable HTML editor for your pages. This is described in Exercise 27. The following is a list of HTML editors which can be used: • MS Word, MS publisher, Word Perfect, Power point, MS FrontPage, or MS Home Publishing Suite, • Netscape Composer (It is a simple HTML editor which is installed automatically as part of the Netscape Navigator Software).