Blog setup (Peter Durward Harris)

My story

2008-03-14T02:23:00.000-07:00

My story

Why I set up a series of blogs

This page explains how I came to set up a website as a series of blogs. If you're only interested in the actual construction, skip to Blog setup notes.

I learned the basics of HTML and CSS at Leicester College, after which I set about creating a website. To start with, I decided not to use a style sheet because, with my limited knowledge of CSS, the benefits were marginal at that stage and I didn't have anywhere to save my HTML permanently in HTML format. I actually saved all my HTML in e-mail folders (it was either there or on floppies) because the public area on the Leicester public library computers are only available for temporary use. In any case, I didn't use the same computer each day. Thus, I created HTML files during a session purely for testing purposes.

Originally, I planned to set up a small website as a starter, then build on that as I learned more about HTML and CSS. When I learned that HTML tables are controversial in some quarters, I decided to spend a lot of time studying HTML and CSS offline, while using my limited online time to build a much more substantial website. In the event, I decided to make extensive use of HTML tables, which was always my original intention anyway, although I made extensive use of CSS much earlier than I'd originally intended. I actually tried some alternative HTML methods that avoided the use of tables but none of them worked properly for my intended purpose. Some but not all of the reasons will become clear in the ensuing paragraphs. I am aware that CSS version 3 (not yet generally supported by browser software) has some table capabilities but until it becomes the standard, there's no point in worrying about it.

Because of my personal circumstances resulting from my Bankruptcy, my biggest problem was getting space on the net. However, I was able to practise by creating pages offline and testing them that way. I had big ideas but I was quite content to learn and practise without actually having anything to show the world. By the time I was ready to look for somewhere, a lot had changed at the place recommended by my tutor and my website wouldn't load there. In retrospect, I think that it might have been because my web pages may not have passed the official HTML validation tests (which I've learned a lot about since) at the time, but I haven't tried there again. Instead, I loaded it into the Geocities space that I'd acquired with my Yahoo e-mail address. This only lasted a month or so, at which point Geocities decided that I'd infringed their rules, claiming that I was trying to run a commercial website. Maybe it was Amazon's widgets that they objected to. I therefore resumed my original policy of offline testing.

Some aspects of the Geocities service displeased me anyway, but it had one particularly useful feature that allowed me to set up forms and to have the results sent to one of my e-mail addresses without letting the sender know what the address is. Good security, eh? Eventually, I used the Geocities space to conduct surveys about music and Amazon and to allow people to contact me by e-mail if they wish, avoiding the spammers. Yahoo's decision to shut down Geocities in October 2009 deprived me of these options, although I've saved copies of all the code. I may want it some day.

I later found the web space I wanted in Blogger. The restrictions imposed by Blogger are different. I can include anything I'm likely to want to include, even Amazon's widgets, but I can't use the whole of the screen. I'm restricted to less than half the screen's width because of the space used by Blogger for its own indexing, etc. Another necessary annoyance is that I have to use the URLs generated by Blogger, but I can work within these technical limitations. I converted my web pages held in my e-mail space to Blogger format in such a way as to make the reverse process as easy as possible, should I ever decide to set up a website in my own space, assuming that I ever have that option. Because I also updated things while converting to Blogger, keeping the old web pages was not a sensible option. I have kept a sample shell that I can wrap around all the blog pages should I convert back to web pages, but such a conversion would still be a major task because I'd have a lot of URLs to change.

It's just as well that I didn't become heavily dependant on Geocities. Life will be much more difficult if Google decide to shut down Blogger, but as my blogs are designed to be transportable, it will be the quantity of effort rather than the difficulty that will concern me.

Blog setup notes

2008-03-12T13:36:00.001-07:00

Blog setup notes

Introduction

Please note that these notes are irrelevant to those who are only interested in standard diary-type blogs, which are really quite simple to set up.

I don't know of anybody else who has ever tried setting up a website within the Blogger framework. Remember that Blogger was intended for diary-type entries and was never intended to be used the way that I do. It's certainly tested my ingenuity. The result is not perfect but has its advantages and it certainly shows employers what I can do using only HTML and CSS. If I learn other aspects of web design, I'll incorporate them, too. In the event, I quickly realised that one giant blog would be impractical on a number of levels, hence I set up a series of blogs, each with a different theme. Many of these blogs have only a small number of pages, sometimes only one.

Coding philosophy

As a former computer programmer, I learned that technical wizardry is only useful if it works and if it is easy for somebody else with a reasonable knowledge of the coding language to understand. That also means that I'll understand it easily if I return to it years later and need to change it. As such, I am not impressed by those who use technical tricks or fancy code just for the sake of it. I try to keep things as simple as possible, especially as things always get complicated anyway. Building in unnecessary complications merely causes confusion. I won't use any aspect of HTML and CSS purely for the sake of it although I won't miss suitable opportunities to use as many aspects as possible. Thus, I haven't used frames (though I use iframes supplied by Amazon) because frames are generally more trouble than they are worth. However, if a situation arises where fancy code is necessary, I'll use it, but I'll support it with comments to explain what it does.

HTML tables - advantages and disadvantages

When web pages are displayed, the display normally appears gradually as it is downloaded, but tables work differently. When a table is being downloaded, nothing is displayed until the entire table has been downloaded. This explains why there are often long pauses followed by mass displays during page downloads. It also explains why some people disapprove of their use. However, HTML tables are often used for things that they were never intended for (but see next paragraph), while the alternatives do not always provide adequate replacements, especially when it comes to the kind of stuff that tables were actually designed for.

It is necessary to bear in mind that the vast majority of websites are designed using packages to generate HTML, such as Dreamweaver and FrontPage. These packages are very convenient but offer less flexibility, although some of them offer the chance to change the HTML after it has been generated. In practice, I suspect that very few users of such packages do this, except perhaps to make minor cosmetic changes. The main point to remember about these packages is that they often generate tables and most of the people using them, even if they are aware of this fact (and most aren't) don't understand the implications. Even if they learn, they often find that the packages offer no alternative way to lay out a page while still presenting an attractive appearance. I can't imagine anybody laying out a table using (say) Dreamweaver then re-writing it using HTML. Why bother with Dreamweaver or any other package if you're going to do that? However, by the very nature of these packages, they often use HTML for things that they were never intended for.

Because of the way that tables are displayed, they are particularly unsuited to displaying large pictures, which take a long time to download especially on old dial-up connections. As far as possible, pictures should be kept out of tables although I realise that this is sometimes easier said than done. If you have a lot of pictures to display and you don't know how to display them without using tables, you should at least try to limit how much you put in each table. It is better to have a lot of small tables than one giant table if pictures are included. In the worst cases, I've seen web pages where the entire page is set up as a table, so I sit in front of a totally blank screen wondering if something is ever going to appear. Sometimes, I abandon the attempt and that is surely not what the designer intended. Yes, tables can be a powerful tool if used correctly, but don't use them unnecessarily.

The big advantage that tables offer is that the software behind them is very reliable and copes well with a variety of window sizes. Tables are therefore ideal for displaying text and numbers, which don't take long to download even on old dial-up lines. With tables, re-sizing screens is easy - if an individual element (cell) within a table has to be split over an extra line, all the cells within that row are allocated an extra line. With the alternative methods recommended to me, this does not happen. Of course, there are situations where you may want a mix of pictures and text. I'd need to carry out research into this before coming to any firm conclusions, but I can see that the quantity and size of the pictures would be a major factor.

My conclusion is that tables are great for displaying text and numbers but bad for displaying large pictures. None of my tables contain any pictures so I feel entirely justified in using them in my blogs. In a different situation, I'll look at other methods. Of course, if I ever get a paid job in which I have to create or maintain a website, I'll do the job according to orders. If an employer insists that things are done a certain way, so be it. If I haven't already mastered the techniques at that point, I hope that I'll get the necessary guidance, but I'm a quick learner. I've made clear my preferences as they are now. Future experiences - and software developments - may cause me to revise my preferences.

Fonts on screen

This is another contentious area. Some fonts that look attractive are not easy to read if there's a lot of text. Fancy fonts are great for special occasions like wedding invitations but don't work so well when there's several paragraphs. I prefer standard fonts and use a sans-serif font (Tahoma, Arial or Verdana) for displaying on screen.

Colors on screen

I'm not keen on white as a background color for screen displays. In some light conditions, it can cause too much dazzle. It works OK on Amazon because most of the pages don't have too much background. My pages (as I set them up on a website) have plenty of background so I tested various pastel shades before settling initially on pale yellow for screen displays. It has the advantage that it works well with the standard colors used for hyperlinks. However, I later decided that I wanted to use yellow rather than pale red for table detail lines, so I switched the background color to pale blue. In 2011, I decided to change the yellow table entries to pale green, as that goes well with the template I chose. However, I retained yellow for block quotes. Later that year, I set up some ancestry pages, one of which uses pale yellow stripes in a limited way, but pale green remains the standard.

I also don't like pale or bright text on a dark background as a main color scheme. On this blog, I've used bold white on a black background for captions. This provides (I think) a nice contrast, but I certainly wouldn't use white on black for large blocks of text even without the embolding. If I come across web pages that have a lot of pale or bright text on a dark background, I may paste the text into a word processing document and change the color scheme so that I can read it without eye-strain. Then again, I may decide that it's not important enough to be worth the effort, so I just won't bother.

One important thing to remember is that you are likely to look at your pages more frequently than anybody else does. It is therefore important that you set up a color scheme that you are comfortable with.

If you wish to explore colors further, it's worth looking at Bagism color maker. Alternatively, just google for HTML colors. If you are interested in shades of a specific color, you could instead replace the word colors by the specific color, such as HTML brown.

Printing

When I set up my original website, I set up a separate CSS file for printing. I cannot do this in Blogger. I can achieve the same effect by other means although it requires more effort, but see section on testing. Apart from suppressing my own navigation, I haven't bothered doing anything special for printing yet. Serif fonts such as Times New Roman are ideal for printing although they don't work so well on screen. Also, black typeface on a white background works perfectly on the printed page. I have set up some CSS to limit colors to screen only, and to print using a serif font, but not yet installed it on a live blog. I still have to work out how to limit printing to my own stuff without the extra Blogger stuff.

Tip - when you want to print text from a blog, it's a good idea to copy and paste that text into a word processing document and print from there. This means that you don't waste paper printing all the Blogger stuff or any images.

Testing

Because of the period I spent with a computer but no home internet connection, I developed a method of testing offline. I have a version of the standard style sheet at home that simply has a <STYLE> line at the start and a <STYLE> line at the end, but is otherwise identical to the one submitted to Blogger. This allows me to update pages offline, whether or not I have an internet connection.

It would be easy to create a version of this style sheet for printing Blogger pages how I want, but I haven't done this. Another way to achieve the same effect would be to create a private blog with a print style sheet, and copy any page I want into it, although that would still mean printing all the other stuff that Blogger generates besides my stuff. Actually, I very rarely print anything but I know that other people do, so I put these ideas out there anyway.

Style sheets used in this website

Those who are interested (and who have some knowledge of HTML and CSS) can more easily understand how I set up this blog originally on the page devoted to Blog template and settings.

Blog template and settings

2008-03-12T13:35:00.001-07:00

Blog template and settings

Introduction

This page is for those who understand a bit about HTML and CSS. For those who want a broader understanding of my blog setup, see Blog setup notes.

Note that this page describes how I set the CSS up for use with the Blogger template that I've used since April 2011. At that time, I had to change some CSS to work with the different template, since when any changes have been purely due to adding extra options or changing existing ones.

Except for rounded corners, all of the functions work on Internet Explorer, Google Chrome and Firefox, which are the only browsers that I've tested them on. Rounded corners work on Google Chrome and Firefox, but not yet on Internet Explorer, which shows normal squared corners instead. The CSS border-radius style is not officially standard yet, but I decided it was worth coding it in because rounded corners look better on pages displayed by those browsers that cater for them while no harm is done otherwise, and the effort is minimal. There are ways of getting rounded corners into other browsers using images, but I'm not that desperate to find out how to do it.

Viewing my source

Just as with any web page, you can view the source. It isn't necessary to understand all the Blogger code to understand mine. Blogger's own help system gave me enough information to begin with. I've hopefully made things as easy as possible for you to understand what I've done by making it clear which code is mine. You'll find a block of code that shows my CSS style definitions sandwiched between the comment lines Start of user defined styles and End of user defined styles. I inserted those sub-headings for clarity; they aren't generated by Blogger. I also inserted <! start pdh body> and <! end pdh body> at the start and end respectively of my HTML style definitions just to make absolutely clear to you where the boundaries of my code lie. These comments don't mean anything to the various browsers that display the page, but you should find that the start is always followed by <div class="pdhdisplay"> and a corresponding </div> precedes the end line, these being the instructions that browsers understand when they look at my HTML style definitions.

Settings

Unlike the template, the settings are not visible in the source. However, if you're going to create a blog using HTML, it is best to go to the Formatting page within Settings and change Convert line breaks from Yes to No. The default Yes value is ideal for standard blogs in which everything is displayed in the format in which it was originally typed in. I've changed a few other settings too but you don't need to worry about what else I've done, although you'll notice that in most of my blogs, I only display one blog entry per page; the standard is seven. Just go through all the settings on your own blog in turn to decide exactly what you want. For example, you may wish to allow other people to post comments on your blog pages (as I do); in that case, you'll have to change the relevant settings.

Templates - User defined styles

In setting up my blogs, I wanted to make it as easy as possible to transfer the code to a free-standing website should I ever decide to do so. I'd have to insert the header and trailer stuff at the beginning and end of each HTML page, as well as changing all the internal HTML links to point to my website instead of this blog. All of these things are unavoidable but any other changes would be optional, although some might be desirable to take account of the different page width.

Note that all styles are within div.pdhdisplay (as you'll see if you view source) so I've omitted references to div.pdhdisplay here (except for the div.pdhdisplay style itself) to avoid clutter.

Variation between blogs

Most of my HTML blogs use a blue background as standard with (maybe) the occasional white background, but some use a white background as standard; these blogs do not have a .whitepage style. Other than that, the CSS for all of my HTML blogs should be identical, although I do have a couple of blogs that don't use HTML at all. Of course, some of the CSS styles are specific to particular blogs, but I keep things simple if I limit myself to as little variation as possible.

Divisions
Division	Description
pdhdisplay	My part of the blog page
text	Text area, so excludes tables
navigation	Navigation (and some other stuff) to be ignored when printing.

Styles
selectors	styles	comments
div.pdhdisplay	background-color: #ddffff or background-color: #ffffff	Pale blue background or White background.
.whitepage	background-color: #ffffff	White background.
*	font-family: "Tahoma", "Arial", "Verdana", sans-serif;	Use sans-serif fonts in my part of the page.
h1 h2 h3 h4	text-transform : capitalize text-align: center	Capitalize and centralize headings. h4 not used so far.
h1.notransform h2.notransform h3.notransform h4.notransform	text-transform : none	Capitalize suppressed for headings with website names.
h1	color: #ff0000 font-size : 18px	Red banner heading. Reduce heading size
h2	color: #0000ff font-size : 18px	Blue sub-heading. Reduce heading size
h3	color: #000000 font-size : 16px	Black detail heading. Reduce heading size
h4	color: #000000 font-size : 14px	Black detail heading. Reduce heading size
a:link	color: #6131BD text-decoration: none padding-left: 2px padding-right: 2px	Unvisited links are purple.
a:visited	color: #888888 text-decoration: none padding-left: 2px padding-right: 2px	Visited links are grey.
a:hover	color: #009900 text-decoration: none padding-left: 2px padding-right: 2px	Hover links are green.
a:active	color: #ff0000 text-decoration: none padding-left: 2px padding-right: 2px	Active links are red.
div.text a:link div.text a:visited div.text a:hover div.text a:active .background-dodgy2 a:link .background-dodgy2 a:visited .background-dodgy2 a:hover .background-dodgy2 a:active .background-notme2 a:link .background-notme2 a:visited .background-notme2 a:hover .background-notme2 a:active	background-color: #ffffff padding-top: 0 padding-bottom: 0 margin: 0	Links in text and some table cells given white background rather than underlines.
.background-white	background-color: #ffffff	White background for stripey tables.
.background-pale	background-color: #ddffdd	Pale green background for stripey tables.
.background-yellow	background-color: #ffff99	Pale yellow background for quotes.
.background-classic1	background-color: #ffffff	White background for classic descent in ancestry tables.
.background-classic2	background-color: #ffff99	Pale yellow background for classic descent in ancestry tables.
.background-dodgy1	background-color: #ffffff	White background for descent in ancestry tables that maybe leads to me.
.background-dodgy2	background-color: #cfc996	Wood background for descent in ancestry tables that maybe leads to me.
.background-notme1	background-color: #ddffdd	Pale red background for descent in ancestry tables not leading to me.
.background-notme2	background-color: #ffff99	Pale yellow background for descent in ancestry tables not leading to me.
.highlight	color: #ff0000 font-weight: bold	Text highlighted in bold red.
table	margin-left : auto margin-right : auto margin-bottom: 5px border: 0 border-collapse: collapse	Don't want table borders but do want margin at bottom of table.
caption	color: #ffffff background-color: #000000 font-weight: bold padding: 5px border-radius : 20px 20px 0px 0px;; -moz-border-radius : 20px 20px 0px 0px;; -webkit-border-radius : 20px 20px 0px 0px;; -ms-border-radius : 20px 20px 0px 0px;;	Table captions are bold white on black background. Border-radius set to produce rounded corners at top left and right; it works on some browsers but not all.
caption.quote	color: #ffff99 background-color: #ffff99 font-weight: normal	Pale yellow captions for quotes.
th	background-color : #f9c396 text-align: center padding: 5px	Light wood table headings.
td	padding: 5px	Table details just need padding.
tbody.stats td	text-align : right;	Numeric data in stats tables
tbody.stars th tbody.stats th	font-weight : normal; background-color : transparent; text-align : left;	Stars and stats detail headings need normal font and same background as corresponding detail values.
b.green	color : #00ff00	Green for Amazon Vine™ banner, also for Purchased in U.S.
b.orange	color: #cc3232	Orange for Amazon Verified Purchase and other messages.
b.blue	color: #00ffff	Blue for Amazon badges and forum messages, and for ancestry numbers.
p	margin: 10px	Margins for all paragraphs.
p.middle	text-align : center	Centralize text within paragraph.
p.right	text-align : right	Move text to right within paragraphs where pictures are floated to the right.
*.ignore	display : none	Ignore something that I've suppressed temporarily.
div.navigation media="print"	display: none	Don't print navigation. Some day I may look at Blogger code and suppress printing that stuff too if I can.
table.fixed	width: 100%	Table fixed at maximum width.
table.top	margin-top: 5px	Top margin required for table.
.half	font-size : 250%; font-weight : bold;	For back and next page links in Amazon statistics.
table.smallfont td	font-size: 90%	Reduce font size to shrink a table that would otherwise be too wide.
hr	display: block color: #ff0000 background-color: #ff0000 width: 100% height: 2px text-align: center border: 0	Red horizontal line.
hr.blue	color: #0000ff background-color: #0000ff	Blue horizontal line.
hr.yellow	color: #ffff00 background-color: #ffff00	Yellow horizontal line.
.numeric	text-align: right	Used to define numbers.
.alpha	text-align: left	Used to define text.
float-right	float: right	Not used; all floating is done by embedded STYLE code.
float-left	float: left	Not used; all floating is done by embedded STYLE code.
blockquote	font-style : normal background-color : #ffff99 margin : 10px padding: 10px line-height : 1.2 border-radius : 20px; -moz-border-radius : 20px; -webkit-border-radius : 20px; -ms-border-radius : 20px;	Used for block quotations. Border-radius set to produce rounded corners at all four corners; it works on some browsers but not all.
blockquote	background-color : #ffffff	White background for block quotations. Used for green messages.

Clean code - or not

I'm a great believer in clean code and would like my code to be compatible with W3C's official HTML validation. Unfortunately, it seems that Blogger does not share my enthusiasm for such niceties as they both generate dirty code. Indeed, Blogger even sometimes inserts </p> tags where there shouldn't be any. (This may be to conform with XML standards.) Furthermore, the iframes that Amazon supplies aren't clean either. So bear all this in mind if you try to validate my code.

Links

Links
Website
Official HTML validation
Official CSS validation
Look for broken links
Other validation tools
Bagism color maker

Blog setup (Peter Durward Harris)

My story

My story

Why I set up a series of blogs

Next page

Blog setup notes >>

Blog setup notes

Blog setup notes

Introduction

Coding philosophy

HTML tables - advantages and disadvantages

Fonts on screen

Colors on screen

Printing

Testing

Style sheets used in this website

Next page

Blog template and settings >>

Blog template and settings

Blog template and settings

Introduction

Viewing my source

Settings

Templates - User defined styles

Variation between blogs

Clean code - or not

Links