(12 points, table.html) Create an html table
that displays the following stylized (and not chemically correct) periodic
table of elements:
The html table should have the following characteristics:
- The table headers (I-VII) should be bold-faced.
- The atomic elements should be left-aligned and vertically centered
- The table title (Periodic Table of Elements) should be vertically
top-aligned.
- The H (hydrogen) element should be colored light
green and the VII column should be colored gold
- The cells should have a cellpadding of 10.
Your html table must not use a stylesheet.
Solution
I | II | III | IV | V | VI | VII |
H |
|
Periodic Table of Elements |
|
He |
Li |
Be |
B | Ne
Na |
Mg |
Al |
Ar |
K |
Ca |
Sc |
Ti |
V |
Ga |
Kr |
(12 points, table3.html, table.css) Now you are going to improve the
look of your html table from the previous problem using a style sheet.
Create an external style sheet that gives the periodic table from the
previous problem the following visual characteristics:
- The headings (I-VII) are colored red.
- The table title (Periodic table of elements) is colored green,
bold-faced, is vertically aligned with the top of the table, and
starts 20 pixels from the top of the table (hint: you do not
need absolute positioning to get this 20 pixels of separation).
- The table elements should have a width of 100 pixels, a height
of 60 pixels, and the labels should be both horizontally and
vertically centered.
- The elements in the first column should be light green, the
elements in the second column should be cyan, and the elements
in the last column should be gold.
- In the first row, the right border of the left empty cell should
be removed and the left border of the right empty cell should
be removed.
The end result should look something as follows:
table.css
table {
border-collapse:collapse;
}
table, td, th { border: solid 1px black; }
th { color: red; }
#periodic-label {
padding-top: 20px;
vertical-align: top;
font-weight: bold;
color: green;
border-left-style: none;
border-right-style: none;
}
td {
width: 100px;
height: 60px;
text-align: center;
}
td:last-child {
background-color: gold;
}
td:first-child {
background-color: lightgreen;
}
td:nth-child(2) {
background-color: cyan;
}
td.empty {
border-right-style: none;
border-left-style: none;
background-color: white;
}
table3.html
I | II | III |
IV | V | VI | VII |
H |
|
Periodic Table of Elements |
|
He |
Li |
Be |
B |
Ne |
Na |
Mg |
Al |
Ar |
K |
Ca |
Sc |
Ti |
V |
Ga |
Kr |
(12 points, legend.html) Create an html file with an internal
style sheet that duplicates the appearance of the legend for a periodic
table of elements that is shown below:
You are free to re-create this legend using either an html table or
div blocks. In either event you will need to use style sheets to achieve
some of the desired visual effects. The visual characteristics of
this legend should include:
- There must be a border around the legend with the label "Legend"
inset in the border.
- The "Legend" label should have a padding of
5 pixels around it. It should appear near the left of the legend
block (30 pixels if using a style sheet)
and should be roughly centered in
the boundary.
- The columns of color chips should be left aligned.
- The color chips should be 60 pixels wide and 20 pixels high
- The 4 columns should be equal sized, but it is up to you to come
up with a way to make them equally sized.
- Don't worry about resizing the browser--just make the layout be
a 2x4 layout for a sufficiently wide browser.
- The labels do not have to be vertically centered with respect to
the color chips--it is okay if they are top aligned or bottom
aligned.
- There should be a few pixels of separation between the color chips
and the labels.
- The color chips should use the following colors:
- non-metals LightGreen
- transition DarkTurquoise
- rare-earth LightBlue
- halogens yellow
- alkali orange
- alkali-earth aqua
- other MediumPurple
- inert DarkRed
(12 points, periodic-cell.html): Write an html document with
an internal stylesheet that creates the periodic cell element shown
below:
The specifications for this problem are as follows:
- The label is horizontally and vertically centered in a block
that is 60 pixels in both width and height.
- The periodic number in the upper right hand corner is offset
5 pixels from the top and 5 pixels from the right of the box.
- There is a black border around the box.
- The font for both labels should be Helvetica with SansSerif as
a fall back.
- The font size for the periodic number should be x-small.
- Don't worry about the position of the box on the page
- You may not use a table to implement the solution. You
will probably be forced to use one or more div elements.
(12 points, paper.css) Create an external style sheet for
the page layout shown below:
The visual characteristics of the document are as follows:
- The default font for the entire document is Times New Roman
with backups of Times and serif. The default font-size should
be small.
- There are 5 blocks--a title block, an author block, an
abstract block, and two columns.
- The title block has the following characteristics
- It is fixed so that as the page scrolls, the title
block stays attached to the top of the browser window.
- The background color is yellow
- The font is bold-faced and the font size is large.
- The height of the block is 20 pixels and it uses
a padding of 20 pixels
- The title is centered in the middle of the document
- The author block has the following characteristics:
- It is 90 pixels from the top of the page
- It uses a medium font size and the font is italicized
- Its text is horizontally centered on the page
- The abstract block has the following characteristics
- It is 40 pixels from the bottom of the author block
- It is horizontally centered in the middle of the page
- It is 50% of the width of the browser window
- The text itself is center-aligned, italicized, and
colored blue. The text has the default font size.
- The two columns each occupy 45% of the width of the browser.
The left column should have a margin of 20 pixels with the
left side of the browser and the right column should have a
margin of 20 pixels with the right side of the browser.
The two columns should appear 30 pixels under the abstract.
Here is a sample html file to work with.
body {
font-family: "Times New Roman", Times, serif;
font-size: small;
}
#title {
top: 0px;
position: fixed;
padding: 20px;
text-align: center;
width: 100%;
height: 20px;
font-weight: bold;
font-size: large;
background-color: yellow;
}
#author {
margin-top: 90px;
text-align: center;
font-style: italic;
font-size: medium;
}
#abstract {
margin-top: 40px;
margin-left: auto;
margin-right: auto;
width: 50%;
max-width: 480px;
text-align: center;
font-style: italic;
color: blue;
}
#left-column {
margin-left: 20px;
float: left;
width: 45%;
}
#right-column {
margin-right: 20px;
float: right;
width: 45%;
}
(8 points, answer.txt) What is the similarity between the keywords local and
my in Perl. What is the difference between them?
Similarity: They both declare the scope of a variable to
be local to the current function
Difference: my indicates that static scoping is
to be used and local indicates that dynamic scoping
is to be used. Static scoping means that you use the block
structure of the program to find the value of a variable if the
variable is not declared locally. Dynamic scoping means you
search through the stack to find the value of a variable if the
variable is not declared locally.
(6 points, fox.pl) Use a foreach loop to iterate through the lines of stdin and print
those lines that contain the word "fox". For example, if stdin contains
the lines:
the quick brown fox jumped
over the fence
and then the fox eluded the fox
pursuing dogs.
your output would look like:
the quick brown fox jumped
and then the fox eluded the fox
foreach $line () {
if ($line =~ /fox/) {
print $line;
}
}
(12 points, count.pl)
Copy the file ~bvz/scripting/exams/midterm1/count.pl.
count.pl counts the frequency with which words occur in standard
input. In order to make it work,
add to count.pl a
Perl function named incrementCount that takes a
key and a reference to a hash as parameters.
If the key is in the hash, then incrementCount
increments the key's value field by 1. If the key is not in the hash,
then incrementCount inserts the key into the hash and assigns it a value
of 1.
sub incrementCount {
my ($key, $dictionary) = @_;
if ($$dictionary{$key}) {
$$dictionary{$key} += 1;
}
else {
$$dictionary{$key} = 1;
}
}