Faculty - BYU Computer Science Students Homepage Index
advertisement
Lecture # 3 HTML and Arrays Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 Preview Lab # 2 Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 HTML HyperText Markup Language Tutorial 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 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 HTML in NotePad • <html> and </html> are called tags – Anything inside of < > in HTML is a tag – Tags are instructions about the text for the browser Publishing Web Pages Computer Disk NotePad <html> my first web page </html> Web Server Web Browser Internet Publishing Web pages NotePad <html> my first web page </html> Save myPage.html <html> my first web page </html> Web Server Web Browser Internet Special Problems with NotePad • Wants to store files as myPage.txt not myPage.html Special Problems with NotePad • Wants to store files as myPage.txt not myPage.html Special Problems with NotePad Publishing Web pages NotePad <html> my first web page </html> Save myPage.html <html> my first web page </html> Web Server Web Browser Internet Publishing Web pages NotePad <html> my first web page </html> Save myPage.html <html> my first web page </html> Web Server Internet Web Browser GET my first web page http://there.com/myPage.html Web pages on one computer NotePad <html> my first web page </html> Save myPage.html <html> my first web page </html> Open Page myPage.html Web Browser my first web page NotePad / Web Browser Demo Bold text NotePad <html> my <b>first</b> web page </html> Save myPage.html <html> my first web page </html> Open Page myPage.html Web Browser my first web page Bold Demo Why didn’t bold appear? NotePad <html> my <b>first</b> web page </html> Save myPage.html <html> my first web page </html> Open Page myPage.html Web Browser my first web page Do Save myPage.html NotePad <html> my <b>first</b> web page </html> Save <html> my <b>first</b> web page </html> Open Page myPage.html Web Browser my first web page Save Demo It Still Didn’t Appear myPage.html NotePad <html> my <b>first</b> web page </html> Save <html> my <b>first</b> web page </html> Open Page myPage.html Web Browser my first web page Reload myPage.html NotePad <html> my <b>first</b> web page </html> Save <html> my <b>first</b> web page </html> Reload myPage.html Web Browser my first web page Reload Demo Multiple Lines myPage.html NotePad <html> my <b>first</b> web page </html> Save <html> my <b>first</b> web page </html> Reload myPage.html Web Browser my first web page Multiple Lines Demo Multiple Lines Demo • Web browsers arrange lines according to the width of the window, not the lines in the HTML file Other HTML formatting tags • <P> make a new paragraph • <I> </I> italic • <ul> unordered list – <li> list item <p> paragraph <I> </I> italic <ul> <li> lists <img> - adding images • <img src=“any URL”> – <img src=“http://students.cs.byu.edu/cs100.gif”> • <img src=“file name”> – If the image file is in the same folder as the html file – <img src=“cs100.gif”> <img src=“ “> How can we create hyperlinks? <a> - anchor • Used to create hyperlinks • <a href=“any URL”>text for the link</a> • <a href=“file name”>text for the link</a> – Linked file must be in the same folder Hyperlink Example How can we use an image as a hyperlink? Image as hyperlink Simply swap in the image tag for the text: Instead of •<a href=“any URL”>text for the link</a> Use: •<a href=“file name”><img src = “MyImage.jpeg”></a> – Linked file must be in the same folder Image Hyperlink Example Try it So what’s going on underneath? Publishing Web pages NotePad <html> my first web page </html> Save myPage.html <html> my first web page </html> Web Server Netscape Internet Web pages on one computer NotePad <html> my first web page </html> Save myPage.html <html> my first web page </html> Open Page / Reload myPage.html Netscape my first web page Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 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. Share it Review • • • • • • • HTML is just text with special tags <html> </html> <b> </b> <I> </I> <ul> <li> <li> <li> </ul> <img src=“image.gif”> <a href=“link.html”>link text</a> Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 Variables • A named place to store a value • Assignment George = 32; Size = 17; Weight = 120; George Size Weight 32 17 120 Program • A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; Program • A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A B C 75 ? ? Program • A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A B C 75 88 ? A + 13 75 + 13 = 88 Program • A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A B C -10 88 ? A-B+3 75 - 88 + 3 = -10 Program • A sequence of things to do A = 75; B = A+13; A = A-B+3; C = A/2 + 1; A B C -10 88 -4 A/2+1 -10 / 2 + 1 = -4 Program Quiz • Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Fred Jane ? ? Program Quiz • Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Fred Jane 14 ? Program Quiz • Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Fred Jane 14 16 Program Quiz • Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Fred Jane Jane - Fred 16 - 14 2 14 16 Program Quiz • Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Fred Jane Jane - Fred 16 - 14 2 2 16 Program Quiz • Do each in sequence Fred = 2*7; Jane = 16; Fred = Jane - Fred; Jane = Fred/2; Fred Jane 2 1 Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 Arrays • Access by Index B A 0 1 2 3 4 ? ? ? ? ? 0? 1? 2? 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]; B A 0 1 2 3 4 ? ? ? ? ? 0? 1? 2? 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]; B A 0 1 2 3 4 7 ? ? ? ? 0? 1? 2? 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]; B A 0 1 2 3 4 7 ? ? ? ? 0? 1 2? 4 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]; B A 0 1 2 3 4 7 ? ? ? ? 0? 1 2 4 8 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]; B A 0 1 2? 3? 4? 7 4 0? 1 2 4 8 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]; B A 0 1 2? 3 4? 7 4 3 0? 1 2 4 8 Strings • An array of Characters A=“Lloyd”; B= “Big”; B[2] = A[0]+1; B A 0 1 2 3 4 76 108 111 121 100 L l o y d 0? 1? 2? Strings • An array of Characters A=“Lloyd”; B= “Big”; B[2] = A[0]+1; B A 0 1 2 3 4 76 108 111 121 100 L l o y d 0 1 2 66 B 105 i 103 g Strings • An array of Characters A=“Lloyd”; B= “Big”; B[2] = A[0]+1; B A 0 1 2 3 4 76 108 111 121 100 L l o y d 0 1 2 66 B 105 i 77 M Strings • How do you put “ in a string? • Special characters preceded by \ B A A=“Lloyd”; B= “Big”; B[2] = A[0]+1; B = “\”P\\” 0 1 2 3 4 76 108 111 121 100 L l o y d 0 1 2 34 " 80 P 92 \ Sound • Each time samples the volume (amplitude) • Sound = array of volume values 0 -10 1 2 3 4 -5 10 20 10 5 6 7 8 -7 -15 -20 -12 9 10 4 8 2D-Arrays 10 5 [4,9] [Rows-1,Columns-1] 5 * 10 = 50 Images - 2D array of values • Image [x,y] Today 1. 2. 3. 4. 5. 6. Questions: From notes/reading/life? From Lab # 2 – Preview of Lab # 2 Introduce: How do you make a Web Page?: HTML Explain: HTML, Text Files, NotePad Demo: We will do some HTML – follow on your laptop Practice: Your group will create an HTML page Evaluate: We will share and evaluate your web page 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 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.
