Creating – Web Content#

Purpose#

The following explains how to add/edit the type of Web content, including: images; video and other embeddable content; and, links.

Each of the sections below explore a different content element, its style and how it is transformed online.

Check out the Word document#

As you work through the examples in this section, it would be helpful to look at the Word document used to produce this page. This enables you to compare how Word styles were used to produce each of the following effects.

Images#

Figure 1 - Picture floating to right online

Feel free to insert images directly into the document. If you apply the PictureRight style to an image (e.g.
Figure 1) it will float off to the right of most text when viewed on the Web. But it won’t behave like this in the Word document (because image placement and text wrapping in Word is hard).

For a PictureRight image, being much bigger than 300px can cause problems (see Image Size below for more information)

Solving the size problem#

The line above provides a solution for when a PictureRight image is too long and starts to overlap with other elements. It contains a little bit of HTML code – that is not visible on the web but is visible in the Word document and is reproduced in Figure 2 - that has had the Embed style applied.

Figure 2 - What the HTML code looks like in the Word document

The browser interprets this code to make sure there is a clear break between previous elements (e.g. a long PictureRight image) and what follows.

Figure 3 - An image that will be centred when viewed online

What that looks like in Blackboard#

The previous images look like Figure 4 in Blackboard.

Figure 4 - Blackboard version of Images section

Image size – resize before inserting into Word#

If you resize an image using Word, that size will not translate to the Web site. For example, take note of the size of Figure 5 in the Word document and compare it to the size on the Web.

If you have a big image, you will need to change the size of the image before you place it into Word (otherwise it appears in Blackboard as its original size). For example, see Figure 5.

There is a free online picture resize service (or there are other options on most platforms) to resize bigger images.

Figure 5 - An image that looks small in Word, but big online

Avoid having two images follow each other (with nothing in between)

When there are two images one after the other (e.g. these two images before this note was added in between them) there is a minor problem with correctly showing captions on wide browser windows.

Figure 6 - My caption

Considerations of Image size and HTML size#

In order to simplify the publication process, the images you include in a Word document are included entirely within the resulting HTML as Base64 images. This means when you copy and paste the HTML you are copying and pasting both the text and the images all in on go.

The trade-off for this is that size of the HTML produced is dependent upon the number and size of the images you include. The amount of information you are copying and pasting increases with the more images you include.

If you have a lot of images (or very big images) this means that the copy and paste process can be quite slow. It also may not work in some browsers.

Hence, resizing your images to be small can be useful.

Links#

Microsoft Word supports the insertion of web links into documents, which then act exactly like links on web pages. i.e. if you click on the link, Word will attempt to open a web browser with that link.

Avoid#

This means, that you can avoid including web links (aka URLs) in the text of your document. For example, use this link - https://www.flickr.com/photos/topsteph53/4192354425/ - to view a photo. Such an approach is a bit ugly to read, but also means that once the content is on the web, readers will not be able to click on a link.

Instead#

Create or edit a hyperlink: that link takes you to Microsoft’s explanation of how to create or edit a hyperlink in Word. For example, please view the original big photo. On the web, the link will be clickable. In Blackboard, that link will also open in a new browser tab. Avoding an issue with Blackboard.

Be careful editing links in the browser version of Word

Microsoft provides both a Desktop and browser-based version of Word. Typically both work the same, but there are differences.

The process for editing links in the browser-based version of Word can behave different in certain niche/edge cases. e.g. adding links that don’t include http:// such as when using the Blackboard Content Link or Blackboard Menu Link styles in the Content Interface.

Embedding YouTube videos and beyond#

On the web, you can use the <embed> tag to embed external content into your web page. That external content might be a video (e.g. YouTube, Vimeo, or Microsoft Stream), an embedded PowerPoint presentation, H5P content etc. This is achieved by including a snippet of HTML into your webpage.

You can achieve the same outcome using the Content Interface by using the Embed style and this three-step process

Copy the embed code from the source
Paste the embed code into your Word document
Apply the Embed style to the embed code you just pasted

The following sections demonstrate how to use these three steps with a YouTube video.

1. Copy the embed code from YouTube#

The embed code for a resource is typically found via a Share button or similar. Typically under the heading Embed.

This support resource from YouTube explains how to copy the embed code for a YouTube video.

Embed code will look something like this

2. Paste the embed code into your Word document#

Paste the embed code from YouTube into Word document at the location where you want your video to play.

For example, in step #1 you can see a copy of the YouTube embed code. In the Word document, this embed code. But it wasn’t a video you could play. This is because it has the Normal style applied to it in the Word document. A Normal style means that the embed code is just displayed as text.

To get the video to play, you need to change the style.

3. Apply the Embed style to the embed code#

In the Word document for this page, there is more embed code, matching the code from Step 1. The major difference is that the embed code below has had the Embed style applied. In the Word document, the Embed style uses a different font and size to make clear that it is a different style (see Figure 7). When converted to the Web it will appear as a YouTube video (See Figure 8).

Figure 7 - Step 3 as it appears in Word

And now the web version.

Figure 8 - Step 3 as it appears in Blackboard

Generating and formatting video transcripts#

Include a transcript from a video by:

Generating a transcript (e.g. using auto-generated captions of some services).
Download the transcript file.
Format the transcript file using the formatVTT service.
Paste the formatted text into a Word document.

What and why?#

Most video streaming platforms provide the ability to automatically generate captions for videos you upload (e.g. Microsoft Stream). These captions will be displayed when the video is played on the platform.

It can also be useful to include the text of these captions in study material. Example uses include:

Providing downloadable versions of lectures for incarcerated students.
Using lecture transcripts as a starting point for creating study material, including providing the start point for a script for a quality video.

For more information, see University of Melbourne’s Auto-generated transcripts and captions page.

Downloading captions#

Most video streaming platforms will provide the ability to download video captions (e.g. Microsoft Stream) as text files.

Formatting captions#

However, the caption text files you download are usually in a format specific for captioning (different captioning file formats exist) and not immediately usable by a human.

There are online services that support the conversion of these files into different formats (e.g. HappyScribe’s VTT to Text). However, these services tends to simply strip formatting and leave the text as a long sequence of lines of four or five words.

Use formatVTT#

The formatVTT service offers two improvements:

Group text into paragraphs.
A pause between speaking of just less than a second is used to group text into paragraphs.
All data remains on your computer.
All work done by formatVTT is done in your web browser. The caption data never leaves your computer.