Wikipedia:WikiProject Usability/HTML: Difference between revisions

Revision as of 20:17, 29 June 2005

Latest revision as of 13:47, 24 May 2014

(31 intermediate revisions by 17 users not shown)

Line 1:

{{cleanup|date=November 2010}}

Wikipedia allows the use of [[HTML]], and through the style="" and class="" elements, the use of [[CSS]]. The use of HTML instead of [[Wiki markup]] is strongly discouraged, because it 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.

{{Wikipedia:WikiProject Usability/Navigation menu | Miscellaneous}}

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 <code>style="<var>[…]</var>"</code> and <code>class="<var>[…]</var>"</code> attributes.

However, occasionally, such as when you are creating tables, notices, and so on, for which there is no markup defined, it must be used.

We believe that:

== Primer ==

* The use of HTML instead of [[Wiki markup]] is discouraged

* If HTML and CSS ''must'' be used, editors should know how to use them properly, with regard to:

** [[W3C]] standards

** Cross-browser compatibility

== Why HTML should be used conservatively ==

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

Wikipedia allows the use of [[HTML]], and through the style="" and class="" elements, the use of [[CSS]]. The use of HTML instead of [[Wiki markup]] is strongly discouraged, because it 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.

However, occasionallyOccasionally, such as when you are creating tables, notices, and so on, (for which there is no markup defined,) itHTML/CSS must be used.

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.

== HTML and CSS primer ==

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

HTML is simple to use - just put a pair of tags around asome wordtext, e.g. <code><nowiki><iem>italicsemphasised text</iem></nowiki></code>, and it will show up <iem>as the tags defined it</iem>. 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 equivelantequivalent in the markupwikicode, so should be avoided in the main space. The CSS, which youprovides canpresentational thinkhints offor asuser theagents "display(like attributes"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:

The style attribute takes the form of: <? style="a: v; a: v; a: v"> </?> - a being attribute, v being value.

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

=== List of style attributes ===

** :<code><nowiki><span class="noprint">will not show up when printed</spanstyle="color:red;"></nowiki>red -text <spanthat class="noprint">willdoes not show up when printed<nowiki></span></nowiki></code>

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

produces

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

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

*Color may be represented using hex form (#000000 being black, #ff0000 being red, for example), or using names (red, green...)

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.

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

However, when you ''must'' use inline styles, you can do this. They take the following form: <code>style="<var>p</var>: <var>v</var>; <var>p</var>: <var>v</var>; <var>…</var>"</code>, where <var>p</var> is a property and <var>v</var> the value you want to assign to that property.

==== Basic attributes ====

* '''"color: [color];"''' - the foreground color.

=== List of style attributesproperties ===

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

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

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

** <tt><nowiki><span style="background:black; color:#ff0000;">test</span></nowiki></tt> --> <span style="background:black; color:#ff0000;">test</span>

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

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

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

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

** <tt><nowiki><span style="border: 1px dashed red; background:white;">test</span></nowiki></tt> --> <span style="border: 1px dashed red; background:white;">test</span>

==== Basic attributesproperties ====

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

''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 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 innapropriate) difference in color.</span> Transparent should usually be used.

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

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

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

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

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

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

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

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

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

** <ttcode><nowiki><span style="background:black; color:#ff0000;">test</span></nowiki></ttcode> -->→ <span style="background:black; color:#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.

** <ttcode><nowiki><span style="border: 1px2px outset bluecyan; background:yellow;">test</span></nowiki></ttcode> -->→ <span style="border: 1px2px outset bluecyan; background:yellow;">test</span>

** <ttcode><nowiki><span style="border: 1px dashed red; background:white;">test</span></nowiki></ttcode> -->→ <span style="border: 1px dashed red; background:white;">test</span>

** <ttcode><nowiki>foo<span style="border: 1px solid red; background:transparent;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; background:transparent;">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 innapropriateinappropriate) difference in color.</span>. Transparent should usually be used, or no background property should be specified (result is the same).

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

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

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

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

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

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

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

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

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

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

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

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

** <code><nowiki>foo<span style="border: 1px solid red; margin: 0em -.3em;">test</span>bar</nowiki></code> → 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>

* <code>noprint</code> and <code>metadata</code> &ndash; will not get printed onto paper. <code>metadata</code> is more descriptive for actual 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>

== PrimerSee also ==

* [[meta:Help:HTML in wikitext]]

[[Category:WikiProject Usability|HTML]]

* class="noprint" - will not get printed onto paper.

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