html – the Coding for Beginners
Websites can use quite a few different coding languages, but html is the one that beginners will come across first.
Learning basic html can assist to more effectively manage websites and trouble shoot issues when things go wrong.
Many of us find ourselves in the position where we need to enter text or photos onto a webpage. This could be a website, an e-newsletter or an online event page. Thankfully most sites have a WYSIWYG editor. WYSIWYG stands for a What You See Is What You Get editor
This makes it easy to edit webpages. They have buttons that you’ll be familiar with, for example making text bold or centre aligning the paragraph. Beginners should use this and not attempt to use html at all. These editors exist to make it easy for you – which is great news!
However, sometimes things go wrong. Often it’s because the code (or html), which is hidden in the background, has an error. The fix is often very simple if you know basic html principles.
We hope the following coding for beginners guide helps you get started.
The Golden Rule
The golden rule for html is there is always an Open and a Close.
- Open < >
- Close < />
Q: Do you see the difference?
A: The close code has the backslash.
The open code is at the beginning of the text which is subject to the html instructions. The close code is at the end.
Some Common Examples
<strong>To make text stand out, bold it</strong>
<h3>This is a Heading</h3>
<p> You can start a new line for every new thought </p>
Would look like:
Link to another webpage: <a href=”https://diydigital.com.au”>DIY Digital</a> DIY Digital
Finding the html
To add or edit the html, you’ve got to find where it’s hidden.
It’s almost always a toggle switch – anotherwords you toggle from the normal view to the html view. Top right of the edit window seems to be the most popular position for the toggle button, however it can be placed in any corner, i.e.
- Top right
- Top left
- Bottom right
- Bottom left
It will look different depending on what system you are using, but a popular icon is the open and close paragraph marks; < and >.
MailChimp uses the open and close icons < and > at the right end of its WYSISYG editor.
Like MailChimp, Shopify uses the open and close icons < and > at the right end of its WYSISYG editor.
You can find the html in Joomla by clicking on the Toggle Editor (bottom left).
Another online system calls it html (isn’t that nice of them?)
WordPress calls it the Text editor and you can toggle between it and the Visual editor using these buttons at the top right
Weebly and Wix
Weebly and Wix make it very difficult to find the html editor and don’t encourage it. This makes their sites relatively foolproof as they make sites for people who don’t code and don’t want to code. It’s the keep it simple principle.
- fonts end up being all big or all in italics
- letters in the word do not change to bold
- links don’t work
It’s likely to be because
- There is no close code
- The close code is incorrect
The fix is as easy as going into the html code and fixing the close code.
If you wish to learn more about editing your WordPress website, here’s two partner video tutorials that may assist:
We can help fix your broken or slow WordPress website, support you to keep it in tip top shape and boost the browsing experience of your audience.