Wikipedia:WikiProject Usability/HTML: Difference between revisions

Revision as of 13:14, 23 December 2005

Revision as of 19:22, 10 January 2006

Line 17:

== HTML and CSS primer ==

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 equivalent in the markup, so should be avoided. The CSS, which you can think of as the "display attributesproperties" 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:

Line 31:

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

=== List of style attributesproperties ===

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

==== Basic attributesproperties ====

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

Line 55:

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

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

*** 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 attributeproperty should be specified (result is the same).