Section 4 Web Skills TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

The WEB The Web is 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 many services 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. TU170-Mrs. Hanan Al-Ali

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" TU170-Mrs. Hanan Al-Ali

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). TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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!! TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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 TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

Plug-ins PlugIns are another type of free 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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

HTML What HTML contains. HTML contains commands, called tags or 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. TU170-Mrs. Hanan Al-Ali

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). TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

Headings This is a first level heading. 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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

Paragraphs HTML Source Example showing several paragraphs This is a sentence in a browser.<P> This sentence appears as a new paragraph because the paragraph tag has been used, even though it appears as one paragraph in the HTML source. <P>Here is another sentence. This sentence appears to be part of the same paragraph in the browser because there is no paragraph tag, even though it appears as two paragraphs in the HTML source. Example showing several paragraphs This is a sentence in a browser. This sentence appears as a new paragraph because the paragraph tag has been used, even though it appears as one paragraph in the HTML source. Here is another sentence. This sentence appears to be part of the same paragraph in the browser because there is no paragraph tag, even though it appears as two paragraphs in the HTML source. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

Lists Example of an ordered list This is an ordered list. HTML Source of the ordered list example This is an ordered list. <OL> <LI>Here is the first item.</LI> <LI>Here is the second item.</LI> <LI>And so on...</LI> </OL> Example of an ordered list This is an ordered list. Here is the first item. Here is the second item. And so on... TU170-Mrs. Hanan Al-Ali

Lists This is an unordered list. Unordered list example 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. HTML Source of unordered list example This is an unordered list. <UL> <LI>Here is the first item.</LI> <LI>Here is the second item.</LI> <LI>And so on...</LI> </UL> Unordered list example This is an unordered list. * Here is the first item. * Here is the second item. * And so on... TU170-Mrs. Hanan Al-Ali

Nested Lists <UL> <LI>Here is the first item.</LI> 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. HTML Source of nested list example <UL> <LI>Here is the first item.</LI> <LI>And the second item has some sub-items:</LI> <OL> <LI>Here is the first sub-item</LI> <LI>And the second sub-item</LI> </OL> <LI>And a third item in the outer list.</LI> </UL> TU170-Mrs. Hanan Al-Ali

Nested Lists Here is the first sub-item And the second sub-item Nested List example * Here is the first item. * And the second item has some sub-items: Here is the first sub-item And the second sub-item * And a third item in the outer list. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

links to graphics A link can be used to display a graphic, which is in a separate file. Example of links to pictures A link can be used to display a graphic, which is in a separate file, like this OU logo: HTML Source of picture and e-mail links A link can be used to display a graphic, which is in a separate file, like this OU logo: <P> <IMG SRC=“TU170logo.gif"></P> TU170-Mrs. Hanan Al-Ali

links to graphics 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. TU170-Mrs. Hanan Al-Ali

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. 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. TU170-Mrs. Hanan Al-Ali

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. TU170-Mrs. Hanan Al-Ali

links to other files HTML source of links to other HTML files example <P>You can use external links to take you anywhere, as for example, <A HREF="http://www.open.ac.uk">to the Open University Home Page. </A></P> <P>Or you can use a local link to take you to a <A HREF="local_file.htm">file</A> in the same directory.</P> <P>It is hardly any different if the <A HREF="more_files/local_file.htm">local file </A> is in a separate directory, called 'more_files'. </P> TU170-Mrs. Hanan Al-Ali

links to other files Example of links to other HTML files You can use external links to take you anywhere, as for example, to the Open University Home Page. (just click on the underlined text). Or you can use a local link to take you to a file in the same directory. (just click on the underline word (file)). It is hardly any different if the local file is in a separate directory, called 'more_files'. (just click on the underline (more files)). TU170-Mrs. Hanan Al-Ali

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> TU170-Mrs. Hanan Al-Ali

Links within the same document: HTML source of internal link example <A NAME="start"></A> [other paragraphs in the document] <P> <A HREF="#start">Do you want to go back to the beginning of this document?</A> This link will take you back to the place where the anchor called 'start' has been placed.</P> TU170-Mrs. Hanan Al-Ali

Links within the same document: Example of a link to within a document [other paragraphs in the document] Do you want to go back to the beginning of this document? This link will take you back to the place where the anchor called 'start' has been placed. (Just click on the underlined sentence). TU170-Mrs. Hanan Al-Ali

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 TU170-Mrs. Hanan Al-Ali

Links to Email client Example of links e-mail HTML Source of e-mail links <P>To contact me, <A HREF="mailto:TU170aou@gmail"> Send me an e-mail</A> , or call 5880111. </P> Example of links e-mail To contact me, TU170aou@gmail, or call 5880111 TU170-Mrs. Hanan Al-Ali

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> TU170-Mrs. Hanan Al-Ali

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> </UL> TU170-Mrs. Hanan Al-Ali

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> TU170-Mrs. Hanan Al-Ali

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> TU170-Mrs. Hanan Al-Ali

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). TU170-Mrs. Hanan Al-Ali

Good Web design The last part of this section talks about issues of good style and design on the Web. Exercise 28 gives you a set of design principles. Some of these principles are: Your site must be attractive. You may need to use HTML extension. You can do it by adding plug-ins, or by adding a small program using Java or JavaScript as a programming language designed for the Web. TU170-Mrs. Hanan Al-Ali

Good Web design You can have an attractive site by applying the following: Use some of the advanced design principles. Try to apply some kind of movements. Make interaction. Use Tables and Tables within Tables in addition to what you have learned for displaying text or graphics in columns. Use Frames which divides the browser window into different independent sections. TU170-Mrs. Hanan Al-Ali

Good Web design Use colors for background, text and cells of tables to make your pages look pretty and colorful. Sometimes colors are important to separate different parts of the page, or if you want, make items flash to get the viewers attention. Use typefaces, sizes and styles to add interest . Try to present a clear and simple structure for your pages. TU170-Mrs. Hanan Al-Ali