Creating Content

To create your content you must create a new Content Page under the Content Pages column - the far left hand column labelled All HTML Pages. Click on the Create New Page link and it will take you into to the HTML Editor of you new page. 

fig.1: Content Pages Column


Toolbar:

Before we insert any content, let's first examine the toolbar and what it has to offer. Remember you can always hover your curser over a button and small tooltip will show up telling you what it is.


fig.2: HTML Editor Toolbar


Let's walk through some of the important icons:
  •  Fullscreen Icon: This allows you to view the HTML Editor as fullscreen. Click it again to exit out of fullscreen.
  •   Much like Microsoft Word, these tools are used to format your text. Change the font family, size, color etc.
  •   Use these buttons to format your paragraphs. You can indent, align left, right, centered or justified. You can also create bullets here too.
  •  Hyperlink: Create links to other websites using this button.
  •  Image Icon: Use this button to insert images.
  •  Use this button to link to the Content Pages you have created.
  •  Use this button to link to your GotSoccer Database - Teams, Coaches, Tournament.
  •  Insert video media using these buttons.

Creating your First Page

Let's create the Homepage for your website. First, under title, we will label this page Homepage - so that we know what page it is. Now let's start inserting content. Inside the blank HTML editor is where you insert content. Use the grey toolbar to format your page, much like you would with a word document. First let's type in a headline for the page and format it. 


fig.3: Inserting content into your blank editor.


Let's format this text so that it looks like a headline and not just paragraph text. First I highlight my text, then I'll make it bold by clicking on the B in the toolbar. Notice how it immediately makes the changes inside the HTML Editor. Now let's change the size to Size 4, and centre the text using the align buttons. You could of course change the font, the color etc. It should look something like this:-


fig.4: Formatting your text


Now let's add a paragraph of text introducing our website. We will align it to the left and make the text smaller and of normal weight. Experiment with the different tools that will allow you to format your page. This is what it looks like now:



fig.5: Use different fonts, colors, alignment to make your page more dynamic looking.


At this point let's save our page and preview it. To do so, you must first Publish your page. Check the box just above the HTML Editor which is labelled Published. Then click Save Page. A URL link will appear in the left hand side of your page located just below your Site Page: Homepage title. Click on it and you should now see how your content has automatically been published into your website template. 

Next we will look at adding images to our pages: Adding Images and Media