1. Lecture # 4 Advanced HTML, Relative Links Loops, Records and Trees

2. Today Questions: From notes/reading/life? Review Homework # 1 1.Introduce: Is there any more to HTML? 2.Explain: Scope: HTML Trees, Relative Links Headings, Color, Fonts, Backgrounds, Tables 3.Demo: follow along on your laptop 4.Practice: You will create an HTML Table 5.Evaluate: We will share and evaluate your web page 6.Re-practice: Create your own web page with Lab # 2 Understand Records, Loops and Trees ReviewArrays and Programs

3. Today Questions: From notes/reading/life? Review Homework # 1 1.Introduce: Is there any more to HTML? 2.Explain: Scope: HTML Trees, Relative Links Headings, Color, Fonts, Backgrounds, Tables 3.Demo: follow along on your laptop 4.Practice: You will create an HTML Table 5.Evaluate: We will share and evaluate your web page 6.Re-practice: Create your own web page with Lab # 2 Understand Records, Loops and Trees ReviewArrays and Programs

4. Homework #1: Review

5. Today Questions: From notes/reading/life? Review Homework # 1 1.Introduce: Is there any more to HTML? 2.Explain: Scope: HTML Trees, Relative Links Headings, Color, Fonts, Backgrounds, Tables 3.Demo: follow along on your laptop 4.Practice: You will create an HTML Table 5.Evaluate: We will share and evaluate your web page 6.Re-practice: Create your own web page with Lab # 2 Understand Records, Loops and Trees ReviewArrays and Programs

6. More HTML Tags

7. What is the scope of a tag’s influence?

8. Formatting Where are you HTML Where are you

9. Lists my pets pigs dogs chickens chickens HTML my pets pigs dogs

10. HTML Document Structure This is the title of my document This is the actual content of my document

11. More HTML Tags - headings

12. Headings This is heading 1 This is plain text This is heading 2 Another heading 1

13. Font face This is plain text text in Impact

14. Font size This is plain text bigger text even bigger

15. Preformatted text This is text that can wrap around and do whatever it wants This is preformatted It will stay put no matter what Indenting and new lines ignored Indenting and new lines followed

16. Color Some text Red plain Some text color #FF0000 Red plain Red

17. Some text Red plain Color Some text text #0000FF Red plain Blue What difference does the location in the tree make?

18. Overriding color Some text Red plain Some text color #FF0000 Red plain #0000FF text

19. Background color Some text Red plain

20. Background image Some text Red plain

21. Tiling Some text Red plain

22. Horizontal Rules Some text Some more text

23. Special Characters Some text <Red> plain Why not just use instead of < and > ?

24. Tables Tables Name Age Comments Dan 48 Very nice professor Bill 84 A large presence in the class

25. Tables Tables Name Age Comments Dan 48 Very nice professor Bill 84 A large presence in the class

26. Relative Links HTML documents contain URL references to other documents (HTML, images, etc.) If the referenced document is on YOUR web site, you can use a relative URL

27. Relative Links HTTP://students.cs.byu.edu/~cs100ta/Labs/Tags.html ProtocolServer nameDirectory or folder name File Netscape needs all of the parts to be able to fetch a file

28. Relative Links For relative links, parts of the URL are left unspecified The web browser automatically gets the missing pieces of a relative link from the URL of the page you are on

29. Relative links Page - http://www.cs.byu.edu/classes/cs100.html Link – cs799.html http://www.cs.byu.edu/classes/cs799.html

30. Relative links Page - http://www.cs.byu.edu/home.html Link – images/TMCB.gif http://www.cs.byu.edu/images/TMCB.gif

31. Relative links Page - http://www.cs.byu.edu/classes/cs100.html Link –../home.html http://www.cs.byu.edu/home.html

32. Relative links Page - http://www.cs.byu.edu/classes/cs100.html Link - /faculty/teacher.html http://www.cs.byu.edu/faculty/teacher.html

33. Why Use Relative Links? Relative URLs are shorter and easier to type Relative URLs make it easier to move your web site ’ s files to another directory or computer

34. HTML Tags you should know - paragraph - bold, italic, underline - unnumbered lists - ordinal(numbered) lists - anchors (hyperlinks) - images

35. More HTML Tags you should know - headings - font settings - preformatted - whole page - horizontal rules - tables

36. Today Questions: From notes/reading/life? Review Homework # 1 1.Introduce: Is there any more to HTML? 2.Explain: Scope: HTML Trees, Relative Links Headings, Color, Fonts, Backgrounds, Tables 3.Demo: follow along on your laptop 4.Practice: You will create an HTML Table 5.Evaluate: We will share and evaluate your web page 6.Re-practice: Create your own web page with Lab # 2 Understand Records, Loops and Trees ReviewArrays and Programs

37. Personal Exercise Using HTML create a Table (calendar) for September, 2011. Bold September and the days of the week. Insert a link to something grand you are going to do on your favorite day in September. You have 10 minutes.

38. Share it

39. Today Questions: From notes/reading/life? Review Homework # 1 1.Introduce: Is there any more to HTML? 2.Explain: Scope: HTML Trees, Relative Links Headings, Color, Fonts, Backgrounds, Tables 3.Demo: follow along on your laptop 4.Practice: You will create an HTML Table 5.Evaluate: We will share and evaluate your web page 6.Re-practice: Create your own web page with Lab # 2 Understand Records, Loops and Trees ReviewArrays and Programs (on your own)

40. Loops, Records and Trees

41. For Loops Name For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; }

42. For Loops Name For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; }

43. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

44. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

45. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

46. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

47. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

48. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

49. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

50. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

51. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

52. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

53. For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; } For Loops Name

54. What if Name had 10,000 characters? Name For (each index I in Name) {C = Name[I]; If (C>=‘a’ & C<=‘z’) { Name[I]=Name[I] - 32; }

55. Records (a collection of named things) Student

56. Records (a collection of named things) Student Student.GPA = 3.6; Student.Address = “Reams 3”;

57. Records (a collection of named things) Student Student.GPA = 3.6; Student.Address = “Reams 3”;

58. Records (a collection of named things) Student Student.GPA = 3.6; Student.Address = “Reams 3”;

59. An Array of Students Students

60. An Array of Students Students Students[1].Name = “Ann”;

61. Trees BYU BioAgBusiness PhysSci Zoology Botany AcntMarket CS Math Stat CS100CS142 CS235

62. BYU.PhysSci.CS.CS100[0].GPA=2.9; BYU BioAgBusiness PhysSci Zoology Botany AcntMarket CS Math Stat CS100CS142 CS235

63. Today Questions: From notes/reading/life? Review Homework # 1 1.Introduce: Is there any more to HTML? 2.Explain: Scope: HTML Trees, Relative Links Headings, Color, Fonts, Backgrounds, Tables 3.Demo: follow along on your laptop 4.Practice: You will create an HTML Table 5.Evaluate: We will share and evaluate your web page 6.Re-practice: Create your own web page with Lab # 2 Understand Records, Loops and Trees ReviewArrays and Programs (on your own)

64. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

65. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

66. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

67. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

68. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

69. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

70. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

71. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

72. Review Arrays AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

73. What if AA had 10,000 items? AA I = 0; AA[I]=0; I=1; AA[I]=0; I=2; AA[I]=0; I=3; AA[I]=0; I=4; AA[I]=0; I

74. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

75. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

76. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

77. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

78. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

79. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

80. 2D Arrays (images) 0=black, 128=gray, 255=white Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

81. What if the image was 1024x1024? Img X=1; Y=1; P = Img[Y,X]; Img[Y,X] = 0; Y=2; Img[Y,X]=128; X=2; Img[Y,X]=255;

82. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

83. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

84. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

85. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

86. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

87. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

88. Strings Name I = 0; Name[I]=Name[I] – 32; I = 1; Name[I]=Name[I] – 32; I = 2; Name[I]=Name[I] – 32;

89. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

90. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

91. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

92. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

93. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

94. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

95. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

96. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

97. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

98. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

99. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

100. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;

101. Strings Name I = 0; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 1; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32; I = 2; C = Name[I]; If (C >= ‘a’ & C <= ‘z’) Name[I]=Name[I] – 32;