Extra guides:
Introduction
Hey, this is a guide to learn the basics of HTML and CSS coding, in which after you can branch out and learn things on your own!!
Here are some links for you to check out.
On Wiki
- This page has a list of patterns and instructions for their use.
- The Free Formats page has pre-coded formats available for your use, just be sure to credit the person who made them!
Off Wiki
- ColorHexa is a very good resource for finding colors to use in your code.
- MDN is a comprehensive guide and reference for the use of HTML and CSS.
- W3Schools is another reference and guide site, and while it is presented in a more beginner friendly format, it isn't as useful as MDN.
Source Mode
You have to be in the source editing mode to code pages! Here's how to switch to using it.
- Mouse over or click the little arrow next to your profile picture. A dropdown menu should appear. Click "My Preferences".
- Once in your preferences, you should see a series of tabs. Click the "Editing" tab.
- Under the "Editing" tab, the first section you will see is called "Editing Experience". You should see a dropdown arrow.
- Click the arrow, and you should see three options: VisualEditor, Classic rich-text editor, and Source editor. Choose Classic rich-text editor or Source editor, depending on how competent you're feeling. To code using the Classic rich-text editor you'll need click the "source" button when editing a page.
- Scroll down to the bottom and click the "Save" button.
- You are now using the source editor!
Basic HTML Tags
Basic HTML tags to get you started. Check out Help:HTML for more.
<i>text</i>creates italic text, like this: Sunny is a hybrid.<b>text</b>creates bold text, like this: Clay likes watermelon.<s>text</s>creates a line through your text, like this:Starflight the NightWing<u>text</u>creates an underline, like this: Tsunami the SeaWing princess.<big>text</big>creates larger text, like this: Wings of Fire is a great series!<small>text</small>creates smaller text, like this: Wings of Fire is amazing!
Wikitext
Wikitext is what the editor uses when you click the bold or italic button. Check out Help:Wikitext for more.
''text''creates italic text, like this: Sunny is a hybrid.'''text'''creates bold text, like this: Clay likes watermelon.'''''text'''''creates bold and italic text, like this: Clay likes watermelon.
Obsolete Tags
A list of commonly used elements (tags) that are obsolete and should not be used.
These tags are obsolete. Although they may still work in some browsers, their use is discouraged since they could be removed at any time. Try to avoid using them.
<big>‐ A<span>tag that uses thefont-size:property should be used instead.<center>‐ A<p>or a<div>tag that uses thetext-align: center;property should be used instead.<font>‐ A<p>or a<div>tag that uses thestyle=""attribute should be used instead.<strike>‐ The<s>tag should be used instead.<tt>‐ In most use cases the<code>tag should replace the<tt>tag.
Background Setup
While we won't be covering the very basics here, both MDN and W3Schools have tutorials and guides that you can check out.
We'll start with a basic background, and I'll explain each individual property in the order they appear in this example.
Example background code
<div style="background: {color/pattern}; border: {number}px {type} {color}; border-radius: {number}px; padding: {number}px; color: {color}">
text content goes here
</div>
Background
Background syntax is background: color | gradient;.
- Color is a single solid or transparent color that fills the entire
<div>element. It is usually specified with a hex code, although any way of showing color can be used. - Gradient is either a linear or a radial gradient, and can be solid or transparent. Like Color, it fills the entire
<div>element. It is usually specified with a hex or rgb code, although any way of showing color can be used.
The first part we see is the background. background: is short-hand for background-color:, background-image:, and background-size:.
a solid color, a gradient, or a pattern. "Patterns" are a combination of gradients.
Example pattern code
- 1. Basic solid color background
<div style="background: #ffffff; border: 2px solid #000000; padding: 10px; color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 2. Simple gradient background
<div style="background: radial-gradient(#e66465, #9198e5); border: 2px solid #000; padding: 10px; color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- 3. "Fire Stripes" pattern from the Helio Wiki
<div style="background-color: #000; background-image: repeating-linear-gradient(45deg, transparent 15px, #FFFF00 15px, #FF0000 40px, #FFCC00 40px); border: 2px solid #000; padding: 10px; color: #000000;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Border
Border syntax is border: width | style | color;.
- Width is how wide the border is, and is typically specified by pixels (px). For example, border: 5px; would be a 5px wide border.
- Style is what the border looks like, and examples are shown below.
- Color is, rather obviously, the color of the border. You can use a name, a hex code, an RGB code, and so on.
There are several different border styles. Examples are shown below, and each one has a width of 5px, and a color of #f00.
DASHED
DOTTED
DOUBLE
GROOVE
INSET
OUTSET
RIDGE
SOLID
Example Border code
<div style="background: #fff; border: 5px solid red;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Border-Radius
Border-radius syntax is border-radius: radius;.
- Radius is how curved the outside edge is, and is usually specified with pixels (px).
The border-radius: property is used to round the corners of an element's outer edge. You can use it even if you aren't using border:.
Example Border-Radius code
<div style="background: #fff; border-radius: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Color
Color syntax is color: color;.
- color can, like with borders, be a name, a hex code, an RGB code, and so on.
color: is only for setting the text color.
Example Color code
<div style="background: #fff; color: #f00;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Padding
Padding syntax is padding: number;.
- Number is usually specified with pixels (px). A minimum of about 6px is recommended for easy reading.
Padding is for creating extra space within an element. In contrast, margin creates extra space around an element. While padding: is certainly not required, you should use it so the text is more easily read.
An example with padding:
<div style="background: #fff; padding: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
An example without padding:
<div style="background: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
Foreground/Midground Setup
This is for the coding that goes "inside" the background coding.
This section is identical to that of the previously explained coding, except that it goes inside.
Margin
Margin syntax is margin: number;.
- Number is usually specified with pixels (px).
Margins create extra space around an element. In contrast, padding creates extra space within an element.
An example with margins:
<div style="background: radial-gradient(#e66465, #9198e5); border: 2px solid #000; padding: 10px; color: #000000;"> <div style="background: #fff; margin: 10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div style="background: #fff; margin: 10px;">Lorem ipsum dolor sit amet, consectetur.</div> </div>
An example without margins:
<div style="background: radial-gradient(#e66465, #9198e5); border: 2px solid #000; padding: 10px; color: #000000;"> <div style="background: #fff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div> <div style="background: #fff;">Lorem ipsum dolor sit amet, consectetur.</div> </div>
Explaining Colors
In this section we'll explain what the ways of showing colors are, and how to change the color of existing patterns.
Color Codes
What are hex, rgb, and hsl codes? They're ways of telling the browser what color to use!
- Hex codes are six digit codes, or 3 sets of 2 numbers that combine red, green, and blue. The first value pair refers to red, the second to green and the third to blue, with values ranging from 0 to FF (#RRGGBB). Pure white is #ffffff, and pure black is #000000.
- Hex codes are made up of 3 sets of 2 numbers. Each set stands for a color, the first 2 numbers are for red, the second 2 stand for green, and the last 2 stand blue (#RRGGBB).
- RGB stands for "Red, Green, Blue" and is used by typing
rgb(###,###,###). RGB uses 3 sets of numbers anywhere from 0 to 255, and each set is separated by commas. Like hex codes the first set is the amount of red, the second set the amount of green, and the third is the amount of blue. Pure white is rgb(255,255,255), and pure black is rgb(0,0,0). - HSL stands for "Hue, Saturation, Luminosity" and is used by typing
hsl(###,###%,###%). HSL uses 3 sets of numbers that can be 1 to 3 digits long, with each set of numbers separated by commas, and the last 2 values end in a percent sign. The first set of numbers is the hue, the second set is the saturation, and the third is the luminosity. The first number can be anywhere from 0 to 360, and the last 2 can by anywhere from 0 to 100. Pure white is hsl(0,0%,100%), and pure black is hsl(0,0%,0%).
All three ways of showing colors also support transparency.
- Hex codes - With hex codes, transparency is shown by adding two numbers to the end of the code. For example,
#ffffff00is white, but completely transparent. So, hex codes with transparency are 8 digits long, with 4 sets of 2 numbers. While it may seem like a good idea to use these over RGBA or HSLA, transparent hex codes are still poorly supported (see here for more info) and they are also poorly documented. So there isn't a real benefit to using it over RGBA or HSLA, besides saving space. - RGBA codes - You probably noticed that this code is quite similar to one of the previously mentioned formats. RGBA stands for "Red, Green, Blue, Alpha". Whereas RBG looked like
rgb(###,###,###)when being used, RGBA looks likergba(###,###,###,.##). The last number is the transparency, and while formally it should be 0.## it can be shortened to just .##. - HSLA codes - Similar to RGBA codes, HSLA codes are identical to HSL codes in everything except that they support alpha. HSLA stands for "Hue, Saturation, Luminosity, Alpha". HSLA codes look like
hsla(###,##%,##%,.##). Just like RGBA codes, HSLA codes technically should have a 0 before the decimal, although it can be dropped.
Notes on RGBA and HSLA
In addition to RGBA and HSLA codes technically having a 0 before the decimal, they are also supposed to have a space after each comma. This is often dropped, and is not required. This applies to RGB codes and HSL codes as well.
In addition to being able to specify transparency between .01 and .99, you can also use a 1 or a 0 with RGBA and HSLA codes. Setting the number to 1 is effectively dropping the alpha channel entirely and setting it to 0 is making the color fully transparent.
Numerous sites for finding and choosing colors are available, but the ones I've found to be most useful are hslpicker, a no-nonsense, easy to use color picker that allows you to pick Hex, RGBA, and HSLA codes and ColorHexa, a more in depth color picking tool that shows, in addition to everything hslpicker shows, shades, tints, and tones of the color you choose, along with visually similar colors.
Patterns
Patterns are a combination of color codes, using the linear-gradient and radial-gradient CSS properties. A guide to simple gradients can be found here.
It's quite easy to remix an existing pattern, just change the Hex, RGB(A), or HSL(A) codes to what you want them to be!
As cool as patterns are, you don't have to use one. You can use background-color: to set a solid color, or you can use linear-gradient and radial-gradient to make a simple gradient.
Extras
Some bits of custom coding for you to use. Head over to here to see more!
Custom Infobox
| type name here | |
|---|---|
| |
| Background Information | |
| Creator | type here |
| Main Attribute | type here |
| Elemental Attribute | type here |
| Theme Animal | type here |
| Theme Color | type here |
| Theme Song | type here |
| MBTI Personality | type here |
| Character Information | |
| Age | type here |
| Gender | type here |
| Orientation | type here |
| Occupation | type here |
| Tribe | type here |
| Goal | type here |
| Residence | type here |
| Relatives | type here |
| Allies | type here |
| Enemies | type here |
| Likes | type here |
| Dislikes | type here |
| Powers and abilities | type here |
| Weapons | type here |
| Quote | type here |
<noinclude>
{| cellpadding="4" style="border-collapse: collapse; float: right; width: 250px; margin: 0 0 7px 14px; background: #fff; border: 1px solid #999; color: #000; font-size: smaller; line-height: 1.5;"
|-
! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center; font-size: larger;"| type name here
|-
| colspan="2" style="padding:0;" |[[Image:blankicon.png|258px]]
|-
! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; border-top: 1px solid #999; text-align: center;" | Background Information
|- style="border-bottom: 1px solid #999;"
| '''Creator'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Main Attribute'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Elemental Attribute'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Theme Animal'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Theme Color'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Theme Song'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''MBTI Personality'''
| type here
|-
! colspan="2" style="background: #ddd; border-bottom: 1px solid #999; text-align: center;" | Character Information
|- style="border-bottom: 1px solid #999;"
| '''Age'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Gender'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Orientation'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Occupation'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Tribe'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Goal'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Residence'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Relatives'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Allies'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Enemies'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Likes'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Dislikes'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Powers and abilities'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Weapons'''
| type here
|- style="border-bottom: 1px solid #999;"
| '''Quote'''
| type here
|}
</noinclude>
Quotes
|
"Quote goes here." |
{| class="quote" align="center" style="width: auto; border: 2px solid #000; background: #DDD; padding: 2px;"
|
"''Quote goes here.''" <br/>
<span style="float:right">~Speaker</span>
|}
Magic Words
These are the most commonly used ones, but there are tons more located at Help:Magic Words. They should be placed at the very top of the page, with the exception of TOC
To remove the Table of Contents, use
__NOTOC__
To add the Table of Contents in a certain area, use
__TOC__
To remove the Edit Sections, use
__NOEDITSECTION__
To force the page to only edit in source mode, use
__NOWYSIWYG__
Finishing up
Now that you know the basics, get out there and start coding!
If you're unsure about what to do, Heliosanctus's Testing Wiki (often referred to as the testing wiki or the helio wiki) is a great place to ask questions and test out your code before it's actually ready.