Print these details
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:
<HTML>
<HEAD>
<TITLE>Title Goes Here!</TITLE>
</HEAD>
<BODY>
The actual content of your webpage goes here
</BODY>
</HTML>
An ‘tag' is opened with pointy brackets, like <body> and closed with a slash in there </body>. 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:
<a href="http://www.videojug.com/">VideoJug is The Best!</a>
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.
<a href="mailto:dan.marshall@videojug.com">Contact Me</a>
You can stick a comma in there to add multiple recipients:
<a href="mailto: dan.marshall@videojug.com, someone.else@videojug.com "> Contact Us</a>
... or even stick a subject in the subject line...
<a href="mailto: dan.marshall@videojug.com?subject=All Your VideoJug Films Are Completely Brillo "> Contact Me</a>
-
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.
<FONT FACE="verdana">This text will appear in Verdana, which is the classiest font in The Universe.</FONT>
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.
<FONT COLOR="blue">Blue Font!</FONT>
Bold, italic and underline are all done with b, i and u, thusly:
<b>Bold Text</b>
<i>Italic Text</i>
<u>Underlined Text!</u>
There's loads more stuff you can use. <strike> strikes through text, <blink> makes it flash , and <FONT SIZE=+2>Slightly Bigger</FONT> 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...
<img src="videojug.gif" alt="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:
<body background="background.jpg"> 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 parameters, and make if align to the left or right accordingly:
<img src="videojug.gif" width="70" height="70" align="right"> -
There's loads and loads to html, and plenty of tutorials available online to help give you a leg up. Once you understand how it works, it's not that complicated.
-
Done!
Print these details
