Wikipedia:WikiProject Usability/HTML: Difference between revisions

Revision as of 22:05, 28 January 2007

Revision as of 19:37, 23 February 2008

Line 1:

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 [[Cascading Style Sheets|CSS]] through the <ttcode>style="<var>[…]</var>"</ttcode> and <ttcode>class="<var>[…]</var>"</ttcode> elementsattributes.

{{TOCright}}

Wikipedia allows the use of [[HTML]] directly, and the use of [[Cascading Style Sheets|CSS]] through the <tt>style="[…]"</tt> and <tt>class="[…]"</tt> 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

Line 11 ⟶ 10:

== Why HTML should be used conservatively ==

HTML makes the edit pages hard to read for many users, 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.

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. <code><nowiki><em>italicsemphasised text</em></nowiki></code>, and it will show up <em>as the tags defined it</em>. Most HTML elements, like bold<code><nowiki><b></nowiki></code> (strong, bbold), italic<code><nowiki><i></nowiki></code> (emitalics), i)<code><nowiki><ul></nowiki></code>, list<code><nowiki><ol></nowiki></code> (and <code><nowiki><li></nowiki></code> (lists), heading (<code><nowiki><h1></nowiki></code>, <code><nowiki><h2...></nowiki></code>, … (headings) and even <code><nowiki><table></nowiki></code> (tabletables) have their equivalent in the markupwikicode, so should be avoided in the main space. The CSS, which youprovides canpresentational thinkhints offor asuser theagents "display(like properties"browsers), may be added to the markup itself -– this is covered later.

Sometimes, however, there isn't any appropriate wikicode for what you want to mark up. In this situation, there are two possible contexts, block and inline. Paragraphs, headings, lists and tables are block elements (they start on a new line), <code><nowiki><b></nowiki></code> & <code><nowiki><i></nowiki></code> are inline elements. In each context, there is a generic HTML element available:

HTML is simple to use - just put a pair of tags around some text, e.g. <nowiki><em>italics</em></nowiki>, and it will show up <em>as the tags defined it</em>. 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.

*<code><nowiki><span></nowiki></code>: inline

*<code><nowiki><div></nowiki></code>: block

These span and div tags need <code>class</code> or <code>style</code> attributes to change the appearance of the page.

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:

:<code><nowiki><span class="noprint" style="color:red;"></nowiki>red text that does not show up when printed<nowiki></span></nowiki> </code>

*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:

:<nowiki><span class="noprint" style="color:red">red text that does not show up when printed</span></nowiki>

produces

:<span class="noprint" style="color:red;">red text that does not show up when printed</span>.

Where possible, an appropriate class should be used instead of inline styles, to avoid clutter in the edit window and to be able to change the appearance of, for example, all [[Wikipedia:article message boxes|article message boxes]] at once.

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.

TheHowever, stylewhen you ''must'' use inline styles, you can do this. attributeThey takestake the following form of: <? code>style="<var>p</var>: <var>v</var>; <var>p</var>: <var>v</var>; p: v"<var> …</?var>"</code>, -where <var>p</var> is beinga property, and <var>v</var> beingthe value you want to assign to that property.

=== List of style properties ===

Before listing properties, you should get to know how to represent certain values:

*Color maycan be represented using hex[[hexadecimal]] formnumbers between 00 and ff (#rrggbb, e.g. #000000 beingis black, #ff0000 beingis red, for#00ff00 is green, #0000ff is blue, exampleetc.), or using names (red, green...)

*Size can be represented using [[em (typography)|em]], [[percent|%]] and [[pixel|px]], among others.

*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".

==== Basic properties ====

''Please note: this page does not want to encourage the use of bright, or non-standard colors. They are used for clearer examples. Please see [[Wikipedia:WikiProject Usability/Color]]''

<!-- you'll note how messy this section looks in the editor, due to all the code -->

* <code>'''"color: [<var>color]</var>;"'''</code> -– the foreground color.

** <ttcode><nowiki><span style="color:red;">test</span></nowiki></ttcode> -->→ <span style="color:red;">test</span>

* <code>'''"background: [<var>color]</var>;"'''</code> -– 'shorthand' for several background properties, includingnotably image. Used forthe background color.

** <ttcode><nowiki><span style="borderbackground: 2px outset cyanblack; backgroundcolor:yellow#ff0000;">test</span></nowiki></ttcode> -->→ <span style="borderbackground: 2px outset cyanblack; backgroundcolor:yellow#ff0000;">test</span>

* <code>'''"border:''' [<var>thickness]</var> [<var>type]</var> [<var>color]</var>;"'''</code> -– the border: color, thickness, type and thickness. Type may be solid, inset, outset, dashed, and others.

* '''"background: [color];"''' - 'shorthand' for several background properties, including image. Used for background color

** <ttcode><nowiki><span style="backgroundborder:black 2px outset cyan; colorbackground:#ff0000yellow;">test</span></nowiki></ttcode> -->→ <span style="backgroundborder:black 2px outset cyan; colorbackground:#ff0000yellow;">test</span>

** <ttcode><nowiki>foo<span style="border: 1px soliddashed red; paddingbackground: 1emwhite;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px soliddashed red; paddingbackground: 1emwhite;">test</span>bar

** <ttcode><nowiki>foo<span style="border: 1px solid red; paddingbackground: .1em 1emtransparent;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; paddingbackground: .1em 1emtransparent;">test</span>bar

*** You'll note that "transparent" is used for the background here. The standard background ofon wikipediaWikipedia – apart from the main space – is #f8fcff, so if you put "white" and neglect the border, you <span style="background:white;">may notice a very slight (but inappropriate) difference in color</span>. Transparent should be used, or no background property should be specified (result is the same).

* '''"border:''' [thickness] [type] [color];" - the border: color, thickness, type. Type may be solid, outset, dashed, and others

* <code>'''"padding: [size]<var>thickness</var>;"'''</code> - usually,– the "spacing" on the ''inside'' of the border. 1, 2, 3 or 4 sizes may be specified., for the four sides of the element.

** <tt><nowiki><span style="border: 2px outset cyan; background:yellow;">test</span></nowiki></tt> --> <span style="border: 2px outset cyan; background:yellow;">test</span>

** <ttcode><nowiki>foo<span style="border: 1px dashedsolid red; backgroundpadding:white 1em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px dashedsolid red; backgroundpadding:white 1em;">test</span>bar

** <ttcode><nowiki>foo<span style="border: 1px solid red; backgroundpadding:transparent .1em 1em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; backgroundpadding:transparent .1em 1em;">test</span>bar

*** Two values: [top/ & bottom] [right/ & left].

*** 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 <span style="background:white;">may notice a very slight (but inappropriate) difference in color</span>. Transparent should be used, or no background property should be specified (result is the same).

** <ttcode><nowiki>foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar

*** Three values: [top] [right & left] [bottom].

** <ttcode><nowiki>foo<span style="border: 1px solid red; marginpadding: 0em.1em -.3em5em 1em 2em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; marginpadding: 0em.1em -.3em5em 1em 2em;">test</span>bar

* '''"padding: [size];"''' - usually, the "spacing" on the ''inside'' of the border. 1, 2, or 4 sizes may be specified.

** <tt><nowiki>foo<span style="border: 1px solid red; padding: 1em;">test</span>bar</nowiki></tt> --> foo<span style="border: 1px solid red; padding: 1em;">test</span>bar

** <tt><nowiki>foo<span style="border: 1px solid red; padding: .1em 1em;">test</span>bar</nowiki></tt> --> foo<span style="border: 1px solid red; padding: .1em 1em;">test</span>bar

*** Two values: [top/bottom] [right/left].

** <tt><nowiki>foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar</nowiki></tt> --> foo<span style="border: 1px solid red; padding: .1em .5em 1em 2em;">test</span>bar

***Four values: [top] [right] [bottom] [left] (clockwise).

* <code>'''"margin: [size]<var>thickness</var>;"'''</code> - 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, 3 or 4 sizes may be specified, exactly as in "padding". Many browsersuser agents will ignore "<code>top</code> and <code>bottom"</code> for margins on ''inline'' elements.

** <code><nowiki>foo<span style="border: 1px solid red; margin: 1em;">test</span>bar</nowiki></code> → foo<span style="border: 1px solid red; margin: 1em;">test</span>bar

** <code><nowiki>foo<span style="border: 1px solid red; margin: 3em 1em;">test</span>bar</nowiki></code> → foo<span style="border: 1px solid red; margin: 3em 1em;">test</span>bar

* '''"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.

** <ttcode><nowiki>foo<span style="border: 1px solid red; margin: 0em 1em 2em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; margin: 0em 1em 2em;">test</span>bar

** <ttcode><nowiki>foo<span style="border: 1px solid red; margin: 3em0em 1em 2em 3;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; margin: 3em0em 1em 2em 3em;">test</span>bar

** <ttcode><nowiki>foo<span style="border: 1px solid red; margin: 0em 1em 0em 2em-.3em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; margin: 0em 1em 0em 2em-.3em;">test</span>bar

** <tt><nowiki>foo<span style="border: 1px solid red; margin: 0em -.3em;">test</span>bar</nowiki></tt> --> foo<span style="border: 1px solid red; margin: 0em -.3em;">test</span>bar

=== List of classes ===

{{main|Wikipedia:Catalogue of CSS classes}}

* syntax: <code>class="<var>class₁</var> <var>class₂</var> …"</code>

* class="<code>noprint"</code> and class="<code>metadata"</code> -&ndash; will not get printed onto paper. Metadata<code>metadata</code> is more descriptive for thingsactual metadata, like notices, but the intent of noprint is much clearer.

**

** <code><nowiki><span class="noprint">This will not show up when printed</span></nowiki></code> → <span class="noprint">This will not show up when printed</span>

<tt><nowiki>

<span class="noprint"><a href="#"> will not show up when printed </a> </span>

</nowiki></tt>

-

<span class="noprint">will not show up when printed</span>

== See also ==