Post on 29-Dec-2015
Lecture # 3 HTML and Arrays
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
• 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
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
• 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
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
• 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
NotePad<html>
my first web page</html>
Web Browser
Computer Disk
Web Server
Internet
Publishing Web pages
NotePad<html>
my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page
</html>
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>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page
</html>
Publishing Web pages
NotePad<html>
my first web page</html>
Web Browser
myPage.html
Web Server
Internet
Save <html>my first web page
</html>
http://there.com/myPage.html
GET
my first web page
Web pages on one computer
NotePad<html>
my first web page</html>
Web Browser
myPage.html
Save <html>my first web page
</html>
myPage.html
my first web page
Open Page
NotePad / Web Browser Demo
Bold text
NotePad<html>
my <b>first</b> web page</html>
Web Browser
myPage.html
Save <html>my first web page
</html>
myPage.html
my first web page
Open Page
Bold Demo
Why didn’t bold appear?
NotePad<html>
my <b>first</b> web page</html>
Web Browser
myPage.html
Save <html>my first web page
</html>
myPage.html
my first web page
Open Page
Do Save
NotePad<html>
my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b> web page
</html>
Open Page
Save Demo
It Still Didn’t Appear
NotePad<html>
my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b> web page
</html>
Open Page
Reload
NotePad<html>
my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b> web page
</html>
Reload
Reload Demo
Multiple Lines
NotePad<html>
my <b>first</b> web page</html>
Web Browser
myPage.html
Save
myPage.html
my first web page
<html>my <b>first</b>
web page</html>
Reload
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>
Netscape
myPage.html
Web Server
Internet
Save <html>my first web page
</html>
Web pages on one computer
NotePad<html>
my first web page</html>
Netscape
myPage.html
Save <html>my first web page
</html>
myPage.html
my first web page
Open Page / Reload
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
• 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 ofyour 3 favorite places to eat. Link the name of each place to that place’s website.
• Bold your favorite place and create a bulleted listof 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
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
• 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
• AssignmentGeorge = 32;
Size = 17;
Weight = 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;
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
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
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
Program Quiz
• Do each in sequence
Fred = 2*7;
Jane = 16;
Fred = Jane - Fred;
Jane = Fred/2;
Program Quiz
• Do each in sequence
Fred = 2*7;
Jane = 16;
Fred = Jane - Fred;
Jane = Fred/2;
Program Quiz
• Do each in sequence
Fred = 2*7;
Jane = 16;
Fred = Jane - Fred;
Jane = Fred/2;
Program Quiz
• Do each in sequence
Fred = 2*7;
Jane = 16;
Fred = Jane - Fred;
Jane = Fred/2; Jane - Fred16 - 14
2
Program Quiz
• Do each in sequence
Fred = 2*7;
Jane = 16;
Fred = Jane - Fred;
Jane = Fred/2; Jane - Fred16 - 14
2
Program Quiz
• Do each in sequence
Fred = 2*7;
Jane = 16;
Fred = Jane - Fred;
Jane = Fred/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
• 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
A B
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
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
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
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
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
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
Strings
• An array of Characters
A=“Lloyd”;
B= “Big”;
B[2] = A[0]+1;
A B
Strings
• An array of Characters
A=“Lloyd”;
B= “Big”;
B[2] = A[0]+1;
A B
Strings
• An array of Characters
A=“Lloyd”;
B= “Big”;
B[2] = A[0]+1;
A B
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
Sound• Each time samples the volume (amplitude)• Sound = array of volume values
2D-Arrays
[Rows-1,Columns-1]
5
10
[4,9]5 * 10 = 50
Images - 2D array of values
• Image [x,y]
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
• 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 efficientSorting 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.