1 Section 4 Web Skills InternetWebHTML

2 The difference between the Internet and the Web The Internet is a way of linking large multi-user computers. In part it consists of the physical links that were set up between them. Originally that was wires, but now it includes microwave links, satellite links, and optical fibres. But also, and as important, the Internet includes the standards and mechanisms for routing information from one computer to the next, and which ensure that all computers connected to it can understand the information on it. A network must conform to these standards, called 'TCP/IP' if it is to connect to the Internet. The Internet is a way of linking large multi-user computers. In part it consists of the physical links that were set up between them. Originally that was wires, but now it includes microwave links, satellite links, and optical fibres. But also, and as important, the Internet includes the standards and mechanisms for routing information from one computer to the next, and which ensure that all computers connected to it can understand the information on it. A network must conform to these standards, called 'TCP/IP' if it is to connect to the Internet. The World Wide Web is one of many services that run on the Internet. is another, much older service that also runs on the Internet. The World Wide Web is one of many services that run on the Internet. is another, much older service that also runs on the Internet.

3 HTML For a page to be displayed on the World Wide Web, there must be a set of codes which format the various parts of the page, the headings, lists, links, and so on. These codes are what is called Hyper Text Markup Language (HTML), the language of the World Wide Web. The codes of HTML are called 'tags'. For a page to be displayed on the World Wide Web, there must be a set of codes which format the various parts of the page, the headings, lists, links, and so on. These codes are what is called Hyper Text Markup Language (HTML), the language of the World Wide Web. The codes of HTML are called 'tags'. 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. 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.

4 Editors for HTML The basic tags are very simple, and any text editor can be used to create HTML documents. All you have to do is learn what these basic tags are and where to put them The basic tags are very simple, and any text editor can be used to create HTML documents. All you have to do is learn what these basic tags are and where to put them More tags have been invented which are not so easy to create using a text editor but with HTML Editors which automatically insert the tags for you. The latest versions of many browsers now come with HTML editors built into them. More tags have been invented which are not so easy to create using a text editor but with HTML Editors which automatically insert the tags for you. The latest versions of many browsers now come with HTML editors built into them. Many word processors now offer a command such as 'Save as HTML', which converts an ordinary word processed document into HTML by inserting the necessary tags automatically. Many word processors now offer a command such as 'Save as HTML', which converts an ordinary word processed document into HTML by inserting the necessary tags automatically. You can look at the HTML tags using the 'View source' or equivalent command in your browser You can look at the HTML tags using the 'View source' or equivalent command in your browser

5 Basic Elements of HTML Headings. Headings. Paragraphs. Paragraphs. Lists. Lists. Links. Links.

6 Codes for HTML Elements Headings Headings There are 5 main levels of heading in HTML. A heading must have a heading tag, like, to mark its start, and an ending tag, like, to mark its end. – First level heading – First level heading – Second level headings – Second level headings – Third level heading – Third level heading – Fourth level heading – Fourth level heading – Fifth level heading – Fifth level heading

7 Paragraphs Paragraphs In HTML, paragraphs must be explicitly indicated with the paragraph tag. An ordinary 'return' character in the editor will not be seen by the HTML browser – paragraph. Codes for HTML Elements

8 Lists Lists –An ordered list Ordered lists, with numbers in front of each item (the browser inserts the numbers). An ordered list has the tag in front of it and the tag at its end. Each line of the list has the tag in front of it. Notice that the lines are not numbered in the HTML source.    the first item..  the second item  the second item  and so on..  and so on..   Codes for HTML Elements

9 Lists Lists –An unordered list An unordered list uses bullets "" instead of numbers. The HTML tags are and at the beginning and end, and again, to mark each line.    the first item.  the second item.  and so on..  and so on..  

10 Codes for HTML Elements Links Links –To display a GRAPHIC on a web page: –To link to a DOCUMENT somewhere else on the web: text you wish to appear underlined. text you wish to appear underlined.

11 Codes for HTML Elements Links – –To link to someplace within the same document: The 'anchor' (place you want to jump to) is marked by Then the link is marked by: text you wish to appear underlined – –To send an message: name you wish to be underlined

12 Exercises Exercise 20: Visit some websites & create a bookmark (Favorite) for a site. Exercise 20: Visit some websites & create a bookmark (Favorite) for a site. Exercise 21: Organize your bookmarks into folders. Exercise 21: Organize your bookmarks into folders. Exercise 22: Search for your name using a search engine. Exercise 22: Search for your name using a search engine. –Try to narrow the search, by adding extra information (for example, “Your name" "Kingdom of Saudi Arabia") The hits will include some sites which contain "Kingdom of Saudi Arabia" but not your name. –You can make sure that your name is included among the hits by including a '+' sign: +“Your name" "Kingdom of Saudi Arabia") –You can make sure that your name is included among the hits by including a '+' sign: +“Your name" "Kingdom of Saudi Arabia") –By using a '-' (hyphen, serving as a minus sign) you can ensure that a word or phrase is excluded from the hits. For example, you could use "-USA" to narrow your search. –By using a '-' (hyphen, serving as a minus sign) you can ensure that a word or phrase is excluded from the hits. For example, you could use "-USA" to narrow your search.

13 Exercises Exercise 23: Find links to your web channel. Exercise 23: Find links to your web channel. Exercise 24: Find Free Software Exercise 24: Find Free Software –Free software: distributed free, together with the original programmer's 'source code'. –Shareware and freeware: No source code is included as this is not meant for use by programmers. –Plug-ins: which are extensions to other software such as browsers or graphics software.

14 Exercises Exercise 25: Edit an HTML document Exercise 25: Edit an HTML document –Open HTML document –View source –Edit (in Note Pad) –Return to browser, REFRESH Exercise 26: HTML Basics Exercise 26: HTML Basics

15 Exercise 27: Using HTML Editors Exercise 27: Using HTML Editors –Download NETSCAPE COMPOSER –Find out the different ways to display a file. Often there are several 'modes‘. –Find out how to turn text into any of the five levels of heading. –Find out how to turn text into any of the five levels of heading. –Find out how to do word-processing type formatting. –Find out how to do word-processing type formatting. –Find out how to work with links. Here there is a very wide variation in the way different editors work. Exercises

16 Exercise 28: Good Web design; Exercise 28: Good Web design; –Responsiveness is crucial –Present a clear, simple structure –Use color to enhance not distract –Use a consistent style from page to page –Provide clear, consistent navigation tools to link different pages Have a quick look at some websites then SEND a message to your tutor group giving your views of the design of these sites. Have a quick look at some websites then SEND a message to your tutor group giving your views of the design of these sites. Exercise/Activity

17 Each part of the TMA should be produced as a separate document using your HTML editor. Each part of the TMA should be produced as a separate document using your HTML editor. If you would prefer to use your word processor, you can write Parts 1 and 3 using it and then either save as HTML (most word processors offer this format as an option) or copy and paste the results into your HTML editor. If you would prefer to use your word processor, you can write Parts 1 and 3 using it and then either save as HTML (most word processors offer this format as an option) or copy and paste the results into your HTML editor. Some of the more sophisticated HTML editors cause problems when files are zipped and submitted to be marked. Please read the advice given in Exercise 27 before you start work on your TMA. Some of the more sophisticated HTML editors cause problems when files are zipped and submitted to be marked. Please read the advice given in Exercise 27 before you start work on your TMA.Exercise 27Exercise 27 TMA02

18 Submitting your work You should submit the following: You should submit the following: –Part 1 Your document as a separate HTML document; –Part 1 Your document as a separate HTML document; –Part 2 Your individual web page in HTML format plus any image files; –Part 2 Your individual web page in HTML format plus any image files; –Part 3 Your document as a separate HTML document.

19 You are required to submit only one file for this assignment, but you will have several. You are required to submit only one file for this assignment, but you will have several. Compress them all so they take up much less space. This is called 'zipping‘. Compress them all so they take up much less space. This is called 'zipping‘. Guidance on using zipping programs is given in Using zipping software. A simple way to compress files is also given in the Preparatory Activities booklet. Guidance on using zipping programs is given in Using zipping software. A simple way to compress files is also given in the Preparatory Activities booklet.Using zipping softwareUsing zipping software Your zipped file should be submitted through this LMS system. Your zipped file should be submitted through this LMS system. Submitting your work