How To Do Your Own Website Content

August 7, 2019 8:41 pm Published by Mitch Schols

Welcome to Metric Web Design Inc.New West Web Design / New Westminster Web Design / Content – We have years of big firm experience helping many businesses and franchises in Canada and the USA get online, look professional & capturing traffic off of Google with Premier Google SEO.

We do in-house Canadian Web Design. Custom from the ground up, locally to the GVRD/Lower Mainland and nationally/internationally through remote services. We do not and will never outsource to India or otherwise, the people you talk to when you Contact Us at Metric Web Design Inc. live and breathe the web.

We create all kinds of custom designs and solve all kinds of technical issues through advanced Custom Tech Solutions. We build everything from the ground up and have a bit of knowledge on a bit of everything.

One thing we are asked often is: “How / can I do my own content on my website?” Usually, for our clients here at Metric Web Design Inc. we usually suggest and offer to do this for our clients (so they don’t need to worry) and it also allows us to use our superb Content Strategy Services to create more compelling, SEO friendly content.

We do however encourage those who are adventurous to learn a little bit about their website and dip their toes into Content. Starting with Content and HTML is the most bare-bones way of starting to understand how a website functions on a more technical level.


What Is Website Content?

So we’re going to keep everything really simple to understand. This isn’t going to be an advanced tutorial.

Website content is what you are reading right now and can be broken down into two components:

  • What is being said or the (Body) of text
  • HTML (Tags)

It all starts with logging into your website’s backend. You will be provided with a user/password and a URL to log into it upon request by us here at Metric Web Design Inc.

Backends vary project to project, but the most popular and open-source is WordPress. We will be demonstrating WordPress today, but many backends are similar and make content editing very simple.

Some of our projects, however, incorporate entirely custom backends that might not be possible to edit without a bit more knowledge.

We will demonstrate how to go in and edit the content of a page and show you what we mean:


Website Backend

So this is what the backend in WordPress will look like when you log in:

How to do your own Website Content on WordPress -- a Rudimentary Guide.

You will notice a toolbar on the left, this is how you navigate the different sections. You CAN do some damage in here, so be careful. (Or we might need to revert with one of our backups.)

The only tab you will need to worry about for page content is “Pages:”

How to do your own Website Content on WordPress -- a Rudimentary Guide.

You will see all of the pages of your website, to edit one simply click on it.

How to do your own Website Content on WordPress -- a Rudimentary Guide.

Now you are inside editing a page, this is the interface for editing content:

How to do your own Website Content on WordPress -- a Rudimentary Guide.

A major thing is to note there is Visual Mode and Text Mode. Visual Mode displays more akin to what it actually looks like on the page and allows easy simple editing:

How to do your own Website Content on WordPress -- a Rudimentary Guide.

But with layout and tags, it can be quite buggy, and this isn’t a WordPress issue, that’s just the nature of Visual Editing which essentially is a view where it tries to auto-code the HTML in the “true” Text Editing side.

Text Mode or Text Editing is simpler and shows the actual HTML code and tags and is not buggy or limited in any way. There is no reason to use Visual Editing other than to shorten the time of writing longer codes and it will create bugs with improper auto-generated HTML most of the time if used too extensively. The only main use we would suggest is for Aligning text left, center or right as it’s much faster.

How to do your own Website Content on WordPress -- a Rudimentary Guide.

We will be showing you how to use the Text Mode of editing content and teach you some basic HTML and their corresponding buttons as well as the code.

How to do your own Website Content on WordPress -- a Rudimentary Guide.


Basics

Looking at existing pages you should be able to notice a few patterns. We are going to be teaching you some HTML Tags which are as you can likely see in your pages as such:

Common ones are:

Headings

<h2></h2>

Some websites auto-generate their Headings, otherwise, you will see these tags and need to use them as well, they are essentially a subject title for the page and it’s different sections.

<h1> is the main Header/Heading and you should only have 1 on every page.

Headings after <h1> ( <h2> <h3> <h4> ) can be used as you would like for sections.


Links

Making text a link is done with the <a> tag. It should look:

<a href=”https://metricwebdesign.com”>Links</a> in-between the starting tag and ending tag you put your content you want to become a link.

This can also easily be done by selecting text and hitting the link button: (a window will pop up, much easier than typing this tag.)

How to do your own Website Content on WordPress -- a Rudimentary Guide.


Bold Texts

The <strong></strong> tag is for Bold Text: <strong>Bold Text</strong>

You can do this tag easily by selecting the desired content and hitting the b button:

How to do your own Website Content on WordPress -- a Rudimentary Guide.


Italic Texts

The <em></em> tag is for Italic Text: <em>Italic Texts</em>

You can do this tag easily by selecting the desired content and hitting the i button:
How to do your own Website Content on WordPress -- a Rudimentary Guide.


You can combine tags as such if you want a Bold Link or an Italic Link or a Bold And Italic Link:

<a href=”https://metricwebdesign.com”><strong>Bold Link</strong></a>
<a href=”https://metricwebdesign.com”><em>Italic Link</em></a>
<a href=”https://metricwebdesign.com”><strong>Bold And Italic Link</strong>

As you can see, tags wrap and end in a logical fashion. Things in between them are the content and always have an end tag.


<hr />

the <hr /> is to create section ending lines as such:


You will notice that all of the tags other than <hr /> have a closing tag such as: </h1> </strong> </em>

For our current purposes, it’s not that important, but this is called a self-closing tag.


Saving Your Work

It is highly important while editing anything not to close the tab/window. You must MANUALLY SAVE YOUR WORK!

On the right side you will see a “Publish” window, you have two options:

  • Publish will make the page live and viewable by anyone, can also be scheduled for a time/date.

How to do your own Website Content on WordPress -- a Rudimentary Guide.

  • Draft will make the page unviewable to anyone who isn’t logged into the website backend. Good for testing/viewing as you work.

How to do your own Website Content on WordPress -- a Rudimentary Guide.
If you don’t save, everything you do will be DELETED on refresh. When doing Content, you must frequently save with one of the options.


In Practice

So that is what we meant by two components, the (Body) or content and the HTML Tags that govern how things look, the content goes between those tags and that’s a basic way of understanding how it works in dipping your toes into Content.

Now obviously, that isn’t all there is to Content or a website.

There’s quite a bit more to learn, a great resource for understanding HTML is:

www.w3schools.com

Note that this resource is entirely free, but also know that it speaks in very literal terms and disregards what platform your website may be on. Like for instance, some tags on WordPress are auto-handled. Essentially letting you have a cleaner and easier editing experience.

Things like not needing to use the <p> tag on every single paragraph of Content for instance.

We suggest learning from referencing what is already there.  So you can see what does what and reference it. Again, if you feel uncomfortable and very frustrated please Contact Us for help, we can fix it for you.

This is a rudimentary guide just to get you being able to make some text edits and making it look the way you want it to. There’s a lot more than just this to a website and what we do here.


This has been a Metric Web Design Inc.New West Web Design Blog Post. You can skip all of this with our Content Strategy/Implementation Services.

Let us make your dreams reality with our Professional Website Services, Marketing Services and extensive big-firm experience. Contact Us today.

Leave a Reply

Your email address will not be published. Required fields are marked *