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">&nbsp;</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:

screen shot of q2
solution

Show your "style" .html file and your .css page to the lab demonstrator for marking.