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

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

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

Homework #1: Review

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

More HTML Tags

What is the scope of a tag’s influence?

Formatting Where are you HTML Where are you

Lists my pets pigs dogs chickens chickens HTML my pets pigs dogs

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

More HTML Tags - headings

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

Font face This is plain text text in Impact

Font size This is plain text bigger text even bigger

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

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

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

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

Background color Some text Red plain

Background image Some text Red plain

Tiling Some text Red plain

Horizontal Rules Some text Some more text

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

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

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

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

Relative Links ProtocolServer nameDirectory or folder name File Netscape needs all of the parts to be able to fetch a file

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

Relative links Page - Link – cs799.html

Relative links Page - Link – images/TMCB.gif

Relative links Page - Link –../home.html

Relative links Page - Link - /faculty/teacher.html

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

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

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

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

Personal Exercise Using HTML create a Table (calendar) for September, 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.

Share it

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)

Loops, Records and Trees

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

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

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

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

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

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

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

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

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

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

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

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

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

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; }

Records (a collection of named things) Student

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

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

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

An Array of Students Students

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

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

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

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)

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

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

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

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

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

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

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

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

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

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

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;

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;

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;

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;

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;

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;

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;

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;

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

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

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

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

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

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

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

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;