Adding and Editing Text and Links

Entering Text

All text in an HTML document needs to be tagged to to describe its 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 your first page, if all it contained was text, 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>

Lists

Another very common structure in a document is a list. HTML tags allow for three varieties. Note that while you can use these three structures in your site the GregCuston theme only includes styling for the last of them. The first two will be styled according to defaults for of the browser that the visitor is using.

Ordered Lists

Used where order is important, such as describing the steps in a process to be executed. The items in such lists are numbered by default. Many will want to construct ordered lists that contain sub-lists. Because, currently, the site does not contain any such lists there is no styling for them in the GregCustom theme.

If correct numbering presents a problem for you, then either post a message on the WonderCMS Forum or Contact Me. There are various options possible, such as styling rules that can make the sub-list show a second number separated with the dot or a letter following the item number.

<ol>
  <li>Item 1</li>
  <li>Item 2
    <ol>
      <li>Item 2.1</li>
      <li>Item 2.2</li>
    </ol>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ol>

Unordered Lists

Used where order is not important, such as a holiday packing list. By default items are shown with a bullet, which can be of a different shape in a sub-list. The list items are tagged in the same way as with an ordered list but instead are wrapped in [ul] tags.

<ul>
    <li>Essential 
      <ul>
          <li>Item</li>
          <li>Item</li>
      </ul>
    </li>
    <li>Desirable 
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>   
    </li>
</ul>

Definition Lists

This is used to hold a set of terms" followed by their "definitions". Typically, the terms are displayed in a bigger bolder font than the definitions which are indented. The structure uses the following tags:

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

This site uses this structure on the home page where it lists the various components of my Mastodon account header image and styling exists in the GregCustom theme to produce the result seen there.

Links

To turn some text into a link to another page 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:

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

If your site includes a number of levels of sub-pages then 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 can 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 paste it leaving the remainder. Make sure you retain the initial slash in what is left.

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.

Related pages: Introduction, Media and Special Cases.