Friday, 14 March 2008

My story


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.

Wednesday, 12 March 2008

Blog setup notes


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


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 comment lines 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 was best to go to the Formatting page within Settings and change Convert line breaks from Yes to No. Unfortunately, Blogger no longer offer this option, so it is necessary to change the HTML for all new or edited pages. I am changing pages as I need to. I am having to squash up the code, making it less easy to read than it was, but by doing so, I can keep the code as it was. It may be that I eventually find other ways of doing some things so that I can make the code easier to read, but there's no real substitute for the old option to suppress conversion of line breaks. I suppose I could quit Blogger altogether, but I've got used to it now and I'll put up with it.

Apart from that lost option, I've changed a few other settings but you don't need to worry about everything 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, and I mention some other settings below. 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 if they are for public viewing); in that case, you'll have to change the relevant settings.

Most of my settings are the same for all my blogs, but there are variations.

  • Most but not all of my blogs are available to the public and anybody is allowed to comment on them. However, I have some private blogs as follows.
    • When testing new blog-cum-websites, I may keep them private until they reach a point where they are ready for the public.
    • Some blogs are more like general storage areas, allowing me access to private stuff online whenever I use public computers. I've also used e-mail for this sort of thing, but if I put it in a blog, it's easier to find.
    • I can keep copies of copyrighted material in private blogs, formatted in a way that I want and without infringing anybody else's copyright. This is particularly useful in genealogy, where I have both a public blog and a private blog.
  • With private blogs, I set the option to block access to search engines. I do not necessarily un-block that access when I declare a blog public. There can be an intermediate stage where I let some people know it's there, before allowing the search engines loose on it.
  • There are also some public blogs where I block access to search engines, for example Amazon ranking statistics. I don't think there is anything in there that people would be looking for in a Google search. Also, some people don't feel comfortable knowing that there is statistical data (however limited) about their reviews on a public website. So the only way you'll find that blog is via a link from one of my other blogs, or via a link set up by somebody else.

Private blogs have an option to allow access to people other than the person who created the blog, but I have not used that option thus far, although I do not rule it out in the future. Another option might be to make it public but not allow access by search engines. This would be more risky if one wants to keep the contents totally confidential, but would avoid the need to give permission to each individual.

There are also privacy options for blogs that you want the public to see, but I don't use these. If I allow the public to see a blog, I allow them to post a comment on it, even anonymously. I retain the option to prevent the comment from appearing, and I also have the option to delete it or move it later. Some people want everybody to read their musings, but only selected people to comment, to avoid any dissenting voices whatsoever. That says a lot about the sort of people they are. While I don't always allow nasty comments through, I sometimes do, whether or not I reply to them.

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 the relevant 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.

Due to Blogger removing the option to suppress conversion of line breaks from September 2012, I have found ways to avoid the need to use <br> line breaks, although there are still some of my blog pages that use them. Ironically, this is one page that uses lots of line breaks, but in due course, I'll work out a way to avoid their use because the squashed code is almost unreadable. I think I know how, but I don't want to spend the time it needs just now.

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. Thus, when I create another blog, I just load up the blue or white stylesheet as appropriate. When I change or add styles, I can recreate the white sheet easily from the blue if need be, although if the changes are minor, I apply them to both. I then have to update this page and paste the blue or white sheets into all the blogs.

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
h5
text-transform : capitalize
text-align: center
Capitalize and centralize headings.
h1.notransform
h2.notransform
h3.notransform
h4.notransform
h5.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: #800000
font-size : 14px
Brown detail heading.
Reduce heading size
h5 color: #ff00ff
font-size : 18px
Magenta sub-heading.
Reduce heading size
a:link color: #6131BD
text-decoration: none
padding-left: 2px
padding-right: 2px
Unvisited links are purple without underlines.
a:visited color: #888888
text-decoration: none
padding-left: 2px
padding-right: 2px
Visited links are grey without underlines.
a:hover color: #009900
text-decoration: none
padding-left: 2px
padding-right: 2px
Hover links are green without underlines.
a:active color: #ff0000
text-decoration: none
padding-left: 2px
padding-right: 2px
Active links are red without underlines.
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.
.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 descents in ancestry tables that lead to me. Not used now.
.background-classic2 background-color: #ffff99 Pale yellow background for classic descents in ancestry tables that lead to me. Not used now.
.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: #ffffff White background for descent in ancestry tables not leading to me.
.background-notme2 background-color: #ddffdd Pale red 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.
table.left margin-left : 0 Table left aligned, sometines used for holding block quotes
table.width200 width : 200px For tables that just require a different width, there is a class for each width
table.width260 width : 260px  
table.popular width : 300px Additional to other CSS further down
table.width400 width : 400px  
table.width480 width : 480px  
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: #000000
background-color: #ffff99
font-weight: normal
Black on pale yellow captions for quotes.
th background-color : #f9c396
text-align: center
padding: 5px
Light wood table headings.
td text-align : left
padding : 5px
Table details need aligning (because some browsers use paragraph alignment as default) and padding.
table.popular tbody th font-weight : normal;
background-color : transparent;
text-align : right;
"Most popular product to review" detail headings need normal font and same background as corresponding detail values, right-aligned.
tbody.stats td text-align : right; Numeric data in stats tables
tbody.stats th
tbody.vine th
font-weight : normal;
background-color : transparent;
text-align : left;
Stats and Vine detail headings need normal font and same background as corresponding detail values,left aligned.
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.top margin-left : 0px;
margin-right : 0px;
margin-top : 0px;
Keep top margin only.
Used in terminology table.
p.central margin-left : 0px;
margin-right : 0px;
margin-top : 0px;
margin-bottom : 0px;
No margins.
Used in terminology table.
p.bottom margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
Keep bottom margin only.
Used in terminology table.
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.
p.h1upper text-align : center;
color : #ff0000;
font-size : 18px;
font-style : bold;
margin-bottom : 1px;
First line of multi-line main heading, avoiding need for standard h1 with line break.
p.h1lower text-align : right
color : #ff0000;
font-size : 18px;
font-style : bold;
margin-top : 1px;
Last line of multi-line main heading.
p.h3upper text-align : center;
font-size : 16px;
font-style : bold;
margin-bottom : 1px;
First line of multi-line detail heading, avoiding need for standard h3 with line break.
p.h3lower text-align : right
font-size : 16px;
font-style : bold;
margin-top : 1px;
Last line of multi-line detail heading.
*.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.
table.terminology td:first-child width : 170px First column of terminology table
table.cvtechnical td:first-child width : 90px CV technical detail headings
table.cvachieve th text-align : left CV achievement detail headings
td.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.tablemargin-top : 0;
margin-bottom : 0;
Cut margins for block quotations in tables, which I use to centralize them if they are short, as it seems to be the only way that works.
blockquote.white background-color : #ffffff White background for block quotations.
Used for green messages.
blockquote.whitetable margin-top : 0;
margin-bottom : 0;
background-color : #ffffff;
Cut margins and white background for block quotations in tables.
Used for green messages.
li margin-top : 5px Space out lines in lists.
li.top margin-top : 0px No space before top line in most but not all lists, otherwise I could have used first-child.
ol.lower-alpha list-style-type : lower-alpha List has lower case letters instead of numbers.
ul.nosymbol list-style-type : none List has no symbols.
ul.disc list-style-type : disc List has solid disc symbols.
ul.circle list-style-type : circle List has ring symbols, or circles as the software calls them.
ul.disc list-style-type : square List has solid square symbols.

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