Unlike websites like Tumblr, which have their own elegant solution to theme customisation, HL simply uses straight HTML. It makes things simpler, in a way, because anything you learn while updating the theme of your HL home page can be applied to any web page you may create later.
"What is HTML", I hear you ask? HTML stands for Hyper Text Markup Language. It's a programming language that's simple enough to learn on it's own, and serves as the foundation of every single web page you have ever viewed on the internet. What HTML code I'll be covering in this tutorial will only be a fraction of HTML that's available to use, though - as I'm only covering what's relevant to HL. If you want to learn more after that, there's helpful places like w3schools for curious minds like yours.
Before I go any further though, I should offer you a helpful hint: You can practice your HTML on a computer, even without an internet connection. You don't need anything more than what you should already have on your computer - a basic text editing program like Notepad, and a web browser like Chrome or Firefox. If you want to know how, I've made a quick side tutorial here.
If you're just wanting to get on with it, already, then I'll move on.
HTML relies on tags
All HTML is enclosed in tags that look exactly like less than and greater than symbols - on your keyboard they're located on the comma and period keys respectively.
To give you an example of a tag, this is what a paragraph tag looks like: <p>
Pretty much every single type of HTML code needs both a start and an end tag. The start tag tells that specific bit of HTML where to begin, and the end tag tells it where to stop.
Example 1a: Code Block
<b>In a browser, this line of text enclosed between the opening b tag and the closing one, will appear bold.</b> This text is outside of the bold tags, so it isn't bold anymore.
<br><i>Between these two i tags, the text will appear italic.</i> This text isn't nestled within any tags, so it appears plain.
<p><center>From here, everything within the center tags will be centered in the element. <u>This text will be underlined.</u> And I think I'll close the center tag after this sentence.</center>
<p>Now the text is no longer centered, or bold, or italic, or anything else. It's just plain text as usual. Yay!
Example 1b: Code OutputIn a browser, this line of text enclosed between the opening b tag and the closing one, will appear bold. This text is outside of the bold tags, so it isn't bold anymore.
Between these two i tags, the text will appear italic. This text isn't nestled within any tags, so it appears plain.
From here, everything within the center tags will be centered in the element. This text will be underlined. And I think I'll close the center tag after this sentence.
Now the text is no longer centered, or bold, or italic, or anything else. It's just plain text as usual. Yay!
See what I did there? The pattern becomes pretty clear after a while.
The difference between a start and an end tag is a single forward slash. That's it. And it's the same throughout HTML - there's no other type of end tag, nothing to get confused by. Every time you open a tag, it needs to be closed again. Which the exception of maybe the paragraph tag, which doesn't strictly have to be closed, and the <img> and <br> tags which are technically self-closing, basically every other type of tag is required to be closed again once opened. Otherwise all hell breaks loose - well... on your page, anyway. (And only metaphorically.)
If none of that made sense, here's a direct quote from w3schools to sum things up:
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
Anything that is not a tag is not HTML.
Plain text outside of HTML tags is just that: plain text. Not everything is code. The tags act like wrappers, telling the browser what to do to/with the text (or images, more on that later) contained inside.
You'll notice in this tutorial that I've highlighted the tags in different colours in order to make them especially stand out amongst a sea of text - unfortunately, generally speaking, unless you're working in a program designed for code editing (like Adobe Dreamweaver), the tags won't especially stand out in amongst the general text, because they'll be the exact same colour as the rest of it. So be vigilant, and try to stay aware of where the tags are, and what you're doing. If you ever end up with a whole block of text on your page that's in bold when you really only wanted a single word, chances are you've either forgotten to put an end tag somewhere, or you've accidentally deleted the code.
Extracurricular Activity
We've all heard the saying, "practice makes perfect". If you want to get a firm grasp on what HTML is, you can have a go at a lesson ('HTML Basics') on Codeacademy. It's not at all necessary, but it'll make things a lot easier later on.
Confused already?
It's alright if all of that made no earthly gad damn sense. If you've never even heard of HTML before, it's no doubt going to cause a headache. Like most new concepts, it's easier to just put it into practice and see how it goes. The logic might not immediately come to you, but it will get easier - and make sense - with a bit of practice, and patience. If you're really stuck, and all else fails: Google your problem. Google the hell out of it.