HTML Primer
Overview
Design Tools is useful for helping you to improve the accessibility of your course content. While it is not necessary to know how to code, a basic understanding of HTML can be very helpful when using Design Tools and improving the accessibility of your course content. Be sure to review the following pages about accessibility.
Below are some guides and resources that you may find helpful for gaining a better understanding of HTML and how Design Tools allows you to target HTML elements.
What is HTML?
HTML is the acronym stands for HyperText Markup Language Links to an external site. and is the code for structuring web pages. The markup for HTML helps you to structure content in paragraphs, lists, and headings. Each of these items and the markup associated with each item is considered an HTML element. The HTML elements can have formatting applied using CSS which stands for Cascading Style Sheets Links to an external site.. Interactive elements can be added to web pages using scripting language called JavaScript Links to an external site.. These three components make up every web page you visit in a web browser. While it is not necessary to know HTML to use Canvas or Design Tools, it can be very helpful to have some knowledge of how it works. Below are tutorials and references to help you understand how these three components work together to form a web page.
- Mozilla Web Technology Reference Links to an external site. - Reference guides for HTML elements and CSS attributes
- Mozilla HTML basics Links to an external site. - A very basic tutorial on using HTML
- HTML Dog Tutorials Links to an external site.- These tutorials are very basic and will help you to understand the primary elements of HTML
- HTML Dog References Links to an external site. - This reference lists all the elements of HTML, CSS, and JavaScript.
HTML and Canvas
Canvas is web application program that can be accessed in web browser like Google Chrome or Mozilla Firefox. In Canvas courses content can be edited with a rich content editor. This allows you to modify parts of a web page. By default, the rich content editor will hide the HTML code you are writing as you edit the page in the editor. You can switch to the HTML view in the editor to write the code yourself. It is important to note that only some HTML elements are allowed in the rich content editor. If you add an HTML element that is not allowed, Canvas will strip the code from the page when you save your work. It is also important to note that the current rich content editor will soon be replaced new rich content editor. Design Tools will still work with the new editor. Review the links below for more details on using HTML view in rich content editor.
HTML and Design Tools
When Design Tools was built by the developer, they used Canvas APIs (Application programming interface Links to an external site.) and the CSS that is already attached to the Canvas application to build Design Tools over Canvas. This allow them to take advantage of what was already available in Canvas to create more tools for course development. Review the numbered items below.
2019
- When you use the rich content editor each action in the toolbar will generate code. See Rich Content Editor HTML Cheatsheet Links to an external site..
- You can switch to the HTML Editor to see and edit the code. You can also paste code in the HTML editor. Please note only some HTML elements are allowed. See HTML White list for rich content editor (PDF) Links to an external site.
- Once you start applying Design Tools themes and content blocks to pages you will notice a beginning and end Design Tools wrappers in the rich content editor. This helps you to determine where you are in the code.
- Below the editor window you will also see the HTML elements applied to where the cursor is in the editor. This can help you to target the specific elements when you want to apply styling to content using Design Tools.