Difference between revisions of "User Page Tutorial"

Revision as of 07:45, 2 August 2012

Intro

The purpose of this page is to educate YOU on how to make your very own user page. It also walks you through all the main scripting convetions used. Question? Send me a message Here. Or leave a message in this page's discussion thingo.

Sample Page

So let's get started. Here's a sample page:

{{SKWindow
| width = 250px
| margin = 0px 0px 10px 10px
| align = right
| title = Character pic
| body = blahblahblah
{{SKWindow/EmptyCell|[[Image:Icon-helmet.png|160px]]|center||2}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''Account Name:'''|}}
{{SKWindow/Cell|Sshs|}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|'''Guild:'''|}}
{{SKWindow/Cell|Divine Light}}
{{SKWindow/NewRow}}
{{SKWindow/NewRow}}
{{SKWindow/Cell|__TOC__|center||2}}
}}

<table border="0" cellspacing="10">
<tr>
<td>

<div style="margin-left: -5px; margin-bottom: 5px; margin-top: 5px; margin-right: -5px; padding: 5px; padding-top: 0; padding-bottom: 0; background: 
#f9f9f9; border: 1px solid #88a; border-right-width:2px; border-bottom-width:2px;">
<div style="width: 101.5%; margin-top: -1px; margin-left: -6px; padding: 3px; background: #eee; border: 1px solid #88a;">''':: Finding Me'''</div>
* My ingame name is (name). 
* I live in (country), which is in the timezone (timezone(GMT)).
* E-mail: email@email.com
</div>

<div style="margin-left: -5px; margin-right: -5px; margin-top: 5px; margin-bottom: 5px; padding: 5px; padding-top: 0; background: #f9f9f9; border: 1px solid #88a; border-right-width:2px; border-bottom-width:2px;">
<div style="width: 101.5%; margin-top: -1px; margin-left: -6px; padding: 3px; background: 
#eee; border: 1px solid #88a;">''':: Loadout'''</div>
* Blizzbrand [[File:Equipment-Blizzbrand_icon.png|32px]]
* Tempered Calibur [[File:Equipment-Tempered_Calibur_icon.png|32px]]
* Super Blaster [[File:Equipment-Super_Blaster_icon.png|32px]]
* Elemental Hood [[File:Equipment-Elemental_Hood_icon.png|32px]]
* Silvermail [[File:Equipment-Silvermail_icon.png|32px]]
* Drake Scale Shield [[File:Equipment-Drake_Scale_Shield_icon.png|32px]]
</div>

<td>
==About Me==
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah<br/>
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah<br/>
blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah<br/>
blahblahblahblahblahblahblahblahblahblahblahblah

</table>

So here's what it looks like

(starts here)

Character pic

blahblahblah Account Name: Account Name Guild: Yo Guild Contents 1 Intro 2 Sample Page 3 So here's what it looks like 4 About Me 5 Basic html tags

(ends here)

Basic html tags

In html, you have tags, which basically tell the browser stuff. Most tags would begin with <tag> and finish off with <tag/> or </tag>. Anything inbetween the starter tag and the finisher-er will be commanded by that tag.
So here's a list of the basic html tags which you will need, and what they do.

1. <b>bold</b>
2. <i>italic</i>
3. <br/>inserts a new line
4. <div>makes a square division around the content.
It can get pretty complex and fancy with all the extra bits.<div/>
5. <table>sorts the stuff into a table<table/>