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:
So this is what the backend in WordPress will look like when you log in:
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:”
You will see all of the pages of your website, to edit one simply click on it.
Now you are inside editing a page, this is the interface for editing content:
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:
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.
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.
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:
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.
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.)
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:
The <em></em> tag is for Italic Text: <em>Italic Texts</em>
<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.
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.
- Draft will make the page unviewable to anyone who isn’t logged into the website backend. Good for testing/viewing as you work.
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:
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.