Fortnite Esports Wiki:Tutorial/Part 2

Overview
In part 1, we explored basic wiki syntax: links, formatting, lists, and charts. In part 2, we're going to take it one step further and look at some more advanced things you will come across when editing. Just like in part 1, each concept that we cover will be accompanied by a task for you to complete so that you can make sure you understand what's going on.

Task 6: Intermediate Tables
For advanced help with tables, see here.

Creating basic tables is pretty straightforward, but there's a lot more you can do with them than just what we did in task 5. Look at this example.

Colspan and Rowspan

 * }
 * }

Alignment and Cell Width
You can write align="left", align="center", or align="right". Left-aligned text is the default in "normal" rows, and center-aligned text is the default in title rows (rows that start with a !).

You can also write width=Xpx where X is the number of pixels wide you want the cell to be. For example:

Putting it All Together
Make a page like this one, showing which of your favorite champions can be played in which of 2 positions of your choice. Notice that you can combine multiple style descriptions in the same row, for example:

|colspan=2 style="text-align:center;background-color:;"|Yes

Note that we use variables for commonly-used inline styles, so instead of specifying a hex code you write as the background color (or  or ), and the correct variable will be chosen. This does not work for all possible inputs however, as not all color variables have variables assigned to them.

Task 7: Images
Images are great to include! They make pages a lot friendlier to read. But how do you include an image in a page? There's a great help page about it here, and we'll explain the basics here, too. Your goal will be to make a page like this one listing your favorite champion's skins, with their icon in the upper-right corner.

Uploading Images
You won't have to do this now, but bookmark this page. If you lose it, you can find it in the sidebar, underneath Tools. If you ever need to upload a file, simply go to that page, click "Browse," find the file on your computer and select it, and then type an appropriate file name where it says "Destination Filename." An appropriate filename is one that makes it easy to find the image in question.

Examples of acceptable filenames:
 * Ninja.jpg
 * Cloud9logo square.png

Inserting Images
The most basic way to insert an image is very similar to inserting linked text:

However, there's a lot more you can do!

You may have seen the  tag around -- it's a common HTML command that creates a new line and is used in places where you can't necessarily add a new line by pressing enter twice for some reason. "Br" is short for "break" or "line break."

As you may know, when adding images to pages, it's very easy for the formatting to get messed up. One command that comes in handy is  . Similar to   , forces the next bit of text to start below the image. If you only want to clear the left column or the right column, you may use or.

Task 8: Indexing Page
The rest of the tutorial is for your reference. If you want to practice the topics that are covered, you are absolutely welcome to, but this is the end of the guided exercises. As your last task, make an indexing page like this one with your own pages linked in the Example column. If you apply to join our wiki department, you will be asked to include a link to your indexing page as part of your application. If you have any feedback on the tutorial, please contact us!