DIY Digital

Coding for Beginners

Home » Techy Stuff » Coding for Beginners

Last updated May 27, 2022

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.

WYSIWYG editor

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

Bold

<strong>To make text stand out, bold it</strong>

Heading

<h3>This is a Heading</h3>

New Line

<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>

Would look like:

  • Milk
  • Tea
  • Coffee

Links

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

MailChimp uses the open and close icons < and > at the right end of its WYSISYG editor.

Shopify

Like MailChimp, Shopify uses the open and close icons < and > at the right end of its WYSISYG editor.

Shopify html

Joomla

You can find the html in Joomla by clicking on the Toggle Editor (bottom left).

Joomla-Toggle-Editor

Another online system calls it html (isn’t that nice of them?)

iMis-Design-html editor

WordPress

WordPress calls it the Text editor and you can toggle between it and the Visual editor using these buttons at the top right

WordPress-Visual-Text html editor

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.

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

The fix is as easy as going into the html code and fixing the close code.

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

Broken website

Broken Website?

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.

Get in touch

Use the contact form or send us an email.

Better yet, call us on 0400 835 161 and let’s have a chat.

Subscribe to our DIY newsletter
This field is for validation purposes and should be left unchanged.

© 2018 - 2022 DIY Digital

Loading...

Pin It on Pinterest

Share This