Webdesign

I also had written to StatCounter and this is their reply:

Corrupt code means StatCounter code was not installed properly.
How you install your code?
Best way to install code is:
1. Download webpage to your local machine.
2. Edit this webpage via notepad.
3. Paste StatCounter code just above </body> tag
4. Save webpage and upload it back to your website.
This way you will never go wrong.

I re-added the code right above the </body> tag and it's working now. I suppose I probably added it wrong the first time.

StatCounter: www.statcounter.com


www.genealogy-web-creations.com/resources.htm Webmaster Patricia Geary

genealogy-web-creations.com/tutorials/filezilla-instructions.htm Webmaster Patricia Geary

werbach.com/barebones/nl/barebone.html Kevin Werbach 1999


www.genealogy-web-creations.com/html-document-structure.html


All of the community directories are available for your use, e.g. alumni_html, family_html, genealogy_html, military_html, etc. Just publish your files to the community directory where you want them to appear, and they will be available at that URL -- a separate website.

"miscellaneous" does appear in the URL,
freepages.misc.rootsweb.ancestry.com/~pasher/
but it is the default directory for your Freepages account; so you can omit it from the URL, just as you can omit index.html (the default home page at Freepages).
freepages.rootsweb.ancestry.com/~pasher/

Pat


Menu templates

webdesign.about.com/od/cssmenutemplates/CSS_Menu_Templates.htm

Horizontal menu with youarehere

vb1.css

ul#navigation {
padding: 0;
margin: 0;
background-color: #039;
color: #fff;
float: left;
width: 100%;
}
ul#navigation li { display: inline; }
ul#navigation li a {
padding: .25em 1em;
background-color: #039;
color: #fff;
text-decoration: none;
float: left;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
color: #000;
background-color: #fff;
}
ul#navigation li#youarehere a { background-color: #09f; }

vb1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu List</title>
<link href="vb1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="navigation">
<li><a href="http://webdesign.about.com/">Home</a></li>
<li><a href="http://webdesign.about.com/cs/webdesignlayout/a/bl_layouts.htm">XHTML+CSS
Layout Templates </a></li>
<li id="youarehere"><a href="/library/layouts/bl_listlayouts.htm">List Layout Templates </a></li>
<li><a href="http://webdesign.about.com/od/websitetemplates/index.htm">More Layout
Templates</a></li>
</ul>
</body>
</html>

Hoe zien anderen je webpagina's op hun monitor: Webpages on monitors

Many people size their browser window somewhat smaller than full-screen. For instance, on monitors set to a 1,024 x 768 resolution, it is common to keep the browser window closer to 700-800 pixels wide, for a number of reasons, some of which we'll discuss below.

The issue isn't monitor size or monitor resolution - it's browser window width. And the truth is that there are almost as many browser window widths being used as there are people.

When reading text, size matters

When pages are mostly text, there's a limit to how wide the content can stretch and still be readable. Having the content stretch across the entire screen is not always ideal. As monitors get bigger, there's a tendency to assume that browser windows will be kept bigger and bigger, as if bigger is always better. But when dealing with text-based pages, this is just not the case. Text is much more readable when the lines are of a reasonable length, perhaps about 10-20 average-length words per line.

There are reasons why humans have developed the common 8 ½" x 11" paper page with its 12-point type: for the average person, this is a readable type size and length of lines. As our monitors get bigger and bigger, many of us will be finding that it makes good sense to keep browser windows, and other program windows, at much less than maximized, to provide these ideal line-lengths.

On a typical printer designed primarily for 8 ½" x 11" sheets, a web page will print well only if no content on the page is more than about 630 pixels wide.


CSS Positioning Tutorial: mako4css.com


Breadcrumbs (Sprookje van Hans en Grietje)use a single line of text to show a page's location in the site hierarchy. While secondary, this navigation technique is increasingly beneficial to users.
In het adresveld van de browser kun je ook zien waar je staat.


SVG Color Keywords

Color Color Name Hexadecimal RGB
  aliceblue #f0f8ff 240,248,255
  antiquewhite #faebd7 250,235,215
  aqua #00ffff 0,255,255
  aquamarine #7fffd4 127,255,212
  azure #f0ffff 240,255,255
  beige #f5f5dc 245,245,220
  bisque #ffe4c4 255,228,196
  black #000000 0,0,0
  blanchedalmond #ffebcd 255,235,205
  blue #0000ff 0,0,255
  blueviolet #8a2be2 138,43,226
  brown #a52a2a 165,42,42
  burlywood #deb887 222,184,135
  cadetblue #5f9ea0 95,158,160
  chartreuse #7fff00 127,255,0
  chocolate #d2691e 210,105,30
  coral #ff7f50 255,127,80
  cornflowerblue #6495ed 100,149,237
  cornsilk #fff8dc 255,248,220
  crimson #dc143c 220,20,60
  cyan #00ffff 0,255,255
  darkblue #00008b 0,0,139
  darkcyan #008b8b 0,139,139
  darkgoldenrod #b8860b 184,134,11
  darkgray #a9a9a9 169,169,169
  darkgreen #006400 0,100,0
  darkgrey #a9a9a9 169,169,169
  darkkhaki #bdb76b 189,183,107
  darkmagenta #8b008b 139,0,139
  darkolivegreen #556b2f 85,107,47
  darkorange #ff8c00 255,140,0
  darkorchid #9932cc 153,50,204
  darkred #8b0000 139,0,0
  darksalmon #e9967a 233,150,122
  darkseagreen #8fbc8f 143,188,143
  darkslateblue #483d8b 72,61,139
  darkslategray #2f4f4f 47,79,79
  darkslategrey #2f4f4f 47,79,79
  darkturquoise #00ced1 0,206,209
  darkviolet #9400d3 148,0,211
  deeppink #ff1493 255,20,147
  deepskyblue #00bfff 0,191,255
  dimgray #696969 105,105,105
  dimgrey #696969 105,105,105
  dodgerblue #1e90ff 30,144,255
  firebrick #b22222 178,34,34
  floralwhite #fffaf0 255,250,240
  forestgreen #228b22 34,139,34
  fuchsia #ff00ff 255,0,255
  gainsboro #dcdcdc 220,220,220
  ghostwhite #f8f8ff 248,248,255
  gold #ffd700 255,215,0
  goldenrod #daa520 218,165,32
  gray #808080 128,128,128
  green #008000 0,128,0
  greenyellow #adff2f 173,255,47
  grey #808080 128,128,128
  honeydew #f0fff0 240,255,240
  hotpink #ff69b4 255,105,180
  indianred #cd5c5c 205,92,92
  indigo #4b0082 75,0,130
  ivory #fffff0 255,255,240
  khaki #f0e68c 240,230,140
  lavender #e6e6fa 230,230,250
  lavenderblush #fff0f5 255,240,245
  lawngreen #7cfc00 124,252,0
  lemonchiffon #fffacd 255,250,205
  lightblue #add8e6 173,216,230
  lightcoral #f08080 240,128,128
  lightcyan #e0ffff 224,255,255
  lightgoldenrodyellow #fafad2 250,250,210
  lightgray #d3d3d3 211,211,211
  lightgreen #90ee90 144,238,144
  lightgrey #d3d3d3 211,211,211
  lightpink #ffb6c1 255,182,193
  lightsalmon #ffa07a 255,160,122
  lightseagreen #20b2aa 32,178,170
  lightskyblue #87cefa 135,206,250
  lightslategray #778899 119,136,153
  lightslategrey #778899 119,136,153
  lightsteelblue #b0c4de 176,196,222
  lightyellow #ffffe0 255,255,224
  lime #00ff00 0,255,0
  limegreen #32cd32 50,205,50
  linen #faf0e6 250,240,230
  magenta #ff00ff 255,0,255
  maroon #800000 128,0,0
  mediumaquamarine #66cdaa 102,205,170
  mediumblue #0000cd 0,0,205
  mediumorchid #ba55d3 186,85,211
  mediumpurple #9370db 147,112,219
  mediumseagreen #3cb371 60,179,113
  mediumslateblue #7b68ee 123,104,238
  mediumspringgreen #00fa9a 0,250,154
  mediumturquoise #48d1cc 72,209,204
  mediumvioletred #c71585 199,21,133
  midnightblue #191970 25,25,112
  mintcream #f5fffa 245,255,250
  mistyrose #ffe4e1 255,228,225
  moccasin #ffe4b5 255,228,181
  navajowhite #ffdead 255,222,173
  navy #000080 0,0,128
  oldlace #fdf5e6 253,245,230
  olive #808000 128,128,0
  olivedrab #6b8e23 107,142,35
  orange #ffa500 255,165,0
  orangered #ff4500 255,69,0
  orchid #da70d6 218,112,214
  palegoldenrod #eee8aa 238,232,170
  palegreen #98fb98 152,251,152
  paleturquoise #afeeee 175,238,238
  palevioletred #db7093 219,112,147
  papayawhip #ffefd5 255,239,213
  peachpuff #ffdab9 255,218,185
  peru #cd853f 205,133,63
  pink #ffc0cb 255,192,203
  plum #dda0dd 221,160,221
  powderblue #b0e0e6 176,224,230
  purple #800080 128,0,128
  red #ff0000 255,0,0
  rosybrown #bc8f8f 188,143,143
  royalblue #4169e1 65,105,225
  saddlebrown #8b4513 139,69,19
  salmon #fa8072 250,128,114
  sandybrown #f4a460 244,164,96
  seagreen #2e8b57 46,139,87
  seashell #fff5ee 255,245,238
  sienna #a0522d 160,82,45
  silver #c0c0c0 192,192,192
  skyblue #87ceeb 135,206,235
  slateblue #6a5acd 106,90,205
  slategray #708090 112,128,144
  slategrey #708090 112,128,144
  snow #fffafa 255,250,250
  springgreen #00ff7f 0,255,127
  steelblue #4682b4 70,130,180
  tan #d2b48c 210,180,140
  teal #008080 0,128,128
  thistle #d8bfd8 216,191,216
  tomato #ff6347 255,99,71
  turquoise #40e0d0 64,224,208
  violet #ee82ee 238,130,238
  wheat #f5deb3 245,222,179
  white #ffffff 255,255,255
  whitesmoke #f5f5f5 245,245,245
  yellow #ffff00 255,255,0
  yellowgreen #9acd32 154,205,50

You can no longer upload MIDI files to Rootsweb Freepages. Too much risk of copyright infringement I think. (Patricia Geary)


Freepages Rootsweb FAQ: helpdesk.rootsweb.com/FAQ/


Jennifer Kyrnin: password protection Scheme used by apachy servers
hthtaccess.htm

Web Accessibility

Intense or large images are images that are extremely large in both file size and dimensions. Large images are very slow to load on a dialup connection.

An alt tag is meant to give those using a screen reader a description of what the image is since they cannot see it and in case the images don't load, a description of the image.

Web Accessibility is a big topic now. You can read more about it accessibility

Web accessibility means that people with disabilities can use the Web. More specifically, Web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the Web, and that they can contribute to the Web. Web accessibility also benefits others, including older people with changing abilities due to aging.

Web accessibility encompasses all disabilities that affect access to the Web, including visual, auditory, physical, speech, cognitive, and neurological disabilities. The document "How People with Disabilities Use the Web" describes how PWD-USE-Web

Different disabilities affect Web use and includes scenarios of people with disabilities using the Web.

Millions of people have disabilities that affect their use of the Web. Currently most Web sites and Web software have accessibility barriers that make it difficult or impossible for many people with disabilities to use the Web.

As more accessible Web sites and software become available, people with disabilities are able to use and contribute to the Web more effectively.

Web accessibility also benefits people without disabilities. For example, a key principle of Web accessibility is designing Web sites and software that are flexible to meet different user needs, preferences, and situations. This flexibility also benefits people without disabilities in certain situations, such as people using a slow Internet connection, people with "temporary disabilities" such as a broken arm, and people with changing abilities due to aging.

The document Developing a Web Accessibility Business Case for Your Organization describes many different benefits of Web accessibility, including benefits for organizations.

Some use the tools www.w3.org/WAI/ER/tools/complete

Patricia Geary

In my experience, Google Analytics is an abomination. I use Ancestry.co.uk a lot and I find that very often after doing a search and clicking on the link to display the original image, the image never loads. It just hangs waiting for something to happen involving Google Analytics. I have to stop the load and do a Reload of the image. It then usually works but having to do this is a real pain.

Vernon Smith

When you load a page containing the Google Analytics code your browser downloads a JavaScript code (either urchin.js or ga.js) from an extremely fast server. It's 23 kilobytes in size and on a dialup connection will add 4 seconds to the loading time.

If the webmaster has followed the instructions correctly and placed the code just in front of the closing </body> tag then the entire page will have already been displayed and you won't notice the extra download time. The problem comes when the webmaster has NOT followed the instructions and has placed the code at the start of a page or inside a table. Nothing is displayed in a table until it's entire contents have been downloaded and this makes the page slow to load. For this reason most professional webmasters have abandoned using tables to lay out a web page and are now using CSS. Used properly Google Analytics won't noticeably slow down your pages. I notice ancestry.co.uk are using the code after their </html> tag rather than just before </body>

9-5-2009 John Chapman www.genlinks.org.uk

In practice, many sites have broken code, and Ancestry is a major offender in that realm, but html that is not valid is the norm for commercial websites. They don't seem to care, as long as the pages work in IE. I think they use tools to create the pages for them, instead of checking them carefully.

But I don't think it is just the location of the code for Google Analytics, as you mentioned. Opera browser (at least my version) doesn't display anything until the whole page has downloaded, so the more that is happening behind the scenes, the longer I have to wait to start reading a page.

Yes, Google Analytics has great information, but I found other tools that give me the information I need as a webmaster, without having to deal with their webmaster pages and statistics, which were a nightmare for me, including browser often crashing before I could get to the statistics I wanted. They aren't the only show on the road for free webmaster tools.

And I really don't want any of my site visitors to have to go through the pain of a slowly loading page.

The Cohens in California

To open a PDF file in a new window, use the following code. It is a live example, and provided you are on broadband, copy & paste the code below into your text editor. Use Find/Replace to Find [ then Replace with < , likewise Find ] then Replace with > and save as a html file.

Now open it in your browser and click on the link.

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"];
[html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en"]
[head]
[meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /]
   [title]Open PDF in New Window[/title]
[/head]
[body]
[div]
[a href="javascript:void
 window.open('http://www.rootsweb.ancestry.com/~kyscgs/delbrth/adair.pdf',
'newwin','toolbar=no,directories=no,titlebar=no')"]Adair[/a]
[/div]
[/body]
[/html]

NOTE: For some reason best known to itself, Mailman has decided that any attempts to hide html from it are doomed to fail! Hence the use of [ as opposed to <. which it sometimes rejects.

Barry

In summary, you have been shown that using the short form of the Document Type Declaration is the same as not having one at all, for the browser then defaults from Standards to Quirks mode.

Foef om je e-mail-adres op een webpagina te melden, zonder "mailto" te gebruiken, wat voor spam-hackers de methode is om clandizie te vinden op het Internet.

<p>Please contact me for lookups in my database and records. Mail to <a title="Copy and Paste the email address to your email editor to send me mail.">cindysmith9<code>@</code>hotmail.com</a> and include Holdridge Genealogy in the subject line.</p>

There is no @ symbol and no "mailto" to indicate to a spambot that it *is* an email address. In addition, the only SE allowed to spider the archives is Google, which maintains the JS encryption.

An individual can read an email address in the archives using their browser, but bots would have a tough time sorting email addresses from all the other commas in the text, even if they were allowed in to the archives.

Google is ALLOWED to spider the archives because they have agreed to maintain the encryption.

Other bots are not allowed in to spider archiver.

alt en title tags

<img border="0" src="//freepages.genealogy.rootsweb.com/~boltongenealogy/eccles/Eccles_Brothers_WWI[2].jpg" width="114" height="80" alt="Eccles_Brothers_WWI[2].jpg" title="James Eccles b.1897 (left), and his brothers, Matthew b.1899 (centre), and Daniel b.1891 (right), all born in Bolton. James and Daniel were in the Loyal North Lancashire Regiment during WWI.">

The alt tag should include the name of the file (for those who have images disabled)

The title tag should contain the text you want to show when mouse hovers over the image

Actually, it's easier to use Alt+ PrintScr. This takes a picture of only the currently open window - not the whole screen. That way, you don't see the Vista sidebar or the bottom Windows Taskbar on the picture - just the currently open window.