lecture # 3 html and arrays. today questions: from notes/reading/life? from lab # 2 – preview of...

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

Preview Lab # 2

Today






4. Practice: Your group will create an HTML page






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>


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

NotePad<html>


Web Browser

myPage.html

Web Server

Internet


</html>

NotePad<html>


Web Browser

myPage.html

Web Server

Internet


</html>

http://there.com/myPage.html

GET

my first web page

Web pages on one computer

NotePad<html>


Web Browser

myPage.html


</html>

myPage.html

my first web page

Open Page

NotePad / Web Browser Demo

Bold text

NotePad<html>

my first web page</html>

Web Browser

myPage.html


</html>

myPage.html

my first web page

Open Page

Bold Demo

Why didn’t bold appear?

NotePad<html>


Web Browser

myPage.html


</html>

myPage.html

my first web page

Open Page

Do Save

NotePad<html>


Web Browser

myPage.html

Save

myPage.html

my first web page

<html>my first web page

</html>

Open Page

Save Demo

It Still Didn’t Appear

NotePad<html>


Web Browser

myPage.html

Save

myPage.html

my first web page


</html>

Open Page

Reload

NotePad<html>


Web Browser

myPage.html

Save

myPage.html

my first web page


</html>

Reload

Reload Demo

Multiple Lines

NotePad<html>


Web Browser

myPage.html

Save

myPage.html

my first web page

<html>my first

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

• make a new paragraph

• italic

• <ul> unordered list– <li> list item

paragraph

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”>

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?

NotePad<html>


Netscape

myPage.html

Web Server

Internet


</html>

Web pages on one computer

NotePad<html>


Netscape

myPage.html


</html>

myPage.html

my first web page

Open Page / Reload

Today












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>

• 

• 

• <ul> <li> <li> <li> </ul>

• <img src=“image.gif”>• <a href=“link.html”>link text</a>

Today












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 = 75;

B = A+13;

A = A-B+3;

C = A/2 + 1; A + 13

75 + 13 = 88

Program


A = 75;

B = A+13;

A = A-B+3;

C = A/2 + 1;A-B+3

75 - 88 + 3 = -10

Program


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


Fred = 2*7;

Jane = 16;

Fred = Jane - Fred;

Jane = Fred/2; Jane - Fred16 - 14

2

Program Quiz


Fred = 2*7;

Jane = 16;

Fred = Jane - Fred;

Jane = Fred/2;

Today












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

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












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.

lecture # 3 html and arrays. today questions: from notes/reading/life? from lab # 2 – preview of...

Documents

web pagemypage

web browsersnotepad

web pagehttp

web pageweb browsermypage

web pageweb pages

web pagerepractice

web pagespecial problems

web pageopen pagesave