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>

DIY Digital

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.

Got an unfinished website project? Run out of time or know-how to complete it? Just not too sure where to go next? Contact us to help you over your hurdle and get your site live.

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

WordPress Beginner WYSIWYG Editor