Tagging Text and Creating Links

Entering Text

All text in an HTML document needs to be tagged to describe its semantic function. The theme you choose in WonderCMS then determines how this will appear, it's font, size, colour, etc.

Headings and Paragraphs

The most common tags for text are headings and paragraphs. Heading tags have six variations to allow for a number of level of sub-heading, so if all a page contained was text it could look something like that below, where just three levels of heading are used and a number of paragraphs:

<h1>Document Title</h1>
<p>An introduction to the topic</p>

<h2>A Sub-heading</h2>
<p>A first thought.</p>
<p>A further thought</p>

<h2>Another Sub-heading</h2>
<h3>One Concern</h3>
<p>About that concern</p>
<h3>Another Concern</h3>
<p>About the second concern</p>

<h2>Conclusion</h2>
<p>Summary of the document</p>

If having to type all those tags looks a bit intimidating then it suggests that you are not used to working with a text editor. There are many available on every platform. I am beginning to build a collection of Suggested Editors you may find helpful.

Quotations

Another very simple tag to use is [blockquote], which as you might guess is intended for an important or extended quotation, which is worthy of being displayed as a block rather then in-line with quotation marks around it. On this site a [blockquote] has inset margins and a background with a grey background with a cyan tinge. There's an example of that on this site's Canal Worker's Cottages page. Longer quotations can include headings, paragraphs and other necessary tags.

<blockquote>
  Quotation goes here.
</blockquote>

Links

After creating some appropriately tagged text you will probably have in mind the creation of a second page and you might want to have your visitor jump straight to it rather than use the menu system. To do that you wrap the text in an [a], or anchor, tag. It must include an HTML Reference (href=" ") attribute which specifies the page to which the link sends you. The structure takes this form:

<a href="PageAddress">Link Text</a>

It's not just text that can be a make a link. Images can be links as well. Just wrap a pair of anchor tags around the image tag. There is more about that on the Media page.

If your site includes a number of levels of sub-pages it can be tricky to know what to use as the "PageAddress". The easiest way to determine the correct file reference is to visit the page. For example, if you visit the "Choice of Theme" page on this site you will see the URL is:

https://gregchapman.uk/wondercms/themes/the-choice

While, for links whose target is within the site, you could enter that full address as the HTML Reference (href=" "), the first part is unnecessary. I would recommend that you delete your equivalent of the "https://gregchapman.uk" part once you have pasted it in, leaving the remainder. Make sure you retain the initial slash in what is left so, for the example above, the PageAddress would read:

/wondercms/themes/the-choice

Adding IDs

So far it has been assumed that you will want to load a new page. However, it is also possible to make a link go to a particular place on a page. To achieve that the target point has to be a particular element to which you have added an "ID" (id=" ") attribute.

The code for the heading "Links" on this page has such an attribute and reads:

<h2 id="links">Links</h2>

and, if I wanted a visitor to jump to that point from this page, the the code to include as the link would be:

<a href="#links">Links</a>

If I was editing a different page then I would need to include the PageAddress as well as the ID:

  <a href="/wondercms/themes/gregcustom/basic-tags#links">Links</a>

Obviously, an ID can only be used once on a page.

Related pages: Introduction, More Text Tags, Media Tags and Special Cases.