Wikipedia:WikiProject Usability/HTML: Difference between revisions

Revision as of 20:21, 29 June 2005

Latest revision as of 13:47, 24 May 2014

(30 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:

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.

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

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" style="color:red;"></nowiki>red text that does not show up when printed<nowiki></span>. </nowiki></code>

produces

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

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.

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.

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

==== BasicList attributesof style properties ====

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

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

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

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

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

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

==== Basic properties ====

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

''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]]''

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

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

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

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

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

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

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

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

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

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

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

** <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 innapropriateinappropriate) difference in color.</span>. Transparent should usually be used, or no background property should be specified (result is the same).

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

* <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>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>foo<span style="border: 1px outsetsolid bluered; backgroundpadding:yellow 1em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px outsetsolid bluered; backgroundpadding:yellow 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].

** <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 style attributesclasses ===

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

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

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

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

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

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

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

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

=== ListSee ofalso classes ===

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