Preferred HTML form of contributions

If you send a text to this website, it helps a lot if it is already written in HTML. If you want to help even more, you can use the following guidelines for the form of the HTML code. (Comments on the contents can be found on another page.)

If you feel that following the guidelines is too difficult for you, don't worry: read below.

The advantage of following the guidelines is that all pages of this website have the same look, and also look reasonably good on any kind of browser or machine. Not everybody uses the same browser as you!

Post Your Own Game

If you are member who has already contributed pages to this site, you can post your own material. Just go to the following link: Post your own game, and follow the directions.

Fonts

This site uses three different fonts. These include one serif font, one sans serif font, and one monospace font. By default, these are Literata, Noto Sans, and Courier Prime, all loaded from Google Fonts. However, users may change these with Font Settings. So that user preferences work, you should not specify any fonts by name. If you wish to specify a font in a way that honors user preferences, you may use one of the following CSS custom properties:

var(--serif)
var(--sans-serif)
var(--mono)
var(--bodyfont)
var(--headfont)

The last two are routinely used in place of var(--serif) and var(--sans-serif) to honor user preferences about whether to use a serif or a sans-serif for body text and header text.

Colors

This site supports different color themes through the use of CSS custom properties. Using the menu, you may choose between Print, Light, Dark, and Darker themes. Because of this, it is best to use the same CSS custom properties if you want to specify colors in your HTML. Otherwise, your colors might not fit the color theme, or even worse, your text might become invisible by being the same color as the background. To avoid these problems, use these CSS custom properities in place of color codes or color names:

	var(--bgcolor) // background color
	var(--fgcolor) // foreground or text color
	var(--highlight-color)
	var(--alt-bgcolor)
	var(--nav-bgcolor)
	var(--nav-fgcolor)
	var(--nav-border-color)
	var(--nav-highlight-color)
	var(--piece-bgcolor) // Use as a background for pieces and other transparent images
	var(--private-highlight)
	var(--members-highlight)
	var(--link-color)
	var(--visited-link-color)
	var(--focus-link-color)

The following table will show what each color looks like for each color scheme:

In making this table, I learned that code of the form STYLE="background-color: var(--color)" works better than code of the form BGCOLOR="var(--color). Note that you would have to replace var(--color) with one of the custom properties listed above.

HTML Dos

• Use plain HTML.
• Use H1 through H6 for headings.
• Use H1 for the title.
• Use H2 for each major section.
• If you're posting a page online, the H1 and H2 headings will be handled automatically, and you should start your own headings with H3.
• Use these tags only for organizing content.
• Enclose paragraphs in <P><\P> tags
• Use <UL> or <OL> to make lists
• Display diagrams and pieces as single images, using the IMG tag
• Optimize image file sizes. Favor GIF or PNG for diagrams and pieces, and JPG for photographs.
• Where appropriate, float images around text with the ALIGN attribute.
• Place images that use captions inside of FIGURE tags with the captions inside of FIGCAPTION tags.
• Place piece images within <FIGURE CLASS="piece"> tags.
• Display diagrams as single images or as Interactive Diagrams.
• Use HTML entities for any non-ASCII characters. This includes any alphabetic character with extra markings, such as an accent or umlaut, as well as all other foreign characters. Where that isn't feasible, use UTF-8.
• Where appropriate, emphasize text with <B>, <I>, <STRONG>, or <EM> tags.
• Use relative links to other pages on this site, because they take up less space, will work equally well with both of our domains, and will continue to work if our domain ever changes.
• Make sure all links work.

HTML Don'ts

• Don't use frames.
• Don't focus on styling your text.
• Don't misuse HTML tags meant for organizing content for styling your text. For example, do not use a heading tag when all you want is larger boldface text.
• Don't use the FONT tag or CSS styles to specify particular fonts. This site normally loads in three carefully chosen fonts.
• Do not color your text or background.
• Don't skip heading levels. No heading should be more than one level lower than the heading most closely preceding it.
• Don't write JavaScript unless you are a recognized programmer who can be trusted to know what you're doing.
• Don't link to images on other sites.
• Don't include images in any format except GIF, PNG, JPG, or SVG.
• Don't use the MAIN or ARTICLE tags. These are already handled by the headers and footers that appear on each page.
• Don't use tables, ASCII art, or, with the exeption of Interactive Diagrams, JavaScript to display diagrams.
• Don't increase the width of the page too much with tables or preformatted text.
• Don't write pages in Latin-1 (ISO 8859-1) or Windows-1252.

Use the standard template

All webpages have the same kind of yellowish-white background color, and the same colors for links (followed, unfollowed), and black text. It depends on the depth in the directory/folder hierarchy what kind of header you can use:

• Most web pages (one level down)
• Index web pages (top level)

HTML Entities and UTF-8

The .htaccess file on this site is set up to indicate that each page should be displayed in the UTF-8 character encoding. UTF-8 is a variable-width form of Unicode that stores all the ASCII characters as single bytes, using multiple bytes only for other characters. Since the pages on our site are primarily written in ASCII, using UTF-8 will not appreciably expand the size of our files, yet it still gives us the advantage of a single character encoding that includes a wide variety of the world's languages, as well as various symbols. Although you might be comfortable with Latin-1 (ISO 8859-1), we need to consistently use the same character encoding for all our pages. Telling the browser what character encoding to expect is what makes all our pages readable on any browser. Since UTF-8 combines compactness with the variety of Unicode, and since all ASCII documents are already UTF-8 documents by virtue of ASCII being a subset of UTF-8, UTF-8 is the best character encoding for us to use.

Nevertheless, you should favor HTML entities over UTF-8 characters. The reason for this is that HTML entities will display properly no matter what character encoding a browser uses. As an example, here are two umlauted e's, one displayed in UTF-8 and one displayed as an HTML entity. Use your browser to change the character encoding, and the HTML entity will still look correct, but the other one will not.

Here are some useful resources I found on the web:

• Character Entity References in HTML 4 and XHTML 1.0
• HTML - Special Entity Codes
• Unicode to HTML Entities Convertor

While it is not critical to convert pages from UTF-8 to HTML Entities, it is important to convert pages using Latin-1 (a.k.a. ISO 8859-1) or Windows-1252.

A common error

If you want to use a < or > in the text, like in the following mathematical sentence: if 5x < 10, then 2 > x, then you cannot just use a < or > in your html-code: while some browsers (depending on version) display this as you wanted, others expect a html-command and may display the webpage not as wanted (e.g., skip some part of the text.) The correct way to resolve this is to use the code &lt; for the < sign, and the code &gt; for the > sign.

This is too hard for me.

If you feel that it is too hard for you to follow all these guidelines: Don't worry - we'll manage. Just send in your text in another form, and we'll try to edit it. Some deviations of these form-rules are acceptable, and depending on time, we'll try to resolve some others. In case of doubt, just contact us.