Ben 10 Fan Fiction Wiki
Register
Advertisement
Ben 10 Fan Fiction Wiki

Many of you may know what HTML and CSS are: they are programming languages. But do you know how to code a webpage or even a wiki page using HTML and CSS? Chances are that you do not, or you do, but barely.

What You Will Need[]

  • A wiki that you own, meaning that you are either the founder or one of the main admins.
  • (optional) Notepad ++, free download from http://notepad-plus-plus.org/

The Basics[]

Let's start of with HTML. A basic HTML document uses tags to change parts of text. For example, a paragraph is produced by the tag <p> and a first level heading is produced by the tag <h1>. These types of tags are the tags that start the change of text. To end that change for text, you must simply add the end tag for that specific tag, in this case </p> or </h1>. When using multiple tags, you must end the tags in inverse order.

A code for a paragraph may look like this...

<p>This is a paragraph.</p>

...which produces:

This is a paragraph.

This is a basic understanding of HTML.

Where Does CSS fit it with all of this?[]

Well, in short, HTML is very black and white. CSS adds the color and many other things to an otherwise blank page. When learning CSS, there are three simple terms you must know: selector, property, and value.

A selector is the same as a tag. For example, the selector for the following CSS example is a <p> tag as seen in the HTML examples above.

p {

background: red;

}

This may look and seem scary, but after you get to know basic CSS, it can be really simple. The "background" in the example above is what is called a property, in this case being the background color. The value for the property background is red, which makes the background for the paragraphs red. Normally, CSS is placed in a console. Wikia defines these pages as anything that ends in .css for CSS or .jsfor JS (JavaScript). However, if you want the CSS to only apply to that page, you must go back to HTML and put the properties and values only inside a span tag, like this:

<span style="background: red;">This is a paragraph</span>

The example above produces:

This is a paragraph

Lastly, the span tag can be replaced with a div tag, however, the div will add a paragraph break while the span will not. The div will also continue past the actual text on the page. With this code...

<p>This is a paragraph. <div style="background: red;">This is in a div tag</div></p>

...you will get:

This is a paragraph.

This is in a div tag

However, with a span element, like this...

<p>This is a paragraph. <span style="background: red;">This is in a span tag</span></p>

...you will get:

This is a paragraph. This is in a span tag

Thanks for reading this overly long blog. My next blog with be Fanon Con (look for it on Friday) but after that I plan on making a follow up blog to this one in which I will talk about classes, Notepad++, and give a longer example.

~~Paper Out!

Advertisement