USU 1360 Goals and Objectives
1-1
4-1
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?
1-2
4-2
• 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?
1-3
4-3
• 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.
1-4
4-4
Class mechanics:
• 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.
1-5
4-5
Class mechanics (continued):
• 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.
1-6
4-6
Conclusions from Last Class
• 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.”
1-7
4-7
Conclusions from Last Class
• 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.
1-8
4-8
Number Systems
• 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.
1-9
4-9
Number system
...
25
24
23
22
21
20
2-1
2-2
...
...
32
16
8
4
2
1
1/2
1/4
...
1-10
4-10
Binary Counting
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-11
4-11
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 1-12
number into a base two (binary number)?
4-12
• 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?
1-13
4-13
Binary Addition
• How would you add:
a. 0010
1000
b. 0010
0010
c. 1011
0101
1-14
4-14
At seats: Why do we care how
numbers are stored in a computer?
1-15
4-15
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-16
11-16
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
1-17
11-17
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
1-18
11-18
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;
1-19
11-19
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
1-20
11-20
1-21
11-21
Tools to aid the discovery…
Chapter 1: Marking Up
With HTML: A
Hypertext Markup
Language Primer
Nesting
• 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?
–
–
–
–
–
( ( ))
(() ())
) ()(
[ {()}]
[{]}
1-23
4-23
Webpages use html
Do 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?
1-24
4-24
Why do we need a markup
language?
• 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?
1-25
4-25
Create your own webpage
• 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?
1-26
4-26
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 1-27
circular arrow on Firefox).)
4-27
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-28
4-28
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-29
4-29
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:
Pope
Cardinal
Archbishop
1-30
4-30
Main Idea
• 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.
1-31
4-31
• 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?
1-32
4-32
• 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 items
1-33
4-33
1-34
4-34
Actual versus display format
1-35
4-35
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-36
4-36
1-37
4-37
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-38
4-38
Try it
• Using the <pre> tags, create block letters of
your first name to display.
1-39
4-39
1-40
4-40
1-41
4-41
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;
&ntilde;
displays as é
displays as ñ
• Full list at
http://www.w3.org/TR/REC-html40/sgml/entities.html
1-42
4-42
What about hyperlinks?
• What if we want to link • Hyperlink: An element in an
electronic document that links to
to another webpage?
another place in the same
document or to an entirely
• We can have an inline
different document. Typically,
link which when we
you click on the hyperlink to
follow the link. Hyperlinks are
click the word, the
the most essential ingredient of
browser takes us to
all hypertext systems, including
the World Wide Web.
the new page.
• A hot area may be a • hyper: extremely
active; excessive,
area on the screen
beyond; denoting four
that functions as a link
or more dimensions
when you click it.
1-43
4-43
Marking Links With Anchor Tags
•
There are two sides of a hyperlink:
1.
2.
Anchor text (the text in the current document that is highlighted)
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-44
4-44
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-45
4-45
InClass Assignment 1/12/09
• 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).
1-46
4-46
Why do we care? (WDWC)
AKA – the “pep talk”
• Pope Joan 855 AD – fiction, reading knowledge restricted
R. 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.
1-47
4-47
WDWC
• 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
1-48
learn how to learn what you will need to know to thrive in our
technological society.
4-48
WDWC
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.
1-49
4-49
Me – graduated 1986 with PhD
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
1-50
4-50
WDWC
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
1-51
4-51
WDWC
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
o
o
o
o
nesting
file transfer
rules
pixels
hex - color
1-52
4-52
WDWC
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.
1-53
4-53
Debugging Skills – bold my addition
If you see the problem, don’t shout it out.
1-54
4-54
Trying to add link to page on Darwin
1-55
4-55
Trying to add link to page on Darwin
1-56
4-56
Special Characters: The Escape Symbol
• What if our web page needed to show a math
relationship like
0 < 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-57
4-57
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-58
4-58
1-59
4-59
Pathnames and Directory
• 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).
1-60
4-60
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-61
4-61
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-62
4-62
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-63
4-63
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-64
4-64
Review questions
• 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?
1-65
4-65
1-66
4-66
Review questions
• 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
1-67
4-67
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-68
4-68
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-69
4-69
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-70
4-70
hexadecimal – base 16
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 specifications
range from 00 to FF.
1-71
4-71
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-72
4-72
1-73
4-73
1-74
4-74
1-75
4-75
Handling Lists
•
The <ul> tag is the opening
Unnumbered List Tag. Between
these two tags you place LIST
Unnumbered (bulleted) list:
ITEMS, each one having an
– <ul> and </ul> tags begin and end individual <li> opening tag. (If you
the list
want, you can use an optional
– <li> and </il> tags begin and end </li> closing tag, but it is not
needed.) There is no limit to the
the items within the list
number of List Items you may
have in a single list.
Example Unnumbered List...
•
•
•
•
•
pencils
pens
erasers
paper
glue
<ul>
<li>pencils
<li>pens
<li>erasers
<li>paper
<li>glue
</ul>
1-76
4-76
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...
<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>
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.
1-77
4-77
HTML Comments
• 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 -->
<!>
1-78
4-78
In Class Assignment (Jan 16)
• 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
1-79
4-79
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-80
4-80
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-81
4-81
Handling Tables
Notice how the second row is just “missing” an item
1-82
4-82
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-83
4-83
Notice how the links tend to merge into each other
1-84
4-84
1-85
4-85
1-86
4-86
1-87
4-87
1-88
4-88
Sample table:
1-89
4-89
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>
1-90
4-90
•
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%>
1-91
4-91
1-92
4-92
But how do we make OUR page
public?
• 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.
1-93
4-93
Individual assignment
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)
1-94
4-94