Before you add any text to your page, consider viewers who will be reading it on a mobile device. Be clear, but keep it short when you can. See the very bottom of this page for a few hints on making your text web-friendly!

Styles (Font, Size, and Colour)

Use the Paragraph icon to change the style (font, size, and colour) of your text in a way that's consistent across the site. Most text should use the normal style, and page sections can be separated with headings (usually using Heading 2, like "Styles (Font, Size, and Colour", above, for different topics on the page, and Heading 3 for any groupings within each section). The colours will reflect your site's theme, so won't be the same as you see on this page, but will fit in with your site.

When you paste text from another source (like Word), you may have trouble formatting it in the page editor. See the section near the bottom of this page for more information about how to clear formatting, but the most reliable way to control your formatting is to compose content directly in the editor.

To style your text, select the section you'd like to modify to highlight it, and then use the style drop-down to choose the style you'd like to apply:

These are the styles you can choose from:

This is Normal text. Use it, as-is, for the majority of your content.

This is Quote, and handy for highlighting short, key bits of text.

This is Code. It is useful for providing programming commands that users may need to copy, but messes with other things like word wrap within the page, so you shouldn't generally use it in your site. 

This is Heading 1

It's used for your page title, and should only be used if you have another main section in your page.

This is Heading 2

It should be used for important sub-sections in your page, within each Heading 1 section.

This is Heading 3

It should be used for less important sub-sections with each Heading 2 section.

This is Heading 4

It should be used to group content with a Heading 2 section.

This is Heading 5

I think you see the pattern by now. But really, if you have this many levels of content, you may want to consider simplifying your page.

Underlining (Bad, Bad, Bad)

We don't have an underline function in the formatting tools or the styles, because your site should not have underlined text in it. We use colours to indicate links in all sites - please keep your site consistent and don't underline your links. And underlining other text can be very confusing for readers, making it difficult to determine which text on the page is linked and which is not. If your text is important and you need to emphasize it, use bold (with restraint). If people are still not keying in on what's important, the solution is not to underline, but write more effectively and ensure that the only content in your page is the content that needs to be there.

Emphasis - Bold and Italic

Use the corresponding icon to add emphasis to your text by making it bold or italic. Use this sparingly so it retains its impact. The "S" lets you do strikethrough, but remember: just because you can doesn't mean you should.

The keyboard shortcuts you use in other applications work here, as well, so you can CTRL-B or CTRL-I to accent your text without using a mouse.

Lists

Use the list icon to create and format lists:

• Unordered (bulleted)

1. Ordered (numbered)

If you have hierarchical (or nested) lists, you can select the text and indent or outdent accordingly.

Tables

Add and format a table using the table tool. To make sure your page is easy to use on a mobile device, try not to use more than two columns in your table; additional columns may not be visible when viewed on a mobile device. To see if your table works well on a mobile device you can load the page on your phone to test it, or just reducing the width of the browser window (by dragging the edge) on your computer to simulate a smaller screen size.

The rest of the table functions are similar to what you are used to in Word or Outlook:

Not all formatting commands work within tables (you can't make your table text a Heading 1 style), but you can use basic formatting like bold font and include images.

As with images, the spacing after a table can appear differently in the editing view than in the published (public) view. Always check your page in the public view (if you can see the ribbon at the top of your page, you're not in public view!) after your make changes, and add extra paragraph breaks if needed. If you add a paragraph break but still don't have it appearing as you expect, try adding a break and a space (hit return and then your space bar).

Links

To link text in your page to another web page (in your site or elsewhere) or a file or document, highlight the text you'd like to use, click on the link icon in the editing toolbar, and choose Insert link (or, to remove a link you created previously, choose Unlink):

When you define your link, use the full URL, including http:// or https://. When you link to pages or documents within your site, make sure you always use the public address (if it has "school-edit" in the URL parents won't be able to access it).

When you link to a page within your school site, leave the "Open link in new tab" box unchecked so the page opens in the current tab. When you link to a page outside your school site (even if it's to the CBE site or to another school) or any file like a PDF, then check the box to open it in a new tab so the visitor can easily find their way back if they close the tab.

Hint: you can use keyboard shortcuts like SHIFT+ left or right arrow to select text, and CTRL-K to open the Add Link screen without touching your mouse.

In addition to creating links from the text in your page, you can add a list of links (or even QuickLinks) to the right sidebar area of your page.

Linking an Email Address

When linking to an email address, highlight your text and use the link function in the top editor. In the URL field, enter mailto: followed by the email address. Then press insert.

The Stupid "Insert" Button Doesn't Work!!!

If you're creating a link and nothing happens when you click Insert, check your URL carefully. The Insert Link wizard won't let you save your link if it's not a valid address (the easiest way to test is to copy what you have in the URL field, open a new tab in your browser, and paste it in directly). Once you correct the link, it should save correctly. Or, depending on how you look at it, the button will be magically fixed.

Alignment (Justification)

Use the align tool to have your text aligned to the left or right side of the page, or centered on the page. Left-aligned text is much easier to read, so use the other options sparingly (Align Center) or not at all (Align Right).

Indent

You can choose to inset some of your text to help it stand out by using the indent/outdent tools. The "Quote" style can also be used to indent blocks of text, but it changes the font size and colour as well (depending on the colours of your website).

This text is normal style, but is indented.

This text uses the Quote style to stand out on the page.

Clear Formatting (Pasting from Word)

If you are composing your content in Word or another tool and then pasting it into your web page, you may have unexpected results. Often, some of the original formatting (fonts, font sizes, bullets, spacing...) is imported with your text but displayed differently. There are three simple ways you can address this:

• Copy your content into a plaintext editor (like Notepad) first, then copy the "clean" version from Notepad to paste into your web page. This is usually the most reliable way to ensure that your content does not have any unwanted formatting.
• If you are pasting from Word, right-click and choose to paste it without formatting or as plain text (the exact options and wording will depend on your operating system and browser):

• If you have pasted content in to your webpage and want to get rid of residual formatting (or if you want to undo the formatting you've applied to it), you can highlight the text you'd like to clean and use the clear formatting tool.

Hint: If the Clear Formatting tool doesn't fully remove the formatting, you can copy the content from your webpage into Notepad, then delete it in your webpage, and paste in the clean copy from Notepad.

HTML View (Use Extreme Caution)

The HTML (code) view tool allows you to see and edit the html code behind your webpage. Changes made in this view can break the internet (or at least your page), so please resist the urge to tweak or explore directly in the code. The SchoolBundle site and content editor are designed to build your content in a way that works across many devices, and even if you are a skilled html programmer, the changes you make may cause problems for viewers.

It took a lot of work to design and build your site. It only takes a few keystrokes to bring it down. Please be careful.

Writing for the Web

Text you add to your website works differently than you may be used to. These tips will make things easier for everyone who visits your site.

• Let Your Heading Be Your Guide. As users scroll through a long page, clear headings help them identify what's in the page and quickly find what they're looking for
• White Space is Free. Use it. Long paragraphs are very difficult to read on a small screen. Break them up to make them manageable, or use bullets, like this.
• Go like Google. Format addresses like you see them on Google maps (don't include # before the house number, use "NW" instead of "N.W.", and make sure you use the right abbreviation so the map application can tell the difference between Court, Close, and Cove)
• Email Only! Don't use @ as a substitute for "at", especially in times (like "starts @3pm"). If it's not an email address, write it out.
• #Hashtag. The pound sign (hashtag) can be interpreted as a link to that term in social media, and it may not always be used in the way you're using it! Include it when you want to link to that term in social media, but don't add it for emphasis.
• Your Typing Teacher Was Wrong. Or maybe things have just changed; either way, you should only include a single space after a period. It helps to keep spacing consistent and text easier to read.