Wikipedia:WikiProject Usability/HTML
From Wikipedia, the free encyclopedia
This page needs cleanup, Wiki supports a subset of XHTML, e.g. <br /> instead of <br>.
|
Wikipedia allows the use of HTML directly, and the use of CSS through the style="[…]" and class="[…]" elements.
We believe that:
- The use of HTML instead of Wiki markup is strongly discouraged
- If HTML and CSS must be used, editors should know how to use them properly, with regard to:
- W3C standards
- Cross-browser compatibility
[edit] Why HTML should be used conservatively
HTML makes the edit pages hard to read, and on a wiki the readability of the edit page is almost as important as the readability of the page itself, because nobody wants to edit something that they don't understand.
Occasionally, such as when you are creating notices, and so on (for which there is no markup defined) HTML/CSS must be used.
[edit] HTML and CSS primer
HTML is simple to use - just put a pair of tags around some text, e.g. <em>italics</em>, and it will show up as the tags defined it. Most HTML elements, like bold (strong, b), italic (em, i), list (li), heading (h1, h2...) and even table (table) have their equivalent in the markup, so should be avoided. The CSS, which you can think of as the "display properties" may be added to the markup itself - this is covered later.
There is, however, sometimes a need to define your own type of tag, or "element". There are two HTML tags to help you do this, span, and div:
- The span tag describes inline elements, usually text that is within other text.
- Bold, italic and underline are examples of inline elements.
- The div tag describes block level elements, so portions of text that have the equivalent of a linebreak before and after them.
- Lists, tables, headings, and paragraphs are examples of block level elements.
The span and div tags are blanks that you can add things to:
- <span class="noprint" style="color:red">red text that does not show up when printed</span>
produces
- .
Usually, the style attribute is avoided because we'd use a real CSS stylesheet, but we can't do that, so we use it when we must.
The style attribute takes the form of: <? style="p: v; p: v; p: v"> </?> - p being property, v being value.
[edit] List of style properties
Before listing properties, you should get to know how to represent certain values:
- Color may be represented using hex form (#000000 being black, #ff0000 being red, for example), or using names (red, green...)
- Size should be represented using em, px, and % - 1px represents 1 pixel, 10% represents 10 percent the size of 'something', 1em represents one "height of the font used" - if it were used here, the height of this letter "l".
[edit] Basic properties
Please note: this page does not encourage the use of bright, or non-standard colors. They are used for clearer examples. Please see Wikipedia:WikiProject Usability/Color
- "color: [color];" - the foreground color.
- <span style="color:red;">test</span> --> test
- "background: [color];" - 'shorthand' for several background properties, including image. Used for background color
- <span style="background:black; color:#ff0000;">test</span> --> test
- "border: [thickness] [type] [color];" - the border: color, thickness, type. Type may be solid, outset, dashed, and others
- <span style="border: 2px outset cyan; background:yellow;">test</span> --> test
- <span style="border: 1px dashed red; background:white;">test</span> --> test
- foo<span style="border: 1px solid red; background:transparent;">test</span>bar --> footestbar
- You'll note that "transparent" is used for the background here. The standard background of wikipedia is #f8fcff, so if you put "white" and neglect the border, you may notice a very slight (but inappropriate) difference in color. Transparent should be used, or no background property should be specified (result is the same).
- "padding: [size];" - usually, the "spacing" on the inside of the border. 1, 2, or 4 sizes may be specified.
- foo<span style="border: 1px solid red; padding: 1em;">test</span>bar --> footestbar
- foo<span style="border: 1px solid red; padding: .1em 1em;">test</span>bar --> footestbar
- Two values: [top/bottom] [right/left].
- foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar --> footestbar
- Four values: [top] [right] [bottom] [left] (clockwise).
- "margin: [size];" - usually, the "spacing" on the outside of the border. It's also the distance at which other elements should be "kept away" at. 1, 2, or 4 sizes may be specified, exactly as in "padding". Many browsers will ignore "top/bottom" for margins on inline elements.
- foo<span style="border: 1px solid red; margin: 1em;">test</span>bar --> footestbar
- foo<span style="border: 1px solid red; margin: 3em 1em;">test</span>bar --> footestbar
- foo<span style="border: 1px solid red; margin: 0em 1em 0em 2em;">test</span>bar --> footestbar
- foo<span style="border: 1px solid red; margin: 0em -.3em;">test</span>bar --> footestbar
[edit] List of classes
- class="noprint" and class="metadata" - will not get printed onto paper. Metadata is more descriptive for things like notices, but the intent of noprint is much clearer.
<span class="noprint"><a href="#"> will not show up when printed </a> </span>
-
