Information Systems Selfie Site Auger Help Assignment 9 and 10
jaguar1223
b3c086f6-71db-4fc5-b5cd-a84c81ff1aeb.tmp
Selfie-Site Exercise 9 Page 1
SELFIE-SITE EXERCISE 9 INTRODUCTION
In this exercise, you will create (the first half of) a very simple contact page. The second half (the contact form) will
be completed in the next exercise. In this assignment, you will simply be getting some practice with tables and the
CSS rules used to configure them.
EXERCISE INSTRUCTIONS
1. PREPARE THE ASSIGNMENT
As always, you should begin by importing your prior assignment submission. So, in the Selfie-Site 9 workspace,
begin by importing your Selfie-Site 8 assignment.
2. CREATE A CONTACT ME PAGE
You will now add a new page to your site for contact information and a contact form. It will contain a table of basic
contact information as well as a form for submitting a comment or a contact request.
A. CREATE AND PREPARE THE FILE
contact.html As you have done in the past, copy your index.html file to make a copy of it. Rename the
copy to contact.html. As before, in contact.html delete all of the content inside of the main element
(i.e., between <main> and the closing </main> for that page). Change the content of the <title> element
in the <head> section of your file from [Your Name] - Home to [Your Name] – Contact Me. Likewise,
change the content of the <h2> in the <header> section to Contact Me.
index.html , experience.html , education.html , gallery.html & contact.html Go ahead and
add a fifth list item and link to the bottom of your navigation list. The link will have an href attribute of
contact.html and the content of the link should read Contact Me. Make the same change to all five of
your HTML files. As always, the nav section is identical across all of your HTML files, so a copy and paste is
appropriate here. Save and close all but contact.html. You will not need to make any further modifications
to any of the other files.
B. ADD THE CONTACT INFORMATION TABLE
contact.html Now focus on the content of your main section. For this assignment, you will add a section
containing your basic contact information. Start by adding an <h3> element with the text Contact
Information. Next, add a <table> element. The table should contain at least four rows, each row
representing one contact method. The table will have headings on the left, so each <tr> should have a <th>
element with the name of the contact method and a <td> element containing a hyperlink (<a>) to contact
you via that method. Note that it is likely that you will have some duplication from your footer here. This is
actually quite a common practice.
Selfie-Site Exercise 9 Page 2
For contact methods such as Facebook, Twitter, LinkedIn, etc., you should link directly to your profile. Use your
user name, full name or handle as appropriate for the link text. For other methods (email, phone, IM, etc.),
you will likely want use a link that directly invokes the appropriate application. For these, you will use a special
URI syntax when specifying the value of the href attribute for your links. Below I have provided the proper
syntax for a few contact methods. It isn’t an exhaustive list, so don’t hesitate to use your internet search
prowess to find others, especially if your preferred method of contact isn’t among these. Be sure to follow the
directions above when creating the table layout. Do not simply duplicate the table below.
Method URI Example
Email mailto:[email address] mailto:[email protected]
Telephone tel:[phone number] tel:7065551212
Skype Call skype:[username]?call skype:doemeister?call
Skype Chat skype:[username]?chat skype:doemeister?chat
Yahoo Messenger ymsgr:sendim?[username] ymsgr:sendim?doemeister
AIM aim:goim?screenname=[username] aim:goim?screenname=doemeister
NOTE: Don’t be alarmed if the above hyperlinks don’t work on your PC or mobile device. In order to
work properly, the appropriate application must be installed and the browser must be configured to
use them.
C. STYLE THE TABLE
By default, a table has no border and the styling is relatively bland. You will add a few style rules to your CSS to
remedy this.
selfie.css Open your CSS file and add a new descendent selector for table elements inside of the main
section (i.e., main table). Your goal here is to add borders that use the background color of your Highlight
color swatch (remember, you can always reference the color schemes at
http://spots.augusta.edu/pyork1/selfiesitecolors.html). Add a border declaration with the value 1px solid
#XXXXXX (again, use the background color of your Highlight swatch in place of the #XXXXX). Also add
declarations for border-spacing: 0 and border-collapse: collapse.
That takes care of the border around the table, but you also want borders around your table cells. So, add
another descendent selector that selects table cells in the main section (i.e., main td). Add a border
declaration with the same value that you used in the table element selector. Also, add a declaration to add
5px of padding to keep the table from feeling too cluttered.
You’ll also want to repeat this for the table headings, so copy and paste the whole table cell selector to create
a main th selector with identical declarations. But, you want to add a bit more zing to the table by altering
the color of the table headers. So add declarations to this selector for both color and background-color,
setting the values to those from your Highlight color scheme. Also, override the default center alignment for
table headers by adding a declaration to set text-align to left.
Selfie-Site Exercise 9 Page 3
3. TEST AND SUBMIT YOUR SITE
When you are done, save the all of the files and open the contact page using Auger’s preview. It should look very
similar to the screen shot below. You may need to resize the preview window to make it larger in order for it to
display as shown below.
Importantly, you should also test your links. It is quite likely some of the special links like the phone number,
Skype or IM links won’t work on your system. However, any of your links to web services (e.g., Facebook, LinkedIn,
Twitter, etc.) should work correctly.
When done, make sure to double check all pages and check for HTML and CSS validation errors. When fully
satisfied, submit your site.
