HTML Reference : Monolith Design

HTML Reference

This page has a bunch of reference articles about HTML.

Color

Colors are represented in a number of ways in Web pages, but these are notational differences that describe the same thing. Color on computer monitors is represented with varying amounts of 3 fundamental colors: Red, Green, and Blue (also called RGB). By varying the amount of each of the 3 components, it is possible to produce the appearance of a vast array of colors. Each of the 3 components has a value from 0 to 255 (the range that can be represented in one byte = 8 bits = 2^8). The larger the number, the lighter the color (255 is the brightest for any of the 3 basic colors, while 0 is the darkest.)

To further complicate matters, decimal numbers are rarely used to describe colors. Instead, the RGB components are usually represented in hexadecimal (usually just called “hex”), or base-16 arithmetic. Here is a handy decimal-to-hexadecimal chart from Elizabeth Castro’s site. This is a more compact notation, but using base 16 requires that you have a single digit for everything from 0 to 15 (just like base 10 requires single digits from 0 to 9). The answer was to use the letter ‘a’ to represent 10, ‘b’ for 11, ‘c’ for 12, ‘d’ for 13, ‘e’ for 14, and ‘f’ for 15. Accordingly, the maximum value for a color component is written as #ff, where the pound sign denotes a hexadecimal number. Remember: bigger = brighter.

Different Ways to Refer to Colors

  • #RRGGBB, where RR is the red component (0-FF, which is 255 in base 10), GG is green, and BB is blue. If all three colors are
    at maximum (#FF), then the resulting color is White. This is the preferred way to represent colors.
  • #RGB is the shorthand version of the previous entry, for the case where digits are doubled: #F8C == #FF88CC. Avoid this unless you are obsessed with making your code as tiny as possible.
  • rgb(rrr.rr%, ggg.gg%, bbb.bb%), where the RGB values are specified as percentages like 72.5%. No one does it this way; use hexadecimal.
  • rgb(rrr,ggg,bbb), where the RGB values are decimal numbers in the range 0-255. No one does it this way; use hexadecimal.
  • keyword, where keyword is one of these predefined colors: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. No one does it this way, since your color choices can change constantly over the life of a project.

Examples of Color Notations

  • An RGB combination of (0, 0, 0) is black. Hexadecimal: #000000
  • RGB (255, 255, 255) is white. Hexadecimal: #ffffff
  • RGB (255, 0, 0) is bright red.
  • RGB (127, 0, 0) is a medium red. Hexadecimal: #7f0000
  • RGB (0, 255, 0) is bright green. Hexadecimal: #00ff00
  • RGB (0, 0, 255) is bright blue. Hexadecimal: #0000ff
  • RGB (255, 255, 0) is yellow. Hexadecimal: #ffff00
  • RGB (255, 0, 255) is purple. Hexadecimal: #ff00ff

There is also a completely stupid rule for specifying colors: if all 3 color components have pairs of the same numbers, you can represent the hex number as a 3-digit number instead of using 6 digits. Examples: #ff6633 can be written as #f63, #003300 as #030, and #336699 as #369. This saves 3 characters, while introducing a special-case syntax for colors. In a world of broadband, there is no need to do this! If you are obsessed with reducing the size of your CSS file, then use a “tidy” program to squeeze out the extra space. I am only mentioning this because you may see it when examining other sites.

Handy Color Resources

About Fonts

Proper and effective use of fonts is one of the more problematic areas of Web design. Since fonts are not embedded in pages, it is always possible that some users’ computers will not have the font chosen by the designer. In HTML, you can specify a list of fonts to try, and the Web browser will choose the first one that is found on the computer. There is little commonality in fonts available across PCs, Macs, and Unix boxes. Accordingly, the Web designer must take care to specify a comprehensive list of fonts that will achieve the desired look on each platform. The apparent size of the same font will vary across platforms, as well. Web browsers often allow users to scale the size of fonts up or down, and some people do. Finally, the art of typography is thousands of years old, and the introduction of the printing press 5 centuries ago led to significant standardization of typographical rules, guidelines, and artfulness. Bringhurt’s book on typography is outstanding but incredibly dense; you can find an easier Web-based version here. Here is an outstanding guide to Beautiful Web Typography. Here is another excellent article about beautiful Web typography.

Given these factors, it takes some care to achieve a cross-browser, cross-platform look that is also attractive. Here are some guidelines:

  • The most widespread Sans Serif fonts on the Web are Arial, Verdana (for Windows), and Helvetica for Mac OS. Ideally, you should choose one of these 3 for your primary font, and specify the other two as backup choices.
  • Times New Roman is the most used Serif font on the Web. It is compatible for both Macs and PCs, and should be your primary Serif backup choice.
  • Courier is a widely-available monospaced font, but it’s ugly.
  • Common Mac Fonts are Serif: Times, New Century Schoolbook, Palatino; Sans Serif: Helvetica, Arial, Verdana (only installed by IE); Monospace: Courier.
  • Common PC Fonts are Serif: Times New Roman, Georgia; Sans Serif: Arial, Tahoma, Verdana; Monospace: Courier New.
  • All that being said, there’s a lot to be said for using nicer fonts than the lowest common denominator. Fortunately, whenever you specify a font in CSS, you can actually give a list of fonts to try. Simply put the nicer fonts at the beginning of your font list, and then make sure that the end of the list contains at least one font guaranteed to work on each platform.
    • Example:    font-family: Palatino, Georgia, "Times New Roman", Times, serif : a Mac user will see Palatino, a Windows user will see Georgia, and you’ll always have Times (New Roman) just in case, with serif as the ultimate fallback position.
    • It’s always a good idea to test each of the fonts in your list, to make sure that you don’t get unexpected overflows because the text expands from a font choice to a larger than expected size.
    • Here is an interesting article that proposes a variety of font stacks for use in Web pages, with a focus on providing more obscure fonts first for people who have them, followed by more sure alternatives.
  • Here are some common font combinations:
    • Arial, Helvetica, sans-serif
    • Times New Roman, Times, serif
    • Courier New, Courier, mono
    • Georgia, Times New Roman, Times, serif
    • Verdana, Arial, Helvetica, sans-serif
    • Geneva, Arial, Helvetica, sans-serif

Here are some possible ways to specify the size of fonts:

  • keywords: a good method for screen use, using relative sizes. One of the most versatile schemes for managing font size for a site calls for setting a single font-size keyword in CSS for the BODY tag, and then specify all other fonts in terms of percentages relative to the base size.

    body { font-size:large; }

    h1 {font-size: 150%; }
  • percentages: another good way to specify fonts relatively for the screen (larger or smaller, not large or small).
    Example: h3 {font-size: 125%; }
  • em: comes from the width of the capital "M". Changes to the base font size affect all others relatively, so this is also a convenient way to handle fonts for the screen.
  • pixels: another natural way to specify fonts for the screen. This does not scale, though, so it removes flexibility from the user who needs larger text.
  • ex: comes from the height of the letter "x". I have never seen this in use.
  • inches: print-oriented.
  • centimeters: print-oriented.
  • picas: print-oriented.
  • points: print-oriented.

If you absolutely must use that one particular font that nobody else has, there are 2 main ways to go about it:

  1. Create a graphic using your font, and then insert the image where you want that font to appear. The disadvantages are that by turning the font into a graphic, it is no longer editable or selectable, and it is opaque to the search engines. It also increases page load time slightly, although these kinds of graphics are typically pretty small.
  2. Use a technique called Inman Flash Replacement, which relies on both Flash and Javascript to do its work. You must have a tool that turns your font into Flash, and then Javascript is used to position the Flash bit at the right spot. The text is selectable this way, and it degrades gracefully if Flash or Javascript are unavailable (it just displays the actual text, instead of covering it with the Flash object). There is a nice open-source implementation of this called “sIFR”, which includes the tool to create the Flash from your font.

Eventually, browsers will download fonts as needed by a user. There have been attempts to do this, but nothing is standard or popular yet. Do not hold your breath!

About Images

The most common media type other than text is the image. Currently, the two most common image types used on the Web are GIF and JPEG. (A third image type, PNG, is a superior format to GIF, but has yet to achieve widespread usage because of poor support in Internet Explorer.)

  • GIF images are small, support transparency, and have a limited palette of colors. This makes them ideal for menus and buttons and other line art (like the CIS86 header) – especially where things need to overlap without obscuring. The limited palette of colors (only 256 maximum) makes GIF a bad choice for displaying a photographic image. The other attractive feature of the GIF format is animation. You can embed frames in a single GIF, and specify how quickly to cycle between the frames. This requires no additional browser plugins—all browsers will display this correctly.
  • JPEG images excel at displaying continuous-tone images, so they are ideal for displaying photographs. JPEG images use compression to
    hold down on the file size, but you can choose the desired level of compression, trading off file size for detail in the image.

    • More Compression = Smaller File Size = Less Detail in Photo.
    • Less Compression = Larger File Size = More Detail in Photo.
  • PNG was intended to be a successor to GIF files, but adoption has been slowed by Internet Explorer’s inexplicable lack of support for PNG transparency. PNG has a much larger palette of colors than GIF, but its biggest lack is animation.You can use a PNG wherever you would use a GIF, but do not expect Internet Explorer to render transparency properly.

There are 2 ways to use an image on a Web page: you can place the image in the flow on the page like any other HTML element, or you can use an image as the background for an element that is already on the page. It depends on what you need:

  • Use the img tag to place an element in the normal flow on the page. The image takes up space, and the other content flows around it in one way or another. An image placed this way can be floated to the left or right, and the surrounding text will gracefully flow around it as with any other floated element. You can float an image in 2 ways: with "float:right" in CSS, or with "align=right" as an HTML property. The latter approach is deprecated, so use the CSS method. An image can also be the anchor for a link. You can even use an image map to link specific rectangles (coordinates for the top-left and bottom-right corners) in an image to different URLs or actions.
  • Use the image as a background-image for some element on the page. The image is not in the flow, and it only extends to the bounds of the object for which it is a background. These images are not clickable—they are just decoration. One disadvantage of these is that the default setting in most Web browsers for printing Web pages is to suppress background images and colors. If your logo is in the background of a header element, a printed Web page could completely drop the graphic. A common use for background images is styling navigation elements, where the :hover pseudo class is used to replace the background image with a different image. An even newer technique called "CSS sprites" embeds the different states in a single graphic, reducing the number of HTTP transactions. The tabs interface on this page uses a CSS sprite to change the background behind the selected tab.

Deprecated (Obsolete) HTML Tags

Since HTML has advanced since the early years, new features have been added, and old features have become obsolete. Tags which are considered obsolete are labeled as deprecated, and these tags should be avoided because modern browsers are no longer required to support their use. Of course, the programming language called COBOL was invented in 1957, and was obsolete by 1970. It is still the preferred language for business software! Ugh.

At any rate, avoid use of these deprecated HTML tags:

  • <font> : this is nasty old "stone knives and bearskins" HTML. Do not use this, lest you provoke an unpleasant response from me! Use stylesheets to define font properties. The same holds for <basefont>, although this is rarely seen in the wild.
  • <center>: use stylesheets to center elements.
  • <strike>, <s>, <u>: strike-through text and underline text.

If your doctype is a flavor of XHTML, validation will flag deprecated tags as either warnings or errors (depending on whether your doctype is strict or transitional).

About Doctypes and Dialects

Comparing XHTML and HTML, Strict and Transitional

Since HTML was created in the early 1990s, the language has evolved steadily. With the addition of style sheets (CSS), some older HTML constructs were phased out ("deprecated"). This leaves us with a situation where there are multiple dialects of HTML supported by various Web browsers. In fact, all Web browsers are capable of handling different dialects of HTML and CSS. The main branch in the evolution of HTML came with the introduction of XHTML. This refactoring of HTML cleaned up the syntax in ways that allow for easier interpretation of the code, but it has more stringent requirements for allowable code. There are 2 main choices that must be made when setting up a project: whether to use HTML or XHTML, and whether to use a strict doctype or a transitional doctype. XHTML was created as a more structured form of HTML that lends itself to interpretation by various kinds of devices (like cell phones), not just Web browsers.

The difference between strict and transitional XHTML: Transitional is a forgiving form of doctype. While you must code cleanly—properly nested lowercase tags—transitional allows deprecated elements and attributes to pass validation. The strict doctype is strict: deprecated elements and attributes will fail to validate under a strict doctype and may well display incorrectly as well. For example, <p align=”left”> and <center> will validate in transitional, but not in strict mode since the align attribute and the <center> element are both deprecated.

Similarities in HTML 4.01 strict and XHTML Strict

HTML 4.01 strict will also fail to validate if you include deprecated elements and attributes. HTML 4.01 will fail to validate if you include XML style closing syntax on empty elements.

Differences between HTML and XHTML

The primary benefit is that XHTML is more portable in non-computer devices like cell phones, Palm devices and other scaled down browsers. XHTML is also said to be extensible: new tags can be added. XHTML, due to it’s stricter nature, forces developers to write cleaner code. Here are the “official” differences between XHTML and HTML:

  • In XHTML the element tags must all be in lower case, as must all the attribute names. In HTML, you can code willy-nilly. Nothing in the W3C states that attribute values need to be lowercase, but some, like ID, are case sensitive. Note: Even if you have declared a HTML doctype, all lowercase, while not required, is recommended.
  • In XHTML all attribute values must be encased in single or double quotes. In HTML, only attribute values with spaces or special characters were required to be in quotes.
  • In XHTML, every opening tag must have a closing tag. Empty elements such as img and br must be self-closing. In HTML tags can be left unclosed. So, while this reduces the number of characters on a page, it also allows for sloppy code. Note: Self closing tags, such as <br />, will cause strict HTML to not validate.
  • In XHTML, all tags must be properly nested: If you start tag <a> and then start tag <strong>, you must close tag </strong> before you close the </a>.
  • In XHTML, all attributes must be coded as attribute/value pairs. The default selected option in XHTML should be written selected="selected". In HTML, the same would simply be coded as selected.
  • In XHTML, the elements need to be coded in a semantic manner. Tables and forms can not be included in paragraphs, but form elements, being inline elements, need to be contained within a semantic block level element, such as a paragraph or table cell.


QR Code Business Card