Wikipedia:WikiProject Usability/HTML: Difference between revisions
Content deleted Content added
created page |
|||
Line 7:
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.
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
*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. 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. The style attribute takes the form of: <? style="a: v; a: v; a: v"> </?> - a being attribute, v being value.
=== List of style attributes ===
<!-- you'll note how messy this section looks in the editor, due to all the code -->▼
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...)
Line 20 ⟶ 28:
==== Basic attributes ====
▲<!-- you'll note how messy this section looks in the editor, due to all the code -->
* '''"color: [color];"''' - the foreground color.
** <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
** <tt><nowiki><span style="background:black; color:#ff0000;">test</span></nowiki></tt> --> <span style="background:black; color:#ff0000;">test</span>
* '''"border:''' [thickness] [type] [color];" - the border: color, thickness, type. Type may be solid, outset, dashed, and 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>
Line 29 ⟶ 41:
** <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 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.
** <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
Line 35 ⟶ 48:
** <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).
* '''"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.
** <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
| |||