The great thing about using Mr Site is that you don’t need to be an IT whiz to create a great website – even if you know nothing about HTML you can achieve professional results. But if you’ve been thinking that you’d like to expand your technical knowledge and take your web-building skills to the next level – we’d love to help you get there and learning basic HTML is the place to start.
So what is HTML?
If you’re a bit of a newbie, then you’ve probably heard the word HTML being bandied about but are unsure what it means. HTML stands for Hyper Text Markup Language. It’s the language that website designers use to build websites – the code describes to the internet browser how a site should look and translates the instructions into visuals.
How do I use it?
If you want to tell the internet browser that you want a page to look a certain way, you need to use the right code. So, for example, you are writing a piece of content and want to split the text into two paragraphs. At the point you want to separate the text, you need to tell the browser that a new paragraph is starting and when it ends. The code for this is <p> - the ‘p’ stands for ‘paragraph’ – and it’s the part of the code known as an HTML tag. The brackets are called ‘angle brackets’.
So, the text would need to read
<p>This is paragraph 1</p>
<p>This is paragraph 2</p>
The / indicates the end of the HTML instruction – don’t forget to include it whenever you finish a piece of code; it’s like a full stop.
Using HTML with Mr Site Takeaway Website
With Takeaway Website, you can build your website in one of three modes – Simple, Creative or Advanced. If you’re just getting started with HTML, we recommend that you use Creative mode. Just click on the HTML button at the bottom left-hand side of your screen and you can start adding your code. If you’ve already added anything to the page, you’ll see how this translates into HTML.
Common coding
We’ve covered creating paragraphs, but there’s a huge amount more you can do with HTML. For now, we’ll go through three very basic HTML codes:
Headers
To create a header on a webpage, you need to use this code:
<h1>I’ve made a header!<h1>
If you want to create a secondary header underneath it – so it looks smaller – the numbers change, all the way to size 6 font:
<h2>Now a smaller header<h2>
Adding links to a page
When you type your content and want to add a link you can of course just type in the full website address of the page you want to link to. But if the address of the page is long – or even just to make your site look more professional – then you can also turn a piece of content into a hyperlink (a word or phrase website visitors click on to be taken to a particular page).
The code for this is:
<a href="http://www.mylink.com" >click here</a>
You can add whatever web address you want between ‘’ and ‘’ – and whatever word or phrase you want between > and <
Images
You can add an image to your webpage using the tag <img>. You also need to include the tag ‘scr’, which helps the browser find the right image.
The total code looks like this:
<img src=http://www.mywebsite.co.uk/USERIMAGES/myimage.jpg />
The internet address within the tags is where the browser can find the image – when you upload an image onto your Takeaway Website it is saved in a file called www.websitename.co.uk/USERIMAGES. You are asked to give the image a title (myimage) and the last bit of the address above describes what kind of file it is, in our example a jpg. Image files can be jpgs or gifs – make sure you put the right ending on the image address when you write your code.
You should also add a text description to your image, known as an ‘alt’ tag. This explains what the image is of, in case the image ever doesn’t show up, and helps search engines and the blind using screen reader devices identify it.
This code looks like this:
<img scr=http://www.mywebsite.co.uk/USERIMAGES/myimage.jpg alt=”This is my image”>
Learn more....
That’s just very, very basic coding – there is so much more you can learn. Whatever you want to do with your site, it’s just a matter of finding the code. We highly recommend Lynda, a website that’s got some great teaching resources to help you become an HTML expert.
If you want a more old-school teaching guide, then the ‘Dummies’ series of guides has a good one on HTML, called, unsurprisingly, HTML, XHTML and CSS for Dummies