Hawken Wiki Editing Help
Overview[]
The Hawken wiki uses some more "advanced" web functions and code in order to achieve a more articulated design. Raw HTML, CSS, and jQuery code can be found on many pages. We often use these features in place of common wiki code structures. Wiki code is simple and easy to use, which makes it great, yet terrible at the same time. If our entire wiki was just wiki code, we would not have even simple details like image hover effects and dynamic page elements. This article serves as a help page and reference sheet for those who want to learn how to edit these advanced parts of our wiki.
A quick note: you'll see terms like "parent" and "children" thrown around in this guide. "Parent" means anything that contains the mentioned object. "Children" means anything that is inside the mentioned object.
Quick Navigation
HTML 5 stands for Hyper Text Markup Language 5. It is the most recent version of the web markup code that web browsers use to gather and display website code. HTML uses elements to differentiate segments of code from one another. An HTML element is composed of a start tag, an end tag, and the content between the two. Each element is unique in the function that it is used for. All tags are enclosed in arrow brackets, with the element's content within its start and end tag. For example, a start tag would look like <tag>, and an end tag would look like </tag>. All put together, an HTML element would look something like this: <tag>Content</tag>
The Paragraph Element – <p>[]
The most common HTML tag on the wiki is <p>, which defines the start of a paragraph of text. Text is placed within the start and end <p> tags, like this: <p>This is some text</p>. Everytime you start a new paragraph of text, you would use a new set of <p> tags. Example: <p>Paragraph one</p><p>Paragraph two</p>.
Paragraph elements have natural margins above and below them, allowing for instant, clean formatting of elements (if desired).
The Line Break Element – <br/>[]
Line break tags, <br/>, are also very common. They define an empty line, much like pressing enter in a word-processing program. They are unique in the fact that they are a single tag, and do not have a separate start or end tag. Line breaks are used to put space between paragraphs, to separate other HTML elements, and to bring elements down one line that would not do so normally. Line breaks are very useful for working around the Wikia Rich Text Editor's insistence on double-spacing paragraphs when Enter is pressed. The <br/> tag can be used for single line returns, like so: <p>Text</p><br/><p>More text</p>. Wikia converts <br> to <br />, the XHTML line break element. <br> and <br/> are the same thing.
The Division Element – <div>[]
Division tags are used to define a section of code different from the rest of the HTML. Division elements look like this: <div>Content</div>. Divs (as they are called) are often used with CSS for page formatting. For example, on the mech pages, a div is used to section off the popup window for the Tips & Tactics box from the rest of the page. This allows us to individually show/hide the popup separately from the main page content. You can also use divs to organize HTML code, which makes it easier to read. Just like with most HTML tags, other elements can be placed within a div, including other divs. A div is a block element, meaning that it posses its own layout attributes and will try to exist within its own horizontal line, instead of following any preceding element. Text can be placed within in a div without the use of a paragraph element. More info on styling with divs in the CSS section.
The Span Element – <span>[]
Spans (pronounced literally like divs) are the inline equivalent of the <div> element. This means that they inherit their layout attributes (such as color and formatting) from their parent element and everything inside of them runs together in one horizontal line. For example, in this code: <p>This is some text <span>and this is some more text</span></p>, the span will inherit any attributes the paragraph element has, such as font size, color, etc. Spans are usually placed within other elements to make certain parts of the parent element stand out. Text can be placed within in a span without the use of a paragraph element. More info on styling with spans in the CSS section.
Comments – <!--text-->[]
Comments are parts of a webpage's code that are not interpreted by a browser. They allow for one to explain parts of their code and mark certain parts to aid in readability. A typical comment would look like this: <!--This is a comment-->
The Table Element Family – <table>, <tr>, and <td>[]
HTML tables consists of multiple tags in order to be formatted properly. The <table> tag acts as a container, like a div. The <tr> tag defines a new table row, and the <td> tag defines a table cell. All table family tags must have a start and end tag, and be nested properly. For example, a properly nested table would look like this:
<table> <!--This starts the table--><tr> <!--This starts a new row--><td> <!--This starts a new cell-->Content</td> <!--This closes the current cell--><td> <!--This starts a new cell-->More content</td> <!--This closes the current cell--></tr> <!--This closes the current row--></table> <!--This closes the table-->
Tables are used for sharp formatting on the mech pages and popup windows. Tables are often formatted with CSS to modify cell spacing, margins, cell colors, and more. More info on table styling in the CSS section.
Tables may also make use of a <th> element, which defines a table header. For the sake of simplicity on this wiki, we can use a regular <tr> element for a table header row.
Other Common HTML Tags[]
Many other tags like <a> (links), <img> (images), and <iframe> are common in general HTML usage. Wikia prohibits the use of tags like these, instead replacing them with wikicode. Links in wikicode are done with [[PAGE TO LINK TO|LINK TEXT]] and images are [[IMAGE NAME]]. Iframes are not allowed at all.
A special attribute called id can sometimes be found within HTML element start tags. This id attribute gives the affected element an identifier name that allows other page functions to find it. This is used commonly in scripting and CSS functions. A typical id attribute usage may look like this: <div id="mainContent">...</div>
CSS 3 stands for Cascading Style Sheets 3. CSS is used to format HTML elements, as built-in HTML element formatting is deprecated in HTML 5. Different segments of CSS code are called styles. Styles can include layout formatting, coloring, and even dynamic functions. Usually, CSS styles are stored in separate stylesheet files, but Wikia doesn't follow that practice. Instead, one large stylesheet contains all the styles for the entire wiki. Only admins can edit this stylesheet, however, which presents a problem to regular editors. This is where inline CSS comes in. In the start tag of an HTML element, a coder can add the style="" attribute to apply formatting to said element without the need for a stylesheet. For example, in this code: <p style="font-size:20px">Text</p>, the text within the paragraph is formatted to have a font size of 20px. All inline CSS goes within the style="" attribute. For example, this code: <p style="font-size:20px; color:#5555FF">Text</p> creates this: Text. Whenever a certain CSS property is modified with inline CSS, the structure is as follows: the property name (e.g. color), a colon (:), then the value to set the property to (e.g. #FFFFFF). Use a a semicolon (;) between styles when modifying multiple properties. A completed example may look like this: style="color:#FFFFFF; font-size:20px". If a CSS style class has been defined in the master wiki stylesheet, the style can applied with the class="" attribute. For example, say we have a style by the name of MyStyle, and we want to apply it to a paragraph element. Our code would look like this: <p class="MyStyle">Text</p>.
The Text Align Style – text-align[]
Text alignment is very important in webpage formatting. It is used to align elements to the left, right, or center of its container. The text-align CSS property can be used to align any type of element, not just text elements like <p>. Typical use of text-align may look like this: <p style="text-align:center">Text being aligned</p>.
This text is being aligned left with CSS (text-align:left)
This text is being centered with CSS (text-align:center)
This text is being aligned right with CSS (text-align:right)
The Color Style – color[]
In web design, colors are represented by name and hexadecimal number (hex value). For example, "black" is literally the word black, and its hex value is #000000. Hex values are 6 digit codes for colors that use the hexadecimal base numerical system. A single hex letter can range from 0 to F, with the letters A to F converting to the decimals number 10 to 15. In web colors, hex numbers are put in pairs of two, with three pairs total for the individual red, green, and blue (RGB) channels in a color (in that order). In the color "white", the R, G, and B values are all at full value, which is 255, or FF in hex. After putting all three pairs of FF together, the hex color value for white is #FFFFFF. All hex color values are preceded by a "#" as an identifier. When applying color styling to an element, the attribute may look something like this: <div style="color:#000000">Content</div>. W3Schools has created a very useful color picker that provides a color's hex value for use in HTML/CSS. Examples:
Red text is #FF0000
Green text is #00FF00
Blue text is #0000FF
The Background Color Style – background-color[]
Whereas color is used to set the color of elements inside a parent element, background-color is used to create a backdrop for the parent element itself. This can be used to highlight text, like this: <span style="color:#000000;background-color:yellow">Highlighted text</span>. Result: Highlighted text.
The Height & Width Styles – height and width[]
In HTML 4 and earlier, height and width attributes could be directly applied to an element as attributes. HTML 5 does not permit this, so sizing must be done with CSS. Height and width styles work exactly as one would infer: they set the vertical and horizontal size of an element. In the following example, CSS is used to style a 50px square: <div style="background-color:#000000;height:50px;width:50px"></div>. Result:
Aside from pixel amounts, you can also use percentages to set height and width. When a percentage is used, the percentage is out of the parent element's dimensions. In the following example, the rectangle shown is 50% of the page's width and 10px tall: <div style="background-color:#000000;width:50%;height:10px"></div>. Result:
The Vertical Align Style – vertical-align[]
Vertical alignment is just as important as horizontal alignment done with text-align. For example, the following code:
<table style="background-color:#B3B3B3;width:100px;height:100px"><tr><td style="vertical-align:top;color:#000000">Top</td><td style="vertical-align:middle;color:#000000">Middle</td><td style="vertical-align:bottom;color:#000000">Bottom</td></tr></table>
creates a table with three cells that each have their own vertical alignment. Result:
| Top | Middle | Bottom |
Vertical alignment will only function properly when used on child elements that are inside a parent element with a definite height. The age-old convention for website layout & rendering is to format elements in sequential horizontal lines, meaning that attempting to vertical-align a block element like a <div> that is not within another <div> may not have any effect.
The display property is used to change how an element interacts with other elements around it in a webpage's layout. There are four common types (and other more uncommon types) of display:
inline - makes the element and its children behave like a span; everything runs together in the same horizontal line and should inherit attributes from its parent
block - makes the element and its children behave like a div; it gets its own horizontal line, set apart from other elements, and should not inherit attributes from its parent
inline-block - makes the element behave like a span, but its children will behave like a div
none - removes the element from the page layout, effectively collapsing the space it would have otherwise occupied
Set elements to inline when you want them to follow the flow and design of their parent. Set elements to block when you want them to be individual pieces of the website that are not connected to other things (this is great for paragraphs, sections, and popups).
The Margin Style Family – margin, margin-top, margin-bottom, margin-left, and margin-right[]
Margins are spacing placed at the very outermost edges of the element they are applied to. Pixels are the most common unit of measure for margins. There are five common types of margins:
1) margin - sets a margin on all sides of an element
2) margin-top - sets a margin on the top of an element
3) margin-bottom - sets a margin on the bottom of an element
4) margin-left - sets a margin on the left of an element
5) margin-right - sets a margin on the right of an element
In this example, there is a ten pixel margin to the right of the first block that separates it from the second block: <div style="display:inline-block;margin-right:10px;background-color:#000000;width:50px;height:50px"></div><div style="display:inline-block;background-color:#000000;width:50px;height:50px"></div>
The Padding Style Family – padding, padding-top, padding-bottom, padding-left, and padding-right[]
Padding is a lot like margins in the sense that it puts space around an element, but padding includes the element's background color. There are five common types of padding:
1) padding - applies padding to all sides of an element
2) padding-top - applies padding to the top of an element
3) padding-bottom - applies padding to the bottom of an element
4) padding-left - applies padding to the left of an element
5) padding-right - applies padding to the right of an element
Padding is commonly used to make elements look larger than their content. In this example, there is a box without padding, and a box with padding:
The Outline Style – outline[]
Outlines are styled lines drawn around the very outermost edge of an element. They ignore margins and go directly around their element. Their syntax follows this setup: 1) the color, 2) the style, 3) the weight (thickness). A space is placed between all three components. A completed outline style might look like this: outline:#FFFFFF solid 5px For example, the following code: <div style="margin-left:10px;margin-bottom:20px;background-color:#000000;width:200px;height:35px;outline:#FFFFFF outset 10px"></div> creates this:
The Border Style – border[]
Borders are styled lines drawn around the very innermost edge of an element. They are contained within margins. Their syntax follows this setup: 1) the color, 2) the style, 3) the weight (thickness). A space is placed between all three components. A completed border style might look like this: border:#FFFFFF solid 5px For example, the following code: <div style="background-color:#000000;width:200px;height:35px;border:#FFFFFF outset 10px"></div> creates this:
The Cursor Style – cursor[]
Using CSS, you can change what cursor is displayed when the user's mouse is over a certain element. Listing of common cursors:
| auto | default | none | help | pointer |
| progress | wait | crosshair | text | move |
| not-allowed | n-resize | e-resize | cell | alias |
JQuery is a JavaScript library for modern web browsers. MediaWiki uses jQuery instead of vanilla JavaScript (JS) for Java web functions. Standard JavaScript can, however, be implemented into wiki pages through the use of the (now defunct) <verbatim> element. Typically, direct JS is used for small Java functions in web pages, which is ideal for wikia pages. Unfortunately, several important JS functions are disabled by Wikia, making it unusable in certain situations. For example, the onClick listener and HTML <a> anchor elements that lead to JS are nullified. Those functions in jQuery are not blocked, however, so for situations where clicking on non-wiki links is required, one would use jQuery. This wikia primarily uses jQuery code for onClick events and for modifying CSS display styles to show/hide page elements. This can be seen in the popup windows on the mech pages. All of the existing custom jQuery code is located in our wiki's Common.js file, which can only be edited by admins. Verbatim tags are also admin-only tools, so any requests to insert jQuery or JS code into a wiki page must be sent to an active admin.
The Click Listener Function – $('[A]').click(function ([B]) {[C]});[]
"Event listeners" are parts of scripts that wait, or "listen", for something to happen. A click listener waits for the user to click the element that has the listener attached to it. This is used on the mech pages for popup windows - when the user clicks one of the buttons that opens a popup, the code within the click listener is executed. The structure of a click listener can be seen within this section's heading, with [A] representing the HTML element to receive the listener, [B] representing any arguments that are passed from the page to the script (this is usually blank), and [C] representing the code that executes when the click occurs. For example, this is what a segment of the mech pages' popup code looks like:
$('#show').click(function () {
var $popup = $('#popup'),
display = $popup.css('display');
$popup.css('display', 'block');
var $fade = $('#fade'),
display = $fade.css('display');
$fade.css('display', 'block');
});
In jQuery, targeting elements by id uses the # prefix, and targeting elements by class uses the . prefix. In the example above, there is an element on the page with the attribute id="show", which we target with the query #show.
Any page code reference that is not HTML, CSS, or jQuery should be placed here.
Wikicode: Verbatims - <verbatim>[]
Verbatims are code that are forcefully injected into wiki pages where they would be otherwise nullified. This is important for adding JavaScript and CSS stylesheets. If a JS function was needed on a wikia page, a verbatim would be created at a MediaWiki:[NAME] special page. The code within the newly-created page would then be applied to the receiving page by placing a verbatim element at the very top of the receiving page, like this: <verbatim>NewFunction</verbatim>. Verbatims can also be used to add CSS styles globally to pages. This is useful for when a certain style appears frequently within the page. Only admins can make verbatims, however, but any user can add an existing verbatim tag to a wikia page.
Author's Note[]
In case something important is missing from this reference page, feel free to add it yourself! If you're unable to do so for any reason, send me a message and I'll add myself. Just remember, it has to be something that is used on the wiki. We don't need a section explaining HTML metadata or standard JS syntax since none of that is relevant to normal wikia usage. If you need help with editing a page, just send me a message and I'll get back to you as soon as I can.
--TiberiumFusion (talk) 20:32, June 14, 2014 (UTC)TiberiumFusion