Using HTML and CSS in KNILT
Using HTML and CSS to enhance the format of your KNILT pages
How to write commands in HTML
MediaWiki understands HTML so you can use HTML commands to add formatting to your KNILT pages that you cannot do with MediaWiki commands. You can also import HTML that you may have written elsewhere into your KNILT pages. You do not need to be an expert at HTML or CSS to enhance your formatting of a a MediaWiki document like KNILT. Here are some simple examples that use HTML and embedded CSS to make KNILT pages more readable, but first, you need to know how to write an HTML command. All HTML commands have a beginning, a middle, and an end.
- HTML commands begin with a less-than sign < followed by the command itself, and finally a greater-than sign >. For example, to begin a command to create a title, one might write <h4>.
- The middle of an HTML command contains the arguments for the command, i.e. what you actually want to have appear on the page of a browser that opens a page that contains it.
- The end of an HTML command looks like the beginning with one difference. The less-than sign is followed by a forward slash / and then the command itself and the greater-than sign as in </h4>.
So to create a title you would type <h4>My title</h4> which produces
My title
Now you could have produced that with the edit toolbar to get this, but ...
My title
... as you can see, the two things are not the same. Both titles produced new sections identified by the Table of Contents, but the one made with the edit toolbar is strictly left-justified and creates another editing break in the text. If you look at the code for the HTML title, you will see that I used two colons (::) to indent it. That is not possible with the built-in MediaWiki titles. If you had not wanted it to create a new section, you could have typed the HTML as text in a paragraph with normal text, but then you would only be able to make it bold or italics with other commands from the editing toolbar. Doing it with HTML allows you much more flexibility. Here are some ways to do that.
Formatting text with HTML inline elements
- Underline text using the HTML command <u>underlined text</u> as in underlined text
- Make text bold using the HTML command <b>boldface text</b> as in boldface text
- Italicize text using the HTML command <i>italicized text</i> as in italicized text
You may also chain these commands in any order to apply multiple formats to the same text. For example, you may type
<i><u><b>italicized, boldface, and underlined text</b></u></i>
to get italicized, boldface, and underlined text
When you chain HTML commands, you must make sure to end the commands in the reverse order from which you entered them.
Two other text formats you may want to use that are also available on the edit toolbar are sub to create subscripts that you might need in a mathematical equation such as x1 + x2; and sup to create superscripts that you might need in a mathematical equation or to create a footnote as in y = x2 or "... footnote3. To see the code for any of this, go into edit mode.
For a discussion of this section, watch the following video.
HTML block elements, inline elements, and lists
In the following video, I will explain how you can use additional HTML commands in your KNILT pages. Examples provided below that accompany the video introduce you to a few items in each of the following categories of HTML commands.
- Headers and paragraphs
- Inline elements and symbols
- Lists
HTML headers and paragraphs
HTML headers and paragraphs are block elements. Headers are coded with a lowercase "h" and a number from 1-6. Each of these represents a different size with sizes declining from 1-6. In MediaWiki h2 - h6 are similar but not identical to the default headings in the edit toolbar. For a point of reference, <h4> is the same size as the default font size for KNILT heading size 3. In a MediaWiki document, you should never code a line <h1> because MediaWiki reserves = 1 = for pages and using an HTML h1 command may produce undesired results.
As you can see here, HTML defines a paragraph with the <p> command. KNILT automatically separates paragraphs with a blank line. At this point, you might be wondering why one would use HTML to create headers and paragraphs in a KNILT document since it is simpler just to do it with the standard MediaWiki formatting. The answer is that you have many more formatting options in HTML when you embed CSS commands in the HTML commands. For example, in KNILT, section headers are in serif type and paragraphs are in sans-serif. Suppose you want them to match. You can do that in HTML.
Embedding CSS in HTML commands
Now suppose that you want your text to appear in a color other than black. Embedding a CSS color command in the beginning of the paragraph command allows you to do that. These are just a few of the things you can do with HTML and CSS to spice up your KNILT document.
Inline elements and symbols
Inline elements are HTML commands embedded in a block elements. The text formatting that underline, italicize, and create boldface type are inline elements as are <sub> and <sup>. Because MediaWiki recognizes those commands directly, they need not be embedded in HTML headers or paragraphs in KNILT. <q> is another inline element you may find useful because it puts quotation marks
around text. One more inline element you may want to use is <br>. This creates line breaks, and unlike other HTML commands, it accepts no arguments and therefore requires no closing command. Oddly, MediaWiki actually recognizes </br> in the same way that it recognizes,
so in KNILT you can actually use either.
MediaWiki actually requires you to use HTML symbols in MediaWikis like KNILT. Symbols in HTML follow a simple format. They begin with an ampersand & and end with a semicolon ;. Because the syntax for each symbol begins with an ampersand, the ampersand itself must always be written syntactically in HTML documents. Fortunately, MediaWikis interpret standalone ampersands correctly in both MediaWiki text and in HTML headers and paragraphs so you may just type & by itself in KNILT. You can find an extensive list of HTML symbols at the bottom of the MediaWiki formatting help page. For more information on HTML and CSS generally, visit the World Wide Web consortium HTML tutorial.
Lists
HTML allows you to create ordered and unordered lists. Ordered lists are numbered and unordered lists have bullets. You may use CSS to format the numbering and bulleting of lists but in this introduction, we will use only defaults. To illustrate how one creates lists in HTML, here are two short lists, one ordered and the other unordered, some of the more common symbols that you may want to use.
Text symbols
- Copyright: © → ©
- Registered: ® → ®
- Trademark: ™ → ™
- Euro: € → €
- Yen: ¥ → ¥
- Pound: £ → £
Math symbols & Greek letters
- function: ƒ → ƒ
- greater than or equal: ≥ → ≥
- infinity: ∞ → ∞
- lowercase pi: π → π
- uppercase sigma: Σ → Σ
For a discussion of this section, watch the following video.