Original content from | Corporate Services | Talent Partnerships
Pending
Your epoints

Beginner's Guide To HTML

Beginner's Guide To HTML

Whether you're looking to change the layout of your blog, or simply want to insert some funky effects into your website, HTML has long been the standard way of doing it. We're going to go through a little basic code to help you get going.

Step 1: Basic Structure

You can write html into a document in notepad, or on a more program dedicated to making webpages. However it's done, an html page needs to have the following structure:


Title Goes Here!


The actual content of your webpage goes here


An ‘tag' is opened with pointy brackets, like and closed with a slash in there . This tells the PC what to display, in this case, the body of the file.
If you open a tag, make sure you close it accordingly, otherwise you're going to run into big big messy problems and your webpage won't display properly.
You don't need to worry too much about what's going on here, just that your content – all your text and pictures and what-have-you go inbetween the Body tags.
Chances are you won't be hard-coding a website yourself, so if you look at the structure of the template for a website or html-based blog, you'll see this sort of layout.

Step 2: Hyperlinks

To turn ordinary, boring non-clickable text into a hyperlink, use the following syntax:
VideoJug is The Best!

Which will turn your text into a dynamic hyperlink. This looks incredibly spiffing, and extremely professional.

Step 3: Mailto:

Mail To' is pretty useful: you can make it so if a visitor clicks on a piece of text on your website, it automatically opens their default email program, and can even fill in some of the details in case visitors to your website are extraordinarily lazy.
Contact Me
You can stick a comma in there to add multiple recipients:
Contact Us

... or even stick a subject in the subject line...
Contact Me

Step 4: Fonts

Plain old text on websites looks dull, so you'll probably want to add in some new fonts, colours and weights to your words.
Font face changes the font you're using. Don't pick a weird-looking off your computer, only use ones that come with the vast majority of computers. That way your webpage will actually be readable by other people, even if they don't have that font installed.
Fonts like Arial, Courier New, Times New Roman and Verdana tend to be available to all.
This text will appear in Verdana, which is the classiest font in The Universe.

Change the colour of the font with the Color tag. Remember to use The American spelling; they're in charge of spelling on The Internet now, and there's absolutely nothing you can do about it.
Blue Font!

Bold, italic and underline are all done with b, i and u, thusly:
Bold Text
Italic Text
Underlined Text!
There's loads more stuff you can use. strikes through text, makes it flash , and Slightly Bigger will make it slightly bigger. Change that +2 to whatever you like to make it as massive as you like. Or negative to make it more tiny.
Don't forget to close those tags...! And bear in mind that too many effects makes things look tacky, like how The Internet looked in the early nineties. So be careful what you use.

Step 5: Images

In this day and age a website without piccies looks outright ridiculous. Why not spruce things up with some pictures? After all, The Internet is largely a visual medium...
The VideoJug Logo

Img Src stands for Image Source. That plonks an image down for you, with alt text that you'll see if you hover your pointer over it. There's more stuff you can do, like:

in your opening body tag. That'll give the background a repeating image. Sexy!

You can also easily change the size of your image with width and height