FANDOM


Hawken Wiki Editing Help

OverviewEdit

The Hawken wiki uses many advanced web functions and code in order to achieve the smooth and articulated design it currently uses. Raw HTML 5, CSS 3, and jQuery code can be found on almost every page. Due to this, the common wiki code used on most wikis is not as abundant here. 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, there would be no image hover effects, popup windows, or dynamic page elements. That's why we use HTML 5, CSS 3, and jQuery. This page is 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

Html5White-165 Css3White-165 JqueryWhite-165

Hide Quick Navigation

HTML 5Edit

Html5White-120
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>Edit

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


The Line Break Element<br>Edit

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 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. Due to the Wiki editor moving the typing cursor down two lines upon pressing enter instead of one, the <br> tag can be used for single line returns, like so: <p>Text</p><br><p>More text</p>. Interestingly enough, Wikia converts <br> to <br />, the XHTML line break element. <br> and <br /> are the same thing.


The Division Element<div>Edit

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 wiki 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 and show the rest of the page normally. You can also use divs to organize HTML code, which makes it easier to read. Other elements can be placed within a div, including other divs. A div is a block element, meaning that is has its own set of attributes that are different from the code around it. 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>Edit

Spans (pronounced literally like divs) are the inline equivalent of the <div> element. This means that they inherit their attributes (such as color and formatting) from their parent element and everything inside of them runs together in one 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-->Edit

Comments are parts of a webpage's code that are not rendered by the browser. They allow for coders to explain parts of their code or mark certain parts to made it more readable and understandable. A typical comment would look like this: <!--This is a comment-->


The Table Element Family<table>, <tr>, and <td>Edit

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.


Other Common HTML TagsEdit

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 a name that allows other page functions to find it. This is used commonly in scripting and CSS functions. A typical id attribute may look like this: id="myName"

CSS 3Edit

Css3White-120
CSS 3 stands for Cascading Style Sheets 3. CSS is used to format HTML elements, since built in HTML element formatting is not supported in HTML 5. Different segments of CSS code are called styles. Styles can include formatting, coloring, and even dynamic functions. Usually, CSS styles are stored in separate stylesheet files. Wiki doesn't use this method of CSS, instead it has one large stylesheet that contains all the styles for the wiki. Only admins can edit this stylesheet, however. This is where inline CSS comes in. In the start tag of an HTML element, the coder can add the style="" attribute to apply formatting to said element. 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 (about 14.5pt). All inline CSS goes within the style="" attribute. For example, this code: <p style="font-size:20px;color:#0000FF">Text</p> creates this: Text. Whenever you apply a style with inline CSS, the structure is as follows: the style name (e.g. color), a colon (:), then the value or type of style (e.g. #FFFFFF). Separate styles in CSS with semicolons (;). A completed example looks like this: color:#FFFFFF;font-size:20px. If the styling for an HTML element is in a stylesheet, the style is 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. Our code would look like this: <p class="MyStyle">Text</p>.

The Text Align Styletext-alignEdit

Text alignment is very important in webpage formatting. It is used to clip text to the left and right of its container, or float it to the center. The text-align style can be used to align any type of inline element (like a span), not just text. 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)

Remember that with the text-align style, the content being aligned is the code/text within the element that has said text-align style. The element must also be inline. See how to apply the inline style to an element in the display section.


The Color StylecolorEdit

In web design, colors are represented by name and hexadecimal number (hex value). For example, "black" is literally black, and its hex value is #000000. Hex values are 6 digit codes for colors that use the hexadecimal numerical system. A single hex letter can range from A to F, or 0 to 9. In colors, hex numbers are put in pairs of two, with three pairs total for the red, green, and blue (RGB) values in a color. In the color "white", the R, G, and B values are all the max: 255. In hexadecimal, 255 is FF. After putting all three pairs of FF together, the hex color value for white is #FFFFFF. All hex color values are preceded by a "#" to identify them as a parsable number. When you apply your color styling to an element, the attribute should look something like this: <tag style="color:#000000">Content</tag>. W3Schools has created a very useful color picker that gives you 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 Stylebackground-colorEdit

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 Stylesheight and widthEdit

In HTML 4.01, height and width attributes could be directly applied to an element as attributes. HTML 5 does not support 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 with HTML to create a 50px square: <div style="background-color:#000000;height:50px;width:50px"></div>. Result:

You can also use percentages to set height and width. When a percentage is used, the percentage is out of the parent element. 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 Stylevertical-alignEdit

Vertical alignment is just as important as horizontal alignment by 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

Just like with text-align, vertical-align aligns the content within the element that has said vertical-align style.


The Display Style - displayEdit

Display styling is used to change how an element interacts with other elements around it. There are four common types of display:
inline - makes the element and its children behave like a span, everything runs together in the same line and sometimes inherits attributes from its parent
block - makes the element and its children behave like a div, it gets its own set of lines apart from other elements and sometimes does not inherit attributes from its parent
inline-block - makes the element behave like a span, but its children will behave like a div
none - makes the element not show up or affect the layout
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 popups). Set elements to inline-block when you want them to be aligned with text-align, but maintain div-like behavior.


The Margin Style Familymargin, margin-top, margin-bottom, margin-left, and margin-rightEdit

Margins are spacing placed at the very outermost edge of an element they are applied to. Pixels are the most common unit of measure for margins. There are five 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 one: <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 Familypadding, padding-top, padding-bottom, padding-left, and padding-rightEdit

Padding is a lot like margin in the sense that it puts space around an element, but padding includes the element's background color. There are five 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 used to make elements look smoother and have spacing with color. In this example, there is a box without padding, and a box with padding:

I don't have padding
I have 10px padding

The Outline StyleoutlineEdit

Outlines are styled lines drawn around the very outermost edge of an element. They ignore margins and go directly around their element. Their construction 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 StyleborderEdit

Borders are styled lines drawn around the very innermost edge of an element. They are contained within margins. Their construction 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 StylecursorEdit

Using CSS, you can change what cursor is displayed when the mouse is touching 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

jQueryEdit

JqueryWhite-120
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 <verbatim> element. Typically, JS is used for small Java functions in web pages, which is ideal for wiki pages. Unfortunately, several important JS functions are disabled by Wikia, making it unusable in certain situations. For example, onClick and HTML <a> elements that lead to JS are nullified. Those functions in jQuery are not blocked, so for situations where clicking on non-wiki links is required, one would use jQuery. We currently only use jQuery 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 the wiki's Common.js file, which can only be edited by admin. 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]});Edit

"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');
});

Other CodeEdit

Any page code that is not HTML, CSS, or jQuery should be placed here.


Wikicode: Verbatims - <verbatim>Edit

Verbatims are code that are forcefully injected into wiki pages where they would be nullified otherwise. This is important for adding JavaScript and CSS stylesheets. For example, a JS function was needed on a page, a verbatim would be created at MediaWiki:[NAME]. It would then be applied to the page by placing a verbatim element at the very top of the 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 one to a page.

Author's NoteEdit

Whew. You've just finished reading the whole thing, all ~3000 words. Relish in that achievement. Now that you're done relishing, we'll move on to other matters. In case I forgot something in 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 JS syntax since none of that is relevant to us. If you still need help with editing a page, just send me a message and get back to you as soon as I can. That said, I hope this reference page will help you on your quest to edit our wiki.
--TiberiumFusion (talk) 20:32, June 14, 2014 (UTC)TiberiumFusion

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.