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.
• Choose a font that is easy to read.  Currently, san serif fonts (like the one used in this book) are regarded as being more legible. 
• Use no more than 1 or 2 font families on a page. 
• 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. HTML Introduction
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

Making it accessible

In general, text is the most accessible format. Why not just use text and no other multimedia? Because you want to engage your learners, and text for the most part isn't that engaging. 

To make text more accessible, use plain language. When your writing includes a lot of complicated vocabulary, your readers will have more trouble following along. They will also need to expend more cognitive energy to digest the informore. Complicated language increases the likihood that your learners will experience cognitive overload. 

To make hypertext more accessible, ensure the title of the link describes where the link goes. Those who cannot see the screen, that is thos using screen readers, are able to navigate through the hyperlinks on the page. If the the hyperlink is https://DID_Multimedia, then that is exactly what will be read out. Also, if it says "click here", then that will be read out. It doesn't tell the reader anything about where the link will go. 

If you are linking to documents, if the document is not something that will open in a web browser, then tell the user what type of document it is. For example, PDF documents will open in the browser so the title of the document is enough information. Microsoft Word documents will not open in the browser, so it is useful to add some indication that when they click their computer will try to download an MSWord document (e.g. Projected Design Template (MS Word)). 

Use headings for your text. When a sighted person accesses the site, they scan before they start reading. Headings within your text allow those using a screenread to scan your site before deciding what to read. 

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.  Here is an example of a HTML code generator.

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.

Google Docs can be used to create and edit content before converting it into HTML.  An example of this is the site that hosts this book.  Book chapters created using Google Docs can be imported directly into EdTechBooks. 

Traditionally, Adobe Dreamweaver had been the most common tool used by professional developers. Today, 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.  A free and open source version of Visual Studio, one of the most popular IDEs for web programmers, is Visual Studio Code.