Top header photo
 Trainiax logo
HomeNew Contact Links
Drawings Photos Recordings Train Info.
crossbuck
HTML5 Powered with CSS3 / Styling, and Semantics
Valid CSS!

Website Building - The Making of this Site

Creating and Editing Site Pages

Before anything can be uploaded, the webpages need to be created.  Some web servers have site-building tools built in, but I won't delve into that here. There are two main ways of creating or editing a webpage before it's online: editing the code directly, or editing the page using a "WYSIWYG" program ("what you see is what you get") or software framework.

Direct Code Editing

I currently edit pages exclusively through the HTML, PHP and CSS code directly, and it's a good way to learn the basics behind a webpage. This method of building a website requires knowledge of the underlying code. The chief advantage of using this method over a WYSIWYG editor is that the resulting code is simpler and more elegant, allowing for easier editing and faster load times. It also allows for combining several languages together to create dynamic pages. However, creating the code for even basic operations such as text formatting or inserting an image can be time-consuming, and errors in the code can produce odd results. The flexibility of manual coding is often offset by time wasted in tracking down minor code errors or attempting to complete simple functions.

A simple text editor, such as Notepad, is sufficient to edit the page code, but there are other programs (such as Notepad++) that offer syntax highlighting, which is immensely useful. Only the code is visible, without images or fonts, and a browser is necessary to view the page as it would appear online.

WYSIWYG HTML Editing

There are several programs available for WYSIWYG website creating. Until 2009 I used Netscape Composer, which came bundled with Netscape 4.7 and has long been entirely obsolete. Other newer programs are available, and some word processing programs will work as well. The main advantage of this method is that the pages can be edited in a similar fashion to creating a word-processed document, so no knowledge of HTML code is necessary.  The disadvantage, however, is that unnecessary "junk" HTML code will often make its way into the page, increasing load times and making it a hassle to edit the code later. MS Word is known to create enormous amounts of redundant code that may make a simple page ten times larger than necessary. Older programs may also insert HTML tags that are now deprecated.

My preferred method of editing the pages up to 2011 was a combination of manual and WYSIWYG editing. Many newer WYSIWYG editors allow instant switching between editing the page visually and editing the code, such as KompoZer (my replacement for Netscape Composer until switching entirely to manual code-editing). I edited the HTML and CSS code directly for tables and page layout, but typed paragraphs and edited headings using the WYSIWYG view.

Software Frameworks

A software framework is a concept whereby software functions can be achieved using code templates, compilers and libraries, with the goal of allowing a greater focus on the "big picture" by reducing the time spent on low-level, technical programming details. Frameworks promote a building-block approach with reusable code, and can provide an interface to interact with the code indirectly (such as with WYSIWYG HTML editors). However, the use of frameworks often leads to "bloat" in the code due to the "one size fits all" approach to assembling the code. I don't use any external libraries or templates for this site—the closest I've come is to reuse many parts of my own code for similar functions on different pages.

Programming Languages - Static Pages

The most basic language used for websites is HTML, and it is sufficient for creating an interesting static web page. However, other languages can be used to create interactive and dynamic web pages, or even to reduce code clutter. The World Wide Web Consortium (W3C) has excellent tutorials that define web-based languages in detail.

HTML

For the first ten years of this site's existence, the sole language used for its creation was HTML (HyperText Markup Language). The language consists of tags intended to define the structure of pages, and browser interpretations of these tags tend to be very forgiving of errors. However, with the advent of the browser wars of the 1990s, many tags related to presentation and styles (some of them proprietary) made their way into the language. In an effort to separate style from presentation, these tags have since been made deprecated or obsolete, replaced by CSS. This has returned HTML back to its original function of defining only the page structure. Starting in 2009, this site was designed to meet HTML 4.01 Strict guidelines. In early 2013, I started making the few minor changes necessary to upgrade the site to HTML5, which at the time was not an official HTML specification but which was eventually finalized in late 2014.

CSS

CSS (Cascading Style Sheets) is a language designed to define the presentation of a web page. The power of CSS lies in its ability to remove the presentation information from the pages themselves, storing it instead in a single external stylesheet. As a result, one stylesheet can control the appearance of an entire website, making for a consistent appearance across all pages and incredibly easy presentation updates. Depending on the characteristics defined in the style sheet, two pages with exactly the same HTML code can have a vastly different appearance. This site has used a CSS style sheet since 2010, meaning that the pages themselves now contain little more than basic HTML code.

Programming Languages - Dynamic Pages

There are two ways of creating dynamic and interactive websites: through the browser (client) and through the server. Client-side languages require support from the browser, but allow for instant changes without reloading, while server-side languages can reliably create dynamic pages independently of the client.

PHP

PHP (PHP: Hypertext Preprocessor) was originally conceived for web development as a server-side language, but it has since been adopted as a general-purpose programming language. It follows C-style syntax and is broadly similar to other high level C-style languages, such as C++ and Java. On a web server, PHP can create HTML code, access a database and add text from external files, allowing frequently used sections of code to be created with loops, functions or from external files—instead of repeating it on every page. Because it is processed at the server, it is not possible to read the underlying PHP code when viewing a page in a browser. When used in combination with SQL code designed to access a database, PHP can be used to present the results of a search.

This site makes extensive use of PHP for tasks such as accessing database tables of drawings and photos, printing automatic page update and statistical information, and even creating a rotating series of header images. Because common code sections are in separate external files (headers and menus for instance), the pages themselves contain little more than their own specific content, and maintenance requirements are vastly reduced. While PHP is very widespread, there are other server-side languages that can be used for many of the same tasks.

Javascript

Javascript (not to be confused with the Java programming language) is used to create dynamic web content through a client's browser. As such, it depends on the browser having Javascript enabled. Javascript is useful for things like instant updates to images and forms, input validation, and page updates that don't require a server request. There are a few parts of this site (past and present) that use Javascript, notably the photo search page and table toggle system in some of the locomotive phase/roster pages.

SQL

SQL is a language specifically designed for interacting with a database, and is structured to perform queries that access, insert or modify entries in a database. All the drawings and photos of this site (except for some old 1:55 drawings) are displayed using a database containing basic information about the locomotives or rolling stock (builder, model, dates etc.) and links to the associated images. While some general-purpose programming can be achieved with SQL, it is not well suited to tasks other than working with a database.

Pitfall Prevention

Here are a few things I've come across over the years of editing the site.

Links

When creating an HTML link, the full address of the link is necessary (complete with the "http://") unless the linked file is either in the same directory as the page, or in a subdirectory. Some servers are case-senstitive and won't recognize links if only one letter is incorrect. It's a good idea to develop a pattern for filenames, including consistency in the filename extensions.

Images

Bitmap images are not suited to being displayed on a website, as I learned in the very early days of website building. All the images on this site are either GIF, PNG (both for drawings) or JPG (for photos).

Load times can be excessive when many large images are displayed on a single page, regardless of how the image is scaled on the page. Therefore, for displaying thumbnails, separate scaled image files should always be used. The full-size photos on this site are 1,000 to 3,000 KB, compared to 3 to 5 KB for the thumbnail versions. While some photo sites have automatic thumbnail generation, I've uploaded all my thumbnails as separate files. The amount of time and space they require is trivial, and having them as separate files cuts down on the processing power needed at the server.

Hosting the Website

There are many existing servers available to host web sites. I've had a paid account with Bravenet since 2005 and have found it to be well-established, reliable and powerful. Host packages can either be free or require payment (usually $4 to $10 a month). While there are many good free web hosts out there, there are often serious restrictions, such as banner ads or limitations on file size and bandwidth.

The alternative to signing up for an existing hosting package is to buy or build a personal server. In this case, the major cost is in the initial expense rather than in the monthly or yearly payments with an online hosting package. A purpose-built server can provide greater flexibility than an online hosting package, but (depending on the system) it may not offer the advantage of having files stored off-site.

 Copyright © Michael Eby - Page code last updated 2017-05-16