T
The first web designs I ever made were done with the use of a highly sophisticated web design package called Notepad. It was for the simple fact that getting my head around table structures was easier in code view that my HTML skills grew so rapidly.
Once I had grasped the concepts of HTML, I found a small bit of information on another designers site that put extreme importance on the design and development of proper HTML code and implementation. I decided to make it a signature of my design that each of the pages I did were made in a text only editor, and hand coded.
Although they eventually made way for the incomparable DreamWeaver, the use of text editors allowed me to become fluent in markup language. As I began experimenting with other elements like JavaScript, flash, and CSS I drew upon my belief in the ultimate importance of the code and began my involvement with each in a similar way; code first.
T
This page is dedicated to the HTML coding I have performed through the years and to discussing the importance of proper element handling and why it is vital for a designer to use these. I have also included a design that makes improper use of tags in order to pull off a visual design. I wouldn't do this today if it could be helped (and with CSS it can), but I thought it would be a good addition to the list if just to show my understanding of the uses of HTML.
Bath Spa portfolio site
I
I thought I would start with the HTML for the site you're looking at now as it is easily the most work I have put into an HTML document, at least in regards to compliance and correct syntax etc...
Though it is easy enough to view with the source menu, this link provides you with a fully structured and colour coded script view of the HTML for this page. I have tried to make this HTML/XHTML 100% compliant with all W3C recommendations. This includes setting the DOCTYPE and XML languages to conform with the most widely used browser types. I have also used several accessibility features such as the use of linked rather than embedded CSS, alternate IMG tags, proper use of tags in general, and where image navigation is present I have used invisible text elements to allow page readers to see links and nav functions while maintaining full CSS control over image elements.
real IT
T
This is my current portfolio and design contracting site. I developed this almost exclusively in DreamWeaver and Fireworks rather than through my normal process of rough sketching on paper, manual coding a layout, and only using the WYSIWYG editor to adjust the final layout. It was interesting to develop this using DreamWeaver as a layout tool, but I ended up with a fairly sprawling and not entirely cohesive design.
As for the HTML code, this site demonstrates my typical use (or misuse) of nested tables and IMG tags to create a visual site with clean rollover images and design layout. It is fairly resilient too, displaying much the same content in each browser I tested it in. Unfortunately it is heavier than I would like and doesn't have that pop you expect from a well optimised site.
This link explores the site itself and I'll leave the HTML source view up to you.
Garden Art
T
The Garden Art website is an example of some more image and table manipulation. However, in this site I also employ the use of an iFrame to allow for content to be scrollable without disrupting the layout and size of the centred table.
My client requested some very specific details be included and as a result the site wasn't built with ease of future design change in mind. Nor was cross browser compatibility a top priority, though I believe the site works just fine in the two major browsers. The most compatible element is the design ratio, being set for 800X600 (as is my usual design method) it allows for viewing by the majority of web user resolutions rather than for the minority that can view a larger more defined resolution.
The HTML is hand coded for the most part, but because of the precise positioning of the images, I used fireworks and Photoshop to cut and place images with auto generated table snippets. Again, this link goes direct to the site, enjoy.
Country Life Designs
H
Here is a perfect example of one of my earlier hand coded websites. There was no use of either DreamWeaver or Photoshop in the creation of this site. Everything was done in a text editor called Arachnid. Images were scanned, cropped and processed with Kodak image viewer.
There wasn't much to be done on this site other than to create showcase page for new product ranges. I reverse-engineered some JavaScript and managed to put together a site that not only provided a lot of product specific information in a single screen, but would resize to fit any resolution from 640X480 up.
It's not the best example of my design work, artistically speaking, but for the time and stage in my development it's focus is on the code being something that facilitates design is a milestone.