Smogon HTML 101 - The Utter Basics

[Oglemi*]

Hello again everyone!

This guide is an introduction to HTML for those who have never worked with it or even know what it is or does.

HTML stands for Hypertext Markup Language. It's the programming language that converts text to webpages. You can literally do anything with HTML, but for the purposes of this guide I'm only going to explain the simplest stuff you can use here at Smogon in your analyses or guides.

Everyday interaction with HTML

If you've ever worked on an analysis here at Smogon you've done a little HTML! Ever wonder why we have you use those <p> tags? Those <p> tags and the other structured text we have you do is what makes the analyses look as they do on the StrategyDex (with help from scripts in the Smogon Content Management System (SCMS) ).

Proper use of HTML

HTML is a system of tags. Typically, anything you want to show up on your analysis properly needs to be "wrapped" in the tags.

In order for tags to work they must be placed in the front of the text you want to change, and "closed" at the end.

For example, in order for the <p> tags to work, your paragraph must start with <p> and then end with </p>. Note the slash in the second tag. The slash is actually very significant. It defines where the tag ends. In order for any HTML to work it must have a start and an end.

There's a lot of other nuances to HTML, but I'll explain those in the specific examples below.

HTML you can use in your analyses and articles

Here I will list the tags you can and probably will end up using at some point if you choose to write for Smogon.

<p> </p>

<p> tags, or paragraph tags, defines a paragraph. Everything you put inside the <p> tags will be a part of that paragraph. Every analysis needs these tags to define the separate paragraphs, otherwise the paragraphs will be "broken" (in this instance merged or squashed together) on the StrategyDex.

<strong> </strong>

This tag bolds certain text in your analysis.

<em> </em>

This tag italicizes certain text in your analysis.

<del> </del>

This tag puts a strike through text in your analysis.

<u> </u>

This tag underlines text in your analysis.

<a> </a>

and

href

The <a> tags put a hyperlink in your analysis. In order to use it properly they must be used in conjunction with the href attribute.

Here is an example of a hyperlink and how you'd use it in an analysis:

<a href="http://www.smogon.com">Smogon</a>

There's a couple important things to note when using this tag. The first thing to note is the space between the a and href. The second is the =, it defines where the link starts. The url must then be wrapped in " ", which defines it. Finally, don't forget to close the link with the </a> tag after you're finished hyperlinking the text you wish to.

Because of the SCMS, most of the links you want to get to on the Smogon website can be cut to the / after the smogon.com. So for example, if you wished to link to another Pokemon's analysis, this is how you'd link it.

<a href="/bw/pokemon/abomasnow">Abomasnow</a>

Another thing to be wary of is that some parts of the site ends in a backslash /. For example, if you wanted to link to the RU Hub, you'd use the following:

<a href="/tiers/ru/">RU Hub</a>

<ul> </ul> and <ol> </ol>

and

<li> </li>

The first two tags stand for unordered list and ordered list respectively. The <li> tags stand for list. In order to use the first two they must be used with the <li> tags.

The <ul> tags have this effect when used:

• -
• -

You'll use this one most commonly in your analysis for damage calculations. In order to do this, here's how it should look in your analysis:

<ul="damage_calculation">
<li>252 SpA Choice Specs Typhlosion Hidden Power Grass vs. 40 HP / 216+ SpD Lanturn: 180-214 (44.88 - 53.36%) -- 95.31% chance to 2HKO after Stealth Rock</li>
<li>252 SpA Choice Specs Typhlosion Eruption vs. 252 HP / 52+ SpD Cresselia: 226-267 (50.9 - 60.13%) -- 87.5% chance to 2HKO></li>
<li>252 SpA Choice Specs Typhlosion Eruption vs. 0 HP / 0 SpD Entei: 205-242 (55.25 - 65.22%) -- guaranteed 2HKO</li>
<li>252 SpA Choice Specs Typhlosion Eruption vs. 252 HP / 4 SpD Poliwrath: 176-207 (45.83 - 53.9%) -- 53.13% chance to 2HKO after Stealth Rock</li>
</ul>

The ="damage_calculation" part of the tag is a specialty of the SCMS which puts the damage calcs in a bulleted list form without the actual bullets. If you want to put an unordered list within your analysis not for the purpose of damage calcs you would not use the ="damage calculations" part of the tag.


The <ol> tags have this effect when used:

1. -
2. -
3. -

or <ol type="A">

1. -
2. -
3. -

<dl> </dl>, <dt> </dt>, and <dd> </dd>

You'll only really use these if you're writing an article. These tags stand for definition list, defined item, and description of item respectively.

This is how you'd use them in an article:
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

You can see these tags in action on the Smogon Credits page. The whole page is wrapped in a single <dl> tag, each username is wrapped in a <dt> tag, and each separate description line is wrapped in a <dd> tag.

<h2> </h2> (and h3, h4, h5, h6)

The <h#> tags stand for header. These tags break up an article just like how I break up this article into different headers. You can most commonly see these in action in our Smog articles. Issue 23's Featured Uber Pokemon is a good one.

The important thing to note about the <h> tags is that the higher you go in number, the smaller the header gets. <h2> is typically the largest header you'll see and the most visually appealing. All subheaders will typically be <h3> and then <h4>.


Finally, the last use of HTML you may want to use in your article is a table. Tables are a little complicated, but you usually won't ever have to use a very complicated one. Here are the tags you'd use and in descending order:

<table> </table>

Defines where the table begins and ends. Wrap this around the whole table and use only once.

<thead> </thead>

This is the table's header.

<tr> </tr>

Defines a row in a table.

<th> </th>

Defines a header cell.

<tbody> </tbody>

This is the table's body.

<td> </td>

Defines a body cell.

That's a lot of tags to take in, and that's not it. However, Smogon makes it pretty easy. Almost every table you'll use will start off with this tag:

<table class="sortable">

This tag gives you a table that looks like every one we have onsite.

The other part for getting the table to look like the ones we have onsite is to alternate the background color we have available every other row. In order to do this, the following tag must be used alternatively.:

<tr class="a">

This puts the blueish tint to the background of the table to divide it more clearly.

When put all together, this is what your table HTML should look like when used in practice:

<table class="sortable">
<thead>
<tr>
<th>Priority</th>
<th>Moves</th>
</tr>
</thead>
<tbody>
<tr class="a">
<td>+2</td>
<td>Switching</td>
</tr>
<tr>
<td>+1</td>
<td><a href="/rb/moves/quick_attack">Quick Attack</a></td>
</tr>
<tr class="a">
<td>0</td>
<td>All moves not listed</td>
</tr>
<tr>
<td>-1</td>
<td><a href="/rb/moves/counter">Counter</a></td>
</tr>
</tbody>
</table>

This short HTML table can be seen in action right here.



There is so much more to HTML than this, including working with articles as a whole and including images. However, I'll save those for another guide as they get pretty complicated.

Hopefully this guide will help those who (like myself before coming to Smogon) have never even seen or worked with HTML before at least know their way around a tiny bit. Have fun out there!

[ium]

image and br tags, noting how they are self-closed due to not being wrapped around anything

example:

<div><img src="/download/sprites/bw/528.png" alt="" /></div>

<p>Emboar @ Leftovers<br />
Trait: Blaze<br />
EVs: 252 SpA / 4 SpD / 252 Spe<br />
Timid / Modest Nature<br />
- Substitute<br />
- Fire Blast<br />
- Focus Blast<br />
- Flame Charge</p>

also, even though images aren't even mandatory for most articles, it'd be nice to know about image placement. people tend to do different and/or weird shit with the inline css.

center (used for centering text as well):

<div style="text-align: center;">content here</div>

right:

<div style="float: right; margin-left: 10px;">content here</div>

how to float images to the left is self-explanatory based on what i just gave you, but i would rarely ever use it just because it's visually unappealing in my opinion. the reason why i included the margin-left in the css above is just so that the image and text have some spacing (hence, a margin) between each other.

it is also worth noting that div is a block level, which means it will place the content on a new line. if for any reason you want the content to be inline, use span tags instead.

speaking of which, i do not know if it's worth mentioning this, but you cannot place a block level element inside an inline element because of what i said above. for example, p and table tags can never ever be inside a href or span tags. i have seen stuff like this before (header tags being inside p tags) and it will cause a validation error.

also, a mention about validating (though this would need further writing to explain it) and further resources to learn more about the basics of html would be neato.

oglemi you're a loser by the way......

[Jukain]

it's probably worth noting the basic article html head structure as it's different from the normal:

[title]
Article Title
[head]
<meta name="description" content="short description of article" />
[page]
<div class="author">By <a href="link to author's profile">Author</a>

and also for articles making a table of contents:

<ol class="toc">
<li><a href="#short_section_name">Full Section Name</a></li>
<li><a href="#short_section_name">Full Section Name</a></li>
</ol>

which would be utilized by adding <a name="#shortname"></a> around the section name in your <h2></h2> tags

short example (from the pokemon dictionary):

<ol class="toc">
<li><a href="#gens">Generations</a></li>
</ol>

<h2><a name="gens">Generations</a></h2>

EDIT: adding to what V0x said, in Notepad++ you can type Ctrl+Alt+Shift+r and it will automatically run in chrome, assuming you save your doc as .html. Ctrl+Alt+Shift+x runs it in firefox, Ctrl+Alt+Shift+I runs it in explorer, and Ctrl+Alt+Shift+f runs it in safari. you can click on those in the run menu and run in whatever other browser you might have in run -> run... -> type in your browser's name / browse files for it. it's a simple, convenient way to do it and I'm sure dreamweaver has something similar.

[V0x]

I read most of this so I think you didn't mention this, but you can preview your html by doing the following. Open notepad and paste your html. File=> Save As. Where it says file type ".txt," change it to "all files." Then enter a name and end it with .html. After that, you can open the file in your web browser and it will translate the html you do to the proper formatting.

I find this method good if you like to visualize what you do, instead of coding and proofreading that.