Last modified:
Monday, 23-Sep-2019 11:33:56 UTC. Authored by: Rebecca J. Parker (rjp43 at pitt.edu | Twitter: @bcpkr396) Edited and maintained by: Elisa E. Beshero-Bondar
(ebb8 at pitt.edu). Powered by firebellies. Last modified:
Monday, 23-Sep-2019 11:33:56 UTC. Authored by: Rebecca J. Parker (rjp43 at pitt.edu | Twitter: @bcpkr396) Edited and maintained by: Elisa E. Beshero-Bondar
(ebb8 at pitt.edu). Powered by firebellies.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, and add more HTML pages to your website that share the same CSS stylesheet. 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.
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:
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.
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.
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 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.