This chapter explores the use of text and hypertext within multimedia projects. When text is spoken aloud, it becomes audio and will be discussed further in the audio chapter of this book. This chapter explores only written text and hypertext.

Using text

Guidelines when using written text within your multimedia projects:

• Spellcheck!
• Use correct grammar. Draft using a tool like Microsoft Word with grammar checking turned on.
• Avoid colloquialism. If your project will be used by people from different cultures, then colloquialisms will not have any meaning, as they often do not translate outside of the cultural context.
• Use informal language and write as if you are speaking directly to the learner – recall Mayer’s Personalization principle.
• Avoid the use of underline for non-linked text. Underline has become synonymous with hyperlink.

Here is a short video that summarizes Mayer’s Personalization Principle:

What makes hypertext hyper?

Hypertext is text that contains a link to another location.

Guidelines when using hypertext within your multimedia:

• Hypertext the name of where the content goes, rather than the URL itself. When someone is using a screen reader to access content, they are able to navigate to different links by the names of the links. If you name the link with the URL, it is much more difficult for people navigating via screen reader to follow your site.
• It is poor practice to say “click here”.
• If the link is to something that is not on your site, then you want to set it up to open in a new window or new tab.

What are HTML, CSS, Javascript and SQL?

HTML stands for hypertext markup language. It is the language for building web pages. HTML5 is version 5 of the HTML standard.

CSS stands for cascading style sheets. CSS is the language that is used to determine how content is displayed.

You can think of HTML as a way to include the content of on a webpage, and CSS as the way to determine how the content is displayed (e.g. which font, what color).

Javascript is a scripting language that allows for the programming of web pages. It is often used to provide interactivity based upon information that is input by the reader of the webpage.

SQL is a database language. SQL queries are used to get data out of a website or database.

In general, instructional designers should know how to read and edit existing HTML and CSS. The ability to program Javascript or SQL is not frequently required.

One good way to learn the basics of HTML and CSS is with the tutorials provided free by W3C Schools.

HTML and CSS Tutorials

There are a lot of tutorials on the W3C Schools website. I’ve listed the ones that I think you need to get started. I find that when I want to know how to do something, I just look it up rather than memorizing the detailed syntax for each command.

HTML

1. https://www.w3schools.com/html/html_intro.asp
2. https://www.w3schools.com/html/html_editors.asp
3. https://www.w3schools.com/html/html_basic.asp
4. https://www.w3schools.com/html/html_elements.asp
5. https://www.w3schools.com/html/html_attributes.asp
6. https://www.w3schools.com/html/html_headings.asp
7. https://www.w3schools.com/html/html_paragraphs.asp
8. https://www.w3schools.com/html/html_styles.asp
9. https://www.w3schools.com/html/html_links.asp
10. https://www.w3schools.com/html/html_lists.asp

CSS

1. https://www.w3schools.com/html/html_css.asp
2. https://www.w3schools.com/css/css_intro.asp
3. https://www.w3schools.com/css/css_syntax.asp
4. https://www.w3schools.com/css/css_selectors.asp
5. https://www.w3schools.com/css/css_howto.asp
6. https://www.w3schools.com/css/css_colors.asp
7. https://www.w3schools.com/css/css_text.asp

Tools for creating hypertext

Since hypertext, HTML, and CSS are just text, you could use a plain text editor to create web pages; however, this is not efficient and often tedious. There are a plethora of free HTML and CSS editors to help you. Two of the most useful features are a WYSIWYG (What-you-see-is-what-you-get) editor that generates the HTML and CSS based upon the content you put in the editor, and a preview window that shows you what your final web page will look like.

Microsoft Word allows you to save your content in HTML, why not use it? Because Microsoft Word is notorious for creating poorly written HTML and is overly complex and difficult to edit.

Adobe Dreamweaver is the most common tool used by professional developers. However, there are several open source HTML alternatives that you can use for your eLearning projects. These editors will likely have many more features than you need. These products are known as IDEs – that is “integrated development environments” as they provide the ability to fully develop your site as well as test it and upload the files to your web host.