Jump to content

Wikipedia:WikiProject Usability/HTML

Add links
From Wikipedia, the free encyclopedia
< Wikipedia:WikiProject Usability
This is an old revision of this page, as edited by M~enwiki (talk | contribs) at 21:53, 29 June 2005 (→HTML and CSS primer). The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

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 properly, with regard to:
    • W3C standards
    • Cross-browser compatability

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.

HTML and CSS primer

HTML is simple to use - just put a pair of tags around some text, e.g. <i>italics</i>, 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 equivelant in the markup, so should be avoided. The CSS, which you can think of as the "display attributes" 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 equivelant 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

red text that does not show up when printed.

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="a: v; a: v; a: v"> </?> - a being attribute, v being value.

List of style attributes

Before listing attributes, 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 replesents one "height of the font used" - if it were used here, the height of this letter "l".

Basic attributes

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 innapropriate) difference in color. Transparent should usually be used.
  • "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

List of classes

  • class="noprint" - will not get printed onto paper.
    • <span class="noprint">will not show up when printed</span> - will not show up when printed
Retrieved from "https://en.wikipedia.org/w/index.php?title=Wikipedia:WikiProject_Usability/HTML&oldid=17856279"