Introduction

This article is designed to take you through the basics of understanding what HTML is, and how we can use it, as well as a few tips and tricks for usage on FUMBBL.

I will be borrowing heavily from BlackNWhiteDog's html code for beginners thread, so props to him for that. Also, I use http://w3schools.com/ as a reference.
If I say something that doesn't make sense, try copying the code into a team bio, and see what happens.

HTML stands for HyperText Markup Language, and uses tags in angle brackets to determine what is intended to be code, and what is intended to be text. Angle brackets are the ones that look like this: <>
Tags always come in pairs with one opening the section of code, and another to close it.
Tags can have attributes that determine certain properties of the effect it has.

Links

The most obvious thing to start with in a basic study of HTML, is links like fumbbl.com

the code for such a link is: <a href="https://fumbbl.com/">fumbbl.com</a>

let's break it down:
the <a> tag is a basic anchor tag, it can be used for various functions, but the most common one is as an anchor for a link.
This tag has the attribute href, which is assigned the URL of the location that you want to link to.
Then comes the text that will be made into a link, and finally, the </a>, which closes off the tag, and means that nothing that comes after it is included as this link.

Links are the basic (only) way of navigating through websites, but let's face it, simply reading text and clicking on links, to pages of more text, is boring, we need images!

Images

An image like this: is placed on a page using the following code: <img src="https://fumbbl.com/themes/v3/images/logo4.jpg" />

this is interesting... no closing tag, how does that work? I hear you all cry.

The <img> or image tag, is the basis for all usage of images in html.
It inherently needs at least 1 attribute, src, which provides the URL of the source for the image.

Also, this tag is a standalone tag, we don't want anything to be affected by it, it simply causes an image to be displayed in the browser when someone views the page it is on, but, according to HTML rules these day (yes, like all languages, HTML has rules, I laid a the most important ones out at the top of the page) all html tags need to be closed, however, as this is a standalone tag, we can simply close it with a / before the closing bracket

Logically, then, we can then combine these 2 elements we have learnt, to make links using images, like this:

The code for such a link looks like this: <a href="https://fumbbl.com/"><img src="https://fumbbl.com/themes/v3/images/logo4.jpg" /></a>

Formatting text

The next few things we might want to do are to make bold text like this or italicised text like this.

These are fairly simple to do and follow the same format we used for links:

<b>text you want bold here</b>
<i>text you want italicised here</i>

Line Breaks

Sometimes, you just want a
new line to appear in your text, though keeping it on the same line in the editor makes it easier to read. The <br /> tag inserts such line breaks into the text displayed.

Paragraphs

Occasionally, just maybe, you will want to sort your text into a set of paragraphs, with a line break in between each one, there's a far easier way to do it than using multiple line breaks. This method is the use of the <p> tag and it's respective closing tag, </p>

Alignment

The code looks like this:

<div align="left">text to the left,</div>
<div align="right">right</div>
<div align="center">and centre, though any other code, such as tables or images can go here, and would be aligned with the text</div>

This is a simply use of the <div> tag, which can be used to divide a page into sections, along with the align attributes, which, just in case you hadn't guessed, sets the alignment of the text (and other stuff) in the tag.

Tables are discussed on the next page