User:Sondrest/sandbox
 |
This is the print version of User:Sondrest/sandbox You won't see this message or any elements not part of the book's content when you print or preview this page. |
The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/Sondrest
Emphasis and Links
Samples of text emphasis
Wikitext is simple and easy to learn, allowing beginners to create effective pages quickly. Although it may not offer the extensive design and layout capabilities found in some other languages, its ease of use is a significant advantage. Advanced users can enhance their pages by combining wikitext with HTML and inline styles, overcoming some of its limitations.
One of the most common tasks in web writing is applying text emphasis, which refers to adding typographic emphasis rather than stylistic emphasis of the work. Additionally, creating internal links (known as wikilinks) is a basic skill that is widely used. Both text emphasis and wikilink creation are covered below. For more advanced topics, readers can explore the additional links provided on the page.
Text emphasis
[edit | edit source]Like in HTML, text can be made bold and italic. However, in Wiki the syntax is quite different.
Making italics
[edit | edit source]To make text italic, one places two single quotes or apostrophes (') on each side of the text. For example, if one writes this:
''Wikibooks are great !''
one will get this:
Making bold text
[edit | edit source]To make bold text that will stand out from your text, one places three single quotes or apostrophes around the text. Again, if you write this:
'''Wikibooks are great !'''
you will get this:
If you want to make your text bold and italic at the same time, put five (3 + 2) single quotes on each side of the text. If you write this:
'''''Bold and italic stands out too !'''''
you get this:
Underlining text
[edit | edit source]Underlining text is not strictly an emphasis matter, but it is a related method.
To make any part of your text underlined, the best way is to add a pair of HTML tags to the text. The tags can be used in combination with the other emphasis methods by nesting them. If you write this:
The <u>underlined</u> part gets attention.
You get this:
And we can mix these methods like this - if you write the following:
''Emphasis of '''text <u>is</u> important.''' ''
You get this:
Subscripts and superscripts
[edit | edit source]At times it is useful to place a smaller letter above the other text or below it. The former is called a superscript and the latter a subscript. Both find use in marking work with reference numbers; numbers that relate to lists at the end of a page where further details can be found.
The code to produce these effects is made with the HTML tags
<sup>
and
<sub>
respectively. The following code shows what to type and gives the result of doing so.
If you type either of these:
Sample text<sup>321</sup>
Sample text<sub>123</sub>
The results look like this:
Sample text123
Superscript and subscript tags are often added to the text intended to be displayed as hyperlinks, so that the displayed reference number can be selected to go directly to another page.
Drop capitals
[edit | edit source]rop capitals add emphasis to text, in that they draw the eye to the start of a section. They often find application where there is no formal heading style in use. In the past they have been found mainly in art works though the rules for their use are by no means clear. There is no general wikitext code to insert a drop capital, but there is a template, {{drop}}.
The first character of the preceding paragraph has an example of a drop capital, and the box below shows what to type in the editing window to make it work:
{{drop|D}}rop capitals add emphasis to text...
Notice that the whole template code is enclosed in double curly brackets, and the idea is to make a drop capital from the first letter of the paragraph, the letter 'D'. The name of this template is Drop, and this name comes first in the brackets; then there is a pipe symbol separator; then the letter to enlarge comes next. Notice that the follow-on text is written hard against the closing brackets; do not leave a space. If the next character is a space, just ignore it and close-up to the first non-space character; this avoids layout problems.
Finding the pipe symbol (|) can be difficult on some keyboards, and it is often found on a different key than the one indicated. In case of difficulty, it is included in a selection of symbols to be found at the foot of every editing page.
Summary
[edit | edit source]There are other results to be had by adding quotes, though they merely serve to place the results already mentioned into parenthesis. It is perhaps interesting to note that getting bold or italic text into double quotes on a page is not among these examples. Refer to the table below for a summary of the useful emphasis options.
| Wikitext | Result | HTML Equivalents | Description |
'Text'
|
'Text' | 'Test'
|
quotation marks use one set of quotes |
''Text''
|
Text | <i>Text</i>
|
italics use two sets of quotes |
'''Text'''
|
Text | <b>Text</b>
|
bold uses three sets |
''''Text''''
|
'Text' | <b>'Text'</b>
|
bold-in-quotes uses four sets |
'''''Text'''''
|
Text | <b><i>Text</i></b>
|
bold-italics use five sets |
''''''Text''''''
|
'Text' | <b><i>'Text'</i></b>
|
bold-italics in quotes uses six |
'''''''Text'''''''
|
''Text'' | <b><i>''Text''</i></b>
|
bold-italics in double quotes uses seven |
Making wikilinks
[edit | edit source]Pages have blue links in them, called links or wikilinks. They allow users to click them with the mouse to go to the linked pages, and knowing how to set these links in a page can add useful content to the work.
The blue text can say anything; it does not need to have the same wording as the link address. There are two variations of links; one is an external link, and the other is an internal link.
- External means on an outside website, for example, Google, Wikipedia, etc., where the server's address is different to that of Wikibooks.
- Internal means under the same Wiki project. Here it means belonging to the WikiBooks server and its folders.
Although external links always use the full web address, internal links need only a short address. In fact, one way to make internal links uses a full local path, the path that complements the front end address below.
Wikibooks addresses for pages can be found from the address bar at the top of any browser, and the front end of all of our Wikibooks addresses will be found to start with:
http://en.wikibooks.org/wiki/
In Wikibooks, the folder that follows such a front end will contain the so-called home page, (e.g. Bicycles), and pages beyond the home page will be found in its sub-folders.
Refer to Figure 1 for a file tree that shows a typical folder structure.
It is as well to mention, for those who are more familiar with command-line paths, that for fully-expressed external links, it is only necessary to access the containing folders of html pages, and not the html files themselves; the files within these folders are set to open by default when the folders are accessed. The folders have the same names as the default html pages within them. Also, for all web addressing, folder separators are forward-slashes (/), not the back-slashes (\) of the command-line.
This section shows the simplest ways to make effective page links (anchors), that will always work, both external and internal, and gives some notes on shortened addressing methods for those who prefer them.
External links
[edit | edit source]To make an external link to another website from any page location, just enclose the full URL address of the site in single square brackets. The browser's address bar gives the full address to use in this case, so confusion rarely results. For example, to make a link to the Google search page somewhere in this Emphasis and Links page, use the following Wikitext:
[http://www.google.co.uk/]
This gives a link that looks like this:
Notice that there is a blue link and that there is a symbol with a number. You can check that the link works by clicking it. The number is there because the program was not told what text should be displayed for the link. You can have any text in place of the number by adding it after the URL; separate the two with a single space. In addition, it is as well to note that this added text can be formatted with Wikitext or HTML in the usual ways. For example, to make the text for the link say 'Google Search Engine', and to set it in italics at the same time, write the following:
[http://www.google.co.uk/ ''Google Search Engine'']
Now the link looks like this:
It will have occurred to some that an external link could be made even for internal pages, since every wiki page has a fully expressed URL address. This is indeed the case, and some resort to it when their internal links fail. However, it is better to use internal links within the server domain, since their use involves less work for the system.
It might be of interest to know that internal links are converted to fully expressed URL's before the wiki software sends the HTML source code to each browser, and that the notion of relative addresses for internal page links is essentially an in-house convenience.
Finally, it is possible to link not only to a page, but to go directly to a section within a page. This is done by adding the text of the section heading at the end of the address, separated by a hash sign. For example, to go directly to the Links and URLs section heading of Wikipedia's How to Edit a Page, use the following Wikitext:
[http://en.wikipedia.org/wiki/Wikipedia:How_to_edit_a_page#Links_and_URLs ''Links and URLs'']
Now the link becomes this:
The above examples summarize the methods for making fully-expressed external links, and in the next section can be found a fairly foolproof method for making internal links.
Internal links
[edit | edit source]http://en.wikibook.org/wiki/
- Bicycles
- Maintainance and repair
- Brakes
- Adjusting brakes
- Derailleurs
- Rear Derailleur Adjustment
- Wheels and tires
- Fixing a flat
- Inflating tires
- Brakes
- Maintainance and repair
Fig 1: Folder path for the internal links.
By far the most common task for an internal link is to link to another WikiBooks main page, sometimes called a home page. Refer to the folder tree in figure one. Notice that the address at the top of the tree is the Wikibooks front-end or root address, and that the first folder after that is called Bicycles. The Bicycles folder contains the home page of the bicycles subject, that opens by default when the folder is opened, and all other bike pages can be found below that in the folder tree. To make a link to any home page within WikiBooks just write the name of the page that you want to go to, the destination or target page, in double square brackets. The text to appear on the link in blue text, is added after the name, separated with a pipe symbol. Thus, a link to Bicycles made in this way in any WikiBooks page looks like this:
[[Bicycles|''Bikes'']]
And this is the result:
To continue with the Bicycles folder tree, but where the required link is to a page deeper in the Bicycles file tree, (again, from any page in Wikibooks), we simply extend the folder path to include all of the folders up to and including the one that holds the page of interest; Consider a link to Adjusting brakes; it looks like this:
[[Bicycles/Maintenance_and_Repair/Brakes/Adjusting_brakes|''Adjusting Brakes'']]
And this is the link that is produced:
In general, it is true to say that an effective internal link can always be made by writing a folder path from the external address's home page onwards; that is, from the folder that follows the wiki folder. Compare the full external web-page path below against the internal path that starts from the home folder Bicycles to see that this is so:
[http://en.wikibooks.org/wiki/Bicycles/Maintenance_and_Repair/Brakes/Adjusting_brakes]
[[Bicycles/Maintenance_and_Repair/Brakes/Adjusting_brakes]]
Moving on, it is possible to link directly to a page section, by adding the text of the section heading separated by a hash symbol. For example, this example makes a link directly to the Block Clearance section.
[[Bicycles/Maintenance_and_Repair/Brakes/Adjusting_brakes#Block_Clearance|''Bicycle Brakes' Block Clearance'']]
And this is the link that is produced:
Within the page
[edit | edit source]A common task is to link to another point within the same page. Experiment will show that an internal section link of the kind shown above is the best way to make it. For example, the code for a link to show somewhere on this page, that will go directly to the section Making Italics is written as:
[[#Making Italics|''Making Italics'']]
And it makes this link:
Using dot-slash
[edit | edit source]http://en.wikibook.org/wiki/
- Text (folder with home page)
- Emphasis
- Bolding
- Italics
- Underlines
- Tables
- Emphasis
Fig 2: Folders used for the dot-slash examples.
The full-folder form of the internal link is discussed in an above section, and such addressing methods will always be able to make an effective link. At times there is a dot and forward slash notation used to make internal links, and these are further examples of relative addressing, in as much as they can sometimes make do without the directory name, and are stated with respect to the page that contains the link. The stated advantage of relative addressing is that a directory name might be changed without having to rewrite the link. In WikiBooks however, pages are usually redirected rather than renamed, so the examples below are more to explain the use of such notation as opposed to fulfilling any essential need.
The coding of internal links depends on where the target page is in the file tree. compared to the page that is to hold the link. There are three such scenarios using dot-dash notation, as opposed to the conventional methods:
- On the same branch but at a lower level.
- On the same branch but at a higher level.
- In the same tree but on a different branch.
Target lower on the same branch
[edit | edit source]Refer to the drawing of the file trees. Assume that the object is to make a link on the page Emphasis that goes to the page Italics. There are two ways to do this; the first is to use the foolproof method, using the whole internal folder path that follows the wiki folder, like this:
[[Text/Emphasis/Italics|Italic Text]]
and the second way is to write the internal address relative to the page that will hold the link, like this:
[[/Italics/|Italic Text]]
This shortened version is preceded by a forward-slash; this means in this format, go to the folder that contains this page. In this case, this page means the page with the link, Emphasis. Then the forward path from there is expressed, up to and including the folder that will be accessed. The path is closed with a forward-slash.
Target higher on the same branch
[edit | edit source]Refer to the drawing of the file trees. Assume that the object is to make a link on the page Bolding; the page to go to is Text. This time the directory is two levels higher, (towards the root), than the page to hold the link. The notation with two dots followed by a forward-slash means; go back to the previous directory; thus, we need two sets of these to go to the Text level.
Use the Wikitext:
[[../../|Text]]
Note that a full internal address would function just as well in all of these cases.
Target on another branch of the same tree
[edit | edit source]Refer to the drawing of the file tree in figure two. Assume that the object is to make a link on the page Underlines; the target address is to be Tables. These are on different branches. The path needs to be described starting from the main Text home page but that page is two levels higher. Use the dot notation again to denote a shift to the home page, followed by the rest of the path to Tables
Use the Wikitext:
[[../../Tables|All About Tables]]
These examples show how the dot-slash notation is used. Even if the folders described in these links change their names, then provided that their relative positions stay the same, the links will still work.
Interwiki links
[edit | edit source]To sister projects
[edit | edit source]Use the project or its abbreviation in prefix:
[[wikipedia:Text]]
[[w:Text]]
To another Wikibooks
[edit | edit source]The language prefix must be preceded by ":" to avoid the link to be deported to the sidebar, which represents a page association normally dedicated to Wikidata.
[[:fr:Text]]
Indents and Lists
In common with word processors, Wikitext allows the use of paragraph indents and various kinds of bullet and numbered lists. The few examples below show how it is done.
Indents are broadly similar to the idea of tabs on a word processor, though they can be used only at the start of a line.
Numbered lists find use in formal listings such as legal documents, and in specifications and other texts where paragraph reference numbers might be quoted. Bullets are much used in lists of hyperlinks, and in many summaries.
An introduction to HTML lists has been included, since this method alone allows the use of the alphabet and Roman numbers for list labels.
Indentation
[edit | edit source]Indentation means increasing a paragraph's left margin. In wikitext this TAB character is the colon. When a colon is added before the start of a paragraph, the whole paragraph will be moved in by one TAB stop. To move the paragraph further, simply add more colons. Here is the text to indent three short paragraphs:
:This was given ''one'' indent ::This was given ''two'' indents :::This was given ''three'' indents
and the result of doing so is:
- This was given one indent
- This was given two indents
- This was given three indents
Note that indents are often used in combination with other symbols such as bullets; when they used in this way the indents should be written first, then the bullets.
Lists
[edit | edit source]The table of contents found on each page is handled automatically by the software and is not accessible using the list syntax. This subject refers to user-made lists within the text.
Lists are useful for short comments and summaries and are easy to make.
Numbered Lists
[edit | edit source]To make an automatically numbered list of the first order, just add a hash symbol, sometimes called an octothorp or number sign, before each line of the list. It looks like this:
#The First Item
#The Second Item
#The Third Item
#The Fourth Item
#The Fifth Item
The result is this:
- The First Item
- The Second Item
- The Third Item
- The Fourth Item
- The Fifth Item
To add a second order of numbering to the list, give the sub-items two hash symbols. The sub-item will then indent itself beneath the level one list item that resides above it. Additional levels of listing are made by adding more hash symbols. Here is an example:
#The First Item
##Sub Item
#The Second Item
#The Third Item
##Sub Item
###Sub-sub Item
#The Fourth Item
#The Fifth Item
The result of this wikitext coding is:
- The First Item
- Sub Item
- The Second Item
- The Third Item
- Sub Item
- Sub-sub Item
- Sub Item
- The Fourth Item
- The Fifth Item
Bullet Lists
[edit | edit source]Bullet lists are used more often than numbered lists, perhaps because they are less formal. The bullet lists make blue square bullets against each item in the list. It is done by adding an asterisk before each list item. Additional levels of listing are made by adding more asterisks. Using the same theme as above, consider the following text:
*The First Item
*Sub Item
*The Second Item
*The Third Item
**Sub Item
***Sub-sub Item
*The Fourth Item
*The Fifth Item
The result of this text listing is:
- The First Item
- Sub Item
- The Second Item
- The Third Item
- Sub Item
- Sub-sub Item
- Sub Item
- The Fourth Item
- The Fifth Item
Since lists are made up of paragraphs, it is a simple matter to add colons for indentation before the list code to shift each list item further across the page. Colons need added to each list item for this effect.
Definition Lists
[edit | edit source]Definition lists are usefully formatted for their purpose. They have a bold heading, followed by a normal text section on the lines that follow. Their name is self explanatory, for these lists are ideal for defining terms. They can be made in both HTML and Wikitext but only the simpler wikitext version is explained here. Note that the method needs only the semi-colon and the full-colon for its effect. The following text entry shows how to make list items:
;Mono-spaced fonts:A mono-spaced font is so-named because every glyph in the set has equal width... ;Proportional fonts:Proportional fonts are made with glyphs of different width... ;WikiBooks house font:The WikiBooks house font is 9 point ''Arial'' roman, a proportional font with a particularly clear style...The quick brown fox jumps over the lazy dog's back. The quick brown fox jumps over the lazy dog's back.
The result of this text listing is:
- Mono-spaced fonts
- A mono-spaced font is so-named because every glyph in the set has equal width...
- Proportional fonts
- These fonts are made with glyphs of different width...
- WikiBooks house font
- The WikiBooks house font is 9 point Arial roman, a proportional font with a particularly clear style...The quick brown fox jumps over the lazy dog's back. The quick brown fox jumps over the lazy dog's back.
Note that wrapped lines are also indented.
Other Ordered Lists
[edit | edit source]Alpha and Roman lists need HTML formats. These other list types are easily made in HTML, as well as the more usual numbered lists. In addition, their starting points can be preset.
The rules for making these alternative lists are as follows:
- Ordered lists are enclosed in the tags
<ol></ol>. - Each list item must start with the tag
<li>. - The list format is set as follows in the leading
<ol>tag with the type attribute. See the drop-box for examples.- Numbering is set with type=1; the number one.
- Lower case alphabet is set with type=a
- Upper case alphabet is set with type=A
- Lower case Roman numbers are set with type=i
- Upper case Roman numbers are set with type=I; the capital letter.
- The start value is also set in the leading
<ol>tag, with the start attribute. See the drop-box for examples.- Numbered lists use the intended start integer as a value. If omitted, the default is always equivalent to the first character of the intended set, as decided by type.
- Alpha lists use the alphabet position value; e.g. start=3 for 'c'.
- Zero and negative start values have no meaning except for numbered lists.
- Arbitrary list labels can be set in any
<li></li>tag with the value attribute. The label must belong to the selected type. For example, if type is for an alphabetic list, an arbitrary Roman number would be inappropriate.- Values are numbers representing the position in the type set; e.g. 3 for 'c' .
- The start attribute should be omitted for this method; avoids confusion.
- List items without values will follow-on from the previous label.
In the event that list-making adversely affects follow-on text, ensure that there is a blank line or a break tag between the two. Examples of HTML list formats can be found in the examples below.
Consider the following example. The sample code uses type=a to choose lower case alpha listing and the entry start=2 sets the starting point as the second letter of the alphabet; the letter b.
<ol type="a" start="2">
<li> These listing labels use lower case alphabet.
<li> This list starts with the ''second'' letter of the alphabet.
<li> Change ''type'' and ''start'' value for different formats.
</ol>
When the code runs it looks like this:
- These listing labels use lower case alphabet.
- This list starts with the second letter of the alphabet.
- Change type and start value for different formats.
HTML List Options and Examples
[edit | edit source]The HTML List Code
[edit | edit source]<ol type="a" start=1>
<li> This is the first item for lower case alpha starting with 'a'.
<li> This is the second item.
<li> This is the last.
</ol>
HTML List Examples
[edit | edit source]With type = 1 , (the number one), and start = 432 we obtain:
- This is the first item for numbers starting with '432'.
- This is the second item.
- This is the last.
With type = a and start = 2 we obtain:
- This is the first item for lower case alpha starting with 'b'.
- This is the second item.
- This is the last.
With type = A, and either start = 1 or not providing a value for start, we obtain:
- This is the first item of upper case starting with A.
- This is the second item.
- This is the last.
With type = i and start = 3 we obtain:
- This is the first lower case roman item starting with iii.
- This is the second item.
- This is the last.
With type = I, (the capital letter eye), and start = 2
- This is the first uppercase roman item starting with II.
- This is the second item.
- This is the last.
With type = 1, (the number one), and start = -29
- This is the first number starting with -29.
- This is the second item.
- This is the last.
With type = 1, (the number one), and start = -1
- This is the first number starting with -1.
- This is the second item.
- This is the last.
Proper reversed lists will become a part of HTML5. See Reversed Lists.
The various listing options are easily changed, and an alternative method for simple numbering of lines can be found in Numbered Prose. Although bullet lists can be made in HTML by setting the list items in <ul></ul> tags instead of <ol></ol> tags, the rendering is likely to afford only the default bullet type instead of the three types that are theoretically possible. For a complete description of HTML lists refer to the external page Lists in HTML.
Headings
Formal heading styles are used in nearly all WikiBooks pages and for that matter, for all of the sister projects' pages as well. They clearly show a degree of organization in the work, and they are absolutely essential if the user intends to take advantage of the automatically generated table of contents, (TOC).
The following notes explain how to make wiki headings, and introduces the table of contents. Notes are provided on moving the TOC around, and constraining its behavior. For those who intend to put the TOC into a table cell at the top of a page, refer to Images in Containers, and Templates Ready to Use.
Heading levels
[edit | edit source]There are six levels of heading styles and all of them are made by surrounding the heading text with an appropriate number of equals signs. The HTML heading styles are equivalent and so optionally, the heading text can be surrounded by the HTML tags instead. As an example; to make a level two heading, the largest practical heading, write either of the following at the left margin:
==Heading Text==
or;
<h2>Heading Text</h2>
To make smaller headings just increase the number of equals signs, or use larger numbers in the HTML tags. It was stated above that there are six levels but the first level is usually reserved for the page heading, and making a table of contents with more that three levels can be messy. As a result it is most common to stick to levels two, three and four, or to use the HTML equivalent, h2, h3 and h4. By insuring that smaller headings come below larger headings in the text, the TOC will indent the sub-levels accordingly, and automatically insert the required links.
At times a heading is needed for text in a table. Wikitext heading codes can have an adverse effect on tables and templates. When this happens, changing to the HTML versions of the heading will often solve the problem.
The level two heading style inserts a line across the page whether it is needed or not, but to add a similar line with the other headings, just type four hyphens at the left margin as follows:
Summary of Headings
[edit | edit source]The following table contains a summary of the headings that can be made.
| Wikitext | Result | HTML | Description |
=Text= |
Text |
<h1>Text</h1> |
h1 is mostly for page headings |
==Text== |
Text |
<h2>Text</h2> |
h2 heads a section |
===Text=== |
Text |
<h3>Text</h3> |
h3 heads a subsection of h2 |
====Text==== |
Text |
<h4>Text</h4> |
h4 heads a subsection of h3 |
=====Text===== |
Text |
<h5>Text</h5> |
h5 is rarely used |
======Text====== |
Text |
<h6>Text</h6> |
h6 is rarely used |
Hiding Headings
[edit | edit source]As was mentioned above, the headings are used to make the table of contents, (TOC). Sometimes, when the TOC is looking a bit full, or when a heading does not seem to warrant listing, it would be useful to have the benefits of the heading's formats, but to miss it out on the TOC.
A set of templates has been made to do this. They are the six templates Hiddenh1 through Hiddenh6. The way to use say, a level three heading style without a TOC listing is just:
Just choose a different template for other heading sizes.
As an alternative, set the limit parameter on the table of contents to display only major headings.
Numbered Headings
[edit | edit source]Numbered headings are made only by typing them yourself, and the nested heading sizes are made in usual way.
The conventional numbering method is to assign a separate number sequence to each level of heading. Although an automatic method purports to exist in the user's preferences, it affects only the local view and will not be seen by others. A fairly standard approach for numbered headings is seen below, but the indentation that is preferred for numbered sub-sections cannot be obtained with a simple use of tags or wiki code. Templates could be made to indent the sub-sections properly, setting left margins for the paragraphs accordingly, and for those who might attempt it, the existing CSS styles for headings have been provided below.
etc.
Drop Capitals
[edit | edit source]Drop capitals are used for work where heading styles are intrusive, though the rules for their use are by no means clear.
here is no drop capital code in Wikitext at this time, but a template exists. The drop capital at the start of this paragraph was added using the Drop template. Users who need a different drop capital can find the basic coding on the template's editing window. The code used to call this template into use was just:
Notice that only the first character of the paragraph was included within the double curly brackets, and that the remainder of the text was dressed tightly to the left.
The Table of Contents
[edit | edit source]The table of contents habitually resides at the top-left of the page. In fact, it will position itself at the left margin and just above the first heading that is made. The TOC lists all of the headings and makes links to their positions in the page. Selecting a link causes the page to shift so that the selected heading is at the top of the screen. A table of contents will not be generated unless at least four headings are made.
The width and length of the TOC adjusts as more heading text is added. The width adjusts to the longest heading and the box extends downward as more headings are added. At some point the text is wrapped rather than continuously widening the box. The default behavior of the TOC is not always appropriate, so methods exist to customize it.
It is possible to remove the TOC by typing:
__NOTOC__
anywhere on the page.[1] (Note that there are two underscores on each side). The usual Wiki page includes a table of contents, but it is unclear how strict the convention is. Note the section above on Hiding Headings to avoid individual headings being added to the TOC, or the note on the limit parameter below
To move the TOC to a place that it would not normally appear, for example, in a table cell at say the top of the page, just type the following code in the cell as if it were text:
__TOC__
Such a method can be used to position the TOC with some accuracy, as well as running text or images level with it in the top section. The table of contents can only appear once; if __TOC__ is used multiple times, the first use takes priority.[1]
The template Tocright can be used to place a table of contents at the right side of the WikiBooks page. The TOC will appear adjacent to the position on the page that the template is called. To call the template type {{tocright}}. Other suitable templates for repositioning the table of contents include {{TOC}}, and {{TOC left}}. All three of these templates have a limit parameter, which allows lower-level headings to be omitted.
The colors of the TOC are fixed, set by the toc class and element ID.
CSS Heading Styles
[edit | edit source]At times, for example for templates, users need to know the details of certain wiki styles. These can be found in the wikibooks style sheets. An example of these styles for the main wiki headings can be found in the drop-box below.
|
References
[edit | edit source]- ↑ a b MediaWiki reference: mw:Help:Magic_words#Behavior_switches
Preformatted Text
Pre-formatted text is text that retains the user's original spacing and wrapping, which may not conform to typical web-page layouts. This format is often dictated by the context from which it originates, such as poetry, prose, lyrics, or programming code.
In contrast, un-formatted text relies on the software to handle text wrapping and line spacing. For instance, in wiki markup, only a single space is allowed between words or after punctuation, and one linebreak is ignored, with two line breaks required to start a new paragraph.
True pre-formatted text "preserves white-space," meaning it displays text exactly as it was typed. Several HTML-like tags are available for different kinds of pre-formatted text, preserving white-space to varying degrees, each with unique characteristics.
Pre-formatting tags
[edit | edit source] |
|
The <pre> tags provide the most general method for displaying pre-formatted text. The text to be displayed is simply enclosed in these tags and the text will appear on a grey background with a dashed blue border. An example of source code:
<pre> The time has come the walrus said to speak of many things... </pre>
that would display like this:
The time has come the walrus said to speak of many things...
A short experiment will confirm that without the tags, the lines would all display as one single line of text.
<Pre> tag summary:- They are simple to use; as such, their shortcomings are easily dismissed.
- The format looks contrived; in that it does not entirely match any page format.
- It uses the whole width of the page; even for a word or two, unless the tags are in-line styled.
- Nesting pairs of pre tags will corrupt a layout; the inner pair need to be literals. See below.
- Long lines do not wrap; though this has been corrected for recent browser versions.
- The tags can be styled with CSS properties.
- Pre-formatted text tags cannot be used within Wiki or other lists.
Nested tag problem
[edit | edit source]When a block of text within <pre> tags contains its own <pre> tags, it can cause display issues, as the browser interprets the first closing tag it encounters instead of the last. To avoid this and similar problems (e.g., with <nowiki>...</nowiki> tags), the tags must be written in their literal form rather than their usual HTML tag format.
A literal form is treated as text and not interpreted as a functional tag. To create a literal, you only need to replace all the symbols, i.e., the “less than” (<) and “greater than” (>) symbols, with their corresponding HTML character codes: < and >. This technique applies to various tags, and a table below shows some of these conversions. Notice that literals start with an ampersand symbol (&) then add other characters to it; finally a semi-colon is added. See also mw:Help:Special characters.
Additionally, if you need to display a literal itself on the page, further formatting is required using <nowiki>. For more details, look at the page markup or consult documentation on other wikis.
| HTML tag format | Literal tag format |
|---|---|
<pre>
|
<pre>
|
</pre>
|
</pre>
|
<nowiki>
|
<nowiki>
|
</nowiki>
|
</nowiki>
|
Styling tags
[edit | edit source]The appearance of tags, such as <pre>, can be modified using CSS styling. To apply styles, a CSS expression is added within the opening tag. This allows you to adjust various aspects of the text format, such as size, color, and spacing. For example, you can use the following CSS to transform the basic <pre> layout into a smaller box with colored text:
<pre style="white-space:pre-wrap; width:25%; border:1px solid lightgrey; background:ivory; color:blue;"> The time has come the walrus said, to speak of many things... </pre>
Will display like this:
The time has come the walrus said, to speak of many things...
To center the box in the page, use the same wikitext, dropping the whitespace property, within a single table cell, and shift the outer containing table to center. When this method is used, the width setting should belong to the outer table. The revised code for a box that can be center-aligned on the page is shown below, with the result:
{| width=25% align=center
|<pre style="border:1px solid lightgrey; background:ivory; color:blue;">
The time has come
the walrus said,
to speak of many things...
</pre>
|}
Will display like this:
The time has come the walrus said, to speak of many things... |
Browser pre-wrap test
[edit | edit source]When listing code lines, some lines may exceed the page width, causing text to spill out of the box and extend far to the right since the text must be displayed just as it was typed. To prevent this, a conditional form of pre-formatting can be used. By adding the style property white-space: pre-wrap; to the pre style expressions above, long lines will automatically wrap while preserving other whitespace.
All web browsers, except the outdated IE11, support the white-space: pre-wrap; property.[1]
To check whether your browser supports pre-wrap, look at how it 'printed' the test box below. If your browser handles the white-space: pre-wrap; property correctly, the long line of text (first line following the heading) should wrap within a 400-pixel wide box.
BROWSER PRE-WRAP TEST
---------------------
If your browser can handle the pre-wrap feature, then this first sentence of un-formatted text will be wrapped in this 400 pixel-wide box, while the spacing of the remainder will be preserved.
a b c d
e f g h
i j k l
m n o p
q r s t
u v w x
y z
If your browser is not compatible, the long line of text
in the first sentence above will spill over and extend
far beyond the margins of the box, or the box will be
extended to the right margin.
|
The poem tags
[edit | edit source] |
|
Poem tags are designed for poetry and prose, though they can be adapted for code listings. They allow the use of a single line break to start a new line (typically two newlines are required to start a new paragraph). In addition, a new line can be started with a space.
The spacing rules for punctuation remain the same as for un-formatted text, and the wikitext formatting using apostrophes is still honored; three pairs for bold, two pairs for italics. Headings are possible, provided that HTML heading codes are used, i.e. ======. The tags do not prevent wikitext from being parsed and executed in the way <nowiki> tags do, and tables will remain active when their code is placed inside poem tags.
<Poem> tag summary:- Space is generally not preserved; it is parsed like un-formatted text.
- Single hard returns make a new line; this is needed for prose.
- Leading spaces for lines are permitted; not like un-formatted text.
- Wikitext apostrophe codes still work within the tags; italics, bold, etc.
- HTML tags generally work within poem tags; though wiki headings do not.
- Templates and tables are not prevented from being parsed and executed; as long as there are no
<nowiki>tags they will run normally. - Long lines will be automatically wrapped; useful for code listings.
- The tags can be styled with CSS properties; Default formats resemble the page.
- Poem tags cannot be used within lists.
To display prose or poetry, or indeed any text that benefits from these formats, simply write the code as in the example below:
<poem>
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
</poem>
The result is just as expected:
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
Notice that the formats resemble those used for the main page, and that single line breaks have been used.
Styling the poem tags
To style the <poem> tags, a CSS style expression can be placed in in the leading tag. Some code can also be placed in a containing table cell to shift the block on the page. The following code listing can color the contents and shift the poem to the center of the page. The width of this block adjusts to the contents so some work may look inconsistent in width ; for a version with an independent width setting, place a width attribute in the table line and adjust the padding; see the CSS code summary in the last section for a list of these properties and others.
{| cellspacing=0 align=center
|<poem style="padding:15px 15px 15px 15px; background:lightyellow;color:maroon;border:1px solid gray;">
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
</poem>
|}
The result is;
One, two, three, four, five, |
Poem tags for code
[edit | edit source]A more complex example, this time to illustrate the automatic wrapping of long code lines is provided below. This time, the code block must be enclosed in <nowiki> tags to prevent the code from making a table on the page. As in the above section, a table container was added to permit alignment on the page, and details of the styles are shown. This time the code is all arranged in the table line as follows:
{| style="background:rgb(230,230,230);color:black; border:1px solid gray; font-family: fixedsys;" cellpadding=20px cellspacing=0 align=center width=80%
|
<poem>
<nowiki>
The code block goes here...
</nowiki>
</poem>
|}
An example of such a display is just:
|
Notice that the long code lines, notably the table's top line and the heading lines, have been automatically wrapped, (without any need for a pre-wrap property value).
The <code> and <syntaxhighlight> tags
[edit | edit source] |
|
The <code>the infamous <code>gets()</code> function" is rendered as "the infamous gets() function".
The <syntaxhighlight><pre> tags, they preserve white space, that is, they depict the code module exactly as it was typed.
When line numbering is in use, (the default state), long code lines will be wrapped and the code will be not extend beyond the boundaries of its container. To see code wrapping with these tags, refer to the examples below.
There are color plans for most programming languages, and a line is added to the leading tag to indicate what it is. See mw:Extension:SyntaxHighlight for the code colouring and numbering full list. Since 2023, "wikitext" can be used for lang that will highlight common syntaxes in wikitext.
Numbering is added by writing the word line somewhere within the leading tag. The numbering is applied to every line, but the starting number need not be one; it can be preset by adding the further entry, e.g. start=10, to start as line 10. If the line number is not given then the default applies and lines are numbered from one. When lines are copied for pasting elsewhere, the numbers are not copied; only the lines of text.
Programming code that is placed in the <syntaxhighlight>
tag summary:}}
*The tags ''add color'' to enclosed code blocks; many language color plans exist.
*Consecutive numbers can be added to lines automatically; the first number can be preset.
*Highlighting of blocks of consecutive lines is possible.
*When line-numbering is used, any long lines of text will wrap; there is no wrapping unless line-numbering is set.
*Plain text exists as an option; so that Wiki or other text can be numbered too.
*The tags cannot be styled; place everything in a table cell and style ''that''.
*Line numbers are not copied; only the text line is copied during copy/paste.
*''syntaxhighlight'' tags cannot be used within ''lists''.
=== HTML code colors ===
The following example shows how to color an HTML code listing and to arbitrarily start numbering from 10. Additionally, the lines could be highlighted with an entry like <code>highlight="2-3”</code>, which will highlight lines two and three. The term <code>enclose="none"</code> serves to removes the margins and whitespace.
{{block|ta=left|background=ivory|ff=monospace,sans-serif|fs=1.1em|<poem><nowiki><syntaxhighlight lang="html4strict" enclose="none" line start=10 >
HTML module goes here...A typical result for a short HTML table coding is:
<table align=center style="background: ivory;color:maroon;font-style:italic;font-family:arial;font-weight:bold;font-size:10pt;">
<caption>This is the top caption</caption>
<tr><th> Heading 1 </th><th> Heading 2 </th></tr>
<tr>
<td style="padding:10px;"> This is cell 1 text </td>
<td style="padding:10px;"> This is cell 2 text </td>
</tr>
</table>
Numbered prose
[edit | edit source]The following example shows how to add numbers to poetry, prose or text, and start numbering lines from, for example, 1000. Note that another method for this exists in Editing Wikitext/Indents and Lists § Other Ordered Lists.
<syntaxhighlight lang="text" enclose="none" line start=1000 >
Poem goes here... (let the software format any long lines).
</syntaxhighlight>
A typical result is just:
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
The syntaxhighlight tags do not permit any easy styling, but like the examples in the sections above, a table can be used as a container for the entire listing and that can be styled. An example of such a layout for numbered text is as follows:
{| style="background:ivory;color:black; border:1px solid gray; font-family: Inherit;" cellpadding=20px cellspacing=0 align=center width=40%
| <source lang="text" enclose="none" line start=1 >
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
</source>
|}
The result of running this code in the Wiki editor is:
One, two, three, four, five,
Once I caught a fish alive.
Six, seven, eight, nine, ten,
Then I put it back again...
|
Thus, a styled layout for numbered prose is possible, and formats are easily changed. Another method for numbered lists, e.g. prose, can be found by following the link Editing Wikitext/Indents and Lists § Other Ordered Lists.
Older versions of Extension:SyntaxHighlight used the tag <source>. This is still supported, but <syntaxhighlight> may help avoid conflicts if your source code itself contains <source> tags (for example XML).
For a full text on CSS styles, refer to CSS Properties Reference.
CSS Table Properties Summary
[edit | edit source]For those who intend to make use of tables in their work, the main CSS properties and HTML attributes have been summarized.
|
Pictures/The Quick Course
 Fire Tulip; 210x280 pixels |
 Pink Tulips; 373x280 pixels |
The Quick Course
[edit | edit source]his first Pictures page is intended for a quick study or for revision and will not bore you too much with discussion.. This page will show a Wiki writer how to fit images into their work using the most usual layout methods. For those who need only a coding summary, go straight to the image code examples in the drop-box of the section Insert the Image Code. A summary of image code options can be found in the section Adjust the Options. For those who need more complicated methods, for example, tables, gallery, or drop-control methods, refer to the Other pages links.
As the reader will realize, formatting in Wiki uses Wikitext mark-up code. To make the learning task a bit easier, code modules have been prepared for the various parts of the work. At various points in the text there are panels or drop-down boxes that contain the blocks of code. The code is easily pasted into the , to try the formats for yourself. As a general rule, the best method for new formatting is to carry out the testing of your ideas in the safety of the Sandbox, before pasting them into your work.
Get the Image Details
[edit | edit source]Find a Wikimedia Image
[edit | edit source]Many thousands of images are already stored in the Wikimedia Commons image database. The main pieces of data to obtain about the image are its exact name and its copyright status, and these and other image details can be found in two ways.
- The first method makes use of image lists on the Wikimedia Commons website. The same images that were in the past to be found using the Mayflower search engine are now found in categories on the Wikimedia Commons. This site has various categories to browse, including Wikimedia Public Domain Images, and many others. Collect the details, name, size, etc, of any images that interest you, ready for working on your page.
- The second method is simply to get the details of an image that you like from some other Wiki page. (Wikipedia or Wikibooks). To find all of the details of any image on a Wiki page, just left-click it with the mouse to go to its image description page. If you just need to know the name or the rendered size of an image on a page, then right-click the image and read the details in the image properties.
Finally, because users might need some samples to study image layouts, the drop-box below has a set of code lines that can be used to produce high quality images in either your pages or while experimenting in the . You can modify these lines of code at will, on any page, to see how their options affect the display.
|
|
.jpg)
.jpg)
Upload Your Own Image
[edit | edit source]our own images can be uploaded to the Wikimedia Commons image database, for use on any Wikibooks page. In fact, they will become available to any user. It works like this.
The edit this page version of each Wikibooks page, including this page's edit page, has a link in its margin called Upload file, but images can only be uploaded by users who are first logged-on. Following that link leads to the Commons upload pages, where instructions can be found. Perhaps the best current method of making an upload is to access the Wikimedia Commons home page, then by selecting the Upload file link it its left margin, you can follow your way through the upload wizard, making life much easier.
When there is a choice, images are best uploaded in the largest available size. This gives the user the greatest possible choice as to its dimensions on the page. Images can always be reduced in size on the work pages themselves, by specifying their sizes in pixels within the mark-up code. As soon as an image is uploaded, its own dedicated image page is shown. This page repeats all of the data given by the contributor, including the copyright status. Once the image file is uploaded, it is available immediately for use in your work, and by others.
300x300 pixels
Insert the Image Code
mages are placed on a page by typing an image code along with any other text. As with the typing of text, this is done in the editing window of the page being edited. Selecting the edit this page tab at the top of the page accesses the editing panel, and all of the user's preferences and other links can be found at the top of each page as soon as the user signs-on.
The Basic Image Code
[edit | edit source]Without more ado, this section introduces the most comprehensive image code first. It contains all of the features likely to be of interest to the writer. The standard form includes an image name and file type suffix, a page position, a border type, an image size, and a caption.
The vertical-bar separators in the code are called pipe symbols. It is important to learn where these are on the keyboard since they are used in all image work. On some keyboards they are not located in the marked positions. Shift-backslash and Ctrl-Alt- top-left are common locations on keyboards for this symbol. In any case, if it cannot be found on the keyboard, there is a selection of such symbols to copy, at the bottom of each editing page. The standard form for the most useful image code looks like this:
The practical format of a typical image line, suitable for a page is like this:
The image to the right of this text was made with the above code line. The coding makes an image at the right margin of the page, (right). It is in the style of a thumbnail, (thumb), which by default, has a border; there is a link to its image page. It has a base dimension of 200 pixels, (200px), and a caption beneath the image, within the border, (Pink Gerbera). If the caption were made longer, then the text would wrap neatly on several lines. The text of the page itself wraps neatly around the image also. In fact, depending upon the position of the image code line on the page, the point from which the accompanying text starts to wrap can be changed. This point will become more clear with the examples in the drop-box below.
Beware of transferring your work from word processors, since some characters may not be supported by the Wiki editor. If in doubt, first copy the code into the Sandbox for testing. To back-up your unfinished mark-up code, you can copy your text from the sandbox editing window and save it in Notepad, the windows accessory. Notepad is a plain text device, and affects the mark-up code least. Note also that all of the saved page versions are available in the History tab, should they ever need to be restored to the form that existed at an earlier date.
The basic image placement examples are given in the drop-box below:
|
When such a line of image code is in place, press the Show preview button at the bottom of the editing window and wait for the system to display the reformatted page. If the image position is left or right then the text will be seen to wrap. If the center is selected, (or none), then the text cannot wrap, and the text will move to a point below the image.
In any case, if the rendered result is not as expected, then the text can be changed as often as is necessary, until it is right. When the work is right, press the Save page button at the bottom of the page to store the revised page for other web users to see.
Adjust The Options
[edit | edit source]
hese notes describe the image options in detail, and are correct at the time of writing.
The sequence of image options is unimportant, and with the sole exception of the image name these entries are insensitive to case. However, it is recommended that a size is always included, to avoid enormous image sizes. The general coding format and the most useful options for the image syntax are again given below:
- When position is not specified...
- The default position is right when the border type is set to frame or thumb, else it is left.
- The position options...
- These are right, left, center, or none.
- To wrap text around images...
- Choose either the left or right image positions, or one image set to each, for wrapping between two images.
- To force text to follow-on...
- Choose center or none since these cannot wrap text.
- To fix an image without wrapping...
- Choose none. This forces the image onto a new line at the left.
- For an image in a table cell...
- Set the position to center within the image code, and if necessary, set the vertical position with a CSS style in the respective table element.
- Additional note...
- The positioning of images at left, right, and center, when there is a similar image already occupying some space, can result in these terms being interpreted as relative to the remaining space. These images are said to float. By contrast, an image set to none is non-floating, and it does not permit anything alongside it.
- When type is not specified...
- An image with no border is produced.
- The type options...
- These are thumb, frame, or border.
- For a border, caption, and scaling...
- Use Thumb since it has the most scope.
- For a border, caption, but no scaling...
- Use Frame, but only for same-sized images.
- For a very faint border...
- Use border. This is useful when an otherwise border-less, pale image needs a slight color separation from a pale background.
- Make a user-sized thumbnail on the right...
- Set thumb with only the image details. The size will be set in accordance with the user-set preferences. The size will be seen locally, and others will see their own, or its default.
- Images on colored backgrounds...
- Avoid thumb, since an unwanted white margin might be seen. Consider the use of a frame-less image to avoid it.
- Images for table cells...
- These should be border-less. There are problems with framed image captions, and the borders are best made with table properties.
- Image captions...
- These are possible only with thumb and frame, though the template set Noframeleft, Noframeright, Noframecenter, and Noframenone permits captions for frame-less images and gives more scope in the making of custom borders.
- When size is not specified...
- The image will be full-sized, and in most cases would be too big. However see comments about user-set thumbnail type.
- Resizing an image...
- This is possible for all option types except when the frame type is chosen.
- Units of image measurement...
- The units used for images are pixels, and the size of an image applies to the image only; any borders add to the overall layout.
- There are two image size formats...
- The required image size can be specified as just its width, or as its width and height. It cannot be specified as height alone.
- The single size format...
- This is the pixel size of the image's base, with the shape preserved. Screens render images as about 70 to 100 pixels to the inch. A typical entry is e.g. 240px.
- The double size format...
- This is the base dimension times the height, e.g. 240x150px, when both are known.
- When there is an inconsistent dimension given...
- That is to say, when one of a pair of dimensions seem to be trying to change the shape, only the smaller of the two possible image sizes is produced.
- Equalizing heights of mixed image shapes...
- Knowing the exact dimensions is unnecessary. For example, to equalize the heights of mixed-shape images, use the double format with all of the size code set for the required common height, and their widths greatly exaggerated. This forces an inconsistent scaling that achieves the required result. For example, two images that are 350x150px and 700x450px are clearly of different shape. To display the two side by side, both with a height of 100px, we set their image code to say 900x100px and 900x100px. The obvious 900px inconsistency is ignored and the 100px is taken as the useful dimension for scaling. The shape of each image will nonetheless be preserved without having to re-calculate the exact dimensions.
- When caption is not specified...
- Only thumb and frame permit captions, and they can be omitted to leave an empty space.
- Format caption text...
- Use HTML tags, Wikitext and hyperlinks to format captions.
- Use text templates ...
- Templates can be used to format captions. They can reduce the effort and add consistency to the appearance.
- Options that are not recognized...
- When an image option is misspelled or otherwise not understood, it will be taken as a caption, or as alternative text for the image placeholder. When there are two possibilities only the first is taken.
- What is alternative text?...
- The empty box for an image is called a placeholder, and text can sometimes be found in it; this is the alternative text. When the image is not available, or when software for the disabled reads the page, this text can be used.
- Alternative text or captions...
- When captions are impossible because of the border type, an attempt at adding a caption is taken as alternative text. When a caption is possible, it is also used as the alternative text. Having different captions and alternative texts in images is not possible.
Use Image Templates
[edit | edit source] |
| Rose, Queen Elizabeth: Frame-less |
|
| Rose, Queen Elizabeth: With border |
here are occasional inconveniences in the use of the basic image syntax.
For example:
|
These points, when necessary, can be overcome by displaying the image within a template. In particular, the Wikibooks templates Noframeleft, Noframeright, Noframecenter, and Noframenone were made for this purpose, and images made with them behave in much the same way as the basic image examples.
Each template in the set is made for the appropriate position on the page. Two examples of template use can be seen on the left and the right of the page; The left image is an example of a frame-less image with a caption and was made with Noframeleft. The image on the right was given a border with Noframeright. Compare the absence of white margins with the orchid and gerbera images shown elsewhere on this page.
The code to make use of these templates for this specific result is just:
{{Noframeleft|1=[[File:Rose_Queen_Elizabeth_20070601.jpg|200px]]|2=Rose : ''Queen Elizabeth''}}
{{Noframeright|cwidth=200px|border=4px outset darkgreen|1=[[File:Rose_Queen_Elizabeth_20070601.jpg|200px]]|2=Rose, ''Queen Elizabeth'': With a border.}}
|
It should be stressed that the white margins for thumbnails do not pose any problems for the default page coloring, and that colored backgrounds are comparatively rare in the Wikibooks project.
Find Other Methods
[edit | edit source]here are other image layout techniques. The tiling of images is covered in Tiled Images, and explains how to overlap images and how to line them up across the page. A separate page on image containers has been provided at Images in Containers, and gives methods for tables, galleries and drop-down boxes. For example, the top section of this page is made with an invisible table container, and the colored background is made by placing the page within styled HTML div tags.
As was described in the previous section, writers have developed templates. Examples include caption-making, text-formatting, and image placement. Templates allow laborious formatting to be done without the need for the coding that usually accompanies such work. The writer need only add text to a few key words for the formats to be added automatically.
Specific examples of templates in use may make the point more clearly. The drop capitals on this page make use of a template called Drop. The what to type panels of whatever color use the template Block, and the drop-control boxes for the examples use Dropimage. The template Hiddenh3 has made various hidden headings, headings with the correct formats but without a listing in the table of contents.
It is not proposed here to explain template making but rather to provide a link to a page that does so. See [[../../Making Templates A101|Templates A101]]. To see a few examples of existing templates, see [[../../Templates Ready to Use|Templates Ready to Use]].
See also
[edit | edit source]- : The Wikibooks editing window for users to try their code
- Image Licensing: A Wikimedia page about copyright status
- Help on Files: A good image reference text at Wikibooks
- Wikipedia Commons: The Wikimedia main media resource page
- [[../../Making Templates A101|Templates A101]]: A Wikibooks text on making text, box, and drop templates.
- [[../../Templates Ready to Use|Templates Ready to Use]]: A selection of ready made Wikibooks templates
Pictures/Tiled Images
|
 Pelargonium: 'Geranium'; 300x225 pixels |
Pink Gerbera: 300x225 pixels |
|||||||||
Tiled ImagesAll in a LineI
mages are easily placed in a line without the use of an image container, and most associate this kind of line-up with the notion of floating images; that is to say, if one too many of these images is added, the last one will just float to another page position rather than anchoring itself where it was put. The simplest method for an image line-up depends on limiting the image options to the minimum. Specify only the image names and their sizes, and disregard all other options, otherwise the method might become problematic. The image syntax can be written all in one line, or in successive lines, and an example of the coding to use has been included in a drop-box for the adjacent line-up of images. Notice that the example shown has no captions, since captions can only be used in the frame or thumbnail format. However, by using templates such as Noframeleft for the images in such a lineup, tiled images with captions can be obtained. A set of these templates has been made to include all of the image positions. A thin dividing space has been made between adjacent images by inserting a single space character between the image definitions. To set the images edge to edge without any space between them, simply omit the space characters. Because we rarely want to start an image line-up at the left margin of the page, it is useful to have a means of padding out the images. In fact, a transparent, blank image has been uploaded to the image collection for that purpose; it is called Padding.gif, and it can be sized on the page like any other image. Refer to the code notes for an example of its use. (Another method, capable of precise positioning, is described in the next section). Images are rarely the size that you would prefer them to be and this is especially the case when the images are set side by side. There is a method to get the images standardized. Consider the image line-up. Because these images were greatly different in their initial shapes, and their exact dimensions were laborious to find, it was decided to set their heights to be the same, and to allow the widths to be scaled accordingly. The method to do this, shown in the code box below, is to specify the important dimension exactly, in this case the height, while greatly exaggerating the size of the less important dimension, the width. Note that some dimension for width is required, but its exact value need not be known. The software will use the smaller and more practical possibility, ignoring the implied larger scaling. In this way the vastly different shapes can be scaled without having to make calculations based on both width and height.
Relative PositioningM
ost image positioning is restricted to the three preset locations. These of course are, left, right, and center. However, with the help of a little in-line HTML, images, tables, text paragraphs and other structures can be placed anywhere on the page. In particular, this means that an image can be placed at a point relative to its position as expected by other code. To explain further, if the usual position for an image is at the left margin, according to the syntax used, then the addition of relative positioning code allows it to be shifted relative to that point, up or down, right or left, even beyond the margin. The pixel values for the vertical and horizontal shifts specify the exact extent of the displacements. The main problem with this method, apart from its complexity, is that it will not deliver wrapped text for the placements. Like centered images, the text is restricted to following-on. Another problem concerns frames for the images; because shifting is applied to images within their immediate containers, all types of borders must be avoided. As a result of losing frames and thumbnail borders, all of the captions have to be arranged by other means. To expand on the matter of text having to follow-on, it is perhaps helpful to note the sequence of events for relative positioning. When the image, box or other structure is first placed, it is allocated to the space without relative positioning; that is, as if the shifting code were missing or set to zeros. Then the code shifts the item to its new position by the amounts given by the shifting code. A space is left at the first location, equal in size to the item that was moved. When the next line of text or another item is added to the work, it must take account of that allocated space. As a result, when a large image or block of text is moved vertically, the following text cannot be located until after the gap. Although it is theoretically possible to shift tables and large blocks of text, the above mentioned limitation renders it less useful. Relative positioning works best when the shifts and texts are fairly small. The method meets these requirements for shifting images that are initially tiled across the page, and for overlapping effects. An example of overlapping images is given below. The normal position for these images, without shifting,would have been in-line, starting from the left margin, and the padding image has been omitted for this example. The images were shifted from these tiled positions by the required amounts to create the overlapping effect. The paleness or density of images can be varied. The code for twenty percent opacity can be found in the drop-box along with an example of shifted text.
This is the text. Mouse-hover Images
Two images can occupy the same space provided that only one of them is seen at a time. The usual way to do this is to hover the mouse over the default image, the one that is stable and seen most of the time. When this is done the alternative image replaces it, and when the mouse is removed, the original image reappears. This technique is available using the template HoverImage. The names of the two images are provided to the template, along with any other image options, and two separate captions can be made. The method works best with images that are the same shape; that is, have the same aspect ratio. Then, with one base size setting, both will be scaled to the same size. When the shapes differ and the images change, the height or the width of the presented work changes too. Because the text adjusts in wrapping around the images the effect is not necessarily bad, and you can see this best for yourself by trying it in the sandbox. As was suggested elsewhere on this page, a method exists to allow fixing of image heights instead of widths, and this might suit some better. In all other respects the template can be used as if it were a single image, with for example, text wrapping for the left and right positioned images. The template can be used in any situation that needs the full image syntax; for example, it could not be used to build gallery entries, since these use only an abbreviated image syntax; the image name. It could be used on a page, within tables and drop-boxes, and anywhere else that can make use of the full image syntax. The image on the right shows an example of the template's use; more detailed notes can be found on the page Templates Ready to Use, and on the template page itself. Other Pictures PagesSee also
|
|||||||||||
Pictures/Images in Containers
|
 Purple Crocus: 293x220 pixels |
 Clematis: Hybrid; 251x220 pixels |
Images in Containers
[edit | edit source]Images in a table
[edit | edit source]n-line, tiled images are simple to do, though they lack the positional stability of images in table cells. Although the matter rarely becomes important for images placed at the left or right of a page, when a more ambitious layout is needed, tables come into their own.
Tables allow many formatting options but do require some knowledge of Wiki's table-making code. To learn how to make tables see the page Tables, and to remind yourself of the styles used, see the drop-box later on this page.
After trying different methods, it is found best to use a table with two rows; one for the images, and the row below that for their captions. This allows the captions to be formatted separately from anything in the image cells and generally gives the best flexibility in working. When table borders are removed in such an arrangement, the images seem to stand on their own without the table being visible at all. The first example below uses this method, with the mark-up code for its implementation shown nearby.
To space out the images across the page against the prevailing background it is best to add extra columns to the tables. Do this by adding extra cells in the existing rows, and set their widths to achieve the necessary spacings. To avoid the need for additional styling of the table's background it can be made transparent. In this way the page color shows though, regardless of what color is set. An example using these points is shown, and the code to produce it is also displayed nearby.
For those who find tables a bit awkward to use, the image gallery may be more to their liking. It is much simpler, and quite good results are to be had without formatting. It is described below with varying complexity.
 |
 |
 |
 |
| Aegopodium podagraria | Adam and Eve Dactylorhiza sambucina | Alisma plantago-aquatica | Antennaria dioeca |
|
|
|
|
|||||
| Aegopodium podagraria | Adam and Eve Dactylorhiza sambucina | Alisma plantago-aquatica | Antennaria dioeca |
|
|
|
In addition, the images at the top of this article are both housed in table cells, with the table of contents, (TOC), in another; this was deemed necessary to constrain the positioning of the TOC in its various contortions. The code can be found in the drop-down box and if required, can be pasted into an editing window, or the Sandbox for modification. For those who are unfamiliar with table handling, a set of templates, Imageontop, Image1ontop, Image2ontop, and Image3ontop,have been prepared and allow the user to make similar top sections to the one on this page. If the requirement is just for a table of contents with text all the way to the top, then use the template Textontop.
The Image Gallery
[edit | edit source]onsider the three image gallery examples in the drop-down box. In the most simple example of its use, the user need not even scale the images, and need not know their sizes. The software makes all of the calculations and adjusts all of the dimensions to fit the images neatly into the gallery layout. Captions are available for both the images and the gallery itself, and any reasonable number of images can be added, with each image's coding typed onto a separate line. If required, a small amount of text can be inserted instead of an image.
The first example is the simplest and is ordered in rows of four images. This four-to-a-row format is provided by default, but can be adjusted as will be shown in the second example. Blank places are left for any unused image space in a row, e.g.; for a gallery of seven images, there would be one blank space in the second row. Although this gallery uses an HTML align attribute in an attempt to center it, centering has failed within the drop-box and it merely appears to be centered because it is the widest inclusion, and has simply been expanded to the size that is needed by this block element.
There are problems with the centering of the gallery function within a drop-box, though not necessarily when galleries are used on the open page. The problem seems to be connected with the use of the HTML align attribute. It is likely that a CSS style in a style sheet has invoked a priority in drop-boxes over the use of an HTML attribute. However there is a way to overcome the problem within a drop-box; in the second example below the HTML align attribute has been replaced by CSS styles for width and margin, and the use of this alternative styling overcomes the problem. The method can use percentages as dimensions to allow for different container (screen) widths, but the styles need careful adjustment for each gallery that is to be displayed. Notice too that whereas the relative percentages for values of width always refer to the immediate container, the values used for margin refer to percentages of the table width. Once the point is understood, there is rarely any confusion.
Note the use of the CSS width style; this allows an adjustment of the image masks; e.g., by setting a gallery width, any difference between it and the width calculated for the layout, is adjusted by changing the widths of the image masks.
In the second example, row height, column width, and the number of images per row have been added as options. In this way the layout can be changed greatly, and in this particular case, the display made smaller. The position is centered, using CSS styles. Since some viewing screens are narrower than others, reducing the number of images across the gallery with this method helps to keep the whole thing visible at the same time.
In the third example, many other font and formatting options have been added. These formats use many style-sheet rules. (See CSS2 Properties Reference for more). In this way all of the font family, style, color, etc., can be adjusted, as well as the text padding. Some properties remain obstinate; the notion of background color does not extend to the off-white photo mask, but can work on the space between the border and the mask. In addition, some slight difference in appearance for backgrounds has been noted between galleries on a page and galleries in a drop-down box.
The Wikitext markup code used to produce the three results is given in another drop-down box with descriptive notes. The modules can be copied into the Sandbox for further testing and use. Bear in mind that not all of the available text rules have been included. There is some distance still to go in experimenting with useful formats, and some kind soul might even devise a way to expose the photo mask for background coloring.
|
|
Drop-down Images
[edit | edit source]t can be useful to save space or to un-clutter a page. For all the space saving qualities of tables or the gallery, it can be useful to save even more. An image or even a gallery of images can be tucked away in a drop-down box. The display will appear when the bar is clicked with the mouse; clicking it again closes the control and restores the page to a more tidy state.
For those writing within WikiBooks, there is a template ready-made to make things easy. Refer to Template : Dropimage for its use, limitations, and options. All of the drop-boxes on this page made use of it.
For those who write within Wikipedia there is also a version of Dropimage. In addition, for Wikipedia, Wikimedia, and WikiBooks, there are collapsible tables. See Collapsible Tables, and Tables, for the details.
Whether the enclosure is text, an image, an animation, or a whole gallery of images, the method of using the Dropimage template is the same. The code that will produce the text, image, or gallery is placed in the last parameter space, and the message for the top heading goes into the first parameter. Although it is sometimes found useful to use the named parameter method, (2=parameter text), for most text and images it will be OK to just place the material as it is. If the parameter text is very complicated, it is often a good idea to view it first on its own to make sure it is as expected.
Avoid using Wiki heading codes for your first characters since this messes things up; i.e.; use the HTML <h2></h2> tags instead of the equals signs. If your intention is to place a table in a drop box, be sure that it is an HTML table, since the pipe symbols of a Wiki table might be misinterpreted. Refer to the WikiBooks Template:Dropimage page for an example.
The typical syntax for the Dropimage template and its result are shown below.
{{dropimage|align=center|width=120px|Press me ! |[[image:Animated flower.GIF|200px|center]]''Flower Power''}}
|
When previewed in a page being edited or in the Sandbox , the above code block makes a drop control identical to the one above; the control is centered, has a top caption of Press me !, and an inside caption also. The initial width of the control is 120 pixels, though the image within it is greater, with a base width of 200 pixels. Take time to change the image and the other settings to see how the template works.
WikiBooks templates will work in other projects, such as Wikipedia, provided that they are first imported by their administrator, though in the case of Dropimage it was easier to simply reproduce it there instead.
| Other Pictures Pages |
| The Quick Course Tiled Images |
See also
[edit | edit source]- Wikibooks:Sandbox – The Wikibooks editing sandbox for users to try their code.
- Help:Editing – How to edit a page
- Help:Files – Working with files
- Editing Wikitext: Tables from this series, and Help:Tables in another piece
- Web colors – The Wikipedia article on web colors
- Wikimedia Commons – The Wikimedia shared media repository
- CSS2 Properties Reference – An excellent external CSS reference
- {{Dropimage}} – A Wikibooks drop-box for images, galleries, or text, with many formatting options.
- {{Hidden}} – Another Wikibooks drop-box
- Description of the <gallery> tag – Information on gallery syntax
- {{Imageontop}} – A Wikibooks template to make a top section with TOC and two images
- {{Textontop}} – A Wikibooks template to make a top section with TOC and text right to the top
- Collapsible Tables – Notes on the basis for drop-controls.
Tables
Tables allow us to structure data on a screen into neat rows and columns. This is useful in many situations. In fact, many other box-like structures on web pages use tables as their basis.
Wikitext tables are based closely on HTML tables. If you are familiar with HTML, you may be happy to learn that you can use HTML tables in Wiki pages. However, the wiki markup code, as it is called, uses fewer characters and does not use closing tags. Wikitext tables are quite basic in their simplest form, but like their HTML equivalents, they can be formatted to an enormous extent by the addition of HTML attributes and CSS styles. This page explains how to make tables.
For those who just need a quick Wikitext or HTML table that they can modify for their work, refer to Tables Ready to Use.
Basic layout
[edit | edit source]Here is a basic table example:
What you type[edit | edit source]{| class="wikitable"
|+ Caption
|-
! Heading 1
! Heading 2
|-
| A
| B
|-
| C
| D
|}
|
What you get[edit | edit source]
|
Wikitext Table Symbols[edit | edit source]
|
Notice that the table has been given standard borders and formatting by using class="wikitable"; without this, tables are less clearly formatted. Properties defined elsewhere, in a Wiki style sheet in fact, have centered the heading cells and made them bold. The same default conditions have made the table's background color white, the text black, and placed its caption at the top.
Notice also that the columns of the basic table expand to accommodate the widest text. If some table cells are to be left blank then columns might become very narrow. Users often place special hidden characters into cells to expand such columns. The character used is the non-breaking space, , so called because its original intention was to keep any two words together that are linked by it.
These simple tables do not have any margins around them to space them from other text. To make sure that they do not get mixed up with these other parts of the page they can be preceded and followed with the code <br clear=all> The template {{clear}} often exists to do the same thing with less markup. This makes sure that both the table and any text that follows it start on new lines of their own. Tables can also include margin styles that perform this spacing.
This simple table code, or any other used in the examples can be can be copied and pasted into the Sandbox or into other pages for testing and extension. To extend such a table, just add more rows and data cells.
Alternative Layout
[edit | edit source]There are two other table layouts that work in Wiki pages; both make identical tables to the basic one shown above. The first listing is fairly similar but writes the cell code for a row in one single line. Note that there is a double pipe symbol used for a cell separator: When heading cells are arranged in this way, double exclamations are used instead of double pipes.
The second listing is the HTML equivalent of a wikitext table, and is sometimes easier to use when such a table is to be displayed by a template. It is a fact that the pipe symbols of Wiki tables can conflict with other such symbols in templates, and the use of HTML tables is one method of avoiding such problems. When HTML tables are used, they have more liberal syntax rules; for example, they can have line-spacing between their elements whereas wikitext tables cannot.
Technical note: It might be as well to know that HTML tables can be made in some HTML editors, and that these are often provided free on the internet. The internet also provides the use of HTML-to-Wikitext converters for code, but not for the opposite conversion. So, for the few cases where both a Wikitext and an HTML version of the same table are needed, it might be best to make the HTML version first, then simply convert it to Wiki.
The term seen in the code, class="wikitable", is called an HTML attribute, and applies the standard formatting rules for a wikitable to make these examples more clear. Notice also that the formats differ slightly; the HTML table's styles are placed within the opening element tag, while the Wiki styles are just written after the {| symbol. Attributes and other styles are discussed in the next section.
Another Wiki Format[edit | edit source]{| class="wikitable"
|+ Caption
|-
! Heading 1!! Heading 2
|-
| A || B
|-
| C || D
|}
|
The HTML Format[edit | edit source]<table class="wikitable">
<caption>Caption</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
|
More Notes on Layout[edit | edit source]
|
HTML tables need text in their cells to be properly displayed. If a blank cell is intended then entering a non-breaking space, , avoids problems.
CSS Styles
[edit | edit source]The simple tables shown above can be used just as they are, but their users will likely need to apply some extra formatting sooner or later. To extend a table's structure, many just add new rows with their cells, or extra cells in existing rows. These methods have merit, since colors and formats can be preserved. When a more ambitious table is needed then the information in this section will be found useful.
- Table styles are sets of instructions or rules that add formats to the work,.
- Styles can be specified and named in style-sheet lists called classes. Then a class- declaration is made in the table line, that is, writing the class name calls it into use. The effect of doing so is to apply all of the styles in the named class to the table. An example of such a table class declaration is
class="wikitable". - Styles can also be fully specified within tables; these are called inline styles, and provided that they are written in the appropriate part of the table, they can override styles contained in classes declared in the table line.
- Users of Wikitext make use of inline styles because there are few useful classes to format tables; the writing of new style-sheet classes would be the preferred method but, by necessity, this activity is in the domain of administrators.
- Style rules can be used to format all of the table's parts.
- HTML attributes can be used too, but their formats differ from those of CSS styles. Many are now obsolete, so always consider CSS first.
- Styles and attributes can be used in conjunction to good effect.
The general formats for writing these styles can be found in the drop-box Style Formats below and a summary of properties can be found in another. The sections of this page contain numerous code examples that illustrate how styles are placed for a given effect, and the reader new to the subject is advised to follow the wording of the code for the best understanding. More on the precedence of styles can be found in the Wikibooks page The CSS Cascade, though the work might be more than is needed for a basic understanding.
|
|
Numerous examples of HTML tables and their Wikitext equivalent coding can be seen on the page Tables Ready to Use. At times it is easier to understand a particular point from such examples, or to recall details already learned.
Style Rule Priorities
[edit | edit source]When styles for similar formats are written into the various parts, (elements), of a table, it is possible for one set of formats to be in conflict with another set. In general, any formats closer to the cell text will supersede similar formats further away from it.
For example, if the background color of a table is set to red using a style expression in the table line, then another expression in a cell could specify the cell color blue. A row's color could be specified differently also. Subject to the rules of priority, only some parts would be affected and the remaining parts of the table would retain the color set for them in the table line. These simple priorities are listed here:
- Styles written in cells supersede similar styles applied at row or table level.
- Styles written in rows supersede similar styles applied at table level.
- A CSS Style is given priority over an HTML attribute when both are at the same level. For example, if a CSS margin property places a table near the left margin of the page, then the additional centering of the table with the attribute align would be disregarded. Although these formats are not identical, the implied CSS positioning has priority over that of the attribute at the same level.
- Attributes can sometimes have priority. This can happen only if the attribute is at a table level that is closer to the text. For example: if a table level CSS style sets text to be right-aligned, and a cell attribute centers it, the cell will have centered text while the rest of the table will be right-aligned.
- A class declaration's CSS styles can be modified by in-line CSS styles at the appropriate level in the table, though attributes cannot override these. Attributes can of course apply to styles not specified by the class at all. The nature of classes is described in the WikiBooks page Class and Style Notes.
If these priorities seem complicated, they are easier to understand in practice. In the following table a number of text colors are applied at each of the table, row, and cell levels. To help understand the basic hierarchy, refer to the code module below while following these points.
- The default color for a table's text is black. This is not apparent from the code but is a consequence of the Wiki style sheet.
- A CSS class declaration,
class=wikitable, applies various styles to the table all at once, including a gray background. It also uses a black text color. - A table style applies red text to the whole table. Without other code, all text would be red.
- A row style applies blue text to the second row and green to the third. Because the rows have higher priority than the table, they change the text colors.
- A cell style applies maroon text for two cells. The cell levels have more priority than the table or row and can change certain parts even more.
- The closer the style is to the text, the higher its priority in setting formats. Further formats applied directly to the data with HTML tags or wikitext are also possible.
What you type[edit | edit source]{| class="wikitable" style="color:red;"
|-
| style="color:maroon;"|'''A1 : Maroon Cell Style'''
|'''A2 : Red Table Style'''
|- style="color: blue;"
| style="color:maroon;"|'''B1 : Maroon Cell Style'''
|'''B2 : Blue Row Style'''
|- style="color: green;"
| '''C1 : Green Row Style'''
| '''C2 : Green Row Style'''
|-
| '''D1 : Red Table Style'''
| '''D2 : Red Table Style'''
|}
|
What you get[edit | edit source]
|
This description of CSS priorities has been limited deliberately. The setting of CSS priorities is complex and is determined by various factors. The place that styles are written within the web page or its various style-sheets has an affect, the so-called source of the styles, and there is a hierarchy for these sources. For example, user style-sheet important styles are set higher than any author styles. Additionally, within each collection of styles that exists from a certain source, there are further priorities set; these follow complex rules of precedence; (IDs higher than classes and classes higher than element styles, etc.). There is also a rule for duplicated styles that are in conflict, and at times, it is only the browser's work sequence that decides which of various similar styles is to be used. An overview of how CSS priorities work for web pages is given in The CSS Cascade.}}
The Table Parts
[edit | edit source]Tables coding needs a basic knowledge of the table spaces.
The table spaces are just the main table elements and the adjustable parts within it. This short section explains the terminology of the table and gives some idea of the nature of its formatting.
Refer to the drop-box The Table Design Spaces for the text.
|
Borders
[edit | edit source]Borders are used to set the table from the other parts of the page, and are often used for decoration.
Borders can be set for the whole table at once, or for any individual part of it. The thickness, style, and color of these borders can all be specified, and there are even rules for the four individual sides.
This section describes the various options available for making borders and attempts to introduce a few of the lesser known formats. Refer to the drop-box Border Styles for a summary of border styles.
| ||||||||||||||||||
- The example below has various borders. Initially, there are no all-round borders on this basic table. An outer border is set for the table perimeter, and various borders are set for the bottom of the individual cells. In addition, the background color of the whole table has been changed to lightyellow, then the heading color changed after that to brown. The text color of the headings has been set to white to give better contrast against the new background. Follow the details in the example below:
What you type:
{| cellspacing=0 align=center cellpadding=5px width=50% style="background: lightyellow; border: 1px solid gray;"
|+ Top Caption
|-
! style="background:brown;color:white;border-bottom:1.5px solid black" |Heading 1
! style="background:brown;color:white;border-bottom:1.5px solid black" |Heading 2
|-
| width=50% style="border-bottom:1px solid gray" |A
| width=50% style="border-bottom:1px solid gray" |B
|-
| style="border-bottom:1.5px solid black" |C
| style="border-bottom:1.5px solid black" |D
|}
|
What you get
| Heading 1 | Heading 2 |
|---|---|
| A | B |
| C | D |
Cell Spacing
[edit | edit source]- Cell spacing refers to the space that surrounds each cell in a table. It is also called border spacing .
- It can be made to be zero, but it is more often set to some practical value to space the cells apart, and to improve the layout.
- Sometimes the borders can be made to overlap and this is called collapsed borders.
- At times the horizontal and vertical spacings can be made different.
- There are two methods in use for spacing borders; the HTML attributes method and the CSS styles method.
- Spacings can only be written into the table line.
- Mixing style and attribute methods can cause confusion for borders and spacing.
- Large tables are best used with HTML attributes since they reduce work.
- This cellspacing method produces its best appearance for borders made with the border attribute.
- In this method, applying a value for cellspacing separates the borders appropriately. Setting a value of zero for these thin internal borders gives a fairly similar result to the collapsed borders seen in CSS styles, and has a neat appearance for little effort. If the cellspacing attribute is omitted altogether a small amount of spacing is nonetheless added.
- The borders made with the border attribute are compound. That is, they are always made from two different colors. In HTML the two colors can be specified, but in wikitext they cannot. The default state sets a lighter color for the bottom and right borders, and the darker color for the left and top.
- The borders made with attributes apply to the whole table, including the table perimeter. When the value is varied, the outside perimeter changes but the inside borders retain a nominal value.
- When more elaborate borders are needed, the border styles must be used, and to space them the corresponding border-spacing properties are preferred.
These are examples of the cellspacing attribute.
{| width=100% border=1 cellspacing=15px
|+ ''Border=1''' and '''Cellspacing=15px''
| width=50% style="padding:15px;"|There is all-round ''uniform'' spacing.
| width=50% style="padding:15px;|The borders are made of two colors.
|}
|
|
Cellspacing Attribute Notes[edit | edit source]
|
|
Cell Padding
[edit | edit source]- Cell padding refers to the space that surrounds the text in a cell. It can also be applied to a table, to pad the space just inside its perimeter.
- Padding is maintained even when the cell width changes.
- Single words of text are usually handled with alignment rather than padding.
- All four sides of a cell can be padded differently.
- Table padding can be applied in some browsers provided that the borders are not collapsed.
- There are two methods for padding; the HTML attributes method and the CSS styles method.
- Attributes are written in the table line, and the CSS styles are written in the cell or the table line, depending on the formatting intention.
Use attributes and styles
[edit | edit source]- Cell styles and the table attribute cellpadding can be used together in the same table without confusion.
- Uniform cell padding for cells uses the HTML attribute cellpadding in the table line.
- Non-uniform padding for cells uses styles in the cell lines.
- Table padding of any kind needs a style in the table line, but can only be used without difficulty when the borders are separated. Some browsers, for example Internet Explorer 6, will not render padding set in the table line at all, though both Opera and Firefox will do so.
The HTML attributes method
[edit | edit source]These are examples of the cellpadding attribute.
{| width=100% border=1 cellpadding=15px
|+ Uniform: ''Cellpadding=15px''
| width=50% |This is an example of all-round padding, using the HTML attribute.
| width=50% |The text has been spaced from each cell's border with one entry.
|}
|
|
Cellspacing Attribute Notes[edit | edit source]
|
|
Coloring
[edit | edit source]Background coloring can be done for the whole table, or for individual cells. So also for the coloring of text. When cellspacing is used the table background property sets the color between the cell borders and the cell background the colors within. A selection of color names is provided in the drop-box. Should more color data be needed during design work, call any or all of the drop-box templates Lightcolors, Mediumcolors, Darkcolors, or Greycolors directly into the sandbox.
| |||||||||||||||||||||||||||||||||||||||||
The CSS color styles
[edit | edit source]The style rule to set both the background and text colors is typically:
style="background:lightyellow;color:maroon"where background is the background color of the element and color is the color of text.
These colors can be set in any of the table, row, or cell elements, and follow the usual CSS style priorities discussed previously.
There are at least three ways to specify a color:
- Use the color name, for example; red, blue, mistyrose, etc.
- Use the RGB value for the color; for example; RGB(140,100,65).
- Use the HEX notation for the color; for example, (includes the semi-colon);
#f8a4c8;
To further emphasise the point, the following three style expressions for black text on a beige-like background are equivalent:
style="background:Linen;color:black"or;
style="background:rgb(250,240,230);color:rgb(0,0,0)"
or;
style="background:#faf0e6;;color:#000000;"Note that the use of the HEX notation has a trailing semi-colon. Since a semi-colon is also used as a separator for style rules, it is entirely likely that two semi-colons will appear in code together. Neither of these should be omitted.
Spanning
[edit | edit source]Tables that have the same number of columns in each row, and for the sake of argument, the same number of rows in each column, are referred to as uniform tables. However, non-uniform tables can be made by merging cells, that is referred to in wikitext and HTML as spanning.
Column Spans
[edit | edit source]What you type[edit | edit source]{| class="wikitable"
|-
| A
| B
| C
|-
| colspan="2"| D
| F
|}
|
What you get[edit | edit source]
|
}
Colspan notes[edit | edit source]
| ||||||
Similarly, we can do the same thing with rows:
Row Spans
[edit | edit source]What you type[edit | edit source]{| class="wikitable"
|-
|rowspan="2"|A
| B
| C
|-
| E
| F
|}
|
What you get[edit | edit source]
|
Rowspan notes[edit | edit source]
|
Row spans with column spans
[edit | edit source]The two attributes rowspan and colspan can be combined to simultaneously span vertically and horizontally:
What you type[edit | edit source]{| class="wikitable"
|-
| rowspan=3 colspan=3|A
| D
|-
| H
|-
| L
|-
| M
| N
| O
| P
|}
|
What you get[edit | edit source]
|
Mixed span notes[edit | edit source]
| ||||||||||
Width and Height
[edit | edit source]There are three distinct behaviours for tables when content is added to the cells; this assumes that there is more that a few characters.
- The first case is the most common; that is, for unformatted text. That is, text that depends on the software to wrap its lines.
- The second kind of behaviour is for pre-formatted text within pre-formatting tags, or the addition of box-like structures, such as other tables or images. This second set is characterised as having default widths or assigned widths of their own.
- The third kind of table content is a very long character string without spaces in it, of the kind sometimes seen in program listings.
These three cases are explained in more detail below.
Unformatted Text Behaviour
[edit | edit source]Consider the case of unformatted text. When the width settings of a table and its cells are not set in code, the text added to cells causes the cells and table to expand to the full width of the page before any text wrapping takes place. In the absence of width settings a full-width table might be produced.
When the width of a table and the widths of its cells are fully specified, the cell text will start to wrap when the text of individual cells reaches their cell borders. Then, at some stage with increasing text, the cell will extend downward, while maintaining its width setting. This behaviour is apparent even when the height of cells has been specified.
Formatted Text and Boxes
[edit | edit source]Consider the case where the cell contents have either a default width or a preset width of their own. Let us assume that the content is to be an image. Whether or not the widths of the cells are set in code, the image will expand the cell to accommodate itself. If the table width was set then the other cells might even be narrowed or extended in height to maintain the intended table width and its contents. When the table width cannot be maintained in this way, the table is extended, perhaps beyond the right margins of the page. This behaviour is often seen for text in pre-formatted text tags. To avoid these problems simply limit the content's width, within its own coding.
Long Text Strings without Spacing
[edit | edit source]Table cells often contain code listings as text so that users can see how code is written. Some of these code lines are quite long and ordinarily would be wrapped in the width set for the table. However, because unspaced text is treated as a single word, the table cannot break it in the middle for wrapping. In this case the table is extended, regardless of the width settings. This lack of wrapping can be a puzzle elsewhere, even where long-line wrapping has been planned. The problem is avoided by placing an adequate number of spaces in long text strings. For example, a CSS style expression allows spaces at many points, provided that they are not placed immediately before either a semi-colon or a full-colon.
Relative Width Example
[edit | edit source]- Width uses absolute units like pixels, or relative units like percentage.
- Relative units are useful since the page width need not be known.
- Relative width relates to a percentage of the page's width in the case of a table, or to the table if the width setting is for a cell.
- Height need never really be fixed, though it sometimes helps to give some minimum height to the work.
A table set with relative widths can be seen below. The table is set to occupy half of the page width, (width=50%), and the two leftmost columns are each to take up twenty-five percent of that. Note that the cell widths are to become twenty-five percent of whatever width is given to the table, and that neither the width of the page nor the eventual width of the table need ever be known. The image uses its own dimensions to occupy the remaining width and is also centered with its own code. Notice that although both rows have been specified to have the same height, the image has made the top row deeper. Advantage is also taken of this layout to show the basic horizontal and vertical text alignments.
What you type[edit | edit source]{| class="wikitable" width=50% style="margin-left:auto; margin-right:auto"
|-
| height=60px width=25%| A
| width=25% align=center| B
| [[image:Oriental_poppy.jpg|center|100x90px]]
|-
| height="60px" valign="bottom"| C
| valign="middle" align="right"| D
|
|}
|
Example Notes[edit | edit source]
|
What you get
[edit | edit source]| A | B |  |
| C | D |
Alignment
[edit | edit source]Table Alignment
[edit | edit source]Tables can be aligned horizontally on the page with the HTML attribute 'align' , with the CSS style 'float' , and with the CSS style 'margin'. In each case these style-rules are placed in the table line. The crude vertical alignment of tables is accomplished by the use of the text line break, while fine adjustments can be made with CSS margin styles.
- The HTML attribute method makes use of the align attribute in the table line to position the table at left, center, or right of the available space, and examples of its use can be seen in table code throughout this page. The only point to note is that for the centering of tables, margin CSS styles in the same table line will take priority over align. Top and bottom margins will not cause problems but the use of left or right margins will. Text can float around such a table with the exception of the centered case.
- The CSS style 'float' cannot place a table in the center of the available space but is limited to left and right. It has the advantage that text can float around the table.
- The CSS style 'margin' is best and by its settings can place a table anywhere in the horizontal alignment. When the margin property is set to auto the table is placed at the center of the horizontal containing space. The same result can be obtained with the judicious use of relative measurements(%). The extent to which text floats around a table positioned with margin depends on how much space remains.
See the examples in the drop-box below.
|
Content Alignment
[edit | edit source]As is the case for most table styling, there are two main methods; HTML attributes and CSS styles.
- All text can be positioned using attributes. See the table below for the examples.
- The vertical positioning of images and other box-shapes needs the style property vertical-align, with horizontal positioning using their own coding.
The attribute alignment summary is as follows:
- Align sets the horizontal alignment of text. It has values of left, center, or right. For example align=center to center text (or a table).
- Valign sets the vertical alignment of text. It has values of top, middle, and bottom. There is no equivalent use in the table line.
- Vertical alignment of text uses valign at cell level, or the CSS property vertical-align.
- Vertical alignment of images and nested tables uses only the CSS property vertical-align at cell level.
- Images and nested tables set their horizontal alignments within their own coding.
- Vertical alignment cannot be set at table level.
The following tables show the styles to use for a given effect and in particular the use of the HTML attributes align and valign. In addition, the vertical alignment of images and nested tables is shown in the code block and table that follows.
| Intended Alignment | Attribute align |
Attribute valign |
CSS Style text-align |
CSS Style vertical-align |
|---|---|---|---|---|
| H-Position of the Table at table level | Yes | |||
| V-Position of the Table at table level | Not available - position table in the page | |||
| H-Position of All Text at table level | Yes | |||
| V-Position of All Text at table level | Not available - must be done at cell level | |||
| H-Position of Row's Text at row level | Yes | Yes | ||
| V-Position of Row's Text at row level | Yes | |||
| H-Position of Cell's Text at cell level | Yes | Yes | ||
| V-Position of a Cell's Text at cell level | Yes | Yes | ||
| H-Position of a Cell's Image ect at cell level | Best use objects' own code to position it | |||
| V-Position of a Cell's Image ect at cell level | Yes | |||
Attribute text alignment combinations
[edit | edit source]align=left |
align=center |
align=right |
align=justify |
|
|---|---|---|---|---|
valign=top |
This is align=left and valign=top. |
This is align=center and valign=top. |
This is align=right and valign=top. |
This is align=justify and valign=top. The text is justified. |
valign=middle |
This is align=left and valign=middle. |
This is align=center and valign=middle. |
This is align=right and valign=middle. |
This is align=justify and valign=middle. The text is justified. |
valign=bottom |
This is align=left and valign=bottom. |
This is align=center and valign=bottom. |
This is align=right and valign=bottom. |
This is align=justify and valign=bottom. The text is justified. |
Vertical alignment of images and nested tables
[edit | edit source]{| class="wikitable" align="center" style = "background: transparent;"
|+ Vertical Alignment of Box-like Objects, (Images and Nested Tables)
|-
| height=200px width=180px style = " vertical-align: top; " |[[image:ArialSpecimen.svg | center | 100px ]]
| width=180px style = " vertical-align: middle; " |[[image:ArialSpecimen.svg | center | 100px ]]
| width=180px style = " vertical-align: bottom; " |[[image:ArialSpecimen.svg | center | 100px ]]
| width=180px style = " vertical-align: top; " |
{| class="wikitable" align=center width=50%
| A || B
|-
| C || D
|}
|}
style="vertical-align:top"
|
style="vertical-align:middle"
|
style="vertical-align:bottom"
|
style="vertical-align:top"
|
||||
 |
|
|
|
 |
Note that these image and nested table inclusions use their own coding to set their horizontal placements, and CSS styles in the table cells for any vertical placements other than the defaults. |
| Technical Note: |
Sorting and hiding
[edit | edit source]Tables can be made so that when displayed on the page, clicking a link will sort the table. Clicking it again will sort it in the opposite direction. Each column is given a sorting link, so sorting can be done on any column. The method allows the user to view the data from different viewpoints.
Tables can also hide their contents. These tables are called collapsible. Collapsible tables resemble a simple box in the collapsed state; then, when the box is clicked with the mouse, the table reverts to the expanded state, and is revealed. The link has a toggle action; clicking the link again hides the contents. Such tables help to unclutter the page, and so avoid distraction from the main themes. They are of particular use for supplementary information.
Sortable tables
[edit | edit source]In its simplest form, adding the class declaration class="sortable" to the table line of any table makes a sortable table, regardless of other classes and styles applied. The following code illustrates the method, and the result is shown below.
{| class="wikitable sortable" cellpadding=5px
! One!!Two!!Three!!Four
|-
| M||A||K||E
|-
| E||N||D||S
|-
| M||E||E||T
|}
Click the links in this resulting table to see how sorting works:
| One | Two | Three | Four |
|---|---|---|---|
| M | A | K | E |
| E | N | D | S |
| M | E | E | T |
For a more extensive treatment of this topic, readers should see meta:Help:Sorting.
Collapsible tables
[edit | edit source]The code for a collapsible table much resembles the code for an ordinary table, with the addition of a class declaration. (Some Internet Explorer browsers experience faulty links).
This is also a good example of how to declare multiple classes. The basic shell coding for a collapsible table and the result can be been below.
{| class="wikitable collapsible" width="200px"
! Click Here for Contents
|-
| This contains the hidden content.
|}
The result is:
| Click Here for Contents |
|---|
| This contains the hidden content. |
Whether or not the wikitable class is included, the purple heading is a default feature. HTML attributes and CSS styles can however, be applied to the heading as with all other parts.
When the width attribute is used, the expanded width and the initial width will be the same and fixed by it. In this condition, unformatted text will wrap in the set width. Preformatted text will extend the box to the length of its longest line. Box structures such as HTML tables and images will expand the drop to the enclosures' width.
If the intention is to display unformatted text but to have an initial box width that is narrower than the open box width, then the displayed contents should be placed within a nested table cell of its own, and that table set to the required open width setting. Note also that the default text alignment for this collapsible table is center.
When the width attribute is omitted, the initial width is set by the width of the heading text. In this condition, unformatted text will expand the box to the available width of the page, and Preformatted text will extend the box to the length of its longest line. Box structures such as HTML tables and images as always will expand the drop to the enclosures' width.
An alternative to making your own collapsible table can be had using the template Dropimage. This template has a comprehensive set of options, including the options to change an entire style expression, and class. It is based on the Collapsible class. The result of using Dropimage can be seen by reviewing the effects of the drop-boxes on this page. Readers who need more information on collapsible tables, and in particular for information on combining sortable and collapsible tables, should see meta:Help:Collapsing.
See also
[edit | edit source]- The Testing Sandbox; Use the edit button on this page to enter work for testing.
- The CSS Cascade; A Wikibooks page that explains how the priorities of styles are decided within browser software.
Tables Ready to Use
Tables Ready to UseThe tables on this page are intended for those who need a Wikitext table that they can modify or extend for their use. For the main table-making page refer to Tables. The tables are accompanied by both Wikitext and HTML code modules in a drop-box, and this code can be copied into the WikiBooks Sandbox for additional work. The code in these modules has been numbered though the line numbers are local and will not appear in your pasted copies. Convert HTML Tables to Wiki is an excellent online tool, though a tool for the reverse process is elusive. Consequently, if both HTML and Wiki versions of tables are needed, it is advised to make tables first in HTML, then convert. Contributors with a useful table are encouraged to add to the page. |
|||||||||||||||||
The Basic Table
|
|||||||||||||||||
Row and Column Headings
|
|||||||||||||||||||||
Decimal Point Alignment
|
||||||||||||||||||||||||||||||||||||||||||||||||||
Horizontal Color Bands
|
|||||||||||||||||
Vertical Color Bands and 3D
|
|||||||||||||||||||||||||||||||||||||||||
Spaced Layout
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||
A Colorful Table
|
|||||||||||||||||
Making Templates A101
Introduction
This book chapter should be viewed as an introductory text on the making of Wiki templates, and an overview of what templates do is provided in this first section. First lets get some basic terminology:
- TEMPLATES are just blocks of saved text that have been given names. Some are ordinary text paragraphs and some contain wikitext to make headings, indents, tables, and the like. In a simple case, by typing a template's name in the work, an entire block of text is added to the page with all of its formats and other parts, just as if it had been typed by the user. This behavior can be repeated at any point that the user wants, and almost any work that is found on a wiki page could be placed within a template to do this. The main effort as you might suppose, lies in its initial design.
- NAMES of templates are assigned when they are first saved. The name must be unique, and it is used when a template is called for use. Sometimes other text is also used along with the name; it can include any options and parameters.
- OPTIONS allow the user to vary the template's usual behavior.. The usual behavior suits most situations but the designer builds-in ways of changing things just in case. Option values are usually limited to a short list so these are described in a template's documentation. For example, option values for an option called align might include only left, right, or center, and no others. Templates do not always need options, since their default behavior is often enough.
- DEFAULTS are the values used by a template when the user did not say. Default values are specified in design, and they could apply to formats or to user text inputs. For example, in the alignment example above, if the align option was not used, the template could use left, provided that left had been specified in design as its default. In the same way if the user forgets to type a text input, the template could use a pre-planned default input instead of the missing parameter; sometimes just a code to say something was forgotten.
- PARAMETERS are usually bits of text that a user enters for a template to process. For example, if a template makes text red, it still needs to know the text to color; this text is called a parameter, and the text is included by the user when the template is called for use. Sometimes parameters contain text like code to insert an image, or even a gallery or a table; it just depends what the template is designed for. A template can even be the parameter of another template; for example, a template to insert a test paragraph might occupy the parameter space of a template to make a text box. The new paragraph would then appear in a new text box.
- MORE GENERALLY, templates let us do much of the preparation in advance of making a page, and let us insert a block of typing, be it code to make tables, boxes, and other structures, or just a paragraph of text that is used a lot. The remainder of this introduction gives a few examples to show what templates do on the page, and in the sections that follow will be found what is needed to modify and make new templates for use in writing Wikibooks.
In the first example, the template Caption is used. It has two text parameters and no options at all.
This is the code to call the template for use;
The result of doing so is to produce the text:
This is the first parameter's text: This is the second parameter's text
Notice that the template has formatted the text, and that each parameter was handled differently. This template is used to make consistently formatted image captions. The source code for the template Caption features little more than text formatting.
In the second example, the template Drop is used. It has one text parameter and several options, none of which are needed here.
This is the code to call the template for use;
The result of doing so can be seen in the paragraph below.
otice that the template has inserted a drop capital from the single character used as a parameter. This template can be used to start sections within certain body text. Again, the source code for the template Drop is largely text formatting.
The third example uses template Dropimage to make a drop-box with an image in it. This template has many options, but only two were needed; the width option, and the align option. The other options use the defaults. There are two parameters; the top caption Press to View and the contents, in this case the Wikitext code for an image. The contents in the example can be viewed by clicking the arrow on the box.
This is the code to call the template;
The result of doing so is:
|
The template for this example consists of code to build the box structure, and the image code is strictly its parameter, i.e., the item that it processes.
Whereas the detailed study of this subject is complex, it should become clear that using and making templates like those mentioned above is well within the abilities of most wiki writers. Sadly, it is often the case that a writer sees the advantages of templates only when his work is nearly done, and a bit of effort in recognizing repetitive routine early in the work could save much time. Whenever a routine is repeated often, there is a job for a template.
It is true to say that most templates in the wiki family of projects consist of either the formatting of text paragraphs or the making of boxes of some kind. With this in mind the text below explains the process of template-making for text, boxes, and drop-controls. As preparation, those who intend to make box templates of any kind would benefit from an elementary knowledge of tables, and this knowledge is quickly available in the first few sections of the page Tables, where an introduction to CSS styles is also to be had.
Finding and Using Templates
[edit | edit source]There are already several thousands of templates within the WikiBooks templates namespace. That is another way of saying that the templates list is already long. At first sight, this may seem to avoid the need for template-making, but things are not so simple.
If the name of the template is known, then it can be found easily, but if the name is not known, it can take a long time to find a template similar to the one that you are looking for. Templates have their functions described on their own pages but many do not include notes, so the task of knowing which is which, and what they do even when they are found, becomes doubly difficult.
Templates made in Wikipedia and Wikibooks are not interchangeable, since they exist on separate servers. Although the code to make them is identical, this description applies to finding things in Wikibooks.
- To view lists of templates listed alphabetically within WikiBooks, follow the link to the All Templates Namespace.
- To find templates listed in various template categories, for example, drop-control templates, follow the link to the page Category:Templates.
- If you know a template's name, then find the template page by using the search box on any Wiki page. For example, to find Dropimage just type;
then enter.
When a template page is found, the code to make the template can be seen by viewing its editing window. Many pages have their documentation on the same page as the template code, isolated from it with <noinclude></noinclude> tags.
If after searching, you still need to make a template, as many no doubt do, then read on.
Put it on the Page
[edit | edit source]Templates are called for use in pages by typing a line of Wikitext, and so the user needs to know the correct spelling of the template's name, options, and parameters. Even when these are known it is all too easy to disrupt a page with a template error, especially during trials, so consider using the sandbox for testing. Some templates have all of the documentation and details on the same page and this makes them easy to use. See templates Plainlist, and Codebits as examples.
To call up any template for use in a page, the code is typed within double curly brackets. {{}}.
Included within the curly brackets is the template name, then, if required, a sequence of options, followed by a sequence of parameters. All entries are separated by pipe symbols. (|). For example, the general form to use for a template with two options and one parameter is as follows:
and a typical example of its use is:
The above code has only one parameter; it is numbered 1 by default. Parameters are given numbers or names to identify them in their design code, and examples will be seen in the sections that follow. The template-call in the example uses a so-called unnamed parameter, because it is not preceded by a term like 1= (numbered parameter), or content= (typical named parameter). When templates have several parameters then the parameter numbers or names help to make clear to the template which is which. Alternatively, the template can manage with unnamed and unnumbered parameter entries provided that they are in any case listed in their correct number sequence. When in doubt, use names or numbers. At times, especially when the first character of a parameter is a symbol, the use of named or numbered parameters avoids the corruption that would otherwise result with the unnamed entry.
The sequence of options is unimportant, since all options must be named in any case. Using named values just means adding the name of the option and an equals sign before the option's value. This of course requires a knowledge of the template's details.
Template names are sensitive to case except for the first letter, so a useful convention is to use lower case for template name, parameters, and options all of the time; that way you will never be in doubt.
Parameter names are quite sensitive to case in every way, so a capital letter makes all the difference. As a general rule, do not mix unnamed and named parameters in a template call, since the method used by the program to interpret their meaning becomes confused. Either use all unnamed with special attention to their sequence, or all named in any order that you like.
Find Details from Code
[edit | edit source]Let us assume that a template made by others has been found but that its details are unclear. Even without much knowledge of mark-up, it is usually possible to discern the options and parameters of a template by inspection of its coding. To see how this can be done follow the reasoning below.
The coding and anything else on a template page can be displayed in the sandbox by typing a special code there. The template does not do anything when this is done; it just reveals the text of the template page. That is, it reveals the coding and any documentation. As an example the template code for say, the template Tocbox, can be viewed in the Sandbox by typing:
To save the reader the trouble of doing so here, the template code for Tocbox is given below.
Code for the Template Tocbox
{| class=toccolours style="margin:1em 0 0 0;width:{{{width|300px}}};" align={{{align|left}}} |
The template page itself has a good description for its use, but assume for a moment that the descriptive material was absent. The code at the top of a template page is always the template source code; consider the example given above. Although it looks complicated, the object here is not to understand it, but to find the options and parameters from the code itself.
Note that the end of the code is marked with a <noinclude> tag, to make sure that any text that follows it is not used as a part of the template. In this example, there are two parameters; they can be recognized as the items with the form:
These entries identify parameters one and two respectively. It is clear, even without much understanding, that the first parameter is the heading text and the second parameter is the content text, and these terms in addition to the numbers could be used as their names . In the event that a user forgets to enter the parameter for say, content, a {{{2}}} will be displayed on the page as a reminder of what is missing.
All of the options within this template are recognized from the typical form;
This extract states that there is an option called align that has the default value of left. The idea of this default is that the value left would be used for align if the user does not use that option in the template call. The option could have almost any name; in fact it has been given the same name as the HTML attribute associated with it, (the part before the equals sign in the main code block). There are several properties within this code but only two of them have been coded as options; align and width, and both options have similar bracket formats to that of the above example.
With the options and parameters now understood, test the template on a page as follows:
This is the code:
The result is:
| Heading text |
| Content paragraphs |
It should by now be clear that despite having no specification for the template in the first instance, it has been possible to obtain information from the coding for its use.
Modifying a Template
[edit | edit source]Assume for a moment that a template has been found that is nearly right, but not quite. Say for example that the background color was the only part that was wrong. The source code for such a template could be changed, by adding a term to modify its background color. Then, the modified version could be saved as a new template, with a different name. Note that if the modified template were saved with the same name as before, the existing users who depended on the original colors would experience unwelcome changes in their work.
There is another way that allows the new user to choose colors while the existing users can continue to enjoy the default colors that their work displays. The template can keep the old name if the background property is made into an option, and the original background color made its default. Then, since the old users would not bother to specify the background color, perhaps not even knowing that they now could, they would get the usual color as the default value and would be happy with it. The new users who need a different color, could simply specify it as an option value when they call the template for use. In this way both parties would be content.
The modifying of a template approaches the difficulty of making a new one at times, and this process is covered in other sections below. For the background-change case, a suitable modified Tocbox code module would look like this. The code is:
{| class=toccolours style="margin:1em 0 0 0;width:{{{width|300px}}};background:{{{background|#f9f9f9;}}};" align={{{align|left}}} |
In the above code the background property has been made into an option. In addition, the original background color, #f9f9f9; , (light gray), has been used for the default. To labor the point, if the user does not bother to specify the background color, he will still get the gray color as before. Note again that the added option need not have been called background but could, for example, have been called bgc or some other name. In that event the template's option code would look like background:{{{bgc|#f9f9f9;}}}, and another color would then be called using say, bcg=papayawhip on the page.
The real template Tocbox has not been modified here, though this example provides a reliable demonstration of the method to use for doing so. After the modification above the template could be called by the new users as follows:
A knowledge of CSS property values allows considerable variation in a template's appearance. Luckily, the subject is well documented. See the external W3 site's CSS Reference List for a comprehensive listing of values and properties. Although the examples on the referenced page are designed for style sheets, the syntax found there is also that used for modifying styles within templates and other in-line styles. In addition, a useful color reference can also be had at Web Colors. A drop-box with many of the CSS properties for tables has been provided in the box-making section below. If time is short it could be noted that most of the template work done so far in this project, (WikiBooks that is), could have made do with little more that the CSS properties of text and tables. Study of these two areas is thus rewarding.
CSS reference sources are useful, though styles can also be changed with HTML attributes, (the styles like align with the equals signs). Such attributes can be seen in HTML reference texts as opposed to CSS texts, and in the aforementioned drop-box below. It may be of interest to know that some HTML attributes are the only ways to accomplish certain tasks; examples include colspan (to span table columns), rowspan (to span table rows), and align, (to align tables to center, something that the CSS float property cannot do).
Making Templates
[edit | edit source]There are many template types, but those used for inserting and modifying text are the most numerous. Boxes feature next; whether they are information boxes, so-called user boxes, or simple text boxes, they all have common constructs. Some templates have dynamic functions, like drop-controls, though once their basic outlines are clear, they can be shaped for many purposes. At least one example of each will be considered.
Template making consists of writing functional code, Wikitext or HTML, or sometimes a mixture of both. The method is to test the code in the Sandbox, until the function works well. Then the options and the parameters can be assigned to the code. These are tested again, and if all is well, the block of code can be saved as a template.
In saving the template it as well to check whether or not there is an existing template of that name already. The simplest way to save a template is as follows. First, make sure that you are logged-on in a page of WikiBooks, to avoid making a template in the wrong project. Go to the search box at the left of the WikiBooks page, and enter the wording to find the as-yet unmade template. Assume here that the intended name is to be Caption. The line to type in the search window is just:
If the template is found, then the name is already taken, and another is needed. Assuming that the name is not found, then the search results window will state that it was not found and ask whether or not you want to make the page. Click the link to make the page.
The link opens a template editing page with the name of the template already listed as its address. Copy the code from your work in the sandbox, then paste it into the empty template page. In the line immediately following the last line in the code block, add the tags <noinclude></noinclude>. All text not intended to be a part of the template code, must be placed between these tags, as is the case for the template's description.
Finally, save the page by pressing the Save page button at the bottom of the page. The template is now made, and can be called into use with its given name. Go to the sandbox and test the features of the template.
Text Paragraphs
[edit | edit source]The code for a template need not start with any special character or symbol. The main consideration is that the code performs the required action, just as if it were typed directly onto the page. At the 'end of the code block, be sure to add the <noinclude></noinclude> tags as mentioned above.
All of the existing Wikitext and HTML code that can be used in a page can be used for a text template. The user of a page does not have access to the parts associated with styles, namely the heading of the web page and their style sheets. As a result, users are limited to modifying the parts of the page that are available, the text within the body of the page. Those familiar with web page design will know that the only remaining available method is to modify the page's text with in-line styles. Working methods use the <div></div> tags and the <span></span> tags, thanks to a feature of Wikitext that allows the use of HTML coding within it. CSS, (Cascading Style Sheet), properties and values are used within these tags to modify the text styles that would otherwise apply.
It is as well to point out here the difference in use for span and div in text templates. Span should be used to format text only, noting that any formats applied to the text will not extend beyond the last text character; div, on the other hand, will apply its formats to a rectangular block of text that extends across the page. the significance of this is that div is neater for changing background colors on the page. A comparative example can be seen in the Classes and Styles in Tags section of Class and Style Notes.
The Simplest Case
[edit | edit source]Before doing any formatting, consider the method for making a template from a simple block of text. Type a block of text, with all of its formats and page layout in place, then save the block as a template. It is as simple as that. Such blocks of text find use for test text, such as Lorem Ipsum, a well-known text block of fictitious content used by printers and others in laying out their work. To use such a template just type:
at any convenient place on a page to produce the text block. This block of text is not pre formatted with hard breaks, so it will wrap within the space where it is typed, and with the default text styles of the page.
Adding Styles
[edit | edit source]To modify text styles, for example, for the text This is the text, we first place the text within <span></span> tags, like this:
<span>This is the text</span>Then we construct a style statement within the first tag. This example makes the font Garamond, 20 points, colored red. It looks like this:
<span style="font-family:Garamond;font-size:20pt;color:red">This is the text</span>and the result will be:
Notice that there is still a closing arrow for the first tag; it is located at the end of the style statement.
Notice also that there are three style rules in the statement, separated by semi-colons; these are font-family:Garamond to set the face of the font, font-size:20pt to set the size of the font, and color:red to set the color of the text.
The style statement starts with the term style=, and the right hand side of the statement is entirely within double quotes.
The individual style rules consist of a property; the left part, and a value; the right part. The two parts are separated by a full colon. The format of a style statement is strict. If the format has an error within it then the whole statement could fail. Note that Wikitext could have been used on the text itself; for example, to produce italics, (double quotes), or text that is bold, (triple quotes). Wikitext acts in addition to the CSS styles, provided that there are no obvious conflicts. Several spans and style statements can be applied to produce quite complex results.
These tag sets can be nested; that is, one set of tags within another set. Beware of nested span tags, since there can be unexpected results. Say that an overall style is applied to several paragraphs using span tags. Within these paragraphs another span set is used to format one of the paragraphs differently. When this is viewed, at the point where the inside span closes, the styles will have reverted to the body text styles described by the style sheet, and not the intended outside style definition. This is perhaps because the first closing tag was wrongly interpreted as the end tag. The problem is avoided by using div tags for both, or at most by using span tags for only one of the formats.
Many properties exist to modify text. They consist of all of the text styles found in style sheets, namely those for fonts, padding, alignment, margins, borders, text colors, and backgrounds. CSS property lists and other material on Fonts and Text provide the source material for all such work. Although CSS properties and examples are listed primarily for style sheets, the properties and values themselves can be used on the page and in templates. The Study Work drop-box contains a useful code module for studying text properties. It contains most of the useful text entries and can be copied for study into the sandbox.
|
|
Parameters
[edit | edit source]Now, continue to make use of the red-text example. Although the code could be saved as a template just as it is, it would not be very useful since it consists only of fixed text. To introduce the notion of variable text chosen by the user, we need to make the text position in the code into a parameter.
Assuming that the basic code works correctly, the parameter brackets can be added. In the above text example there is only one parameter, the content to be formatted. Starting with the code above, just replace the text part so that the code line now looks like this:
Notice that the original text has now been replaced with:
The digit identifies the parameter as number one. It is also the name of the parameter. The word content is just a convenient label, though either the number or the label can be used for named parameters. If the user forgets to write any text in a parameter position, then the number of the parameter will appear on the page to remind of it. If the template had more than one parameter, a similar process could be applied, with a sequence of digits 2,3,4 etc., and adding a suitable label in place of content for each.
Saving it in the usual way completes such a template. Assuming that the template were to be saved with the name BigText then the entry to call it for use would be just:
Note that when a template has several parameters, the ones used can either be entered as named parameters, using the number or label with an equals sign, or as unnamed parameters, by omitting the added names and just entering the text directly. The parameters should be all unnamed or all named but not a mixture of the two. If they are unnamed, the correct sequence must be maintained, and if they are named, then any sequence can be used. Number names and label names can be mixed without difficulty in a template call.
Although virtually any tags can be modified by adding a style statement to the leading tag, it is not to say that the work can always be made into a template. There is at least one exception that exists when it comes to making such a template. The <pre></pre> tags by their very definition cause a template's parameter code to be disregarded, and a different approach is needed. Instead of attempting to make a modified pre-formatted text template consider the use of Prettypre for a ready-made fancy version of these tags.
That is to say, it is possible to modify the <pre></pre> tags with inline styles, to make more interesting pre-formatted text, and it is possible to add the tags to text used as a template's parameter, but making a template from text bounded by pre-formatting tags will prove more difficult.
Options
[edit | edit source]For completeness, we can also add options to our basic red-text template example. Say we want to change the color of the text from time to time in our work. We could make another complete template for the new color or we could just add an option to the text coloring code. The new code looks like this:
Note that the entire property value (applies also to an attribute value), must be enclosed in triple curly brackets. Additionally, the value should be replaced with an option name / default value combination. In this case, if the user does not specify the color of text, it will be red in any case. If it is specified, (see the example below), it can be changed to any color using the option tint= within the template call. Assuming that this template's name were BigText the template call for purple text would be, say:
Other options could be made in the same way, and similar techniques could be used regardless of the tags used for the template.
A knowledge of the different tags and access to lists of CSS properties allows considerable scope in template design.
Making Boxes
[edit | edit source]The following sections make box or table templates from Wikitext. They can also be made with HTML tables in the same way. When it comes to making such a template, wikitext is fine but when a table is needed to go into a template as its parameter, or part of its parameter, an HTML table should be used instead. The WikiBooks text Making Tables touches on HTML table structures, and explains how to use styles. It is assumed that the reader is familiar with these concepts in the text that follows.
The Box Structure
[edit | edit source]Boxes are essentially tables, in fact table cells. The CSS property list to format tables is extensive. Simple boxes make use of the table container, and one or two cells within it.
Apart from the table container, the other structures of a table include its rows, and cells. In the case below there are two rows, each with only one cell in them. Each part of a table has properties that affect it, and an example of typical table coding can be seen in the listing below.
{|style="background:lightyellow;width:150px;margin:none;border:1px solid lightgrey" align=left |
Running this code in the sandbox produces the following:
| Heading |
| Content. |
If necessary, refer to the WikiBooks text Making Tables or the Wikipedia text Help-Table for detailed advice on making tables. Refer also to the drop-down box below for a listing of the commonly used table properties and their meanings.
|
For now, it will suffice to note only that:
- A table is enclosed in these symbols: {| |}
- A caption placed above the table starts with a |+.
- A heading cell within the table starts with a !
- A new row is created with the symbols: |-
- A data cell within a row is created with the symbol: |
- Style statements can exist at the table, row, or cell levels.
- An additional pipe symbol separates a cell's styles from its text. |
- Starting tables, rows and cells on new lines avoids many problems in templates.
Follow the reasoning in this description from the code.
The table container has background, width, margin, and border properties, and the align attribute assigned.
- Background;sets the background color for the whole table.
- Width; sets the overall width of the table.
- Margin; removes margins of the table.
- Border: Sets the thickness, type, and color of the table border, all in one.
- Align: Permits the box to be placed on the page at left, right, or center.
The cell in the first row has text-align,padding, and a form of heading text.
- Text-align;positions the cell text horizontally at the center.
- Padding; sets the padding within the first cell for the box heading text.
- The Heading Text; is made bold with Wiki mark-up.
The next row has text-align. This property applies style to all of the cells in the row at once, though not all properties can do this.
- Text-align;justifies text in the bottom cell - the main content.
The content cell has padding, and the content text.
- Padding;sets the spacing around the content text.
- The content text; is the main text for the box template.
Other properties could be specified for this text box, for example, for the details of the fonts to use, but there is enough here for this example.
Parameters and Options
[edit | edit source]It is intended to provide three options along with the two parameters. The options are to be background,width, and align. The parameter names are to be 1 and 2, with the labels heading and content.
The options and parameters have been added to the code below:
{|style="background:{{{background|lightyellow}}};width:{{{width|150px}}};margin:none;border:1px solid lightgrey" align={{{align|left}}} |
Parameters have been made in place of the heading and content text. The formats for parameters one and two are:
Each parameter format consists of a parameter label,( heading or content), a pipe, symbol,|, and the true name of the parameter, (1 or 2). In each case, both the parameter name and the entire parameter expression are enclosed in triple curly brackets. {{{}}}.
Options have been made for the properties background, width, and align. The formats are :
Notice that the format of the bracketing is similar to the examples given in the making of text templates, and that the same strict format is used to identify the options and parameters.
A parameter can use the option format too. When a parameter does so, it must use the named parameter style in the template call. The advantage of such a parameter is that it can have any default value, including an image. The disadvantage of using the option format for a parameter is that the highly conspicuous numbered reminder is lost. You will recall that the more formal parameter style gives a parameter number as the default.
The template can be saved in the usual way. Assuming that the template were saved with the name Textbox, then it could be called for use by typing the following:
The variations in boxes are considerable. By adjusting the table structure, it is possible to add images and other effects. Most of the information boxes within Wikipedia and WikiBooks have a table basis for their construction.
Making Drop Controls
[edit | edit source]Drop-boxes save space on the page and can be used for both text and for images. Within Wikibooks these boxes are dynamic, and clicking the link on the heading of such a box drops it box to show the entire contents section. Clicking the link again restores it to its closed state.
Drop-boxes can be created in two ways. In the past, the way to make them was to use the classes NavFrame, NavHead, and NavContent. These days, the collapsible class can be used for both tables and div boxes, and its simplicity has made it a clear choice. The first section describes briefly the layout for collapsible divs. The remainder of the section is devoted to the version based on the collapsible table; this method is the basis of the ready-made drop-control template Dropimage.
A ready-made template exists for a quite adaptable drop-box; it is Dropimage, though for those who want the details, they are to be had at Sorting and Hiding.
Collapsible Boxes
[edit | edit source]The basic code for drop-boxes is just:
<div class="collapsible">
<div class="title">Title</div>
<div class="body">
Hideable content
</div>
</div>
The above code produces a drop-box that is extended across the whole width of the page. collapsible contains the other two sections, title refers to the panel with the link, and body refers to the text box within the drop box itself.
By default, the contents are hidden when the page is loaded; that is to say, the box is closed when the page first opens. To have the contents shown by default, the user adds "selected" to the class declaration. CSS styles could also be added as shown below and the option-brackets and parameter-brackets for template-making have been shown, as was explained in the previous section:
<div class="collapsible selected" style="color:{{{color|darkgray}}}; width:{{{width|300px}}}; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
<div class="title" style="font-weight:{{{bold|bold}}};">{{{Heading|{{{1}}}}}}</div>
<div class="body" style="background-color:{{{background|lightyellow}}};color:{{{color2|black}}}">
{{{Content|{{{2}}}}}}
</div>
</div>
Changes in layout is obtained by changing styles in any of the sections, but the preferred method, using collapsible tables, is described in the next section.
Collapsible Tables
[edit | edit source](currently being rewritten to update for collapsible tables) The panel below shows the HTML and Wikitext code versions of a fairly basic drop-box based on the collapsible box class. The two versions are equivalent, though users who intend to make a template should use the HTML version, since it can have a table as its content without any instability. Nesting tables in Wikitext is problematic.
HTML Collapsible Table Cell
<table class="collapsible" style="border:1px solid black; width:300px;" cellpadding="5px">
<tr>
<th style="text-align:center;">Any Heading</th>
</tr>
<tr>
<td>Content cell text, images or HTML tables</td>
</tr>
</table>
WIKITEXT Collapsible Table Cell
{| class="collapsible" style="border:1px solid black; width:300px;" cellpadding="5px"
|-
! style="text-align:center;" | Any Heading
|-
| Content cell text or images only
|}
If, instead of the collapsed state, the selected state is needed on opening the page, then just add the class selected as in the line class="collapsible selected" . The default state is collapsed which need not be added.
The width style in the table line sets the initial width of the table on the page, and with the exception of un-formatted text, the table will expand on opening to accommodate the contents.
The float and align attributes should be avoided for tables because browsers may not support table alignment. Tables can be aligned in a way compatible with most browsers by setting the initial width of the table to 100%, and by wrapping the table inside a div box with its width set to the desired width. For left and right alignment use float on the div box. For center alignment use a margin of auto on the div.
HTML Collapsible Table Cell
<div style="width:300x; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
<table class="collapsible" style="border:1px solid black; width:100%;" cellpadding="5px">
<tr>
<th style="text-align:center;">Any Heading</th>
</tr>
<tr>
<td>Content cell text, images or HTML tables</td>
</tr>
</table>
</div>
WIKITEXT Collapsible Table Cell
<div style="width:300x; {{#switch:{{{align|center}}}|center=margin:auto;|left=float:left;|right=float:right;}}">
{| class="collapsible" style="border:1px solid black; width:100%;" cellpadding="5px"
|-
! style="text-align:center;" | Any Heading
|-
| Content cell text or images only
|}
</div>
Parameters and Options
[edit | edit source]The parameter and option brackets are shown in the panel below for an HTML version of the drop-box template, and it will be noted that the method is similar to that used for simple tables in an earlier section. It may be of interest to note that the outermost table is there simply to allow centering of the entire structure, since the collapsible class does not support it.
A Basic Drop-Box Template Coding
<table style="border:none; align={{{alignT|left}}}">
<tr><td>
<table class="collapsible" style="border:{{{border|1px solid black}}}; width:{{{width|300px}}}; background:{{{backgroundT|transparent}}};" cellpadding="{{{padding|5px}}}">
<tr>
<th style="background:{{{backgroundH|transparent}}};text-align:center;">{{{heading|{{{1}}}}}}</th>
</tr>
<tr>
<td style="text-align:{{{alignC|left}}};"> {{{content|{{{2}}}}}}</td>
</tr>
</table>
</td></tr>
</table>
<noinclude>
All other template page material goes between these tags.
</noinclude>
The above HTML block of code has been saved as the template dropthing, Dropthing, and it can be called for use on a page by typing something along the lines of the following:
{{dropthing|backgroundT=mistyrose| alignT=center|width=400px| Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}
The drop-box that is produced with this template call is this:
|
A more complex ready-made template called Dropimage exists for those who need it. It has a large set of individual options, and the facility to add more properties and classes, the coding for which is described next.
Advanced Options
[edit | edit source]Although the user is always limited by the original template's design, he has some latitude afforded by the pre-planned options. There is a way, however, that allows the user to add classes and CSS properties not considered in the original design. For this method to work the designer of the template must anticipate the possible future need for such a change, and add a few extra keystrokes. It is explained below.
Perhaps surprisingly, both class and style declarations are themselves HTML attributes, in the same way as align, cellpadding, and others. As such, these terms can be specified in the same way as other options, with default values of classes and styles. The user can then specify the list of styles or classes that he wants the template to use, or by doing nothing of the kind, the default values of each would apply. Clearly, if the usual values of an existing template were made to be such defaults, it would allow changes without affecting the original users. The example below allows the class selected to be used for a template whose original author uses only the class called collapsible.
Add Classes
[edit | edit source]To allow user-changes to the classes for the above drop-table template, the class declaration (expression) line needs to modified as follows:
This has the effect of making a new option named as class that has a default value of collapsible; that is, if no class option is written by the user the default will apply. Now, having modified the class-declaration, the user could add the class selected or any other suitable class with which he is familiar, (while others still make normal use of the template), as follows:
The box produced in this way is just:
|
The template, for this box only, will be displayed in its open state, since the class selected has been added as an option. Notice that the intended classes all need to be declared, and that the quotes were not needed. This entry entirely replaces the default class declaration. Similarly, other classes could be used, though the set of classes available for the automatic formatting of tables could do with some extension.
More Style Options
[edit | edit source]To modify the template to add user-written style expressions, the template's existing style expression in the table line would be replaced as follows:
style="{{{mystyleT|border:{{{border|1px solid black}}}; width:{{{width|300px}}}; background:{{{backgroundT|transparent}}} }}}"
Notice that the entire CSS style expression, (but not the attributes that followed it)), are now the default value of the mystyleT option. When this option is used in a template call the quotes for the value expression should not be used.
The typical template call, introducing new properties might then become:
{{dropthing|myclass=collapsible| alignT=center|mystyleT=border:3px solid brown; width:300px; background:mistyrose;color:darkgreen; font-weight:bold|Press to View|[[image:Cerasus blossom.jpg|400px|thumb|center|''Hawthorn in bloom''.]] }}
and the result of making this template call is just:
|
Notice that the intended new style statement must be rewritten in its entirety, and that now a new CSS property (color of text), not included in the original design, has been added within the option statement.
If the mystyleT option were not used, the individual options could still be used. If both the expression and the individual values are changed, it would be as well to study the possibility that one will override the other.
The template Dropimage has been modified to include user modification of class and style.
Endpiece
[edit | edit source]The three example types given in the above sections will hopefully introduce the reader to the making of templates. Bear in mind that there are many aspects of templates not discussed here; for example, the notions of conditional behavior, loops, and defaults that themselves run as templates. Further reading about templates can be found in the links below.
Above all, learn how to use CSS styles in making your templates, and experiment with their effects.
See also
[edit | edit source]- Sandbox: The Wikibooks editing and test window
- Help:Templates: Wikibooks main templates article
- Making Tables: Wikitext methods for tables
- Help:Tables: Wikibooks main tables article
- All Templates Namespace : Wikibooks templates alphabetical list
- Templates Category: Wikibooks templates listed by category
- CSS Programming: Helpful for CSS context
- CSS Reference List: An external CSS Properties Reference
- Web Colors: A Wikipedia article on web colors
- Template:Dropimage: A multi-optioned drop-box template
- Template:Thetop: The most useful of the top section templates, for filling the space.
- Template:Lorem ipsum: Test paragraph template
- Class and Style Notes: About Wikitext classes and styles, as opposed to style sheets
- Anatomy of a Template: Wikipedia text with notes on templates as defaults, and conditionals.
Templates Ready to Use
Introduction
[edit | edit source]This page introduces a few existing templates, and others can be found:
- To make a template or modify one, refer to Templates A101.
- To search for templates alphabetically within Wikibooks, (not Wikipedia), follow the link to the All Templates Namespace.
- To search for templates organised by category, follow the link to Category:Templates.
- To search for a template by name, for example dropimage, then enter the following in the search box on the left of any Wiki page and select go:
Writers are encouraged to add links for useful Wikibooks templates, perhaps in tabular form within these or other sections.
Page Building Blocks
[edit | edit source]Layout Options; template Thetop
Pages each have certain similarities. Most of the time the text extends across the page and the colorings match the default set. Sometimes a more complicated layout is needed, and the setting of styles every time becomes laborious. This becomes especially tedious when there are lots of spaced elements such as tables, lists, images, and text. This template, within the perimeter border, has both page-wide sections and panels across the page. There are many options for each of its five parameters and configuring it is straightforward. This text is written in the leader section of the template Thetop, and the other sections below include three boxes across the page and a trailer section, similar to the leader. |
||||||||
<table border=1>
<caption>Caption</caption>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>[[image:crocus_4.jpg|75px]]</td>
<td>D</td>
</tr>
</table>
|
|
The sections are adjustable
|
||||||
| The width of this building block matches the top section template exactly. In fact, if it is preferred, this template could be used for a top section. By the use of such a building block, greater consistency is afforded, and the addition of background colors allows a more interesting panelled page.
Note that a template is not needed to simply apply a more interesting color to a page. Writers and editors with this in mind need only place all of their page text within styled HTML ''div'' tags. The styling of tags is covered in Typical 'in-line' block formats, and if necessary, an example can be found near the top of the mark-up text for this page. An example of the template's use can be seen throughout the page Tables. |
||||||||
Hidden Contents
[edit | edit source]Sometimes a page gets a bit cluttered. Much detailed information is best tucked away where it can be accessed when needed, but where it does not detract from what is being said.
For this purpose there are templates such as Dropimage or FullWidthDrop. The quoted example presents a neat box with a heading and a link. The link toggles; left-clicking it the first time drops the box to show the contents. Clicking the link again closes the box. The amount of content can be considerable. Notice that whereas Dropimage can be narrower than the page, the template FullWidthPage is made to occupy it fully at all times.
Despite their names, both boxes also can contain text or other elements, including other templates. For Dropimage and FullWidthDrop, HTML tables are preferred to Wiki ones.
Examples of the use of Dropimage are shown below for an image, for text and for an HTML table. Further examples of its use can be seen throughout the Editing Wikitext series.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Image Templates
[edit | edit source] |
| Note this frame-less caption. |
Images cannot include captions unless the image syntax makes use of a frame or a thumbnail. Borders tend also to be of a standard format and cannot ordinarily be customised.
These limitations are overcome by using the set of templates Noframeleft, Noframeright, Noframecenter, and Noframenone. A brief inspection of their names shows that there one for each of the standard image positions. These templates also have a number of options.
An example of the captioning is given with the image on the left, and can also be seen on the page The Quick Course.
Users of Internet Explorer will find that the mouseover functions do not work for them.
HoverImage as a thumbnail.
HoverImage as a thumbnail.
|
| Gerbera:Hover for the Chrysanthemum. HoverImage used within Noframeleft. |
Images are usually fixed on the page but there is a technique that allows two images to occupy the same space. An example is shown on the right. When the mouse moves over the image, a different image is shown instead. It is designed by persons more clever than me as a template. The whole thing allows the use of the standard image options, and the template is called HoverImage.
HoverImage's first two parameters are the file names of the two images to use; the first is the default image and the second is the alternative. There are separate caption options too; they are written in the same sequence as the image names. The other options like position, size, and type of border can be added and apply to both images at once. The template can be used in places where a normal image syntax line is used. The code to make the hover-image on the right is just:
If the template is used for images with different shapes, some improvement is achieved by setting the height exactly and by setting the base dimension as some impossibly high value; in this way both images will be set to the intended height. Note also that the entire template can become the content of the Dropimage template, and still works well; in this event set the image option to center.
The unwanted white border in the image example is not a fault in the template but is a consequence of using images with frames on a colored page background; it is a bug. To avoid this, simply use a frame-less image. If a caption is needed as well then use the HoverImage template as the image parameter of e.g., Noframeleft, to make a frame-less image with a single caption. The image on the left was made in this way. The coding for mouse-hover frameless images with a single caption is just:
Information Boxes
[edit | edit source] |
This box is made with the template Technote and is intended for use at certain points within a technical page, possibly for excessively terse points that most choose to ignore. Since the heading can be changed also, it can take on any useful form for which the green tick-mark image is suitable. |
| Technical Note: |
 | This box is made with the template Caution and could be used in pages to focus attention on possible hazards or difficulties needing more careful attention. It is similar in that the heading can be rephrased; thus it could also be used to indicate an error, or any form for which the red cross is appropriate. |
There are many information boxes available within Wikibooks. The majority of them find use for administrative comments and reminders. The background color and the text alignment are options. As is clear from the above examples, the text can also contain hyperlinks.
Highlight Blocks
[edit | edit source]The above example shows another box, this time made with the template Block to emphasise the code lines that need to be learned for some context or another.
It uses a Courier font for programming and mark-up code descriptions. It is intended for single lines though it will expand, and background color, font, alignment, and other elements are options.
At a more general level, the template can be used for page-building. When one instance of the template immediately follows another, color banding becomes possible. Since it is based on the div tag it has very few differences from the main page.
A version called Blockwrap also exists to be contained in sections of text that wrap left or right. This was needed to overcome a bug, where divs insist on using the full width of a page.
The template Block stacks neatly top to bottom for page-building like this:
Banded Bullet Points
[edit | edit source]
|
Although this set of templates lacks elegance it has been found to save time over the more laborious method that involves a custom table. The template call for the above example uses a custom width and position and looks like this:
{{dul|first point}}
{{lul|second point}}
{{dul|third point}}
etc...
}}
Hidden Headings
[edit | edit source]As will no doubt be known, every heading in a Wiki is listed as a link in the table of contents.
Sometimes, there is no need for a table of contents entry, but a heading is still needed. This is one way to avoid too many levels within the contents box. For this purpose, the set of six templates Hiddenh1 through Hiddenh6 has been made to imitate the heading styles.
For example, the use of Hiddenh3 corresponds to a level three heading in Wiki, and an h3 heading in HTML. Use them, for example, within drop-boxes, where otherwise closed boxes might cause listing confusion. Because they are not taken formally as listings, it will not be possible to link to such headings as would otherwise be the case.
Drop Capitals
[edit | edit source]drop capital is this big letter at the start of the paragraph. It is sometimes used in art work or to start stanzas in prose, though at the most general level, it finds use where there is no formal heading style. It is a form of text emphasis, in that it directs attention to the start of a section.
The example uses the template Drop. It is only the first letter that is contained in the template call, and in every case, the next text character, (ignore any space), is typed hard left against the template's closing brackets.
For those who need a more complicated format of their own, it will be necessary to make one, since as far as is known, this is the only one on file. A point worth noting is that drop capitals are unlikely to line up vertically, unless a mono-spaced font is found for the purpose. For this reason they tend to be used far enough apart to avoid the discrepancy.
Writers' Data Lists
[edit | edit source]While working on a page there is often some CSS code or color format that needs reference. To avoid the need for page-searching a number of templates containing such information can be placed adjacent to the work, on the page or sandbox, ready for use. The lists are compact since they are hidden in drop-boxes until they are needed. The list so far includes these:
- Tablestyles; a list of CSS styles and HTML attributes of particular use for making tables. The text also contains notes on code spacing and priorities.
- Lightcolors; a list of selected pastels and light color names, with their RGB and HEX values.
- Mediumcolors; a list of medium density color names and their codes.
- Darkcolors;a list of dark colors and their codes.
- Greycolors;a density spaced list of greys with their RGB values.
- Flowers;a gallery of high quality flower thumbnails for quick image-finding.
Class and Style Notes
This short piece is intended to communicate a few of the more basic points about styles for authors starting out with Wikibooks. The system's style-sheets are not accessible for edit by authors but a considerable amount of CSS styling is still possible by the addition of HTML and Wikitext tags to the page.
Basics
[edit | edit source]- Styles: These are sometimes called CSS style rules. They are delivered to the browser along with the Wikibooks' web-pages. They are sent in text files called style-sheets, though fortunately they can be typed directly onto the Wikibooks edit area as well.
- User style-sheets form an exception. Those who are familiar with this use of their browsers could modify the local display of a wiki web-page, but not the stored version that can be viewed by others.
- HTML tags and Wikitext tags can be added to the edit area of the work. Authors can use either Wikitext or HTML tags in their work; in fact many of the HTML tags that are in general use could be used. Wikibooks uses the Wikitext mark-up most of the time, but it is translated to HTML before it is sent to the browser for use.
- Wikibooks authors are limited to in-line styles. Authors do not have access to the style-sheets for the Wikibooks system. They must write their styles into Wikitext tags or HTML tags that they add to the edit area of their pages. If however, they know of classes of styles that already exist they can declare them in tags for use too.
- Templates can contain styles too. Templates are named blocks of prepared text, with or without styles, that can be inserted into an authors work with a special format. Complex tasks involving in-line styles, especially those that are to be used frequently can benefit from their use. Templates made by others are available to all.
- In-line styles have a fairly high priority. In fact, for those familiar with the subject, each in-line style declaration has a specificity that is one-thousand times that of a simple tag-selector, one-hundred times that of declarations within a class block, and ten times that of declarations within an id block. That is to say, they override other author styles unless those other styles have an !important marking.
- HTML attributes are styles too. Before the use of CSS styles HTML attributes were the main way to style web-pages. Many of these attributes are no longer available in HTML5, but a few still are. Because their future is uncertain, Wikibooks prefers the use of CSS styles.
- Use a CSS styles reference. To find the styles to apply in your work, the best way by far is to refer to a reference list. A comprehensive list and tutorial for CSS styles can be found both within wikibooks itself and at the World Wide Web Consortium CSS Reference.
In-line CSS Styles
[edit | edit source]All in-line styles, whether written in HTML tags or Wikitext makes use of the Style attribute. There should be only one style declaration in an element if confusion is not to result.
The following code is typical of an in-line style declaration for text to which paragraph tags have been added. It is used here to set the font name and its spacing.
<p style="font-family:"Times New Roman"; line-height:1.75em; letter-spacing:0.1em;">The text</p>
The main points to note about the style declaration are these:
- The style-block is always equated to the attribute style .
- The entire style-block is set in parenthesis.
- There is a colon between each property and its value.
- Individual declarations are separated by semi-colons.
- Values that contain spaces must themselves be set in quotation marks.
- A space can exist after a semi-colon.
- The last semi-colon is optional.
- Any number of properties can be listed.
Some structures written in wikitext, such as tables, use a slightly different format but the style-part is the same. Those with an interest in such formats should refer to the page Tables, and for a reference list and tutorial on CSS styles, refer to the site World Wide Web Consortium CSS Reference.
Common Styling Tasks
[edit | edit source]This section describes the basics of the more common styling tasks encountered by the new Wikibooks writer. Writers are encouraged to add to this section with their useful findings. Thus. in a healthy writing environment it should increase with time.
Styling Paragraph Text
[edit | edit source]The most common task by far in Wikibooks styling involves changing the appearance of text. There are two main methods available to the writer, the addition of paragraph tags that are then styled, or the similar use of span tags. Both methods use a style expression of the type previously described and the layout of each is shown below.
<p style="font-size:16pt; color:blue;">This is one whole paragraph....</p>
<span style="letter-spacing:0.15em; font-family:Garamond;">This is text within a paragraph....</span>
The span technique is usually reserved for short strings of text whereas styled paragraphs have more general use. Paragraphs are examples of block elements, so they can have widths, margins, and other dimensions set for them. The span tag is an example of an in-line element, without block styles.
If there are several paragraphs to style, rather that styling each, it is best to add a set of div tags around the work and to style that. Then, provided that it is possible to do so, the styles will be inherited from the division tag. The inheritance of styles is beyond the scope of this section but is covered elsewhere in The CSS Cascade - Inheritance of Styles.
Styling the 'Pre' Tags
[edit | edit source]The Pre tags can be added to text when we need to preserve its exact layout. That is to say, where the browser must be discouraged from doing formatting of its own. Examples include the writing of verse, lyrics, code listings, and various other purposes. This kind of text is referred to as pre-formatted text to distinguish it from un-formatted text, the usual thing, where the browser wraps text at the end of lines. These tags also have the effect of deactivating functional code like tables, and all other tags. The basic code is just:
<pre> The time has come the walrus said to speak of many things... </pre>
The pre tags can be CSS-styled to produce different fonts, borders, and backgrounds, in addition to the full set of width, padding, margins and alignment that is common for all block elements. See the example below, where a few styles have been added. The white-space property makes sure that long lines are wrapped, instead of forcing the page width to widen.
<pre style="border:1px solid lightgrey; font-family:Arial; white-space:pre-wrap; background:beige;"> Text goes here... </pre>
More methods for pre-formatted text can be found at Preformatted Text.
Shifting the TOC
[edit | edit source]One of the most useful things that styles can do is to shift the Table of Contents (TOC) to some precise point on the page. This becomes essential when lists appear at the top of a page. In order to avoid the inevitable distortion of bullet-points the TOC can be simply moved to the right hand side of the page, as opposed to its habitual position on the left.
The usual method to do this is to place the Table of Contents in a table cell, and to then move the table to any place on the page that suits. A table is chosen rather than a division because a table can change in size easily, to accommodate a changing TOC width. Templates have been made that exploit this idea, including Template:Tocright. Using HTML tags, the general form is just:
<table>
<td>
__TOC__
</td>
</table>
Notice that the TOC inclusion is in capitals and has four underscores, two on each side.
For positioning on the right of a page the table could be styled as follows:
<table style="float:right; margin:10px;">
<td>
__TOC__
</td>
</table>
The float property places the table on the right of its container, the page, and allows text to wrap around it. The text will start to wrap, starting with the line of text that follows the code block. The margin property sets the spacing between the table container and the wrapped text.
Further information can found on the TOC at Headings.
Dividing the Page
[edit | edit source]Pages can be divided into partitions. This is useful when applying styles to large sections, and for making smaller box-like shapes.
The size of the enclosed section is not important. For example, the author's section of the page itself could be divided into two parts as follows. Here, one part has been given a different background color from the remainder.
<div style="background:beige; border:1px solid lightgrey; padding:10px;">
First page part...
</div>
<div style="background:linen; border:1px solid lightgrey; padding:10px;">
Second page part...
</div>
The existing text and structures will be indented within these new colored containers by 10 pixels, about one tenth of an inch or so depending upon the resolution of screens.
Useful CSS Classes
[edit | edit source]Sadly, there are few if any useful classes that can add interest to an author's work. There is a real need for a set of table classes; the condescension of the Wikitable class is really not sufficient. It is a matter for web-masters to improve the availability of classes, since others have no access to the modification of style-sheets. However, would it appear from the long standing of the basic table style that they think that they are just fine as they are?
See Also
- CSS Reference : A useful external CSS reference list
- Sandbox : The WikiBooks sandbox
- Templates : WikiBooks template making A101
- Style Presentation Modes in Opera 12.16 : A description of the Opera browsers style modes.
- The CSS Cascade : A basic explanation of the CSS cascade.
Indexing Your Work
Index your WorkThis page gives an overview of indexing WikiBooks. That is, making entries on the relevant subject pages and other category lists, so that books can be found. The content of this page is basic, though further details can be found by following the links in the See Also section at the end of the page. All books are assigned to some subject area.. To do this, a subject entry is made on the cover page of each book, bearing the name of the subject category. In addition to this subject listing, a book can be assigned to other categories. These other categories are different in that they are cross-subject categories; that is, they could have, but need not have, books in them from more than one subject. There are many existing cross-subject categories for this project's books, including;
|
Find Existing Categories
A page's assigned category can be found in its bottom line. As was implied in the section above , categories exist in hierarchies. The links on category pages lead to sub-categories, or eventually to the book pages themselves, so clearly, it is possible to get to any category by simply following the trail of links. However, a quicker way to access a known category is to search for it on the Search for Categories page. Follow the link to Search for Categories, then narrow the search by entering the starting letter and the category type.
Alternatively, to access any category listing just type the details into the search box on the left of any WikiBooks page. Notice that with the exception of the first character, a category's name is case sensitive; so, Category:Box Templates is not the same page as Category:Box templates.
The top level subjects can also be found on the WikiBooks Main Page. These top level subjects break down into sub-categories of subject, though users are limited in their assigned subjects to the ones that already exist. New subjects cannot be made by users, though new general categories can. Recent advice implies that subject categories can be user-modified but attempts to do so have met with difficulty; unless users can determine the methods to employ they would be best to assume that the subject hierarchy is fixed.
As a simple example of accessing the WikiBooks category, enter the word category and the category name separated by a colon, as follows:
The page will open. Click any of the links to go to the various sub-categories, and so-on for the links within these.
Books versus Sub-pages
[edit | edit source]WikiBooks is organised on a book basis. The cover-page of each book is its main page, sometimes called the book page, and this page will often have user-made links in it to go to the other pages of the book. Because the making of user-links to sub-pages is of variable quality, it is apparent that there is a need for a book category, with a complete set of links to all of the pages of a book.
To build a book category, each sub-page of the book and the main page itself must have a category-tag linking it to that listing; that is, all of these tags must be the same. It is usual for the book category to have the same name as the book itself, to keep things logical. As a result, the sub-pages are always accessed by way of the user links on the main page or the automatically made links on the book category page. The book page on the other hand bears any additional tags to connect it into the indexing hierarchy. In summary, readers can use the subject listings to access the main page, that is, the book page of the book, and if necessary there is a category page called the book category where links to the pages in the book could also be found.
For example, Editing Wikitext is the name of the book containing this page and the book category has the same name. The main page has navigation hyperlinks made by the author, (not to be confused with category links), for fast access to the other pages. All of the pages have a link to the book category page. These links were made with the category-tag. For these particular sub-pages the code for the links is hidden away in templates, but you can see the usual result at the bottom of each page. Clicking any of these links leads to the book category, where, for convenience, all such pages are listed.Notice that both the main page and the book category have further links to subject pages higher in the system, but that sub-pages do not link directly to any subject page.
|
Note that category tags of any kind are most often typed at the end of each page, partly to avoid disrupting the page's formatting and partly so that they can be found easily. In fact, the links can be placed anywhere on a page, and can also be added as text in a template. When such a template is called into use, it is as if the category-tag were typed into the editing window. An example of such a template is used as the top section panel for Editing Wikibooks, where an additional back-link to the main page has also been added. |
| Technical Note: |
Once the main page's subject has been assigned, and the book category built, the basic task is complete. Then, in addition to these minimum requirements, any of the book's pages can be assigned to general categories that are of further help to users; for example, an administrator might use a general category to remind of work that is required on certain books or on individual pages. There are few restrictions on the making of general categories, and these are assigned by adding an additional category tag to the page. Note that the subject assigned must be one that already exists; this differs from general categories where any required category is easily made.
Make a General Category
[edit | edit source]Sometimes, despite there being many general categories, a new one is needed. This can happen when a user discovers some purpose that must not get mixed up with other existing entries. Note that it makes little difference whether a category is made before making a reference to it, or not. This section explains the details.
Assume that you have decided on the category name and its position within the category hierarchy; that is, you know the intended new category name and the name of the category that it in turn should belong to. Assume for this description that the intention is to make a general category called Sandwiches within the category Fast Food. To make sure that the Sandwiches category does not already exist, and as a constructive starting point, it is best to search for the intended name. Follow the method outlined in the above section, Find Categories, to make the search.
If the page already exists, it will be listed in the search results and you will need to think again about your choices. If it does not exist, then the search listing will include the offer to create this page. Select the link and it leads to a new editing page, already named and ready to type.
Because all of the entries are automatic, there is only one thing that needs be typed in the editing window and it is the category's own category link. Type this anywhere in the editing window, (note the underscore), and then save the page.
If you forget to make the reference to the higher category, or forget to save the page, then any links to the new page will not work and will appear in red. This is easily fixed by correcting the omission.
At the bottom of the saved page will be seen the category link that you have just typed. You are now ready to add pages to your new category.
Assigning to Categories
[edit | edit source]As was explained in sections above, the book is assigned to an existing subject area, and the subject is restricted to those found by following links from the top level subjects. This section shows the code line to type to assign a book page to a subject and any page to a general category.
Assign the Book's Subject
[edit | edit source]Having determined that there is an existing subject called Help and that it is appropriate, the home page of Editing Wikitext can be assigned to the Help subject by typing the following at the end of the editing window:
Assign Pages to Categories
[edit | edit source]To assign this page to the book category of Editing Wikitext in its most basic form, type the following:
|
If the page being assigned is a template page, be sure that a category-tag is used and that the category link is made within the <noinclude></noinclude> tags, to avoid its being considered a part of the template's function. |
| Technical Note: |
Multiple Categories
[edit | edit source]Make separate category entries, one for each. The system will combine them for you after the save.
List Positions
[edit | edit source]The default listing within a category page is alphabetical, using the first letter of the home page. In addition, the whole local address that follows the home page is displayed in a category list. This has consequences for a page that lies several directories lower in a file tree, since the whole file tree will be listed in the category list, and the sort key will suit the home page, not the sub-page. The full address text that is listed in this way cannot be changed, and this limits the usefulness of the entire process.
There is one exception to the listing rule, and that is in removing a namespace prefix, for example, from a template name. The following code could be used to categorise the Template:Caption page under Text Templates while listing only the word Caption, under 'C' instead of the 'T' that would otherwise result.
The {{PAGENAME}} magic word is able to strip a namespace prefix from the page name. Elsewhere, it may be necessary to make a link to a category page within text; the way to do it without forcing an unwanted categorisation is to prefix the category tag with a full colon.
Note that work that is entirely confined to only one page, such as templates and other utility pieces do not have sub-directories or sub-pages; they do not suffer from this excessive listing problem. In these cases the simple notation will suffice. For these cases, the method of using a changed sort position is mentioned here for completeness. At the most general level, by adding a character after the name of the category, separated with a pipe symbol, the listing position is changed to it, but the full address is not shortened. In fact, when a word is used instead of the single character, like in the template example, its first character of the word is used for positioning.
For example, to categorise a page called Abbreviations in Latin as belonging to the Abbreviations category under 'L' instead of the default sort order under 'A', type this:
As far as is known, only one entry can be specified in this way. That is to say, a title cannot be listed under two different sections in the category.
This method makes most sense for single pages at the top-directory level since sub-pages would defeat the object with a long directory listing. The method clearly is of limited use in its present form, and a system that permits any text to be depicted in a category list is but the stuff of dreams.
See also
[edit | edit source]- Help:Category : The main WikiBooks category help text
- Wikibooks:Categories : Another Wikibooks category help page
- ↑ ""pre-wrap" | Can I use... Support tables for HTML5, CSS3, etc". caniuse.com. Retrieved 2024-09-15.