Section 4 Web Skills

1. Section 4Web Skills Saatchi, Seyed Mohsen

2. Outlines • Aims • Introduction • Finding information on the web • HTML • Conclusions • TMA02

3. Aims • The main subjects will be covered in this session • Finding information on the web • Creating web pages by using HTML language • Explanation of the second TMA

4. Introduction • The Internet • Developed in 1969 as a way of linking large multi-user computers • In part it consists of physical links that were set up between them • In the past • Originally it was wires • But now it includes a- Microwave links b- Satellite links c- Optical fibers links

5. Introduction • TCP/IP • Transmission Control Protocol / Internet Protocol • It is an Internet standards that used for routing information from one computer to another • It ensures that all computers that connected to Internet can understand the information on it • There are many Internet services run at the top of the Internet • World Wide Web (WWW) • E-mail • Computer conference • Telnet • File Transfer Protocol (FTP) • Gropher

6. Introduction • The World Wide Web (WWW) • It is an Internet service • WWW is the most popular on-line medium • It was invented for people to provide information & link to each other’s documents • The WWW first went public in January 1991 • It is defined by a set of standards a- http (Hyper Test Transfer Protocol) • To specify how information exchange between machines should be handled b- URL (Universal Resource Locator) • To define location at which document are stored

7. Introduction c- HTML (Hyper Text Markup Language) • It’s a WWW language • Benefits of WWW a- Hides the complexity of Internet address & commands b- Summarizes most Internet features into single interface used by Web applications c- Large resource for information including text, images, sounds, & movies • Notice that Internet and WWW are NOTthe same entities. WWW is just one among many services running on the Internet

8. Introduction • The core of the Internet • Backbone of the Internet • It is a group of host computers linked by a dedicated high speed telecommunication connection • Internet Service Providers (ISPs) get a high speed connection by connecting to backbone group • Other (networks, regional companies, educational institutes, governments) connect to Internet through ISP

9. Finding information on the web • Web Browsers • The Browser is a program that used to get WWW services • There two main browsers: 1- Netscape Navigator, and 2- Internet Explorer • Basic commands used in the browsers are 1-     Forward: goes to the next page 2-     Backward: goes to the previous page 3-     Refresh(Inter Explorer) or Reload(Netscape): to reload the WWW page from the server 4-     Stop: to interrupt current page transfer 5- View Source: to see the HTML code of the current WWW page

10. Finding information on the web • Storing web sites addresses (favorite web pages) • Most browsers allow to keep a record of links to sites you have found useful (frequently visited) • Examples: 1- Netscape Bookmarks 2- MS Explorer Favorites • Storing web sites addresses in folders • They can be renamed appropriately and organized into folders by: 1-   Click Favorites on your Internet Explorer toolbar. 2-   Clicking on Create In button in the Add to Favorites dialog box. 3-   You can either add this web page to old folder or we can create new folder by click New folder, then type a name for the folder and then click OK button.

11. Finding information on the web • Search Engines • Special meta sites • Allow you to search for others sites on the WWW • Some Examples Alta Vista, Arab Sites, Aiwa Gulf, Arab World Search Engines (AWSE), Yahoo, Mamma, NISS, BUBL, GoogleUK, & Fast • The search result list is ordered such that the information at the top of the list will be always the most relevant ones to your search

12. Finding information on the web • Alta Vista search engine • The most popular search engine • There are some narrowing technique that narrow your search result as following a- Use Quotes “” search for the included text as a whole entity b- Use plus ‘+’ include a word in the search result c- Use minus ‘-’ exclude a word from the search result • Remark: Not all search engines use the same narrowing techniques as Alta Vista!

13. Finding information on the web • Examples • Ex1: Search for Mohammed Ali • Result: all web pages that contain ‘Mohammed’ (first name ) or ‘Ali’ (last name) or ‘Mohammed Ali’ • Ex2: Search for “Mohammed Ali” • Result: all web pages that contain ‘Mohammed Ali’ only • Ex3: Search for “Mohammed Ali” “United Kingdom” • Result: increase the number of hits, because there are many web pages contain ‘United Kingdom’ w/o ‘Mohammed Ali’ • Ex4: Search for +“Mohammed Ali” “United Kingdom” • Result: ‘Mohammed Ali’ should be included in all hits • Ex5: Search for +“Mohammed Ali”- “USA” • Result: ‘Mohammed Ali’ should be included in all hits w/o USA

14. Finding information on the web • Types of software found on the web • Free software • Come up along with their source code, e.g., Free Software Foundation and Open Source Software • This is usually meant for use by programmers who can understand and elaborate on the associated code. • The programmers produce free software because they have other sources income and are producing their software mainly for fun or prestige and appreciation they get for doing something of value to the community

15. Finding information on the web • Shareware & freeware • No source code is included as this is not meant for use by programmers • Shareware: is a software which allows free copying and trial use, but asks users to pay a small fee if they like and use it • Freeware: is a gift (totally free) 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 • In some cases you get demonstration versions of commercial software, stop working after a month or so, or which don’t allow you to save files • You can also get ‘light’, or cut-down versions (with limited features) of commercial software. The owners hope you will like it and buy the full version • One example of such a site for downloading software is CNET’s

16. Finding information on the web • Plug-ins • is a type of free software • Plug-ins are extensions to other software such as browsers or graphics software • If you had a problem in viewing the audio-visual talks or the animations, It was probably because you didn’t have the right plug-ins • There are some good general purpose sites for getting plug-ins • 1-     Netscape’s Plug-ins page: gives links to plug-ins for it browser • 2-     Browser watch: gives you up to date information about browsers and plug-ins for them         • One of the most popular type of plug-ins at present is that which plays music in ‘MP3’ format

17. HTML • Hyper Text Markup Language (HTML) • Markup Language is just a collection of codes, embedded in the document, which explain the meaning or desired formation for the marked text • Text Markup Language is a way of describing, using instructions embedded within the document, what the document text means, or what it is supposed to look like • HTML is the standard used for writing documents that are published on the WWW

18. HTML • HTML commands called tags or elements • Most browser have a command such as ‘View source’, which displays the page with all its HTML tags • There are rules for where elements (tags) can & cannot go HTML is structured language • We can add new features, commands, & functionality w/o breaking older documents that don’t use these new features HTML is extensible language

19. HTML • HTML is not designed to be the language of a “What You See Is What You Get” (WYSIWYG) such as in word processing. • Instead, HTML takes “What You Get Is What You Mean” (WYGIWYM) approach, because what appears in the browser is depend on the meaning of the selected tags • The interpretation of written codes are left to the browser.

20. HTML • The basic elements of HTML • 1- Main ingredients • Actually there are four basic ingredients will be discussed as following: • a- 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> • b- Paragraphs <P> a paragraph </P>

21. HTML • c- Lists An order list: <OL> <LI> the first item. <LI> the second item. <LI> And so on… </OL> An unordered list: <UL> <LI> the first item. <LI> the second item. <LI> And so on… </UL>

22. HTML • d- Links To display a graphic (images) on a web page: <IMG SRC=”http://URL of graphic”> To an external documents somewhere else on the Web (hyperlink): <A HREF=”http://URL of target site”>text you wish appear underlined </A> To someplace (location) 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>

23. HTML • Actually the four previous ingredients are still the most important, and are all that you will need in the course • They are sufficient to create well structured Web pages • Also they are quite well standardized across different browsers   • But you need to improve the format of the Web page, and make it more interactive

24. HTML • 2- More recent major ingredients • There are many recent major ingredients. But here in this section we will concentrate in • a-     Tables: which can be used for displaying text or graphics on columns, control spacing, divide your pages into panes, and produce navigation bars • b-    Frames: which divide the browser windows into different independent sections. They are not supported in earlier browsers and their major disadvantage is that they may disrupt your bookmarks • c-     Forms: for interactivity including buttons, pop-up menus, and text fields • The previous three ingredients are useful for improving the format of the web pages and for making them interactive 

25. HTML • HTML Editor • Is a software that used to create HTML documents automatically without entering the tags manually • Basic Editors: • They are called WYGIWYM , because what appears in the browser depends on the meaning of the selected tags • Display HTML tags mixed with text • To see how a page would look like on the web, it had to be viewed in a browser • Tags are added using menus • They are preferred by many professionals web designers because of the full control they provide

26. HTML • WYSIWYG editors: • HTML tags are normally visible, but can be shown if desired • Tags are created in a similar way as in regular word processors • Much easier to use, especially for beginners • They can produce complex HTML code which sometimes behaves strangely • Example: Front page editor

27. HTML • There are some HTML editors types: • 1. MS Home Publishing Suite 2000 • This produce large single files that use code called JavaScript to generate HTML pages, pictures, animations, etc. that seem to work only in Internet Explorer with a specific combination of security settings. So the files aren’t in HTML which is what the assignment asks for, also they not work in many browsers and your tutor may not be able to see your assignment in order to mark it. • 2. Front Page • This Expect to upload pages to the Web using its own ‘publishing’ feature. As a result it does not necessary sore the images used in a way that is easy to produce a zipped archive. So it can be harder to use to create your assignment.

28. HTML • 3. MS Word, MS Publisher, Word Perfect, Lotus WordPro, PowerPoint • These do not necessary produce files in HTML format – even through your browser may display it • Have commands like save as HTML • 4. Netscape Composer • A simple HTML editor which is installed automatically as part of the Netscape Navigator software, has been found to be reliable. It does not seem to cause problems when files are zipped Exercise: Web Page Application

29. Conclusions • Internet is a way of linking large multi-user computers • WWW is an Internet service • WWW is the most popular on-line medium • HTML is a WWW language

30. Questions ?

31. TMA02 (Cut-off date: Jan 3. 2008) • Part1(20 marks, 400 words max) • 1- Explanation of own experiences and specific examples (10 marks): • HTML editors skills (Notepad, Front page, Netscape composer,…) • Techniques • Specific examples of: a- What was easy to learn? (e.g., headings, paragraphs, lists, …) b- What was difficult difficult to learn? (e.g., images, hypertext links, anchors, …) • Where you encounter difficulties? and How you overcame them? • 2- Explanation of key principles or techniques (10 marks): • Learning to learn skills better than just press key to operate • Systematic approach in Gary’s “Section3: The skilled learner in cyberspace”

32. TMA02 • Part2(50 marks, 750 words max) • 1- Set of links to five web sites related to your subject from which you have learn something new(10 marks): • Variety & breadth of your sources • Sources appropriateness to your subject • 2- Site description, commentary on navigation and information location (10 marks): • Be more clear in description • 3- For each link a paragraph reviewing the content of the site (20 marks): a- The perspective of site’s author (audience, experience, purpose of writing) b- Does the site present a balanced view or one perspective? (using clear thinking principles) c- How reliable is the site as a source of information? d- How up to dates does the site appear to be? • Make your discussion more depth and clear • 4- Presentation and technical aspect of your individual page (10 marks) for more information read TMA02

33. TMA02 • Subjects • Health & disease • Current affairs • Music • Travel • Food & Drink • Online shopping • TV & Radio Programs • Use “ “ if you copy directly from another source

34. TMA02 • Part3(30 marks, 400 words max) • 1- Identification the overall objectives and tasks necessary for your group to produce successful outcome • 2- Planned & agreed what needed to be done, by whom and by when, to achieve overall objectives • 3- Organized & delivered personal tasks to meet the overall objectives • 4- Exchange information & worked co-operatively online to progress the tasks, including suggesting ways of improving or maintaining progress • Describing how successfully or otherwise each of these 4 stages was undertaken by the group in delivering the group web channel (15 marks) • Include 3 of your own messages as evidences of your contribution to at least two stages of group work activity (15 marks) • (6 marks) 2 mark for each message + (9 marks) 3 mark for each discussion

35. TMA02 • Submitting your work: • 1- Part1 “HTML document” Individually • 2- Part2 “HTML format + images files” Same thing for every group members !!! • 3- Part3 “ HTML document” Individually • All these in one zipping file, send this file to the conference: AOUTU170 03K aee7833 TMAs