1-1

4-1

USU 1360 Goals and Objectives

1-2

With your neighbors, jot down answers to the following questions:List names of group:1.2.3.4.

• How do you use a computer for fun?

• How do you use a computer for work?

4-2

1-3

• How is a computer used in your major (if you don’t have a major, pick a random major)?

• How does the computer aid scientific discovery?

4-3

1-4

• Clive Thompson: One of the reasons students get bored by science is that too many teachers present it as a dusty collection of facts for memorization. This is precisely wrong. Science isn't about facts. It's about the quest for facts -- the scientific method, the process by which we hash through confusing thickets of ignorance. It's dynamic, argumentative, collaborative, competitive, filled with flashes of crazy excitement and hours of drudgework, and driven by ego: Our desire to be the one who figures it out, at least for now. It's dramatic and nutty and fun.

4-4

1-5

• You are expected to be in class everyday to do group work.

• Individual work is also expected. See the class webpage for class material. Blackboard is ONLY used for grading (not for showing notes, exams, etc).

• Assignments are posted, so if you have an “excused” absence, you can turn in the assignment electronically (by emailing it to your group leader).

• Everyone misses class now and then, so an occasional absence won’t hurt.

• Supplemental Instruction (SI) is available in SER 005. 7pm Tuesdays, 5pm Thursdays.

Class mechanics:

4-5

1-6

• Frequently, we will have class discussion for 15 minutes and then divide into small groups. For now, you pick your own groups (which can change from day to day).

• When you are done with your group assignment, make sure your group leader considers it done. Each person comes with different skills. We want everyone to be challenged.

• An “advanced” group is expected to give more complete and thoughtful answers than a less advanced group.

• If you are leaving before 1:20, have your group leader read over the assignment and give it a score between 1 and 5.

5: Good answers. Used class time wisely.

3: Reasonable answers, but could have given more thoughtful consideration to the questions.

1: Poor answers.

• If you are leaving at the end of class, your group leader will not have

a chance to evaluate the assignment before you leave.

Class mechanics (continued):

4-6

1-7

• Skill assessment?• What is “plain text”? For Friday, demonstrate ability to

create plain text file by doing so.• Steps of scientific reasoning:• (a) define a scientific problem; • (b) state a hypothesis; • (c) design an experiment; • (d) observe, collect, analyze, and interpret data; • (e) apply the results; and • (f) make predictions on the basis of the results.”

Conclusions from Last Class

4-7

1-8

• How does computer help in scientific discovery?– Simulation– Experiments– Record keeping– Organizing data, papers– Communication between researchers– Processing/summarizing/number crunching– Computers to go where a person cannot (too risky, expensive)– Answer “what if” questions?

• Next time, will start chapter 1 from text.

Conclusions from Last Class

4-8

1-9

• With computers, we use base two – only two symbols.

• At seats, in small groups, come up with four similar items which have "two states" – coins (heads/tails), pencils (point up/point down), or even written symbols. Using your items, figure out how to represent the numbers 1-10.

Number Systems

4-9

1-10

Number system

4-10

... 25 24 23 22 21 20 2-1 2-2 ...

... 32 16 8 4 2 1 1/2 1/4 ...

1-11

Binary Counting

4-11

Four students crouching in front of the class (represent 0). Demonstrate counting as each 'bit' goes to 1, the corresponding student stands up.

Show me: 5, 3, 8

1-12

With your neighbors, jot down answers to the following questions:List names of group:1.2.3.4.

• Using the base two number system demonstrated in class, show the encoding for

5

10

32

115• Explain the method you use to convert a decimal

number into a base two (binary number)?4-12

1-13

• Given 8 digits, what's the maximum number you can represent?

 • What's the minimum number you can represent?

 • How many different numbers can you show?

• How would you handle negative numbers?

• How would you represent characters?

• How can the computer tell the difference between numbers and characters if they are all 0s and 1s?

4-13

1-14

• How would you add:

a. 0010

1000

b. 0010

0010

c. 1011

0101

Binary Addition

4-14

1-15

At seats: Why do we care how numbers are stored in a computer?

4-15

1-16

11-16

The Challenge of Bandwidth• How much information is transmitted per unit time

• bandwidth is a measure of available or consumed data communication resources expressed in bit/s or multiples of it (kbit/s, Mbit/s etc)

• Higher bandwidth usually means lower latency

1-17

How big is that?

Bytes (8 bits)• 1 bit: A single yes/no decision  (actually 0.125 bytes)• 1 byte: One character • 10 bytes: One word (a word in English languagea

computer word)• 100 bytes: Telegram;

Kilobyte      1,024 bytes; 210;   approx. 1,000 or 10 3

• 1 Kilobyte: Joke; (very) short story • 2 Kilobytes: Typewritten page• 10 Kilobytes: Page out of an encyclopedia • 50 Kilobytes: Image of a document page, compressed • 100 Kilobytes: Photograph, low-resolution

11-17

1-18

Megabyte  1,048,576 bytes; 220;  1MB (Mb is megabit) approx 1,000,000 or 106 = 10002 (million)

• 1 Megabyte: Small novel; • 2 Megabytes: Photograph, high resolution • 5 Megabytes: Complete works of Shakespeare; 30 seconds of

broadcast-quality video • 10 Megabytes: Minute of high-fidelity sound; digital chest X-ray; • 50 Megabytes: Digital mammogram • 100 Megabytes: Yard of books on a shelf; two encyclopedia

volumes • 200 Megabytes: Reel of 9-track tape; • 500 Megabytes: CD-ROM

11-18

1-19

Gigabyte   1,073,741,824 bytes; 230;      approx 1,000,000,000 or 109 10003 GB• 1 Gigabyte: Paper in the bed of a pickup; symphony in

high-fidelity sound; broadcast quality movie • 2 Gigabytes: 20 yards of books on a shelf • 20 Gigabytes: Audio collection of the works of

Beethoven; • 50 Gigabytes: Library floor of books on shelves • 100 Gigabytes: Library floor of academic journals on

shelves;

11-19

1-20

Terabyte 1,099,511,627,776 or 240;      approx. 1,000,000,000,000 or 1012 = 10004 TB

• 1 Terabyte: all the X-ray films in a large technological hospital; 50,000 trees made into paper and printed; daily rate of EOS (Earth Orbiting System) data (1998)

• 2 Terabytes: Academic research library • 10 Terabytes: Printed collection of the U. S.

Library of Congress • 50 Terabytes: Contents of a large mass storage

system

11-20

1-21

11-21

Chapter 1: Marking Up With HTML: A

Hypertext Markup Language Primer

Tools to aid the discovery…

1-23

• To put snugly together or inside one another: to nest boxes.

• One box is completely contained in another.

• When we next symbols, we need pairs to be completely contained within each other

• Which are correctly matched?– ( ( ) )– (() ())– ) ()(– [ { ( ) } ]– [ { ] }

Nesting

4-23

1-24

Webpages use htmlDo a google search on

“computer Science Salary CNN”

Click on “Best entry-level Salaries for new grads”.

Select “view” “Page Source” from Firefox.

From IE, select “page” and then “view source.

Scroll down to find your major.

How do you find Computer Science Salaries on the page?

4-24

1-25

• Why can’t we just use plain text?• Why can’t we just use a picture of the page (like pdf) –

the way I post your InClass Assignments?

Why do we need a markup language?

4-25

1-26

• You need to create a plain

text file with .html suffix.• Call the file “try.html”<html>

<title>

My best Day ever

</title>

Can I tell you about my best day ever?

</html>

• From a browser, do “open file” and select file. Or just click on the file.

• What did the title do for you?

4-26

Create your own webpage

1-27

4-27

Tags for Bold, Italic, and underline

• Bold: <b> </b>

• Italic: <i> </i>

• Underline: <u> </u>

– Tag pair surrounds the text to be formatted

– Can you think of a time when two tags would be appropriate?

– Can you think of a time when we don’t need a pair of tags (there is nothing to enclose? )

• At your seats, try it!

• Underline text

• Try putting the text on multiple lines. What happens? Why?

• (Keep your text file open. After saving the contents, hit “reload” (blue circular arrow on Firefox).)

1-28

4-28

Tags for Bold, Italic, and underline• You can apply more than one kind of formatting at a time

• <b><i>Can I tell you about my best day ever?<i></b>

produces: Can I tell you about my best day ever?

– Tags can be in any order, but sometimes

have to be nested correctly

What does “nested” mean?

A set of objects of graduated size

that can be stacked together,

each fitting within the one immediately larger: a nest of dolls.

• Some tags do not surround anything, so they don't have an ending form. Closing angle bracket is replaced by />– <hr /> inserts a horizontal rule (line)

– <br /> inserts a line break

1-29

4-29

An HTML Web Page File

Begins with <html> and ends with </html>

<html> <head>

Preliminary material goes here, including<title> … </title>

</head> <body>

Main content of the page goes here

</body></html>

1-30

4-30

Structuring Documents• Markup language describes how a document's

parts fit together

• Headings:– Choice of eight levels of heading tags to produce

headings, subheadings, etc.

– Headings display material in large font on a new line<h1>Pope</h1> <h2>Cardinal</h2> <h3>Archbishop</h3>produces:

PopeCardinal Archbishop

1-31

• We have plain text.• We want to tell the browser what to do with various parts.• Some is logically designated as a grouping – such as a

paragraph or a title – which has a beginning and ending location.

• We mark a part of the document to be treated specially by marking the beginning and ending of the treatment.

• Example – students in classroom. Mark which ones to stand. Mark which ones to jump. Mark ones for the title. Mark ones to lean.

Main Idea

4-31

1-32

• Sometimes the closing tag is optional (like </p>) as we really don’t need to say when the paragraph ends, if we just say when the next one begins.

• Some tags don’t need to surround text (like a horizontal line). Then the closing bracket is /> instead of >

• For example, you get a horizontal line using: <hr/>

• Some tags may need more information – “attributes”.

• What attributes might you want to add to a horizontal line?

4-32

1-33

• So a basic horizontal line is specified by

<hr />

• Horizontal rule attributes: width and size (thickness) can be specified or left to default

<hr width="50%" size="3" />

<hr width=“200" size="3" /> width is in pixels (picture elements)

(On my screen, 200 pixels is about 3 inches)

Why would you have a percent rather than a fixed width?

size 1 is smallest size

Notice the quote marks around the value

Notice there are no commas separating the items4-33

1-34

4-34

1-35

Actual versus display format

4-35

1-36

4-36

HTML Actual vs. Display Format• HTML text was on separate lines, but was

combined.

• Alternative: HTML text was run together on one line, but displayed formatted on separate lines

• HTML source tells the browser how to produce the formatted image based on the meaning of the tags, not on how the source looks

• But HTML is usually written in a structured (indented) form to make it easier for people to understand<h1>Pope</h1>

<h2>Cardinal</h2>

<h3>Archbishop</h3>

1-37

4-37

1-38

4-38

White Space• White space that has been inserted for readability

– Spaces– Tabs– New lines

• Browser turns any sequence of white space characters into a single space before processing HTML

• Is that ever a problem? What if I want to show a binary addition problem?– Exception: Preformatted information between

<pre> and </pre> tags is displayed as it appears

1-39

Try it

• Using the <pre> tags, create block letters of your first name to display.

4-39

1-40

4-40

1-41

4-41

1-42

4-42

Accent Marks in HTML

• Letters with accent marks use the escape symbol

• Ampersand, then letter, then the name of the accent mark, then semicolon

&eacute; displays as é

&ntilde; displays as ñ

• Full list at

http://www.w3.org/TR/REC-html40/sgml/entities.html

1-43

What about hyperlinks?

• What if we want to link to another webpage?

• We can have an inline link which when we click the word, the browser takes us to the new page.

• A hot area may be a area on the screen that functions as a link when you click it.

• Hyperlink: An element in an electronic document that links to another place in the same document or to an entirely different document. Typically, you click on the hyperlink to follow the link. Hyperlinks are the most essential ingredient of all hypertext systems, including the World Wide Web.

• hyper: extremely active; excessive, beyond; denoting four or more dimensions

4-43

1-44

4-44

Marking Links With Anchor Tags• There are two sides of a hyperlink:

1. Anchor text (the text in the current document that is highlighted)

2. Hyperlink reference (the address of a Web page / target of the link)

• Begin with <a followed by a space

• Give the link reference using href="filename"

• Close the start anchor tag with >

• Text to be displayed for this link

• End anchor tag with </a>

<a href="target_of_the_hyperlink">Anchor Text Seen</a>

Anchor Text Seen

<a href="http://www.cs.usu.edu/~allanv/usu1360/manners.pdf">Manners</a>

To easily copy an address (rather than having to type it), highlight, right click with the mouse, and select copy.

1-45

4-45

Anchor Tags (cont'd)• Absolute pathnames: Reference pages at other web sites

using complete URLs

http://server/directory_path/filename

<a href="http://www.aw.com/snyder/index.html">FIT</a>

1-46

• Create a “plain text” file which you name with a .html suffix.• When opened in a browser, the file needs to display

properly.• The file must contain all names (first and last) of the group.

(NO MORE THAN 4 members). Designate one as “group leader” to be responsible for submitting the assignment.

• The following tags/attributes should be used:

html, title, align, p, h1, h4, i, b, hr, a, pre• Some tags must be nested.• Submit one copy of the file (as at attachment) to Blackboard

preferably before you leave class (but at least by midnight).

InClass Assignment 1/12/09InClass Assignment 1/12/09

4-46

1-47

• Pope Joan 855 AD – fiction, reading knowledge restrictedR. Thomas Flynn: The writing on the wall is very clear. Technology is shaping our

world. Technological skills are critical to our workforce and essential to our success in maximizing our human capital. Each year, technology is advancing more rapidly, and those who are technically unskilled are being left behind. Increasingly, technological ignorance and inexperience are widening the digital divide.

Former Labor Secretary Robert Reich: We are the most unequal of all advanced societies” in terms of incomes, benefits, and also wealth. It is happening largely because of the two great forces of technology and globalization. It’s happening because education and access to learning, that is relevant for this new economy, is so unequal.

In our day, maybe “Pope Joan” would be about denial of access of computer knowledge.

Why do we care? (WDWC)AKA – the “pep talk”

4-47

1-48

• The illiterate of the 21st century will not be those who cannot read and write, but those who cannot learn, unlearn, and relearn.” ~ Alvin Toffler

• Not only can Lifelong Learning help you in life, it’s a basic necessity when it comes to business

• Students – I can’t do that, I haven’t had a class.• Students – I can’t remember that, I had the class three years ago.

• Marten Mickos: Armed with Google, PDFs of manuals, and self-reliance, force yourself to learn how to figure out just about anything on your own. There are no office hours, no teaching assistants, and no study groups in the real world. Actually, the real world is one long, often lonely, independent study - so get with it.

• Goal for this class – give you the framework necessary to learn how to learn what you will need to know to thrive in our technological society.

WDWC

4-48

1-49

Jeff Atwood (a blogger) talks of a visit with an MIT trained engineer. “During lunch, I asked him how much of his schoolwork applied to his current engineering job. His response?

I can't think of a single thing from my MIT classes I've used on the job.

This blew my mind. What's the value of a marquee college degree if none of the skills you learn are useful on the job? At first, I was incredulous. But after considering my own high school educational experience, it started to make more sense. And certainly after attending college for a year, I knew exactly what he meant. The value of education isn't in the specific material you learn-- it's in learning how to learn.

WDWC

4-49

1-50

I do use some information I learned as part of my formal education:

• Programming languages – history part• Algorithms – many algorithms are that old• Calculus hasn’t changed

Most skills I need now I have learned along the way• internet not widely used• email in its infancy• no computer language I use now was part of my formal

training• multi agent systems – research area didn’t exist until

1990s

Me – graduated 1986 with PhD

4-50

1-51

I can’t tell you exactly what you’ll need on the job because

1. Each of you are going into something different

2. What you will need ten years from now likely hasn’t even been invented yet.

3. Even if I did know exactly what do tell you, (a) it would never stick with you (b) you couldn’t make logical extensions as needs changed. You need to over learn!

For example, do you really need to know how to do binary arithmetic? Likely not, but having had a taste of it, you will be ready to understand:

1. Computers can have values overflow as the number of bits needed is exceeded

2. Accuracy problems will happen as 1/3+1/3 +1/3 1

WDWC

4-51

1-52

Will you really write HTML on the job? Probably not. There are packages that do it better and faster – and you’ll probably hire it done anyway. But, HTML teaches you:

a) The lingo – can ask for what you want.

b) Understanding of inner workings – respect. Asthma

c) Students: not interested in doing that. Who is going to be your servant to prepare everything just exactly the way you want it? This is self-service!

d) Problem solving skills

e) Concepts:o nestingo file transfero ruleso pixelso hex - color

WDWC

4-52

1-53

Computer science IS A SCIENCE. It is part of what general education is all about. Knowledge of computers and how to use them will be one of the most useful things you learn.

Computer Science is the best minor for any major.

You will use computer science knowledge no matter what your major is.

WDWC

4-53

1-54

Debugging Skills – bold my additionIf you see the problem, don’t shout it out.

4-54

1-55

Trying to add link to page on Darwin

4-55

1-56

Trying to add link to page on Darwin

4-56

1-57

4-57

Special Characters: The Escape Symbol• What if our web page needed to show a math relationship

like0 < p > r The browser would interpret <p> as a paragraph

tag, and would not display it as “less than”• An escape character is single character which (in a sequence of

characters) signifies that what is to follow takes an alternative interpretation. This is NOT the same as the escape key, but the idea is similar to a compound key stroke (Ctrl-enter, Alt-).

• Escape: miss: fail to experience; In our case, we “escape” the current mode.

• Can you think of how we might use an “escape” in conversation to tell the listener we are joking?

• To show angle brackets, use escape symbol — ampersand (&) — then an abbreviation, then a semicolon (;)

&lt; displays as <&gt; displays as >&amp; displays as &

1-58

4-58

Special Characters• &nbsp; (non-breaking space) - A variant of the

space character that prevents an automatic line break (line wrap) at its position. It is also known as a hard space or fixed space. The difference between an NBSP and a normal space is that, when a string including the NBSP comes at the end of the line, and is too long to fit, it will move the whole string to the next line (including the strings that the NBSP connects to). This is analogous to how normal strings wrap. For example, the string "ambidextrously" will never be "broken", and neither

will the string "am bi dextrous ly" when the spaces are nonbreaking.

• &mdash – (em dash) (twice the width of a letter)

• &ndash – (en dash) (the width of a letter)

Sometimes a numerical code is used instead of a mnemonic

• &#913; &#935;&#937; Alpha Chi Omega

• Full list at

http://www.w3.org/TR/REC-html40/sgml/entities.html

1-59

4-59

1-60

• When you store something on the computer, you have a series of nested folders.

• For example, to get to this class, you needed to know Rm 103, of Engineering Building, Of Utah State University

• The path name is the ordered list of those folders. Normally you navigate by clicking. In a webpage, you must state the whole path.

• A path is the general form of a file or directory name, specifying a unique location in a file system. A path points to a file system location by following the directory tree hierarchy expressed in a string of characters in which path components, separated by a delimiting character, represent each directory. The delimiting character is most commonly the slash ("/"), the backslash character ("\"), or colon (":")

• Paths are used extensively in computer science to represent the directory/file relationships common in modern operating systems, and are essential in the construction of Uniform Resource Locators (URLs).

4-60

Pathnames and Directory

1-61

4-61

Anchor Tags (again)

• Relative pathnames: Reference pages stored to the same directory (give only the name of the file). The “dot” means “current directory”.

Read <a href="./filename">this file</a>.

– Why would we want this?

– Relative pathnames can also specify a path deeper or higher in the directory structure

./childdirectory/filename

../sibdirectory/filename

. Current directory

.. Parent directory (one level up)

So how would I get at a file name two levels up?

1-62

4-62

Including Pictures With Image Tags

• Image Tag Format: <img src="filename" />

– src short for source

– Absolute and relative pathname rules apply

<img src="http://www.oursite.com/graphx/ussmll.gif" width="200" height="50" ALT=“Our Site“/>

The alt tells the person what a picture is in case it is still loading or pictures have been suppressed. This is a good design feature.

• If we wanted to include a picture of Scott Adams– Download image to our computer. Rename if we want.

– Transfer image to the same location which contains our html file

– Reference image as

<img src="./Adams.jpg" width=300 ALT = "Scott Adams at work"/>

1-63

4-63

Challenge Question

• Suppose, you want to have an image that is linked, so that if someone clicks the image, the user will be taken to another page.

• Ideas for how to do this?

1-64

4-64

Challenge Question

• You just need to place the IMG tag between the <a> tags.

<a href=" http://www.oursite.com/ ">

<img src="thumbnail.jpg" />

</a>

Of course, the whitespace isn’t necessary.

1-65

• If magritte.html wanted to reference a picture (adams.jpg) in the same directory, what would be the reference?

• If magritte.html wanted to reference a picture (adams.jpg) in the bios directory, what would be the reference?

• If magritte.html wanted to reference a picture (adams.jpg) in the sci directory, what would be the reference?

• If magritte.html wanted to reference a picture (adams.jpg) in the parent directory of bios, what would be the reference?

Review questions

4-65

1-66

4-66

1-67

• If magritte.html wanted to reference a picture (adams.jpg) in the same directory, what would be the reference?

./adams.jpg• If magritte.html wanted to reference a picture (adams.jpg)

in the bios directory, what would be the reference?

../adams.jpg• If magritte.html wanted to reference a picture (adams.jpg)

in the sci directory, what would be the reference?

../sci/adams.pgd• If magritte.html wanted to reference a picture (adams.jpg)

in the parent directory of bios, what would be the reference?

../../adams.jpg

Review questions

4-67

1-68

4-68

Including Pictures With Image Tags

• GIF and JPEG Images– GIF: Graphic Interchange Format

• 8 bits (256 colors or levels of gray)

– JPEG: Joint Photographic Experts Group

• 24 bits (224 = 16.7 million colors – full color; levels of compression)

– Tell browser which format image is in using filename extension (.gif, .jpg or .jpeg)

1-69

4-69

Positioning the Image in the Document• By default, images are inserted in the page at the point

where the tag is specified in the HTML, and the text lines up with the bottom of the image

• Align attribute can line up image with top of line of text, middle, or bottom

• Align left, center, or right attribute puts the image on the side of the browser window — text flows around it

• To put image on separate line, what do you think you would do?

• Can specify how large the image should be displayed (in pixels) with height and width attributes

• Example:<img src="100_3075.JPG" width="50%“ align=“left”/>

1-70

4-70

Handling Color• Color is used for both background and text

• bgcolor attribute of body tag gives solid background color to the whole document– Can use predefined color terms

<body bgcolor="magenta“> </body>

<font color=“blue”> things you want blue </font>

But naming colors is pretty tedious when there can be millions of them. Instead of using names, we often use numbers.

However, we don’t use decimal numbers as we are talking to a computer.

We could use binary numbers, but then get LONG.

We combine every four binary numbers into one symbol (a hexadecimal number)

1-71

hexadecimal – base 16

4-71

Hex 0 1 2 3 4 5 6 7 8 9 A B C D E F

Bin 0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111

Dec 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

All you really need to know is that the specificationsrange from 00 to FF.

1-72

4-72

Handling Color– Use hexadecimal color numbers two hex digits for

each color (0-9 A-F)<body bgcolor="#FF00FF"> (magenta)

• color attribute can be used with body text, link, or font tags

<font color="red">text</font>

<body bgcolor="#000000" text = "#DDDDDD" link="FFCC66">

1-73

4-73

1-74

4-74

1-75

4-75

1-76

4-76

Handling Lists• Unnumbered (bulleted) list:

– <ul> and </ul> tags begin and end the list

– <li> and </il> tags begin and end the items within the list

Example Unnumbered List...

• pencils • pens • erasers • paper • glue

<ul> <li>pencils <li>pens <li>erasers <li>paper <li>glue

</ul>

The <ul> tag is the opening Unnumbered List Tag. Between these two tags you place LIST ITEMS, each one having an individual <li> opening tag. (If you want, you can use an optional </li> closing tag, but it is not needed.) There is no limit to the number of List Items you may have in a single list.

1-77

4-77

Handling Lists• Ordered (numbered) list:

– <ol> and </ol> tags begin and end the list

– Uses the same <li> tags

• Sublists: Insert lists within lists (between <li> </li> tags)

• Definitional list:

– <dl> and </dl> tags begin and end the list

– <dt> and </dt> surround the terms to be defined. The closing tag is not needed

– <dd> and </dd> surround the definitions (indented) The closing tag is not needed.

Example of a Definition List...

alliance A union, relationship, or connection by kinship, marriage, or common interest. alligator Large amphibious reptile with very sharp teeth, powerful jaws. alliterate To arrange or form words beginning with the same sound.

<dl> <dt>alliance <dd>A union, relationship, or connection by kinship, marriage, or common interest. <dt>alligator <dd>Large amphibious reptile with very sharp teeth, powerful jaws. <dt>alliterate <dd>To arrange or form words beginning with the same sound. </dl>

1-78

• Comments are not displayed by the browser.• The comment tag is used to insert a comment in the source

code. You can use comments to explain your code, which can help you when you edit the source code at a later date.

• A comment declaration starts with <!, followed by zero or more comments, followed by>. A comment starts and ends with "--", and does not contain any occurrence of "--".

<!-- I am a legal comment -->

<!-- I am the first comment -- -- I’m the second -->

<!---->

<!------ Hello -->

<!>

HTML Comments

4-78

1-79

• Working in groups of size 2,3,or 4 – designate one person as “leader” to turn in assignment

• Make sure full names of all group members are included in the html file

• Create a professional looking webpage which contains the following features:– Color (background, text, and links)– Font color for a sentence or two– Images– Reference links to another page.– Alignment of image

If time, also include:– Lists– Comments

In Class Assignment (Jan 16)

4-79

1-80

4-80

Handling Tables

• Tables are one of the most challenging things to code with HTML. It isn't very hard, it just takes a while to get the hang of.

• Tables begin and end with <table> and </table> tags

1-81

4-81

Handling Tables• Rows are enclosed

in table row tags, <tr> and </tr>

• Cells of each row are surrounded by table data tags, <td> and </td>

Create a caption centered at the top

of the table with <caption> and

</caption> tags

Column headings are created as first

row of table by using <th> and </th>

tags instead of table data tags

This is tedious to be sure to use cut and paste!!!!

1-82

4-82

Handling Tables

Notice how the second row is just “missing” an item

1-83

4-83

Controlling Text with Tables• Sometimes you don’t want text of float so much.

• Tables (for things that don’t even look like tables) can control arrangement of information on a page

• e.g., a series of links listed across the top of the page could be placed in a one-row table to keep them together– If the window is too small to display all the links, table

keeps them in a row and a scroll bar is added

– If the tags are not in a table, the links will wrap to the next line instead

1-84

4-84

Notice how the links tend to merge into each other

1-85

4-85

1-86

4-86

1-87

4-87

1-88

4-88

1-89

4-89

Sample table:

1-90

Using Tables for Layout

• Using tables for layout is probably one of the most controversial subjects in web design.

• There are many people who believe that fixing the layout the way a table does shouldn't be done. I love the ability it gives a designer to control where things will appear on a page.

For layout – just make the borders invisible (border=0)

• There are two ways to design a table's width: fixed pixel amount or relative to screen width.

• <table border=0 width=80%><tr><td valign=top>

</td></tr></table>

4-90

1-91

• Now say you want two columns in that table, one to take up the first 1/4 of the width, and the second to take 3/4 of the width.

<table border=0 width=500><tr><td valign=top width=25%>

</td><td valign=top width=75%>

</td></tr></table>

• The cellpadding attribute in a table adds pixel margins between the cell borders (invisible borders in our case) and the content within each cell, keeping two cell contents from looking "too close" to each other. A cellpadding will set a margin for the right, left, top, and bottom of the cell all at once.

• Say you want 5 pixels of padding in each cell in your layout table. All you need to do is add cellpadding=5 in the opening <table> tag, as follows:

<table border=0 cellpadding=5 width=25%>

4-91

1-92

4-92

1-93

• See document “MakingWebpagePublic” on class webpage

• Basically, you have to move your file to a location called a server. This moving is called “file transfer”. You need a program to be able to do it. The computer science labs have such a program installed. Using it is likely the easiest. Or you can download a file transfer program yourself to your personal machine. The documents on our web page explain this.

• Then you have to know how to view it.

But how do we make OUR page public?

4-93

1-94

The individual assignment is due Friday night and is posted to our class website.

Do take advantage of the Supplemental Instruction for getting help outside of class.

SI: Ser 005.

Tuesdays 7pm (Ben and Kyle alternate)

Thursdays 5pm (Greg and Nazneen alternate)

Individual assignment

4-94