NewtFire logo: a mosaic rendering of a firebelly newt
newtFire {dh|ds}
Authored by: Rebecca J. Parker (rjp43 at pitt.edu) Edited and maintained by: Elisa E. Beshero-Bondar (ebb8 at pitt.edu) Creative Commons License Last modified: Friday, 30-Sep-2016 05:41:36 EDT. Powered by firebellies.

Analysis of the task

Now that you have created your initial web page (in Exercise 1) this exercise will focus on bettering your personal web presence. For this assignment you will rewrite your HTML and CSS adding more context and elements that style your site. Expand and develop your first HTML webpage(s) by making edits to the page layouts and structure. Test out different color schemes. If you didn't do so in the previous exercise, experiment with linking to other internal pages as well as outside websites. You can add more images and test out the various ways to format images with your CSS.

Taking it further with server side includes (SSIs)

We work with server side includes (SSIs) to help keep repeating portions of our pages uniform on a large website with multiple pages. For example, we are using it to generate our newtFire logo on the page you are reading and the entire top portion of the page you are reading, including the horizontal rule <hr> element that draws the line above the title of this page. If you view the page-source, you can see where we positioned a server-side include, just after the <body> element in our code. It looks like an HTML/XML comment tag, and it functions as a special kind of comment to the server hosting our newtFire site:

<!--#include virtual="top.html" -->

With the server-side include, we ask the server to include a small partial file named top.html at this point on the page. There are other forms a server-side include might take, but most often we use it for this purpose, and indeed the top.html file on the main newtFire site itself contains a server-side include that publishes the date on which the page was last modified.

With this exercise, we would like you to learn how to write and incorporate one (or more) server-side includes on an HTML page. First, please read our tutorial on Server Side Includes, and if you would like to see more examples of server side includes, see https://httpd.apache.org/docs/2.4/howto/ssi.html. Then apply one or more server-side includes to your existing personal webpage.

Note: it is necessary to modify the x-bit (following our instructions on the SSI tutorial) on all of the uploaded files that you want a SSI to be visible. To test whether an SSI is working you have to load your page from the web server. You will not be able to see an SSI by opening the file locally in a web browser.

Students considering the Digital Studies Certificate

With this homework assignment, we ask that you make a start on the requirements found on our Portfolio Standards page to make a professional homepage for yourself. You might try to prepare a résumé on your site in HTML or list and link to relevant sites that help to represent you. Your portfolio site might contain a picture of you or use images and links to external pages to help convey your interests.

Submitting your work

Save your redeveloped HTML page(s) and CSS over the existing files from Exercise 1 in your personal webpage Git repository and your personal web space accounts at newtFire.org on the Pittsburgh Supercomputing Center using your preferred file transfer program. It is important for you to get used to saving over your existing files as you make changes. So in this case your index.html file for this exercise will replace your Exercise 1 index.html file that way your newly developed main page of your site will not need an additional file name at the end of your website's address. Therefore, www.newtfire.org/~yourPittID should show your redeveloped home page.