• 

• 

I took the beginner’s course for both HTML and CSS, and I enjoyed working with them. I have had some experiences before in graphic design software, but I have never systematically learned how does the code in the background help generate the graphics. It was great for me to learn the background process behind the glamorous user interface.

After going through the basic tutorial and learning about how to generate different graphics, I decided to try to recreate Carleton’s 1997 frontpage. There are a couple of reasons that led me to choose the 1997 version of the website: there are relatively small amounts of pre-designed graphics, only 14 external links included in the website, and no tabs. (The 2001 version of the site, meanwhile, is a prime example of what I wanted to avoid.)

The 1997 (also the oldest) archive of Carleton’s webpage is very simple. There are a couple of links for the visitor to browse, a label of Carleton college, and some images masquerading as tabs. I started by download all images the website used and saved them to the same folder the HTML page is in. I then proceeded by copying the text the website and used them on my replicated webpage.

To place the title right next to the image, I used a table that has two columns. I also tried to modify the webpage minorly, as I put a background under the title of the webpage. I also change the main color theme to the maize and navy. I used the color codes that are officially listed on the Carleton website. (They are F3B61D and 0B5091)

I became a little confused trying to create the tabs on the bottom of the webpage. I attempted to generate them with the code listed on HTML dog but decided to stop after an intense hour of copy and pasting. When I used the images that I downloaded and put them on the webpage, unexpected white gaps appeared between the tabs. I looked into the original code of the archived website and attempted to use it. They used border = “0” for the images; I applied the same code on my website. However, it did not work.

During my inspection of the original HTML code, I found that that the website used a couple of things that I did not anticipate. The webpage used a blockquote tag at one place. This intrigued me, and I looked into how CSS can potentially help customize blockquote items. The website also later used a rather verbose “ <td width=”70%”” to help position the timestamp of the website. I preferred a more symmetrical look and simpled kept the table under the center tag.

Overall, it was a fun experience learning to build web pages. I enjoyed the process of looking at a very basic webpage and learning to reverse-build it. It was not easy, but it was an exciting process.

P.S. Here is a link to the html code and images.