If you’ve got a website that uses HTML (like WordPress) it can be useful to understand the basic programming commands so you don’t need to call in your web support people if you accidentally delete something and your layout goes wonky (a technical term!)
Step one is to understand how the commands – known as ‘tags’ – work.
HTML uses the little pointy brackets to indicate tags e.g.<strong> means that all the text after this tag should be in bold.
To stop the text being in bold you need to close the tag and this is done be repeating the tag, but with a slash in front of the instruction e.g, </strong>
If you have more than one instruction they should always be ‘nested’, in other words the first tag to open, should be the last to close.
Some instructions don’t have the closing tag – it’s just a one-off instruction. This is called a self closing tag, like <img src=”imageurl” /> and has a slash before the tag ends.
Even if you’re using a WYSIWYG content management system, where you can see what it will actually look like, it’s useful to know how to ‘fix’ the basics. The most common problem is that someone deletes a return and, unwittingly, also deletes a close tag. This is when the layout goes wonky!
Here are the most common tags that you might find useful. Where there is a red ? you will need to insert information.
|<h2></h2>||Main subheadline. NOTE: You can use up to h6 and they are usually in smaller and smaller fonts.|
|<font size=”?”></ font size=”?”>||Set from 1 to 7 to choose size. NOTE: this is not the point size.|
|<font color-“?”></ font color-“?”>||Set font colour by name or hex code (there are special codes used for colours online – known as ‘hex codes’.|
|<ol></ol>||Ordered list e.g. numbered items NOTE: you will need <li> </li> around each list item.|
|<ul></ul>||Unordered list e.g. bullet points NOTE: you will need <li> </li> around each list item.|
|<img src=”URL”/>||This will embed an image from the URL you insert.|
|title=”?”||Name an image as part of the img tag|
|alt=”?”||An alternative name for an image. NOTE: this is often referred to as an ‘alt tag’ in relation to search engine optimisation.|
|<table></table>||Create a table (like this one)|
|<th></th>||Create a header row|
|<tr></tr>||Create a row|
|<td></td>||Create a cell|
|<table border=”?”>||Sets the table border within the table instruction.|
|<table cellspacing=”?”>||Sets the spacing around cells within the table instruction|
|<href =”URL” > words you want to appear as link </href>||Creates a hyperlink attached to a word or phrase.|