1. CS101 Introduction to Computing Lecture 9 Introduction to HTML (Web Development Lecture 2)

2. Learning Goals for Today 1.To develop your personal Web page 2.To upload your Web page to UMT’s Web server so that it becomes visible on the Internet as http://sst.umt.edu.pk/student/xxxxxxxxx/ where xxxxxxxxx is your user ID

3. But first … How I developed my personal Web page and made it available over the Internet through the URL http://sst.imt.edu.pk/fac/ihussain

4. Requirements Text Editor Browser Server

5. link URL page title

6. HTML Hyper Text Markup Language

7. Tags HTML consists of sets of commands called Tags Tags tell browser how to display information. Tags come in pairs Tags are not case sensitive Document Tags Text Structure Tags

8. Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course. HTML Code

9. Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course. HTML Code The ones in yellow, i.e.,,,,, are the six essential HTML tags, required in all Web pages 1 2 3 4 5 6

10. Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course. HTML Code

11. Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course.

12. HTML Code Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course.

13. HTML Code Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course. Link Label Link Descriptio n

14. HTML Code Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course.

15. HTML Code Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course.

16. HTML Code Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course.

17. HTML Code Imran Hussain's Home Page Imran Hussain Assistant Professor IMT 52-L Gulberg III, Lahore, Pakistan. +92-42-588-6166 ihussain@imt.edu.pk I teach the Introduction to Computing course.

18. This HTML document was developed in a plain-text editor called notepad

20. After typing the code into notepad, I saved it as index.htm To check if I have done everything right, I double clicked on icon of the saved file index.htm Double clicking on the icon launched the Web browser displaying my index.htm

21. My Web page is done!

22. Problem! My Web page is visible only on my computer. It would be nice if it was also visible on the computers of all my friends and relatives as well.

23. Solution! I need to upload my Web page to a Web server that is connected to the Internet As a result, my Web page will become accessible to anyone with a computer hooked up to the Internet

24. Upload Process I used ftp to upload my Web page to the IMT Web server

25. Eureka!

26. My Web page is now accessible from all of the millions of computers connected to the Internet

27. http://sst.imt.edu.pk/fac/ihussain/index.htm http://sst.imt.edu.pk/fac/ihussain

28. Enough about mine … Here is how you can develop your personal Web page and make it available on the Internet as http://sst.umt.edu.pk/student/xxxxxxxxx

29. Developing Your Own Web Page Step 1 Open notepad, type in the HTML code, and save it as index.htm on your PC’s Desktop

30. Developing Your Own Web Page Step 2 Log on to the IMT Web server and upload that index.htm from your PC’s Desktop to your account on that Web server

31. That is it! Your Web page is now accessible on the Internet through the URL: http://sst.umt.edu.pk/student/xxxxxxxxx where xxxxxxxxx is your user ID

32. …

33. HTML tags that go in the HEAD portion of a Web page

34. …

35. …

36. HTML tags that go in the BODY portion of a Web page

37. …

38. … Paragraph

39. Line break

40. … Bold text

41. label Anchor (Anchors are used to embed links in a Web page)

42. label http:// –Displays the Web page specified by the link –example: “http://www.umt.edu.pk” mailto: –Sends an e-mail to the specified address –example: “mailto:imran.hussain@umt.edu.pk”

43. label label can be any text string

44. HTML Code I am at the IMT. You can send me an e-mail by clicking here. Browser Display I am at the IMT. You can send me an e-mail by clicking here.

45. Single Tags with Attributes Example:

46. Paired Tags … Example: …

47. Paired Tags with Attributes … Example: …

48. HTML Code SimCity Quake Bridge SimCity Quake Bridge Browser Display

49. Un-ordered List Line Item

50. The default “bullet” for these lists is a “disc” That, however, can be changed to a “circle” or a “square” with the help of the type attribute

51. HTML Code SimCity Quake Bridge SimCity Quake Bridge Browser Display

52. type = “square”

53. Q: What happens if I start a new list without closing the original one? SimCity Quake II SimCity 3000 Quake III Bridge

54. SimCity Quake II SimCity 3000 Quake III Bridge Browser Display 1.Different bullets 2.Additional tab

55. Such structures, i.e., those in which a new one starts before the first list is finished, are called Nested Lists

56. Types of Lists In addition to un-ordered lists, HTML supports two other types –Ordered Lists –Definition List

57. Ordered List SimCity Quake Bridge 1.SimCity 2.Quake 3.Bridge Browser Display Numbers instead of discs, circles or squares OL instead of UL

58. Ordered List SimCity Quake Bridge a.SimCity b.Quake c.Bridge Browser Display

59. Ordered List Types typeResult “A”A, B, C, … “a”a, b, c, … “I”I, II, III, IV, … “i”i, ii, iii, iv, … “1”1, 2, 3, …

60. Q: How would one start an ordered list with a number other than 1 25. SimCity 26. Quake 27. Bridge Browser Display

61. Ordered List SimCity Quake Bridge 25. SimCity 26. Quake 27. Bridge Browser Display

62. Definition List SimCity A great simulation game in which one build cities Quake One of the best of the shoot- em-up genre SimCity A great simulation game in which one build cities Quake One of the best of the shoot-em-up genre Browser Display Term Definition

63. Definition List Term Definition

64. Ordered lists as well as definition lists can be nested just like the un- ordered lists Can any type of list be nested into any other type?

65. Lists are one way of presenting data in a an ordered or formal fashion Tables provide another - more customizable - way of displaying ordered information on Web pages

66. Browser Display IndoorOutdoor SquashCricket

67. HTML Code Indoor Outdoor Squash Cricket Browser Display IndoorOutdoor SquashCricket

68. Table (made up of rows) Row (made up of data cells) Heading Data Cell (Can contain paragraphs, images, lists, forms, tables) Data Cell (Can contain paragraphs, images, lists, forms, tables)

69. Attributes BORDER –Determines the thickness of the table border –Example: CELLPADING –Determines the distance between the border of a cell and the contents of the cell –Example: CELLSPACING –Determines the empty spacing between the borders of two adjacent cells –Example:

70. HTML Code Indoor Outdoor Squash Cricket Browser Display IndoorOutdoor SquashCricket

71. HTML Code Indoor Outdoor Squash Cricket Browser Display IndoorOutdoor SquashCricket

72. ,,, Attributes ALIGN –Possible values: Center, Left, Right –Example: BGCOLOR –Example: WIDTH –Example: HEIGHT –Example: 40% of the window width

73. Attributes VLAIGN –Determines the vertical alignment of the contents of all of the cells in a particular row –Possible values: Top, Middle, Bottom –Example:

74. & Attributes NOWRAP –Extend the width of a cell, if necessary, to fit the contents of the cell in a single line –Example: COLSPAN –No. of rows the current cell should extend itself downward –Example: ROWSPAN –The number of columns the current cell should extend itself –Example: VALIGN –Same as that for

75. HTML Code Indoor Outdoor Squash Cricket Browser Display Indoor Outdoor SquashCricket

76. YearQuarter ExpensesIncome QuettaDubaiQuettaDubai 2001 11,9008,6509,0007,780 22,2308,6508,5008,670 34,0008,6509,9009,870 42,2008,6509,8009,900 2002 17,7808,6507,7809,000 28,6708,6508,6708,500 39,8708,6509,8709,900 4 8,6509,9009,800

77. HTML Code My favorite sports Squash Cricket Browser Display SquashCricket My favorite sports Caption must be placed immediately after the tag

78. End of HTML tag review

79. What have we learned today? 1.We now know how Web pages are built using HTML 2.We also know how to make our personal Web pages available to everyone on the Internet

80. Useful URL’s HTML for the Conceptually Challenged http://www.arachnoid.com/lutusp/html_tutor.html NCSA’s Beginner's Guide to HTML http://archive.ncsa.uiuc.edu/General/Internet/WWW/ HTMLPrimerAll.html

81. Useful URL The Table Sampler http://www.netscape.com/assist/ net_sites/table_sample.html