Ever thought you might want to learn html?
Have you tried to go in and edit a website? How did it go?
If you’ve tried to edit a website and the font ended up all big, or in italics, or the links didn’t work, understanding what html is and how it works may assist.
Learning some basic html may also assist web editors with a bit of experience to start understanding how to more effectively manage their site and trouble shoot issues when things go wrong.
WYSIWYG editor
Many of us find ourselves in the position where we need to enter text or photos onto a webpage. Whether it’s an online business directory, a website or an 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. Sometimes the fix is very simple if you know basic html principles.
html
html stands for Hypertext Markup Language. But I think it should stand for either:
- Hidden Tools Mischievously Lurking
- Handy Text Manipulation Language
If you’re in a good mood it’s Handy Text as it can help you enhance your site.
If you’re not in a good mood and the html has caused you problems, you’re much more likely to think about it as Hidden Text!
The Golden Rule
The golden rule for html is there is always an Open and a Close.
- Open < >
- Close < />
The open code is at the beginning of the text which is subject to the html instructions. The close code is at the end.
Q: Do you see the difference? A: The close code has the backslash.
Trouble-shooting
If the:
- 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
It may have happened because the text was copied from a Word document. Online editors often don’t play nicely with text that’s been copied from a Word document. Copying from notepad, textedit or a rich text file is recommended.
Some Common Examples
Bold: <strong>To make text stand out, bold it</strong>: To make text stand out, bold it
Heading: <h3>This is a Heading</h3>
This is a Heading
New line or Paragraph: <p> You can start a new line for every new thought </p>
Bullet Points:
<ul>
<li> Milk</li>
<li> Tea</li>
<li> Coffee</li>
</ul>
Bullet Points:
- Milk
- Tea
- Coffee
Link to another webpage: <a href=”https://diydigital.com.au”>DIY Digital</a>
Where do you find the html?
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 and Shopify
Both Shopify and MailChimp use open and close icons < and >
Joomla
Joomla calls it the Toggle Editor (bottom left)
Another online system calls it html (isn’t that nice of them?)
WordPress
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.
Next Steps
If you wish to learn more about editing your WordPress website, here’s two partner video tutorials that may assist:
Beginners Guide to Edit Webpage – understanding Rows & Columns