When I first started working online, there were programs such as Frontpage to help with coding, but it was impossible to build a website without knowing a little bit of code. Today, content management platforms, such as WordPress and website templates make it so that you can build a website without knowing anything about coding. However, that’s not necessarily a good thing. One tiny error in coding can completely mess up your site.
If you don’t know anything about code, you’ll have difficulty finding the error. Of course, you can hire a webmaster to build your site and fix it when you break it, but there are some things you should know about HTML code and how to do it.
1) All coding additions and changes need to be done in a text editor. Most content management platforms and templates offer two viewing options: WYSIWYG (sometimes called “Visual”) and Text (sometimes called "Source"). WYSIWYG is designed to show you how your content will look on your website. In this editor, all code should be hidden. If it’s not, something with the coding is wrong.
When you want to make changes to the code, you want to be in the text editor. In this view you can see all the content that will be on the site and the code that tells the browser how to organize the content. So if you want to paste affiliate code into your website, you’ll do it in the text editor.
2) Tag markers are designated by <> and </>. The <> indicates the start of a code and </> marks the end.
For example, if you want a paragraph break the code would be <p>, the paragraph text, ending with </p>. The most common tags are:
Paragraph: <p> </p>
Bold: <b></b> or <strong> </strong>
Center: <center> </center>
Header: <h1> </h1> (change the number for different header sizes and formats i.e. <h2></h2>
Font: <font></font> this is used to change the font type or size such as <font size=”1”>text</font>
Bullet Lists: <li></li> Bulleted lists are usually started with <ul> and end with </ul>. Each bullet point is surrounded with <li></li>.
<ul>
<li>Bullet Item</li>
<li>Another Bullet Item</li>
</ul>
It will look like this:
- Bullet Item
- Another Bullet Item
Numbered List: <ol></ol> with the <ul></ul> codes as well.
<ul>
<ol>text</ol>
<ol>text2</ol>
</ul>
Appears on the site like this:
- text
- text2
3) Some codes don’t have end tags. For example, if you want a line break, simply put <br> where you want the break to occur. If you want a horizontal line dividing content, add <hr> where you want the line to appear.
4) Hyperlink code is the most helpful code to know and understand. The hyperlink code creates clickable text (or image - see #5) on your webpage. The tags for hyperlinking are <a href=”http://www.URL”>Clickable text</a>. The URL is where you put the url you want the click to go to and the clickable text is what you want hyperlink to say. For example, if I wanted to create a clickable link to the home page of Home Business at About.com using the text “Home Business About.com” I’d write:
<a href=”http://www.homebusiness.D106”> Home Business About.com </a>
which will look like this on the site
Home Business About.com
If you’re having trouble with a hyperlink, places to check for errors include the quotes around the URL and the end tag </a> after the text you want to be hpyerlinked.
5) Images are one of the most challenging bits of code to get right. Image codes require knowing the URL the image is located, which means the image must be online. For example, the photo of me is at http://0.tqn.com/d/homebusiness/1/G/Y/6/-/-/Leslie200.jpg . To add that image to my page I need to use the image code <img src=”http://www.image.jpg”/> or in this case:
<img src=”http://0.tqn.com/d/homebusiness/1/G/Y/6/-/-/Leslie200.jpg”/>
This code only shows the picture. If you want to make it clickable to link to a website, you need use the code:
<a href=”http://www.WebsiteURL.com”><img src=”http://www.imageURL.jpg”></a>
So if I wanted to have my image linked to the home page of Home Business at About.com, the code would be:
<a href=” http://www.homebusiness.D106”><img src=”http://www.imageURL.jpg”></a>
Most content management platforms and website templates make adding this code easy by clicking an icon, but when something goes wrong or isn’t working right, knowing these basic codes can help you identify problems or create the effect you want manually.