Back to Index
0. Conception 1. Exporting Office files 2. Writing basic HTML 3. Increasing HTML Fluency

1. Initial method: Exporting directly from Word (p0 through p3)

My first attempt could hardly be called an attempt at all. Being somewhat overwhelmed for the first string of projects, I simply completed my writeups in Microsoft Word and LibreOffice, and exported directly to html to get a pre-formatted website. This was terrbiel for a number of reasons.

First off, the pages looked pretty cruddy. They looked exactly like word files, and there were no links or greater complexity to the layout of the page other than a linear "read from top to bottom" approach.

Secondly, it didn't really end up being any easier. I still had to edit the HTML files generated to insert the images I wanted to use, since those needed to be uploaded to the repo separately and then the links needed to be added to the HTML file. This is when I became aware of how ugly the formatting was for these automatically generated outputs from Office. Take a look at the source code for any of the project pages I like below and you will see what I mean. [Pro tip - to view source code, open the page in Google Chrome, and either right-click -> View Page Source, or simply type "view-source:" into the URL bar before the URL.]

The biggest reason this coding is so ugly is that Office treats every paragraph and formatted item like its own island, adding HTML "styling" to every paragraph and bracketed item - even if that format is consistent through the document. A tiny bit of CSS styling in the head (or a separate CSS doc) could literally remove dozens of lines of coding and make a much more organized and easy-to-read (and edit) source code.

An additional hardship of this approach was that the images came out in all different sizes. I could have modified the image tag to change the resolution of these photos, but because I was taking the brute-force approach to getting this website up and running, I didn't. This method was a band-aid approach to completeing the assignement documented with minimal effort on my part to do it right - and it was one of those Band-aids you see swilling around the drain in the gym shower. A for efficiency, F in pretty much everything else.


Go to 2: Writing Basic HTML

Links to early webpage examples

p0b: Prototype a Final Project
p1: Computer Controlled Cutting (Press-fit Desk)
p2: Electronics Production (FabISP)
p3: 3D Modeling and Printing (Diatom model)