OneBot Banner (Halo).png

Tutorial/Part 2

From Esportspedia - Halo Esports Wiki
Jump to: navigation, search
Overview   Part 1   Part 2    


Overview

In the first part of the tutorial, we have explored the basic syntax for wiki editing. In the second part of the tutorial, we are going to learn and look at more advanced wiki editing, that is used across the Esportspedia network. This section is going to be more advanced, so please get in touch with Michael via Discord if you are struggling. Similarly to the first part, each topic that we cover will be accompanied by a task to complete and an example, so you can see how it is done, and to ensure that you can understand what you are actually doing.

Task 7: Intermediate Tables

Creating basic tables is fairly easy and pretty straightforward, but there are a lot more thing we can do with a table than what we did previously in Task 5 of Part 1 of the tutorial.

Merging Cells

Explanation Input Output

Colspan (Merging Horizontally):
If you wanted to put Yes in a cell, you would put |yes.
If you wanted to put Yes in a cell that is made up of 5 cells, merged horizontally, you would put |colspan=5|yes.
See the difference? Just add |colspan=5 and replace the 5 with however many number of cells you want to merge it with.

Rowspan (Merging Vertically):
If you wanted to put Yes in a cell, you would put |yes.
If you wanted to put Yes in a cell that is made up of 5 cells, merged vertically, you would put |rowspan=5|yes.
See the difference? Just add |colspan=5 and replace the 5 with however many number of cells you want to merge it with.

{|class="wikitable"
!Column 1
!Column 2
!Column 3
|-
|rowspan=3|First Column
|colspan=2|Rest of the first row
|-
|colspan=2|Rest of the second row
|-
|colspan=2|Rest of the third row
|-
|Row 4 Col 1
|Row 4 Col 2
|Row 4 Col 3
|}
Column 1 Column 2 Column 3
First Column Rest of the first row
Rest of the second row
Rest of the third row
Row 4 Col 1 Row 4 Col 2 Row 4 Col 3

Colouring Cells

Cells can be coloured, which can help significantly, with things such as first, second and third place.
Normally, to write in a cell you would do |yes.
To colour this same cell, you would put |<pre style="display: inline-block;">style="background-color: #[6-digit ASCII code for your color]"</pre>|yes

Some standard colors:

FFC7CE C6EFCE FFEB9C E9E9E9

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

This is column 1 This is column 2 This is column 3
left center right

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

Column 1 Column 2
Text in column 1 Text in column 2
The text for the above is:
{|class="wikitable"
! width=200px|Column 1
! width=500px|Column 2
|-
|Text in column 1
|Text in column 2
You can also specify the height of an entire row on the first cell of that row.
The code for this cell is:
|height=50px|The code for this cell is:

Putting it All Together

Make a page like this one, personalise it to something you like for your page.
Notice that you can combine multiple style descriptions in the same row, for example:

|colspan=2 align="center" style="background:#C6EFCE;"|Yes

Now, please take a break for at least 15 minutes to let all the information be absorbed by your brain :)

Task 8: Images

Images are one of the most important things to display on a wiki. They increase user-friendliness and promote the team brand more. Your goal will be to make a page like this one listing your favorite teams' logos.

Uploading Images

To upload files, such as images, you need this page. It can easily be found on the sidebar underneath Contributor Tools. If you ever need to upload a file, simply go to that page,

Inserting Images

The simplist way to insert an image onto the wiki is very similar to inserting linked text:

Input Equivalent Input Output
[[Image:Splyce Logo.png]]
[[File:Splyce Logo.png]]
Splyce Logo.png

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

Input Output Description
[[Image:SonaSquare.png|This is Sona.|frame]]
This is the Halo World Champions, Splyce.
. For a caption to show, you must also use the |frame argument.
[[File:Splyce Logo.png|Click the image!|frame|link=Splyce]]
Click the image!
By default, click on an image will take you to the file page for that image. However, you can change what page it links to.
[[File:Splyce Logo.png|30px]]
Splyce Logo.png You can adjust the width of an image, and it will scale down to be that width.
[[File:Splyce Logo.png|x30px]]
Splyce Logo.png You can also adjust the height of an image, and it will scale down to be that height.
[[File:Splyce Logo.png|100x50px]]
Splyce Logo.png Specifying both dimensions will not skew the image, but will instead make sure that the image fits in a rectangle of the size you specified.
[[File:Splyce Logo.png|30px|right]]
Splyce Logo.png
right, the image will align right. If your image is just on the page and not in a table, it'll move all the way to the right of the page.
[[File:Splyce Logo.png|30px|center]]
Splyce Logo.png
Or center
[[File:Splyce Logo.png|30px|left]]
Splyce Logo.png
And you can specify align left.

Task 9: Redirects

Redirects are very simple. It will forward you from one page to another.

For example: You can go to the link https://halo.esportspedia.com/wiki/Rose and notice how it will redirect you to the tutorial overview.

To make a redirect all you need to do is put this into the code:
#redirect [[Page you want it to go to]]

They can be very helpful when you have an old page, and want to redirect it, like if an organization was to merge.

Now, go to your page link at Task 9. Edit the code and make it redirect to your own user page, like this one

Task 10: News

News is very simple. From trades, to results, to news about the game. We cover it all. To edit the news, you need to press the news button on the front page. When editing we use three templates: {{NewsDate}}, {{NewsTeam}} and {{NewsTournament}}.

  • News Date defines the date of the news
  • News Team is for news about teams
  • News Tournament is for news about competitions.

News - Date

{{NewsDate}} is for creating a heading with the date and should always be above the actual news. To create the date all you do is:

{{NewsDate|MM|DD}}

Simple, right?

News - Team

{{NewsTeam}} is for creating news about a certain team, such as a roster change, a change of game etc. To create the date all you do is:

{{NewsTeam|team=|region=NA|text=}}
It is very simple, team is for the team name, region is for the region that the team is in, for example NA, EU, INT or APAC.
Simple, right?

News - Tournament

{{NewsTournament}} is for creating news about tournaments and winners of tournaments etc. This one is a little more complicated than the last one, but it isn't that difficult:

{{NewsTournament|tournament=|link=|region=|text=[[file:Gold.png|x20px]] '''{{team|INSERT TEAM THAT PLACED FIRST}}''' [[file:Silver.png|x20px]] '''{{team|INSERT TEAM THAT PLACED SECOND}}''' [[file:Bronze.png|x20px]] '''{{team|INSERT TEAM THAT PLACED THIRD}}''' at {{bl|TOURNAMENT NAME}}. {{bl|INSERT FFA WINNER}} wins the FFA.}}

Now, you need to make a page like this one, but at your link.
Please be aware, you will need to put this code after your tabs on your page otherwise the news won't work:

<noinclude>{{Template:News_Navbox}}</noinclude> {|style="width: 100%; border:hidden; background:none"{{#vardefine:year|2018}}

Task 11: SEO

SEO stands for “search engine optimization”. It is the process to get your website higher traffic, and to make your website appear above others, that search similar things. Basically, if we don’t use SEO, we will fall behind in the rankings, lose traffic and we will have less people joining the team and less growth on all social channels.

Whenever we use SEO, we put it at the very top of any page. It is needed on every page, to enable us to get the best traffic possible. The templates or “Schema” we will use for our players and teams are found below:

Player:

{{#seo: |title=Ninja - Halo Esports Wiki - Esportspedia |titlemode=replace |keywords=ninja,ninja halo,ninja c9, ninja halo c9,ninja luminosity,ninja age,ninja info,ninja bio, ninja stats |description=Tyler “Ninja” Blevins is a former American Halo player, who most recently played for Luminosity Gaming before becoming a popular Fortnite streamer. }}


Team:

{{#seo: |title=Splyce - Roster, Members and Stats - Halo Esports Wiki - Esportspedia |titlemode=replace |keywords=spy, splyce, splyce lol,spy lol,splyce team, splyce halo players, splyce halo roster, splyce halo line-up, splyce halo members |description=Splyce is an Americanmulti-gaming esports team, currently competing in Halo. Check out SPY’s current roster, members, history, stats and much more! }}

Tournament:

{{#seo: |title=MLG New Orleans - Brackets, Schedule and Results - Halo Esports Wiki - Esportspedia |titlemode=replace |keywords=mlg new orleans, mlg halo, mlg new orleans halo, mlg new orleans 2018, mlg new orleans teams, mlg new orleans schedule, mlg new orleans stats, mlg new orleans results, mlg new orleans bracket |description=MLG New Orleans is a Halo tournament that took place in New Orleans, USA between July 13-15, 2018. Check out the full schedule, standings, results, team list and rosters! }}

  • Title is for the title of the page.
  • Titlemode is so the page knows to replace the title of the website, on this page with an individual title of this page.
  • Keywords are what you want the website to appear under. It will appear higher under esports if that is a keyword.
  • Description is essential as it defines what is on the page, and it can be the difference between 5,000,000 views and 5,000.

Now, you need to make a page similar to this one. If you have any questions regarding SEO, we do have a resident SEO specialist, so contact Michael on Discord to point you in the correct direction.

Task 12: Your own page

Using the template User Page, now go to your own page and tell us who you are. You don't have to share anything you don't want to, we just want to get to know you, and given all the skills you now have, we want you to show them off! Just copy the source code from the template and put it into your page, editing the information within it. Be sure to upload your own logo or image that you want to be displayed on your user page using the upload form. Let us know how you get on by joining our Discord!

That is it! You are complete! Well done you! You should feel very proud of yourself! Now, let's get you started. Send Michael a message to get yourself on a wiki and make sure you remember to mark off your progress on Trello!