HTML HTML Standards

ant

⭐️⭐️⭐️
is a Site Content Manager Alumnusis a Battle Simulator Admin Alumnusis a Senior Staff Member Alumnusis a Contributor Alumnusis a Top Smogon Media Contributor Alumnus
with macle's approval to post
Basic Rules:
-You must be SFP approved in order to HTML articles. This is a new rule that was implemented due to the amount of failed HTMLs and unfinished ones that we have had in the past.

-Please wait until the final GP check is implemented. If the writer personally asked you to HTML the article for them for any specific reason, have them to make a note at the top of the OP.

-Try using a tool such as Notepad++, Sublime, or Coda (Apple products) to code. Do NOT use Office tools under any circumstance.

-If you need to resize an image, do not use the height and width HTML / CSS values. Manually resize it with an online tool or with an app such as Photoshop / Illustrator. This is because the page needs to be as dynamic and fast as possible. If you use HTML / CSS to resize the image, it'll still be extremely heavy and hard to load (especially from phones).


HTML Structure:
HTML:
[title]
Write the title of the article here

[head]
<meta name="description" content="Write a short description of the article here" />

<link rel="stylesheet" href="../stylesheet.css" />

<style type="text/css">
    Write your CSS (if needed,) here. If you don't have to include any sort of CSS, do not add the <style> tag.
</style>

[page]
<div class="author">By <a href="relative link of author's profile">Author's Name</a>. Art by <a href="relative link of artist's profile">Artist's Name</a>.</div>

Article here!

HTML Rules:
-Entities: Change the é to &eacute; (Pok&eacute;mon, Pok&eacute; Ball, Caf&eacute;, Pok&eacute;mon Center, etc) and the — to &mdash;. DO NOT USE THESE IN THE [title] OR THE [head] TAGS. Just implement them on the [page] where the article content goes.

-Bold/Italics: A common mistake amongst the standard HTMLers is not knowing the different between <b></b> vs. <strong></strong>, and <i></i> vs. <em></em>. Please note that the difference is really important. <b></b> and <i></i> are just a visual display of bolded and italicised letters, respectively, with no semantic weight, unlike strong and em (emphasis). Both <strong></strong> and <em></em> are an indication that something MUST be understood and that the text surrounded by these tags should be stronger and emphasised.

-The first title must ALWAYS be inside <h2></h2>. In XHTML Strict, there's only one <h1></h1> allowed per page (which is what the [title] tag is for).
HTML:
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
^are NOT smaller bolded fonts. They are semantical titles that start either a section, an article, or a document. They are, from the code point of view, hierarchies. You cannot have <h3></h3> if there wasn't <h2></h2> before, nor a <h4></h4> if there wasn't a <h3></h3> before.

Example:
-Try not to use <br />. <br /> means break, and every time you use it, you are literally saying BREAK. To avoid its usage, analyze the situation and see if it's either a list or a paragraph.

Bad Example:
HTML:
<p>Sneasel @ Life Orb<br />
-Icicle Crash<br />
-Knock Off<br />
-Ice Shard<br />
-Low Kick</p>
Good Example 1:
HTML:
<ul>
    <li>Sneasel @ Life Orb</li>
    <li>-Icicle Crash</li>
    <li>-Knock Off</li>
    <li>-Ice Shard</li>
    <li>-Low Kick</li>
</ul>
Note: if you're using this example, add the following to your CSS

Code:
<style type="text/css">
    ul>li{list-style-type:none;}
</style>
Good Example 2:
HTML:
<dl>
    <dt>Sneasel @ Life Orb</dt>
    <dd>-Icicle Crash</dd>
    <dd>-Knock Off</dd>
    <dd>-Ice Shard</dd>
    <dd>-Low Kick</dd>
</dl>

Images
HTML:
<div class="NAME">
    <img src="/ingame/SECTION/NAME.png" alt="DESCRIPTION" />
</div>
NAME: float-left, float-right, or align-center (puts the image to the right, left, or center, respectively).
SECTION: misc, rng, battle, guides, or bc.
NAME: A name for the picture.
DESCRIPTION: Whatever you think it describes the picture best. You can leave this blank, but try to fill it.



XY/ORAS/SM mini-sprites
HTML:
<div class="NAME">
    <img src="/dex/media/sprites/xyicons/POKEMON.png" alt="DESCRIPTION" />
</div>
NAME: float-left, float-right, or align-center (puts the image to the right, left, or center, respectively).
POKEMON: Name of the Pokémon.
DESCRIPTION: Whatever you think it describes the picture best. You can leave this blank, but try to fill it.

XY/ORAS/SM items
HTML:
<div class="NAME">
    <img src="/dex/media/sprites/xyitems/NAME.png" alt="DESCRIPTION" />
</div>
NAME: float-left, float-right, or align-center (puts the image to the right, left, or center, respectively).
NAME: Name of the item.
DESCRIPTION: Whatever you think it describes the picture best. You can leave this blank, but try to fill it.[/SIZE]

Remember that you can use Toast++'s script to validate your HTML and have a preview of it. But remember that it is not how your HTML is exactly going to look, as this script is made for Article Workshop and it's missing the menu that the In-Game section has on the left.


That's all friends; have fun HTMLing and watch your indentation!
 
Last edited by a moderator:

ant

⭐️⭐️⭐️
is a Site Content Manager Alumnusis a Battle Simulator Admin Alumnusis a Senior Staff Member Alumnusis a Contributor Alumnusis a Top Smogon Media Contributor Alumnus
Current HTML Team:



if you're on the list and you don't feel like being there, shoot TDP a pm or leave a message on their wall. in case you want to be part of the team and you're not on the list, take the eval and get on the team :heart:
 
Last edited by a moderator:

ant

⭐️⭐️⭐️
is a Site Content Manager Alumnusis a Battle Simulator Admin Alumnusis a Senior Staff Member Alumnusis a Contributor Alumnusis a Top Smogon Media Contributor Alumnus
i created a stylesheet in order to make the positioning of images easier. as you'd do with AW's articles, the classes float-left, float-right, and align-center are now available. remember to include the following in your head now; as i'll probably update other stuff from there too, to make the pages look better

HTML:
<link rel="stylesheet" href="../stylesheet.css" />
 

Users Who Are Viewing This Thread (Users: 1, Guests: 0)

Top