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 loads three carefully chosen web fonts. These include one serif font, one sans serif font, and one monospace font. The current choices are Literata, Noto Sans, and Courier Prime. Each is associated with particular HTML elements. By default, it will use the serif font for body text, the sans serif font for headings, buttons, and some navigation items, and the monospace font for pre-formatted text. For the sake of maintaining a consistent look across pages, you should not select individual fonts.

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.