1. 1 Download the HTML WYSIWYG ** Editor….KOMPOSER Originally part of the browser NETSCAPE Now Available for free download at: http://www.kompozer.net/ ** What You See Is What You Get = WYSIWYG

2. Webpage “Language”: HTML The browsers are just viewers of HTML files. HTML files consist of text + images and its all surrounded by tags. The tags do different things such as... – making text bold – changing font sizes – justifying text – loading a picture – loading an Applet – etc... 2

3. HTML Example… This is the title of my document This is a large heading This is the first paragraph. Here is a line break Continuing the first paragraph This is the second paragraph This is a somewhat smaller heading This is the third paragraph This is a link to Carleton’s School of Computer Science (SCS) 3

4. …and the Result (in a Browser) 4

5. NETIQUETTE "Facelessness" of internet communication makes it hard to remember to be civil. You can't see the people on the other end. In general, it is a good idea to try to treat everyone the same way on the net that you would in real life. 5

6. NETIQUETTE Examples of NET don'ts – Don't send unsolicited advertising to "everybody" on the Internet. – Don't harass with e-mail. Somebody might get a restraining order out on you. – Don't post racist or sexist material that you would consider unacceptable anywhere else. – Don't post copies of personal e-mail. – Don’t be a “spammer” (chain letters). 6

7. Web History The history in a browser pertains to a list of the recently visited webpages. Browsers typically keep track of the history of activity on the web in a number of different ways. This is generally a useful thing as it means you can.. – Easily go back to a previous site. – Save a lengthy reloading process from a distant web site. 7

8. Web History On the other hand, there are Privacy issues involved. You are leaving a trail of your activities on your machine that others can follow. You have a great deal of control over when the history is deleted. 8

9. Erasing the Web History Sometimes you will want to clear the browsing history. Mozilla Firefox (like other browsers) keeps a browsing history of the webpages you visit, it does this so you can easily find a webpage you recently visited again. – To view your webpage history press CTRL+H (also shown in the History menu item). 9

10. Firefox: Erasing the Web History Click on the Tools menu, then Options. Click the Privacy tab. Click on the Clear Now button Ctrl+Shift+Del will also let you erase your history. 10

11. What is a Bookmark (Webopedia) To mark a document or a specific place in a document for later retrieval. Nearly all Web browsers support a bookmarking feature that lets you save the address (URL) of a Web page so that you can easily re-visit the page at a later time. Internet Explorer calls bookmarks Favorites. 11

12. Bookmark Add URL Add Folder Organize bookmark – Rename – Move – Delete – Sort 12

13. INTERNET SECURITY 13

14. What is Malware? Malware is an abbreviated term used to describe a malicious software program. Malware includes things like spyware or adware programs, such as tracking cookies, which are used to monitor your surfing habits. It also includes more sinister items, such as keyloggers, Trojan horses, worms, and viruses. 14

15. Malware Any type of code or program that is used for monitoring and collecting your personal information or disrupting or damaging your computer, may be referred to as malware. – In fact, malware can be any type of malicious code, even if it has not yet been identified as a worm, Trojan, etc. – Good antivirus programs can be configured to scan email for any type of malicious or suspicious code, and alert you to its presence, even if it is not currently recognized malware. 15

16. What is a Keylogger? It is a program that logs every keystroke you make and then sends that information, including things like passwords, bank account numbers, and credit card numbers, to whomever is spying on you. These forms of malware are commonly used for perpetrating identity theft. 16

17. Trojan Horse A Trojan horse may actually appear to be a useful application, which is why so many unsuspecting people download them. A Trojan horse might be disguised as a program intended to rid your computer of viruses, yet actually be used to infect your system instead. 17

18. Origin of Term “Trojan Horse” The Trojan Horse, from Greek mythology, was a giant hollow horse containing Greek soldiers, used to overtake the city of Troy during the Trojan War. It has since become a metaphor for any person or thing that appears innocent or benign, but actually presents danger or harmful intent. 18

19. Trojan Horse While the terms "virus" and “trojan" are frequently used interchangeably, they are actually quite different. A virus replicates itself, while a Trojan horse does not. Once a Trojan horse is activated, it can access files, folders, or your entire system. Commonly, Trojans create a backdoor or a "trapdoor,” which can be used to send your personal information to another location. 19

20. What is a Macro Virus? Macro viruses require user action to execute once they have been downloaded or make their way onto a computer system. typically written in a scripting language that is commonly used to create macros for use within applications. 20

21. What is a Macro Virus? Some of these macro viruses are more an annoyance than a threat to the security of a computer system. An example would be a macro virus that produces undesired text within Microsoft Word when a certain combination of keys are pressed. 21

22. What is Spyware? Spyware is a general term used to describe software that performs certain behaviors such as advertising, collecting personal information, or changing the configuration of your computer, generally without appropriately obtaining your consent first. Spyware is often associated with software that displays advertisements (called adware) or software that tracks personal or sensitive information. 22

23. What is Spam? Most people who have email accounts get at least some emails every day. Some people get hundreds or even thousands of emails each day.Of course, not all of these emails are solicited or even desired. Email that you don’t want or didn’t ask for is called spam. Study: 90-95 percent of all emails are spam 23

24. Spam Most spam seeks to sell something. Spam solicitations commonly ask people to click on a link in an email. These links can direct people to websites that sell products or advertise programs. Other spam emails contain attachments that carry computer viruses. If you don’t realize it, you might click on a spam email that automatically opens its attached virus and begins infecting your computer. 24

25. What is Identity Theft Identity theft occurs when a thief assumes someone else's identity to commit fraud in that person's name without their knowledge. By the time the victim catches on, the thief is usually long gone, leaving behind a trail of ruined credit, debts and collectors. In some cases, identity theft can even lead to wrongful arrest of the victim. 25

26. What is Phishing? A phishing scam is an identity theft scam that arrives via email. The email appears to come from a legitimate source such as a trusted business or financial institution, and includes an urgent request for personal information usually invoking some critical need to update an account immediately. 26

27. What is Phishing? Clicking on a link provided in the email leads to an official-looking fake website. Personal information provided to this site, however, goes directly to the scam artist. Advance-fee frauds – Famous “Nigerian” scam letters. – over 500 different versions 27

28. Security Tips Don't give out personal information unless you have initiated the contact. Thieves can pose as representatives of legitimate companies with which you do business and request you verify personal information. In "verifying" it, you are actually giving it to the caller/e-mailer. Do not use a phone number supplier by the caller/e- mailer. Use your statements or a phone book to get the number of the business, then verify the caller/e- mailer and his or her purpose. 28

29. Security Tips Place passwords on bank accounts, credit card accounts and other lines of credit. Use something other than your social security number or mother's maiden name to guard against identity theft. Keep your social security card in a secure place like a safety deposit box or home safe. It should not be carried in your wallet unless you are going to need it. A social security card in the wrong hands makes identity theft even easier. 29

30. Security Tips Do not give personal information to websites that are not using SSL (Secure Sockets Layer) to transfer the information. Secure sites are noted by the https, and will encrypt all information between your computer and the site. These sites should also have a Privacy Policy posted that states how your personal information will be used. If the site shares your information with unnamed "third parties," you have no guarantee that they will protect your information from identity theft. 30

31. Security Tips Use scissor to destroy all paper that include personal info. This includes statements, credit card solicitations, junk mail that has your name and address, and expired cards of all kinds, including not only credit cards but also insurance cards, medical cards and even library cards. If you receive magazine subscriptions, remove the address pages for the shredder before throwing the magazines out. 31

32. What is a Firewall? Computer firewalls act as a barrier between computers on a network. For companies with a computer network or for individuals with a permanent connection to the internet (such as through DSL or cable), a firewall is critical. Without a firewall, intruders on the network would likely be able to destroy, tamper with or gain access to the files on your computer. 32

33. Firewall Firewalls can come in the form of hardware or software. It function with a set of filters that are constantly monitoring traffic on the network. Whenever a packet of information triggers one of the filters, the firewall prevents it from passing through in the attempt to prevent damage. Firewalls sometimes block wanted traffic, and through a continual process of refinement, the filters can be customized to improve their efficacy. 33

34. Software Firewall Software firewalls can block incoming “hack” or break-in attempts but also unwanted outgoing communication. For example, a software firewall could notify the user of a Trojan Horse’s attempt at communicating to its owner. 34

35. Introduction to HTML

36. What is HTML? HTML are initials that stand for Hyper Text Markup Language It is the code behind your webpage It is what your browser looks for to display a webpage Includes a series of tags that tells the browser where and how to display what 36

37. What is HTML? Hyper – In conventional document like a book, we have to read in a sequential order. This is not the case of HTML webpage, since we can jump from one page to another at our choice using links, this jumps conforms an non-linear sequence of web pages. Text – In almost all the cases text is the main component we want to present to the visitors. 37

38. What is HTML? Mark-up – You will write in plain English and then mark up what you wrote using tags. – Example: to be bold text Language – it has code-words and syntax like any other language – It is considered a markup language 38

39. How Does it Work? 1.the site author create a text document that includes a series of short codes. 2.The document is saved as a html file. 3.Then it can be viewed by the rest of the world using a browser (Internet Explorer, Firefox, etc). 4.The text is interpreted by the browser and displayed to the user. 39

40. HTML File Plain text file that can be edited with – Text Editors – Notepad – WordPad – Notepad++ HTML Editors (WYSIWYG) – KOMPOSER a descendant of Netscape Composer – Microsoft FrontPage – Most word processors 40

41. Notepad 41

42. Tags The tags are what separate normal text from HTML code Enclosed by triangle brackets – Example: tags don’t appear when browsing the web page. In most of the cases the effect of the tags can be seen. 42

43. Tags identify elements of a HTML document – html document itself – head information – body of the page – paragraphs – headings – lists – links –...etc 43

44. Tags Tags are denoted as – Tags are usually paired (start and end tag) – end tags are similar to start tags with a slash (/) added. – example: this text is in bold but this is not This is a heading 44

45. Tags Some tags contain additional attribute information – This heading is centered – HTML is not case sensitive (in most cases) – this is fine – this is fine too 45

46. Minimal HTML File A Minimal HTML Document This paragraph is part of a simple HTML document 46

47. Minimal HTML File 47

48. Minimal HTML File Explanation A Minimal HTML Document This paragraph is part of a simple HTML document tells the browser that what follows is HTML text the section of the document that contains the title (also extra information about the document) whatever you put between the title tags appears in the top of the browser window begins the body of the document, the place where the page's content goes 48

49. Basic Page Layout Tags – identifies a paragraph – identifies a heading where x is 1 to 6 –,, … 49

50. Basic Page Layout Tags Bold Text – To make text bold, surround it with the begin tag and the end tag. Italic Text – To make text italic, surround it with the begin tag and the end tag. 50

51. Basic Page Layout Tags Line Break ( ) – a line break without also having a blank line – Note that it does not have a begin and end tag; there is merely an instance of it when you wish to specify a line break. Horizontal Rule ( ) – A simple separator in the form of a line across the page. – can be obtained by placing the tag where you wish the line to occur. – there is no begin or end, just an instance of it where you wish the line to appear. 51

52. Text/Image Alignment Many tags can be aligned in HTML with the ALIGN attribute: – ALIGN=RIGHT – ALIGN=LEFT – ALIGN=MIDDLE – ALIGN=TOP – ALIGN=BOTTOM 52

53. Text Alignment Example Centered Text Left aligned Right aligned 53

54. Unordered List The list items are marked with bullets (typically small black circles). An unordered list starts with the tag (and ends with ). Each list item starts with the tag (and ends with ). Apple Orange 54

55. Ordered list - identifies as ordered list - identifies items in an ordered or unordered list 55

56. Ordered Lists An ordered list is a numbered list of items. Instead of bullets list items are marked with numbers (or letters if you specify so). An ordered list starts with the tag and ends with 56

57. List Items Each list item starts with the tag and ends with Apple Orange 57

58. More on List Items As you saw list items can be used in Unordered and Ordered Lists. Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. In general list items can contain any valid HTML code inside – with the exception of some tags as, and which specify aspect of the whole document. 58

59. Ordered List Modifications By specifying attributes, ordered lists can use 1.Numbers (the default or TYPE=“1”) 2.Upper or lower case letters (TYPE = “A” or TYPE =“a”) 3.Upper or lower case Roman numerals (TYPE = “i” or TYPE = “I”) For example, identifies an ordered list that uses uppercase roman numerals. 59

60. OL Examples Apple Orange Apple Orange 60

61. Nested Lists Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item. A few New England states: Vermont New Hampshire Maine Two Midwestern states: Michigan Indiana 61

62. Nested List Examples We can use the different types we’ve seen previously. 62

63. HTML Color Colors in HTML are composed of six (6) hexadecimal characters, 2 per color component: RRGGBB (where R=Red, G=Green and B=Blue). The colours are expressed in Hexadecimal = 16 values (0, 1, 2, 3… D, E, F). Each color has a range from 00 to FF (256 possible values) But we can use a less flexible but easier system 63

64. Use: e.g. I am writing a red text Or I am writing a bold green text 64

65. Inserting an Image Websites with only text would be pretty boring. HTML has a tag to insert an image in a webpage – Basic version: where “filename.gif” is the name of your image/picture (can be.gif,.jpeg,.jpg,.png, etc) 65

66. Setting the Image Size Image size: – WIDTH=“#pixels”, HEIGHT=“#pixels” – specify the image height and width in pixels. – Example for a 640x480 image called beach.png: 66

67. Image Size Example 67

68. Basic Text Formatting bold italics emphasis strong 68

69. Text Formatting with “Style” The style attribute can be used to do most text formatting tasks. style can be used to set: –font – color – size 69

70. Text Formatting with “Style” font-family (Arial, Courier, Comic Sans MS…) font-size (small, medium, large, x-large, …) font-style (normal, italic, oblique…) font-weight (normal, bold, bolder, lighter…) color (auto, #XXXXXX) background-color (transparent, #XXXXXX) text-align (left, right, justify…) text-indent (value or percentage) 70

71. Set the Font of Text Arial Courier Comic 71

72. Setting Text Size x-small normal xx-large 72

73. Setting Text Color Red text Green text Blue text 73

74. Comments You can add comments to an HTML file. Comments stay in the file, but will not appear in a browser The comment start and end tags are <!-- This is a comment that will not appear in the browser --> 74

75. Links

76. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc. The syntax of creating an anchor: Text to be displayed The tag is used to create an anchor to link from, the HREF attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. 76

77. Link Example Link to the School of Computer Science 77

78. HREF Examples An image as a link Create a mailto link My Name 78

79. Tables

80. The HTML table model allows authors to arrange data (text, preformatted text, images, links, forms, form fields, other tables, etc.) into rows and columns of cells. Tables may seem difficult at first, but after working for a while one get used to the syntax Tables are used to make simple tables but also for complex layouts (in these slides only the basic approach is discussed) 80

81. Table Tags The tag is used to begin a table. specify a table row specify a table column to close a table. Table attributes – height, width: in pixels or % – border: border around table in pixels (0, 1,…) – ALIGN: aligns table on webpage (center, left, right) 81

82. Table Example Name Student ID Final Mark Begin of table, attribute specifying table border Begin of new row End of row Columns (fields) 82

83. Table Example 2 Name Student ID Final Mark John Doe 100123456 A+ 83