- Describe the CSS "box model" with a nice illustration. Cover margins,
padding, content, and borders. Give a couple examples. Be sure to show
the nice TRBL mnemonic. Which of these properties can or cannot be
negative?
- Write a simple XHTML page with a mice mouse-over menu bar that contains
pull-out menus for some of the items. Although many people have already
done this, write your own completely from scratch.
- Write a very small example page illustrating the technique
behind the "Revealed" submission to the CSS Zen Garden.
- IE does not implement the official Box Model correctly, requiring
a "box model hack" to make things look good on both IE and standards
compliant browsers. Describe three approaches to implementing a box
model hack.
- Write a small example page illustrating the following four Image
Replacement techniques: Fahrner, Leahy/Langridge, Levin.
- Why is it not recommeded to use the Fahrner Image Replacement technique?
- Browse every one of the "ten questions" articles accessible from
http://webstandardsgroup.org/features/ and write down the five
coolest things you learned.
- Author a web page that illustrates generated content.
Use all forms of content from Section 12 in the CSS 2.1
spec. Use chapter, section and subsection numbering
with <h1>, <h2>, and <h3>.
- Author a three page site with a fixed-position menu
on the left side, that can take you to any of the
three pages. Use two style sheets. In the print style
sheet, the menu must not show. Add a "Print this page"
link to each page, which prints the page using the print
style. If you are stuck, see Dr. Dionisio's course
pages.
- See if any browsers support paged media, as in
Section 13 of the CSS 2.1 spec.
- Show a page using all the selectors. Which ones are not
handled by IE?
- Show a page with all pseudo-elements and pseudo-classes.
- Make up a cool addition
to http://intensivstation.ch/css/en/template.php.
- Think up two cool "new properties" for CSS. "Add them" to the
properties page in the CSS 2.1 spec. That is, show the table
entries (values, applies to, inherited, percentages, groups...).
Make sure it doesn't have a totally wimpy trivial syntax.
- Chose three properties that are inherited and three that
are not. For each, state WHY the inheritance is or isn't
given.
- Build a standards-compliant website with validated XHTML,
and CSS and is WAI Level 2. In your project, use cursors and
fixed layouts and IE specific comments
AND behavior files to implement IE hacks AND use overflow/clipping.
- Write a five page paper about CSS. In your paper, discuss CSS3,
describle modularization, show example
snippets. Talk about browser support. Mention which browsers use
which engines. Differences between engines as they relate style sheets.
Describe famous IE bugs and their workarounds.
- Research the following commands (these are Unix commands, but
most have Windows equivalents): ping, traceroute, route,
dig, nslookup, host, arp, rarp, netstat, ifconfig and lsof.
Experiment with each but don't hose your system playing around.
Show output for one (non-trivial) sample run each of ping, tracerout,
and netstat, annotating your output with a description of
"what it all means."
- Write a Perl script to display the IP address and hostname of
the machine it is running on. If you have never written
a Perl script before, now's your chance to learn the language!
- What are the ethernet addresses of www.utu.fi and
p1-0.paix-bi1.bbnplanet.net?
- What do switches do with Ethernet frames that have all binary 1's
in the six frames following the preamble?
- How many hosts can be connected to the (sub)network 153.26.11.64/30?
What range of IP addresses are they?
- What would an IP router do with an IP packet with destination
address 249.16.22.88?
- Skim RFC 821 (SMTP), 959 (FTP) and 2616 (HTTP 1.1), and read RFC 959
(POP). Then write a five page summary on some of the technical aspects
of each of these protocols.
- Write a Java client program for reading mail from a POP3 server.
You only have to support logging in, status inquiries, and
message retrieval; there is no need to implement delete.
- Verify that you can read mail from a POP3 server by telnetting
to port 110, that you can see a web page contents by telnetting
to port 80. Try listing directory contents and retrieving a file
by telnetting to port 21. Explain what happened.
- Write a web server in Java. You can have it run on some
port other than 80 if you like. Write it as a traditional
socket based program. Don't go overboard on this
problem. All you have to do is read GET requests, ignore
request parameters, and send back error responses for most
requests. Do send back at least HTML page for '/'.
Send back the page by writing the file out through
the socket to the client.
- Spend time in the Internet Society's Internet pages, LivingInternet.com
and Hobbes' Internet Timeline. Answer:
- Who was the first person to be declared a munition, and when and why?
- Where are the five main NAPs in the USA?
- Why did the ARPANET lock up on December 25, 1973?
- What happened on December 12, 1986?
- What year did the Internet backbone get OC48?
Write a servlet for generating a table comparing two investments
for a given initial balance, (fixed) rate of return,
(fixed) tax rate, and length of time in years. The table
should put the end-of-year values for a tax-deferred
investment and taxable investment side by side. For example
if you started with 1 dollar and your investments made 100%
per year at a 33% tax rate, you'd produce:
| Year | Tax Deferred | Taxed @ 33%
|
|---|
| 0 | $1.00 | $1.00
|
| 1 | $2.00 | $1.67
|
| 2 | $4.00 | $2.79
|
| 3 | $8.00 | $4.66
|
| ... | ... | ...
|
| 20 | $1,048,576.00 | $28,466.20
|
Sanity check: over a 20 year period, with a 12% return and
35% tax rate, you'd have $4.49 in the taxable
account and $9.65 in the tax-deferred account).
- What is the maximum size of the data portion of an
IP datagram?
- If you have a bunch of routers that can each connect
a maximum of K networks, then how many routers (call this
number R) are required to connect N networks? Write an
equation for R in terms of N and K.
- How many bits per second can pass through a hub connecting
10 computers if the hub supposedly has a data rate of 10Mbps?
How many bits per second can pass through a switch connecting
10 computers if the hub supposedly has a data rate of 10Mbps?
- In the old days when the host and network parts of an
IP address was determined solely by the IP address itself
(you know, when all hosts were part of Class A, B and C
addresses) how many:
- Class A networks were allowed?
- Hosts per class A network were allowed?
- Class B networks were allowed?
- Hosts per class B network were allowed?
- Class C networks were allowed?
- Hosts per class C network were allowed?
Note: don't forget that some networks are reserved, and some hosts
are reserved.
- Draw a picture of two networks with three hosts each
connected by a IP router. One network uses 26 bits for
the network part and the other uses 18. Label each
host, router, and network with sample IP addresses.
Make sure the addresses are consistent. Use slashes.
Give a routing table for one host.
- Suppose you have a server and it gets 10 requests, each
five seconds apart. Serving each client takes 10 seconds.
- Assuming the server is NOT threaded, how long does it take
for the first reply to get sent back? The last reply?
What is the average service time per client?
- Assuming the server is threaded (and the overhead
of threading is insignificant), how long does it take
for the first reply to get sent back? The last reply?
What is the average service time per client?
- Does limiting the number of levels in a DNS hierarchy
result in faster name resolution? That is if your organization
restricts all names to three segments each instead of
allowing ten segments will name resolution be faster?
Why or why not?
- Write a generic threaded Java server. You instantiate
it with a port to listen on. It listens and spawns a thread
when a connection comes in. You'll need some kind of interface
or abstract class to allow the spawned thread to be
generic enough. The only requirement is that the helper
thread be passed the socket returned from the accept call.
- Do routers on the public Internet require TCP software?
Why or why not?
- Give the network numbers and host numbers for each
of the following
- 143.26.95.33/21
- 14.216.195.3/10
- 13.26.95.133/29
- Explain why the subnet mask 255.255.255.254 is practically
useless, or at least, why would you feel bad if your
boss assigned you and your workstation to a subnet
with that mask.
- An IP packet addressed to 188.24.55.12 arrives to its
destination network 188.24.55.0/24. It is received by
the router, whose IP address is 188.24.55.1 and Ethernet
address is E3:22:11:90:CB:14. The actual destination machine
has Ethernet address 03:22:C4:AA:AA:27. Draw the ARP
packet sent out by the router and the ARP packet sent back
by the destination machine.
- Explain how a thread waiting on a socket gets unblocked
by the operating system. Start your explanation with
"An IP datagram containing a TCP segment arrives at the host."
- What congestion-control and delivery-order strategies
are used in UDP?
- Network address translation requires computational overhead
above and beyond simply rewriting IP address and Port number
bits in packet headers. Name one required "computation."
- Here is a student's attempt to make an RMI server to do
temperature conversions. The student has claimed that the
following code is complete. Unfortunately something significant
is missing, and in fact, something very un-RMI-like has been
put in. What's missing and what is wrong?
(Don't put trivial things in your answer like "missing comments,"
"missing import statements," "stupid variable names.")
import java.rmi.*;
import java.rmi.server.*;
import java.io.*;
import java.net.*;
interface Converter extends Remote {
public double toCelsius(double f) throws RemoteException;
public double toFarenheit(double c) throws RemoteException;
}
public class ConverterObject extends UnicastRemoteObject
implements Converter {
public ConverterObject() throws RemoteException {super();}
public double toCelsius(double f) {return (f - 32) / 1.8;}
public double toFarenheit(double c) {return c * 1.8 + 32;}
public static void main(String[] args) throws Exception {
ServerSocket listener = new ServerSocket(9090);
while (true) {
Socket socket = listener.accept();
PrintWriter out = new PrintWriter(socket.getOutputStream(), true);
out.println(new ConverterObject().toString());
}
}
}
- Here is a complete HTML document, full
of deprecated elements and attributes. Rewrite it to
follow the XHTML 1.0 strict DTD.
<body bgcolor=white><div align="center">
<font face="Arial" color=green>Hey <s>um</s>
<font color=red> oh</font></font></div></body>
- Which of the following would be session beans and which
would be entity beans? Grocery List, Account, Order,
Shopping Cart, Employee, Schedule, Meal, PersonalProfile,
PaymentProcessor, CreditCard.
- Suppose you want to promote a web site
and you send out some (spam) emails with a URI pointing
to your site. What is a cheap way to track which of the
receipients actually visited your site by clicking on
the link in the mail? (That is, you need to create a database
or textfile with all the email addresses of people that
visited your site because they read your email message.)
- Post a question to a USENET newsgroup. Access the USENET
via Google Groups. Send me a hyperlink to the Google page with your
question. Make sure the question is relatively sophisticated,
articulated in perfect English, and answered by a total stranger.
- Run a traceroute to some host in Finland and record the
trace. Which countries did your packets go through? Run another
traceroute the following day and see if the trace is any different.
- Give one host each (full host name and IP address)
from each of the following top-level domains: edu, int,
com, gov, net, org, mil,
arpa, as, za, il, es,
cf, zw, and hu.
- Check whether some popular browsers fully respect the
official syntax for SGML comments when set to view HTML content.
In other words, see if the browser thinks that some things should
be comments when they are not, or tries to interpret as SGML text
that should be comments.
- It has been said that the number of
Internet users doubles every year. How long can this process
go on, assuming the earth's population is six billion?
- Suppose you bought 100 shares of stock
(right at the end of the trading day) in each of the following: Microsoft
in 1986-03-19, CISCO on 1990-08-23 and Citigroup in 1990-08-22.
Assuming you did not reinvest dividends, how
many shares of each stock would you have today? What did the orignial
investment cost and how much was it worth on 2001-09-01?
- What was the interday high of the Dow Jones industrial average
on 1929-09-03? What was the first day that it closed above
this value? Assuming that it was actually possible to invest
exactly in the average, and an annual inflation rate of 4%, how
many years would it take you just to break even had you bought
it at that peak?
- Find the biggest cookie on your system and describe
each part of it.
- Design an image of cooked spaghetti with pesto sauce
of size 200 x 200 that can be seamlessly tiled (for use as a web
page background). Produce GIF, PNG and JPEG output. Give
the file sizes for each.
- Explain how to make a site whose hyperlinks seem to "disappear"
after they have been clicked on.
- Explain the difference between
a img {
border-style: none;
color: white;
}
and
a,img {
border-style: none;
color: white;
}
- How would you ensure that the background of a
web page be green on the left side and white on the
right side, where the "left side" is exactly 200 pixels
wide?
- The following HTML start tag uses too many deprecated
attributes. Show how to make it conform to the XHTML
Strict DTD:
<body text=red link=green alink=blue vlink=gold
bgcolor=orange background="triangles.gif">
- The blink element is not deprecated.
Why not?
- Show how to rewrite the following HTML snippet
It was <s>not</s> me
to avoid the deprecated s element, using
an inline style. Repeat for each of the
following elements being used in place of s:
b, big, i, small, strike, sub, sup, tt, and u.
Why aren't all of these tags deprecated?
- Pages 128-129 of Niederst's book
Web Design in a Nutshell book shows you four
disgraceful tricks for producing indented text. For each
of the four hacks:
- Does the hack validate as XHTML? Explain the validator's
output.
- Is the method flexible enough for you to specify the amount
of indentation? If so, how do you do so; if not, why not?
Also, show how to produce an indented paragraph using
an inline style, and with a (borderless) table and a
transparent GIF.
- Why is it considered good practice to always specify
values for the width and height attributes of the img
element?
- Give the XHTML strict (and CSS-based) equivalent of the HTML
<img src=test.gif border=12 alt="dog" hspace=5
ismap align=right>
- Make a web page that validates as XHTML 1.0 Strict with the
following characteristics:
- An external style sheet
- A colored "topbar" that is about 100 pixels tall, and is not offset
from the left, top and right sides of the browser window. The topbar
can contain anything you want.
- A split page under the topbar containing three columns.
- The left column should have a list of hyperlinks that take you
to different pages. The pages should open in a particular
browser window that is different from the one containing
your page.
- The center column should contain an imagemap, in JPG format,
that contains the same links.
- The rightmost column of the page should contain some small
"thumbnail" images (say 50 x 50) which when clicked on
bring up much larger versions of the image in a separate
browser window. Place the thumbnails in a three-column
table with the image on the left, the image name in the
center, and the size of the large image in kilobytes in
the right column. This table must have a header, body and footer.
Group the rightmost two columns so no rule is drawn between
them.
- On the bottom of the page, make a 6 pixel high purple line
stretching horizontally across the page, and under it, use
the address element and the W3C XHTML 1.0 Strict
validation component.
- Write a five-paragraph mini-paper on why XML is
better than SGML for web documents. Make sure you
include actual examples of XML and SGML. You will
be graded on grammar, spelling, punctuation, and your
skills in organizing a five-paragraph essay.
- Write a JavaScript calculator to compute a body mass
index, where a person's height and weight are entered into
textfields.
- Write a really annoying bouncing ball script two
different ways. You will use a JavaScript timer in both
scripts; the only difference is that in one script you
will use the CSS2 visibility property to turn balls on
and off, and in the other script turn balls off by using
a scaled transparent pixel image.
- Explain why style sheets are good news for both (1) (X)HTML
purists and (2) graphic designers who want to go all-out in designing
web pages.
- In HTML and XHTML, The id attribute "must be unique
in a document" meaning within a document only ONE element can have
a particular id. So explain why, then, does Nierderst write
on page 397 of Web Desgin in a Nutshell
that a style rule such as
#061998 {color: red}
"applies to all elements with the given ID."
In other words, what's the big deal? What does she mean
by all of them? Can a single style rule, such as
the one above, actually apply to more than one element?
- Make a web page, using SMIL only, that performs a count down
(10, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0"). Show each number in a really
huge font-size, one each second, and have an audio track synchronized
with the text so that visitors to your page hear the numbers
spoken. You can have the audio in Russian, Spanish, Welsh,
Mandarin, or whatever language you like -- just be consistent.
After the zero, either show a movie of a spaceship taking
off or just make a really, really loud noise.
- Browse Lynda Weinman's website or some of her books
and write down five profund, interesting, or cool statements
or tips. Do the same for Jakob Nielsen. You can get
tons of Nielsen's commentary from http://www.useit.com/alertbox/.
Mention statements that have relevance to web design,
not ones like "Most readers of this column probably belong
to the top 10% of the population in terms of intelligence"
(even if it makes you feel good).
- Rewrite the following HTML fragment in strict XHTML:
<p align=justify>This is <s>really</s> <font size="+1">crazy.</font>
- Rewrite the following HTML fragment in strict XHTML:
<html>
<body bgcolor=white alink=red>
<h1 align=center>WHOA!</h1>
<hr size=10 noshade>
<ol type=a><li>An Gréasán<li>Íomhánna<li>Grúpaí<li>Eolaire
</body>
</html>
- Why was the language attribute of the script
element deprecated? (In other words, how exactly do you
specify this information? Page 513 of [Niederst] gives no
help whatsoever.)
- Although legal, most web authors should avoid length units
such as pt or cm. Why? What can be used instead?
- Why does the Web Palette have 216 colors?
- Suppose you were given the opportunity to extend XHTML with a way
to specify the iter-item spacing in a list in XHTML. Show how you
would do this. If you choose to add an element or an attribute,
show the changes to the DTD that result. If you wish to implement
this extension in style sheets only, be precise. (Note: neither the
existing line-height property nor the existing compact
attribute are any good.)
- Netscape has a proprietary multicol element for rendering
text in a newspaper-like fashion (multicol stands for multiple
colmumns). This element has a required cols attribute
to specify the number of columns, and two optional attributes:
width for the column pixel width and gutter for
the pixel width between columns. Show the changes to the XHTML
DTD that would be required if this element were adopted as
an official element. Remember you have
to indicate whether this element should be block or inline, and
give ELEMENT and ATTLIST definitions.
- Give XHTML code to produce the following table:
- Rewrite the following without the script element (preserving
the semantics of the fragment, of course).
<h1 id="x">Blah Blah Blah</h1>
<p><input type="button" value="Hide" onclick="disappear()" />
<input type="button" value="Red" onclick="makeRed()" /></p>
<script type="text/javascript">
<!--
function disappear() {
x.style.visibility = "hidden";
}
function makeRed() {
x.style.color="#ff0000";
}
// -->
</script>
- What is wrong with this piece of JavaScript?
function makeRedBackground() {
x.style.background-color="#ff0000";
}
How do you fix it?
- Why is it now considered bad practice to capitalize
tag names in HTML?
- What is the biggest disadvantage of graphic "submit" buttons?
- What is the most important thing that a web designer must
consider when using style sheets?
- If a sentence contains all of the words "Netscape 4", "style sheets" and
"tables," what is the rest of the sentence most likely to contain?
- Distinguish the "frame" and "rules" attributes of the
XHTML table element.
- Distinguish the "margin" and "padding" properties of CSS.
Draw a picture to illustrate the difference.
- Write an XML (not a SGML) DTD for a company's inventory of products.
The inventory has a manager and a set of products. Each product has
a product-id, a unit price, and an optional description. We also need to know how
many items of a given product are in the inventory. The manager has
a name, employee id number, and multiple phone numbers. Each phone
number needs to be marked as a fax, cell or voice number. For
ease of reading the document, we want the inventory's manager
to appear before the products, but we do not want to make any other
ordering restrictions (for example we can put the manager's name and
phone numbers in any order).
- SGML and therefore HTML, allow elements with optional
end tags. In fact they allow elements in which the start and
end tags are optional. Why does XML always require both start
and end tags? (I'm looking for a specific answer here, and
will not award any credit at all if you don't give me the
answer I want.)
- What is the most common misuse of Flash (and of animations
in general) on web sites?
- A designer for a startup company (call it XOZO
just for concreteness) forwhose survival depended
on people finding the company's website thought that if the company's
name appeared in a Art Deco style, with letters nicely spaced out,
people would come to the site. Understanding, at least, that
search engine spiders don't read the text in graphics, but do
pay attention to the content of <h1> tags, and furthermore
being enlightend enough not to use <font> tags, the designer
wrote:
<h1 style="font-size:400%">X O Z O</h1>
What is wrong here? Fix it.
- Give the XHTML for the following, using only one table
element:
