Wikipedia:WikiProject Usability/HTML: Difference between revisions

Revision as of 03:48, 30 June 2005

Latest revision as of 13:47, 24 May 2014

(20 intermediate revisions by 16 users not shown)

Line 1:

{{cleanup|date=November 2010}}

<div style="float:right;">__TOC__</div>

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

Wikipedia allows the use of [[HTML]] directly, and the use of [[CSS]] through the <tt>style="[…]"</tt> and <tt>class="[…]"</tt> elements.

Wiki supports a subset of [[XHTML]], e.g. '''&lt;br&#160;/&gt;''' instead of '''&lt;br&gt;'''.

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.

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 compatabilitycompatibility

<br style="clear:both;" />

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

HTML is simple to use - just put a pair of tags around some text, e.g. <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.

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

produces

**Bold, italic and underline are examples of inline elements.

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

*The div tag describes block level elements, so portions of text that have the equivelant of a linebreak before and after them.

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.

**Lists, tables, headings, and paragraphs are examples of block level elements.

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.

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.

=== List of style attributesproperties ===

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

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

=== List of style attributes ===

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

==== Basic attributesproperties ====

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

''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_UsabilityWikiProject Usability/Color]]''

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

<!-- 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 innapropriateinappropriate) difference in color</span>. Transparent should be used, or no background attributeproperty 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 innapropriate) difference in color</span>. Transparent should be used, or no background attribute 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 0em.5em 1em 2em;">test</span>bar</nowiki></ttcode> -->→ foo<span style="border: 1px solid red; marginpadding: 0em .1em 0em.5em 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.

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

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

== See also ==

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

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

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

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

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

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

[[Category:WikiProject Usability|HTML]]

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

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