1. Lecture # 3 HTML and Arrays

2. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

3. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

4. Preview Lab # 2

5. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

6. HTML HyperText Markup Language Tutorial

7. Text Files An array of bytes stored on disk Each element of the array is a text character A text editor is a user program for changing text files HTML is a text file that is written in a special language for talking to web browsers

8. NotePad - a simple text editor Menu path to find NotePad Menus are trees too! –Start->Programs->Accessories->NotePad Download Notepad++ - gives color HTML tags Textwrangler for Macs

9. HTML in NotePad and are called tags –Anything inside of in HTML is a tag –Tags are instructions about the text for the browser

10. Publishing Web Pages NotePad my first web page Web Browser Computer Disk Web Server Internet

11. Publishing Web pages NotePad my first web page Web Browser myPage.html Web Server Internet Save my first web page

12. Special Problems with NotePad Wants to store files as myPage.txt not myPage.html

13. Special Problems with NotePad Wants to store files as myPage.txt not myPage.html

14. Special Problems with NotePad

15. Publishing Web pages NotePad my first web page Web Browser myPage.html Web Server Internet Save my first web page

16. Publishing Web pages NotePad my first web page Web Browser myPage.html Web Server Internet Save my first web page http://there.com/myPage.html GET my first web page

17. Web pages on one computer NotePad my first web page Web Browser myPage.html Save my first web page myPage.html my first web page Open Page

18. NotePad / Web Browser Demo

19. Bold text NotePad my first web page Web Browser myPage.html Save my first web page myPage.html my first web page Open Page

20. Bold Demo

21. Why didn ’ t bold appear? NotePad my first web page Web Browser myPage.html Save my first web page myPage.html my first web page Open Page

22. Do Save NotePad my first web page Web Browser myPage.html Save myPage.html my first web page my first web page Open Page

23. Save Demo

24. It Still Didn ’ t Appear NotePad my first web page Web Browser myPage.html Save myPage.html my first web page my first web page Open Page

25. Reload NotePad my first web page Web Browser myPage.html Save myPage.html my first web page my first web page Reload

26. Reload Demo

27. Multiple Lines NotePad my first web page Web Browser myPage.html Save myPage.html my first web page my first web page Reload

28. Multiple Lines Demo

29. Web browsers arrange lines according to the width of the window, not the lines in the HTML file

30. Other HTML formatting tags make a new paragraph italic unordered list – list item

31. paragraph

32. italic

33. lists

34. - adding images – –If the image file is in the same folder as the html file –

36. How can we create hyperlinks?

37. - anchor Used to create hyperlinks text for the link –Linked file must be in the same folder

38. Hyperlink Example

39. How can we use an image as a hyperlink?

40. Image as hyperlink Simply swap in the image tag for the text: Instead of text for the link Use: –Linked file must be in the same folder

41. Image Hyperlink Example

42. Try it

43. So what’s going on underneath?

44. Publishing Web pages NotePad my first web page Netscape myPage.html Web Server Internet Save my first web page

45. Web pages on one computer NotePad my first web page Netscape myPage.html Save my first web page myPage.html my first web page Open Page / Reload

46. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

47. Group Exercise Using HTML create a numbered (ranked) list of your 3 favorite places to eat. Link the name of each place to that place’s website. Bold your favorite place and create a bulleted list of your 3 favorite food choices at your favorite place. Find a picture of your favorite food choice, display it and link it to another website. You have 10 minutes.

48. Share it

49. Review HTML is just text with special tags link text

50. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

51. Variables A named place to store a value Assignment George = 32; Size = 17; Weight = 120;

52. Program A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1;

53. Program A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1;

54. Program A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A + 13 75 + 13 = 88

55. Program A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A-B+3 75 - 88 + 3 = -10

56. Program A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A / 2 + 1 -10 / 2 + 1 = -4

57. Program Quiz Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2;

58. Program Quiz Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2;

59. Program Quiz Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2;

60. Program Quiz Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Jane - Fred 16 - 14 2

61. Program Quiz Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Jane - Fred 16 - 14 2

62. Program Quiz Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2;

63. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

64. Arrays Access by Index A B

65. Arrays Access by Index A[0] = 7; B[1] = 4; B[2] = A[0]+1; A[1] = B[2]/2; A[3] = 7-B[1]; A B

66. Arrays Access by Index A[0] = 7; B[1] = 4; B[2] = A[0]+1; A[1] = B[2]/2; A[3] = 7-B[1]; A B

67. Arrays Access by Index A[0] = 7; B[1] = 4; B[2] = A[0]+1; A[1] = B[2]/2; A[3] = 7-B[1]; A B

68. Arrays Access by Index A[0] = 7; B[1] = 4; B[2] = A[0]+1; A[1] = B[2]/2; A[3] = 7-B[1]; A B

69. Arrays Access by Index A[0] = 7; B[1] = 4; B[2] = A[0]+1; A[1] = B[2]/2; A[3] = 7-B[1]; A B

70. Arrays Access by Index A[0] = 7; B[1] = 4; B[2] = A[0]+1; A[1] = B[2]/2; A[3] = 7-B[1]; A B

71. Strings An array of Characters A=“Lloyd”; B= “Big”; B[2] = A[0]+1; A B

72. Strings An array of Characters A=“Lloyd”; B= “Big”; B[2] = A[0]+1; A B

73. Strings An array of Characters A=“Lloyd”; B= “Big”; B[2] = A[0]+1; A B

74. Strings How do you put “ in a string? Special characters preceded by \ A=“Lloyd”; B= “Big”; B[2] = A[0]+1; B = “\”P\\” A B

75. Sound Each time samples the volume (amplitude) Sound = array of volume values

76. 2D-Arrays Rows Columns [Rows-1,Columns-1] [0,0] # of elements = Rows * Columns 5 10 [4,9] 5 * 10 = 50

77. Images - 2D array of values Image [x,y]

78. Today Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 1.Introduce: How do you make a Web Page?: HTML 2.Explain: HTML, Text Files, NotePad 3.Demo: We will do some HTML – follow on your laptop 4.Practice: Your group will create an HTML page 5.Evaluate: We will share and evaluate your web page 6.Re-practice:Create your own web page with Lab # 2 Understand variables, Arrays and Strings Understand Programs as sequences of instructions Homework #2: Find the most efficient Sorting Algorithm

79. Homework #1: Most Efficient Sorting Algorithm Find what you consider to be the most efficient Sorting Algorithm. Write the algorithm as Problem 1 in Homework 1 Explain why you consider it to be the most efficient Sorting Algorithm. Describe its efficiency mathematically.