HTML and CSS Exercise 2

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, 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.

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:

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.

DIGIT Major Web Portfolio

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. The portfolio requires that you prepare a résumé on your site in HTML, and list and link to relevant sites that help to represent you, so for this assignment, begin preparing and posting these materials. Your portfolio site might contain a picture of you or use images and links to external pages to help convey your interests. Plan to continue updating and building on this site so that you can share it with your DIGIT professors before you graduate, and with your professional network of contacts.

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 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, https://newtfire.org/~yourID should show your redeveloped home page.
Your index.html page should also link to new pages in your growing website, saved in your public_html directory space.
Save your SSI file in your public_html space and represent it in your pages. Check its x-bit on the server to make sure the SSI is executable by visitors.