COMP1000 2017s1 - Lab Class 4 - Web Pages
The goal of the labs over the
next three weeks is to build a personal website about
yourself. This task will be progressively implemented,
where each week you will add more functionality to the previous
week's work based on the content discussed in the
lectures. The tasks for this week are outlined below:
Question 1 - Tables - 7 Marks
This week, the goal is to produce a web page like the one here.
You have to provide a photo of yourself.
Call the file index.html and save it, frequently, on
your drive.
Setting up
There is a template HTML file, called template.html
.
You can use this as a guide when you create your HTML file:
- Open NotePad (Start > All Program > Accessories >
NotePad
- Now, do File > Save As..., locate your drive in the Save
As dialogue box that appears, set the "Save as type" to All
Files, then type
index.html
into the "File name"
box, and click Save.
- Copy the contents of the file
template.html
into your
- Add a title to your web page.
- From now on, when you want to save the file, you just need to:
File > Save.
- If you lab demonstrator suggests a different text editor than
NotePad, that's fine.
Getting Started
- Create a title for your page. If you have copied the contents
of the template file, you should locate the <title> tag
inside the <head> section. The title should be the
following format:
<title>[Your Name] | Welcome to my homepage!</title>
Note: Most HTML tags have an opening and a corresponding
closing tag.
- A css <style> section has been provided for you inside
the <head> section. For this week, a simple style
rule for paragraph (p), heading (h1) and body (body) are
adequate. An example style rule has been provided for the
heading selector, h1. You can use this as a guideline to
implement styling rules for headings, paragraph and any
additional ones that you may want to include.
- The expected layout of the web page that you are designing
this week is provided in the pdf file
Lab04Layout.pdf
.
-
Here is a list of required elements you should
include in your pages:
-
You can implement your web page using HTML
tables or DIV elements
-
You must include paragraphs and headings (at
least two level)
-
You must include your image as specified in the layout
-
You should include at least one numbered
list and one bulleted list somewhere on your page
-
If DIV elements are used to build the page,
you should include at least one HTML table somewhere
one your page, which makes use of table-border, cell-padding
attributes.
-
- Some guidelines for HTML tables:
- If you need to use HTML tables, a sample file
TableExample.html
has been provided. Use this as a guideline to build
tables on your page as necessary
- You can adjust the spacing around the text in the table
cells by putting a
cellpadding="n"
directive in your <table>
tag (after border=1
will do. Here n is the number of pixels of spacing
around the text. Experiment with values of n until it
looks right.
- The box around the photo caption can be done as a table
with one row, one column, and a
cellspacing="0"
directive in the <table>
tag. So <table
cellspacing=0 border=1 align="center">
<tr> <td> Picture of Insert your name here
</td> </tr> <table>
- Note that
cellpadding
and cellspacing
are different things.
- Save your NotePad file again. Now go to Firefox, and do Open
File from the File menu, then navigate to your HTML file using
the usual Open File dialogue box, selecting your HTML file, and
clicking Open. You should be able to see your <h1>
heading, in large bold type, now. (Note: Your title will appear
in the browser toolbar not on the actual web page).
- Whenever you change your HTML file, you can click the Firefox
(or whichever browser you are using) "Reload current page" icon
to view your changes.
(or Refresh etc) to see if your changes have worked as you
wanted them to.
- One way to get a photo of yourself to your CSE computing
account, is to login to zMail (on the computer that has the
photo on it), attach the photo and mail it to your zMail
address. When you get to the lab, login to zMail again and
download the photo, and save it on your Z drive in the same
folder as your html page. Alternatively, you can put the photo
on a memory stick, bring the memory stick to your lab class, and
copy it from your memory stick to your Z drive, as above. You'll need to send the email
or copy the photo to the memory stick at home before
you come to your lab class.
- Now insert the photo, into the "Picture goes here" cell, by
typing
<img src="mypic.jpg" alt="Picture of insert
your name here" width=250> <br>
You will need to change mypic.jpg
to the name of
your actual image. Save and reload, and fix if necessary.
- You need to replicate the spacing above and below the photo,
and the space below the photo caption. You can insert blank
lines into the HTML by having a line that reads
<br>
or <br>
or <br> <br>
Which works depends on the context - try them in turn until it
looks right when you look at it in a browser.
- To align or justify text, use
<p align="justify">
or <p align="right">
or <p
align="center">
. The default alignment is left. The
directive align="whatever"
also works in <td>
tags, among other places.
- You want to change the text in the first of the table to be
red and strong. You can use the tags
<span
style="color: rgb(255, 0, 0); "> and <strong> to do
this.
Show your web page to the lab demonstrator before continuing.
Question 2 - Getting Familiar with CSS - 3 Marks
In this exercise, you need to construct a .css file and a .html
file. The .css file will contain formatting rules for the .html
file, and the .html file will contain (different) <style>
specifications in its <head>
to meet the
special needs of this file. The .html body content will overrule
the .css rules and the <head>
rules at
some point.
Details
Call your .css file q2.css
. In your .css file, specify
the following:
- Paragraph text should be black on a pink background, 14 pt,
Arial font, or sans-serif if Arial is not available. Thus you
will be specifying 4 attributes for
p
: background-color:
,
color:
, font-family:
, and font-size:
.
So open a new file in NotePad, call it it q2.css
and then, into it, type
p
{background-color: pink;
color: black;
font-family: Arial, sans-serif;
font-size: 14pt;
}
- Tables should have cellspacing of 0, and Times or serif font,
black text, 12 pt. Thus you will be specifying 4 attributes for
table
: cell-spacing:
, color:
,
font-family:
, and font-size:
.
So now add 5 more lines to your .css file, similar to what you
did for p, above, but substituting cell-spacing: 0;
for the background-color: pink;
you did for p, and
changing the font and pointsize as specified above.
- Define a paragraph class called "yellow" which has a
background of yellow, but is otherwise the same as the paragraph
style that you defined above (black text, 14 pt, Arial or
sans-serif font). Hint: this style definition should start out:
p.yellow
{ ... }
and will then be much the same as your p
style
except that the background-color is different. You will use it
in the body of your HTML file by going <p
class="yellow">...</p>
- Save your .css file. You can't test it until you have created
an HTML file that uses it, and the next instructions explain how
to do that.
- Start a new HTML file called
q2.html
. In its <head>
,
you will have a style specification that defines a td
class that has purple text, but is otherwise the same as regular
table text, as defined in the .css file. The body is specified
several steps below.
- Get the template.html text again, and paste it into your new
window for
q2.html
.
- Insert
<link type="text/css" rel="stylesheet"
href="q2.css">
on the blank line at line 12. This
links in your CSS style definitions.
- Insert
<style type="text/css">
</style>
- Then, on the blank line that you just inserted, put in your
<head> style definitions. That is, type
td.purpletext
{color: purple;
font-family: Times, serif;
font-size: 12pt
}
- The body of your
q2.html
should start
out containing the following:
<p>
'Twas brillig<br>
And the slithy toves
</p>
<table border=0>
<tr><td>Did gyre and gimble</td><td width="40"> </td>
<td>"gyre" is a rare English word</td><tr>
<tr><td>in the wabe</td><td> </td>
<td>"wabe" is not an English word</td></tr>
</table>
<p class="yellow">
All mimsy were the borogoves<br>
And the mome rath outgrabe<br>
</p>
<p>
<table border=1>
<tr><td>
- from <i>Jabberwocky</i>, by Lewis Carroll
</td></tr>
</table>
</p>
(Copy-paste this text into your q2.html
file just
after the <body> tag.)
Now open q2.html in Firefox as you did with mypage.html and
inspect what you have done so far, and fix any obvious mistakes.
- Next, modify the body so that the table cell containing "in
the wabe" is done in td class "purpletext" (that is,
<td
class="purpletext">
using the style defined in the <head>
,
and so that the table cell containing "Did gyre and gimble" is
done with font color red, using an in-line style in the <td>
tag. So change this <td>
to <td
style="color: red; ">
- Save and reload, and fix if necessary.
In summary:
- the first two lines should be in black Arial font, 14 pt, with
a pink background.
- the next line (in a table) has its left part in red Times
font, 12 pt, white background, and its right part the same
except for black text
- the next line (also in a table) has its left part in black
Times font, 12 pt, white background, and its right part the same
except for purple text
- the next two lines are like the first two lines except that
the background is yellow
- the final line (in a table with a border) has black Times 12
pt, with a white background
That is, it should look like this:
Show your "style" .html file and your .css page to the lab
demonstrator for marking.
Copyright © Bill Wilson and UNSW, 2013.