TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 1

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 2 Section 4 Web skills

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 3 Aim of the session o Tow main subjects will be covered in this session: oFinding information on the web. oCreating web pages using HTML language o ( hyper text markup language).

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 4 Internet oWhat is Internet ? o it is a way of connecting a large multi-user computers, it includes the standards for routing info from one pc to the next which ensure that all computers connected to it can understand the info on it. such as TCP/IP.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 5 world wide web (www) oits one of many services that run in the net. (What is the difference between Internet and web ? give examples.) oIs the most on-line medium. The web displays a rich variety of text, graphics and increasingly interactive info. oThe basic technology defining the web is the hypertext, that jumps you to another location within a document, graphics images can be used as links (hyperlink).

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 6 World wide web (www) benefits: 1.It hides the complexity of internet addresses and commands. 2.It summarizes most of the different features of the interne into single interface used by web applications. 3.It allows you to see pictures, hear sounds or watch movies while you are reading/writing text

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 7 What is the core of the internet? “Backbone of the internet”, which is the core of the net. It is a group of host pc’s linked by a dedicated high speed telecommunication connection. (ISP) get their high speed connection by connecting 2 the backbone group.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 8 The Web first went public in January oIt was meant to be an easy way for scientists to put up information and link to each other's documents. It too is defined by a set of standards. One standard, called http, or Hypertext Transfer Protocol specifies how information exchange between machines should be handled. Another, called our or Universal Resource Locator defines the location at which documents are stored. Finally, there is HTML or Hypertext Markup Language. Any document that conforms to the HTML standard can be put on the World Wide Web. Once there, it can be read by software that understands HTML. The software designed for this purpose was called a 'browser', but now much software designed for other purposes can also read HTML.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 9 Finding information on the web oUsing search engines ( give some examples by performing real search). oStoring site addresses ( bookmarks /favorites). oStoring website addresses in folders. oAdding viewed web page to list of favorites.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 10 Search engines oAs the number of sites on the Web has grown, so have the number of sites designed to help you find other sites. o Another way to find information is to use one of the search sites or 'search engines'. Some of the larger search sites are: altaVista ArabSites AiwaGulf Arab World Search Engine (AWSE) WebCrawler Yahoo altaVistaArabSitesAiwaGulfArab World Search Engine (AWSE)WebCrawlerYahoo o Mamma 'The Mother of All Search Engines' Mamma o NISS A UK information service for education BUBL A UK information service for higher educationNISSBUBL

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 11 - Finding free software oWhy is some software free? o Shareware and freeware oDownload. COM. o One common type of free software is 'plug- ins', which are extensions to other software such as browsers or graphics software. Music on the Web

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 12 HTML: the language of the Web oEarly versions of HTML were very simple. They mostly included ways of formatting text: several levels of heading, and several types of list, character formats, and also ways of creating hyperlinks between documents. oHTML has been developing rapidly in the few years since it was invented. In its earlier versions.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 13 Creating web pages using HTML language oWhat is HTML ? o is a way of describing using instructions embedded within the document, what the document text means?, or what it is supposed to look like?. oExplanation of the Content of HTML. oDefine basic elements of HTML: oHeadings. oParagraphs. oLists. oLinks.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 14 What does the html contains?? oCommands (tags or elements) 2 mark text as headings paragraphs, lists,...etc oTags for including images within the documents or for including fill-in forms that accept users input and including hypertext links connecting the document being read to other documents or internet resources

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 15 How tags work?? o The tags do not appear in the browser, but if you open a web page in a simple text editor such as Notepad you will see them, Most browsers have a command.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 16 Editors for HTML oHTML was originally designed to be very easy to use. oBasic editors and 'wysiwyg'editors? oExplain… o The HTML tags are not normally visible in these but can be shown if desired. o As the web has become more popular, other types of software have been adapted to create HTML. Word processors often have a 'Save as HTML'. Is there still a need to learn HTML?

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 17 HTML oHtml is designed to be an “extensible” language, it means that new features, commands & functionality can be added to the language breaking other doc. oHtml is structured language, it means that there r rules 4 where elements can and can not go.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 18 Publishing your file on the Web There are two ways to achieve this process: 1. Through your ISP,( if your contract includes web space ). 2.Through LMS.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 19 Basic HTML elements oFind out from Basic Elements of HTML how to make a hyperlink to an imageBasic Elements of HTML oHeadings o This is a first level heading. o This is a second level heading. o This is a third level heading. o This is a fourth level heading.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 20 oParagraphs: o paragraph. oLists: oAn ordered list o o the first item.. o the second o and so on.. o

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 21 Example of an ordered list 1.This is an ordered list. 2.Here is the first item. 3.Here is the second item and so on...

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 22 HTML Source of unordered list This is an unordered list: Here is the first item. Here is the second item. And so on...

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 23 Unordered list example oHere is the first item. oHere is the second item. oAnd so on...

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 24 Links oTo display a graphic on a web page: o of graphic oTo a document somewhere else on the web: o text you wish to appear underlined.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 25 Links oIf u use a full our in the link, as 4 example, (is called the ‘absolute address’) oIf u use only 1 part of an address, 4 example, ”pictures / OurLogo.gif”, o (it is called the ‘relative address’ & the browser assume that the rest of the address is the same as that of the page)

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 26 HTML source of internal link [other paragraph in the document] Do u want to go to the beginning on the page? It will take you to a place where the anchor called ‘start’ has been placed. [other paragraphs in the document] Do u want 2 go 2 the beginning of the page? It will take u 2 a place where the anchor called ‘start’ has been placed.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 27 Example of links If u want people 2 send u an click here, u can setup a ‘mailto:’ link 4 yoourself., if you want people to send you an click here can setup a ‘mailto:’ link for yourself.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 28 Overview of current HTML editors : Overview of current HTML editors : What is the html editor ? - It is a software used to create HTML documents without entering the tags manually. - Some types of HTML editors ( give some practical examples on each ) are:  New word processor like MS-Word  MS Home Publishing Suite  Front Page.  Netscape Composer.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 29 General issues on good web esign oDesigning advanced web pages can’t be done using html tags. to solve this problem, the basic html should b extended. Some methods for extensions are: a. Adding plug-ins b. Use new programming web languages c. Extends the html structures to their limit.

TU 170 Learning Online( Prepared By: M.Hussein Y.Mansoour) Copyright 2005© ITC 30 Some tips for enhancing the design for the web: 1.Use of simple tables 2.Use of color 3.Use of typeface s and different font sizes 4.Use of illustrations 5.Use of templates