Introduction to HTML

Content Blocks
Photo of person using a laptop to write CSS code.

Photo of person using a laptop to write CSS code. Photo credit: Lukas from https://www.pexels.com/@goumbik

Introduction

HTML is the standard markup language for creating Web pages.

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content

HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Sir Tim Berners Lee arriving at the Guildhall to receive the Honorary Freedom of the City of London.

Sir Tim Berners Lee arriving at the Guildhall to receive the Honorary Freedom of the City of London. Photo credit: Paul Clark https://www.wikidata.org/wiki/Q20202034

Tim Berners-Lee

In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990. The first publicly available description of HTML was a document called "HTML Tags", first mentioned on the Internet by Tim Berners-Lee in late 1991. It describes 18 elements comprising the initial, relatively simple design of HTML. Except for the hyperlink tag, these were strongly influenced by SGMLguid, an in-house Standard Generalized Markup Language (SGML)-based documentation format at CERN. Eleven of these elements still exist in HTML 4.

Source: https://en.wikipedia.org/wiki/HTML

A Simple HTML Document 




Page Title



My First Heading

My first paragraph.

Example Explained

  • The declaration defines that this document is an HTML5 document
  • The element is the root element of an HTML page
  • The element contains meta information about the HTML page
  • The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)</li> <li>The <body> element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.</li> <li>The <h1> element defines a large heading</li> <li>The <p> element defines a paragraph</li> </ul> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--253.html.twig * ds-1col--paragraph-basic-text-block-default.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>What is an HTML Element?</h2> <p>An HTML element is defined by a start tag, some content, and an end tag:</p> <pre> <code class="language-twig"><tagname>Content goes here...</tagname></code></pre><p>The HTML element is everything from the start tag to the end tag:</p> <pre> <code class="language-twig"><h1>My First Heading</h1> <p>My first paragraph.</p></code></pre><table> <tbody> <tr> <td> <p><strong>Start tag</strong></p> </td> <td> <p><strong>Element content</strong></p> </td> <td> <p><strong>End tag</strong></p> </td> </tr> <tr> <td> <p><strong><h1></strong></p> </td> <td> <p>My First Heading</p> </td> <td> <p></h1></p> </td> </tr> <tr> <td> <p><strong><p></strong></p> </td> <td> <p>My first paragraph.</p> </td> <td> <p></p></p> </td> </tr> <tr> <td> <p><strong><br></strong></p> </td> <td> <p>none</p> </td> <td> <p>none</p> </td> </tr> </tbody> </table> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--255.html.twig * ds-1col--paragraph-basic-text-block-default.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-narrow" data-bgcolor="#FFDC00"><div class="tex2jax_process"><p><strong>Note: </strong>Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!</p> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--256.html.twig * ds-1col--paragraph-basic-text-block-default.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>Web Browsers</h2> <p>The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.</p> <p>A browser does not display the HTML tags, but uses them to determine how to display the document:</p> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--257.html.twig * ds-1col--paragraph-image-with-caption-default.html.twig * ds-1col--paragraph-image-with-caption.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-image-with-caption paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--paragraph--image-with-caption--group-p-imagecaption.html.twig * field-group-html-element--paragraph--image-with-caption--div.html.twig * field-group-html-element--paragraph--group-p-imagecaption.html.twig * field-group-html-element--paragraph--image-with-caption.html.twig * field-group-html-element--paragraph--div.html.twig * field-group-html-element--group-p-imagecaption.html.twig * field-group-html-element--image-with-caption.html.twig * field-group-html-element--paragraph.html.twig * field-group-html-element--div.html.twig x field-group-html-element.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/field_group/templates/field-group-html-element.html.twig' --> <div class="p-imagecaption width-default"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--paragraph--field-image--image-with-caption.html.twig * field--expert--paragraph--image-with-caption.html.twig * field--expert--paragraph--field-image.html.twig * field--expert--field-image--image-with-caption.html.twig * field--expert--image-with-caption.html.twig * field--expert--field-image.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--paragraph--field-image--image-with-caption.html.twig * field--paragraph--field-image.html.twig * field--paragraph--image-with-caption.html.twig * field--field-image.html.twig * field--image.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <figure width="default"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'colorbox_formatter' --> <!-- BEGIN OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> <a href="https://learnful.ca/sites/default/files/up/para/field-image/2020-06/78/webbrowser_0.png" title="Screenshot of a web browser displaying a basic html webpage." data-colorbox-gallery="" class="colorbox" data-cbox-img-attrs="{"alt":"Screenshot of a web browser displaying a basic html webpage."}"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image_style' --> <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <img src="/sites/default/files/styles/xxl/public/up/para/field-image/2020-06/78/webbrowser_0.png?itok=6V_HbRji" width="1400" height="796" alt="Screenshot of a web browser displaying a basic html webpage." typeof="foaf:Image" class="img-responsive" /> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <!-- END OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> </a> <!-- END OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> </figure> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--paragraph--field-image-caption--image-with-caption.html.twig * field--expert--paragraph--image-with-caption.html.twig * field--expert--paragraph--field-image-caption.html.twig * field--expert--field-image-caption--image-with-caption.html.twig * field--expert--image-with-caption.html.twig * field--expert--field-image-caption.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--paragraph--field-image-caption--image-with-caption.html.twig * field--paragraph--field-image-caption.html.twig * field--paragraph--image-with-caption.html.twig * field--field-image-caption.html.twig * field--text.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <figcaption width="default"> <div class="tex2jax_process"><p>Screenshot of a web browser displaying a basic html webpage.</p> </div> </figcaption> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/field_group/templates/field-group-html-element.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--258.html.twig * ds-1col--paragraph-basic-text-block-default.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>HTML Page Structure</h2> <p>Below is a visualization of an HTML page structure:</p> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--259.html.twig * ds-1col--paragraph-image-with-caption-default.html.twig * ds-1col--paragraph-image-with-caption.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-image-with-caption paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--paragraph--image-with-caption--group-p-imagecaption.html.twig * field-group-html-element--paragraph--image-with-caption--div.html.twig * field-group-html-element--paragraph--group-p-imagecaption.html.twig * field-group-html-element--paragraph--image-with-caption.html.twig * field-group-html-element--paragraph--div.html.twig * field-group-html-element--group-p-imagecaption.html.twig * field-group-html-element--image-with-caption.html.twig * field-group-html-element--paragraph.html.twig * field-group-html-element--div.html.twig x field-group-html-element.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/field_group/templates/field-group-html-element.html.twig' --> <div class="p-imagecaption width-default"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--paragraph--field-image--image-with-caption.html.twig * field--expert--paragraph--image-with-caption.html.twig * field--expert--paragraph--field-image.html.twig * field--expert--field-image--image-with-caption.html.twig * field--expert--image-with-caption.html.twig * field--expert--field-image.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--paragraph--field-image--image-with-caption.html.twig * field--paragraph--field-image.html.twig * field--paragraph--image-with-caption.html.twig * field--field-image.html.twig * field--image.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <figure width="default"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'colorbox_formatter' --> <!-- BEGIN OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> <a href="https://learnful.ca/sites/default/files/up/para/field-image/2020-06/78/htmllayout_0.png" title="" data-colorbox-gallery="" class="colorbox" data-cbox-img-attrs="{"alt":"Illustration of a basic html webpage layout."}"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image_style' --> <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <img src="/sites/default/files/styles/xxl/public/up/para/field-image/2020-06/78/htmllayout_0.png?itok=-qTEe4Ie" width="1400" height="948" alt="Illustration of a basic html webpage layout." typeof="foaf:Image" class="img-responsive" /> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <!-- END OUTPUT from 'core/modules/image/templates/image-style.html.twig' --> </a> <!-- END OUTPUT from 'modules/contrib/colorbox/templates/colorbox-formatter.html.twig' --> </figure> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/field_group/templates/field-group-html-element.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--260.html.twig * ds-1col--paragraph-basic-text-block-default.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>HTML History</h2> <p>Since the early days of the World Wide Web, there have been many versions of HTML:</p> <table> <tbody> <tr> <td> <p><strong>Year</strong></p> </td> <td> <p><strong>Version</strong></p> </td> </tr> <tr> <td> <p>1989</p> </td> <td> <p>Tim Berners-Lee invented www</p> </td> </tr> <tr> <td> <p>1991</p> </td> <td> <p>Tim Berners-Lee invented HTML</p> </td> </tr> <tr> <td> <p>1993</p> </td> <td> <p>Dave Raggett drafted HTML+</p> </td> </tr> <tr> <td> <p>1995</p> </td> <td> <p>HTML Working Group defined HTML 2.0</p> </td> </tr> <tr> <td> <p>1997</p> </td> <td> <p>W3C Recommendation: HTML 3.2</p> </td> </tr> <tr> <td> <p>1999</p> </td> <td> <p>W3C Recommendation: HTML 4.01</p> </td> </tr> <tr> <td> <p>2000</p> </td> <td> <p>W3C Recommendation: XHTML 1.0</p> </td> </tr> <tr> <td> <p>2008</p> </td> <td> <p>WHATWG HTML5 First Public Draft</p> </td> </tr> <tr> <td> <p>2012</p> </td> <td> <p><a href="http://whatwg.org/html/" rel="nofollow">WHATWG HTML5 Living Standard</a></p> </td> </tr> <tr> <td> <p>2014</p> </td> <td> <p><a href="http://www.w3.org/TR/html5/" rel="nofollow">W3C Recommendation: HTML5</a></p> </td> </tr> <tr> <td> <p>2016</p> </td> <td> <p>W3C Candidate Recommendation: HTML 5.1</p> </td> </tr> <tr> <td> <p>2017</p> </td> <td> <p><a href="http://www.w3.org/TR/html51/" rel="nofollow">W3C Recommendation: HTML5.1 2nd Edition</a></p> </td> </tr> <tr> <td> <p>2017</p> </td> <td> <p><a href="http://www.w3.org/TR/html52/" rel="nofollow">W3C Recommendation: HTML5.2</a></p> </td> </tr> </tbody> </table> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--262.html.twig * ds-1col--paragraph-basic-text-block-default.html.twig * ds-1col--paragraph-basic-text-block.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-basic-text-block paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--paragraph--basic-text-block.html.twig * field--default--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--default--basic-text-block.html.twig * field--default--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block--basic-text-block.html.twig * field--paragraph--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--paragraph--basic-text-block.html.twig * field--dynamic-token-field--paragraph-paragraph-text-block.html.twig * field--ds.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-dynamic-token-fieldparagraph-paragraph-text-block field--type-ds field--label-hidden field--item"><div class="p-textblock width-default" data-bgcolor="#FFFFFF"><div class="tex2jax_process"><h2>Quiz time!</h2> </div></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--paragraph--261.html.twig * ds-1col--paragraph-interactive-content-h5p--default.html.twig * ds-1col--paragraph-interactive-content-h5p-.html.twig * ds-1col--paragraph-default.html.twig * ds-1col--paragraph.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div class="paragraph paragraph--type-interactive-content-h5p- paragraph--view-mode-default ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--paragraph--field-interactive-content--interactive-content-h5p-.html.twig * field--default--paragraph--interactive-content-h5p-.html.twig * field--default--paragraph--field-interactive-content.html.twig * field--default--field-interactive-content--interactive-content-h5p-.html.twig * field--default--interactive-content-h5p-.html.twig * field--default--field-interactive-content.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--paragraph--field-interactive-content--interactive-content-h5p-.html.twig * field--paragraph--field-interactive-content.html.twig * field--paragraph--interactive-content-h5p-.html.twig * field--field-interactive-content.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-interactive-content field--type-entity-reference field--label-hidden field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_entity_view' --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'ds_1col' --> <!-- FILE NAME SUGGESTIONS: * ds-1col--node--128.html.twig * ds-1col--node-resource-h5p-teaser.html.twig * ds-1col--node-resource-h5p.html.twig * ds-1col--node-teaser.html.twig * ds-1col--node.html.twig x ds-1col.html.twig x ds-1col.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <div data-history-node-id="128" class="node node--type-resource-h5p node--view-mode-teaser ds-1col clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--default--node--field-h5p-content--resource-h5p.html.twig * field--default--node--resource-h5p.html.twig * field--default--node--field-h5p-content.html.twig * field--default--field-h5p-content--resource-h5p.html.twig * field--default--resource-h5p.html.twig * field--default--field-h5p-content.html.twig * field--default.html.twig * field--theme-ds-field-default.html.twig * field--node--field-h5p-content--resource-h5p.html.twig * field--node--field-h5p-content.html.twig * field--node--resource-h5p.html.twig * field--field-h5p-content.html.twig * field--h5p.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-h5p-content field--type-h5p field--label-hidden field--item"><div class="h5p-iframe-wrapper"><iframe id="h5p-iframe-18" class="h5p-iframe" data-content-id="18" frameborder="0" scrolling="no"></iframe></div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-1col.html.twig' --> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-entity-view.html.twig' --> </div> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-cover-image--resource-tutorial.html.twig * field--node--field-cover-image.html.twig * field--node--resource-tutorial.html.twig * field--field-cover-image.html.twig * field--image.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-cover-image field--type-image field--label-above"> <div class="field--label">Cover Image</div> <div class="field--item"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image_formatter' --> <!-- BEGIN OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'image' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <img src="/sites/default/files/up/tutorial/cover-image/2020-06/coverimage_0.jpg" width="3397" height="2250" alt="" typeof="foaf:Image" class="img-responsive" /> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/image.html.twig' --> <!-- END OUTPUT from 'core/modules/image/templates/image-formatter.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-included-in-feeds--resource-tutorial.html.twig * field--node--field-included-in-feeds.html.twig * field--node--resource-tutorial.html.twig * field--field-included-in-feeds.html.twig * field--boolean.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-included-in-feeds field--type-boolean field--label-above"> <div class="field--label">Share in catalogue</div> <div class="field--item">On</div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-top-bar-region-tutorials--resource-tutorial.html.twig * field--node--field-top-bar-region-tutorials.html.twig * field--node--resource-tutorial.html.twig * field--field-top-bar-region-tutorials.html.twig * field--markup.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-top-bar-region-tutorials field--type-markup field--label-above"> <div class="field--label">Top Bar Region - Tutorials</div> <div class="field--item"><div class="col-md-6 hidden-xs hidden-sm" id="top-bar-left"> <div class="btn-group"> <a class="btn btn-primary btn-sm" href="/forum/3/creating-and-sharing-resources" target="_blank">Documentation</a> <!--<a class="btn btn-primary btn-sm" href="#">Help</a>--> </div> </div> <div class="col-md-6 text-right" id="top-bar-right"></div> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-creative-commons-license--resource-tutorial.html.twig * field--node--field-creative-commons-license.html.twig * field--node--resource-tutorial.html.twig * field--field-creative-commons-license.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-creative-commons-license field--type-entity-reference field--label-above"> <div class="field--label">Creative Commons License</div> <div class="field--item"><a href="/taxonomy/term/54" hreflang="en">CC BY</a></div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-education-level--resource-tutorial.html.twig * field--node--field-education-level.html.twig * field--node--resource-tutorial.html.twig * field--field-education-level.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-education-level field--type-entity-reference field--label-above"> <div class="field--label">Education Level</div> <div class="field--item"><a href="/taxonomy/term/136" hreflang="en">Undergraduate</a></div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-educational-use--resource-tutorial.html.twig * field--node--field-educational-use.html.twig * field--node--resource-tutorial.html.twig * field--field-educational-use.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-educational-use field--type-entity-reference field--label-above"> <div class="field--label">Educational Use</div> <div class="field--item"><a href="/taxonomy/term/109" hreflang="en">Instruction</a></div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-material-type--resource-tutorial.html.twig * field--node--field-material-type.html.twig * field--node--resource-tutorial.html.twig * field--field-material-type.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-material-type field--type-entity-reference field--label-above"> <div class="field--label">Material Type</div> <div class="field--item"><a href="/taxonomy/term/130" hreflang="en">Reading Material</a></div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-subject-area--resource-tutorial.html.twig * field--node--field-subject-area.html.twig * field--node--resource-tutorial.html.twig * field--field-subject-area.html.twig * field--entity-reference.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-subject-area field--type-entity-reference field--label-above"> <div class="field--label">Subject Area</div> <div class="field--item"><a href="/taxonomy/term/143" hreflang="en">Career and Technical Education</a></div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-brief-description--resource-tutorial.html.twig * field--node--field-brief-description.html.twig * field--node--resource-tutorial.html.twig * field--field-brief-description.html.twig * field--string-long.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-brief-description field--type-string-long field--label-above"> <div class="field--label">Brief Description</div> <div class="field--item">A very basic tutorial on HTML to showcase the features of the Content Block editor!</div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--comment--resource-tutorial.html.twig * field--node--comment.html.twig * field--node--resource-tutorial.html.twig x field--comment.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/custom/learnful-theme/templates/field--comment.html.twig' --> <section id="node-resource-tutorial-comment"> <p class="for-guest"><a href="/login">Login</a> or <a href="/signup/beta">register</a> to join the discussion.</p> <div id="comment-list"> <h2>Comments</h2> <p class="text-muted small">Be the first to comment!</p> </div> </section> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/field--comment.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-report-adaption--resource-tutorial.html.twig * field--node--field-report-adaption.html.twig * field--node--resource-tutorial.html.twig x field--field-report-adaption.html.twig * field--comment.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/custom/learnful-theme/templates/field--field-report-adaption.html.twig' --> <section id="node-resource-tutorial-field-report-adaption"> <p class="for-guest"><a href="/login">Login</a> or <a href="/signup/beta">register</a> to share your adaptations.</p> <div id="comment-list"> <h2>List of adaptions</h2> <p class="text-muted small">Be the first to add your adaptation here!</p> </div> </section> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/field--field-report-adaption.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-top-bar-region-lesson-clon--resource-tutorial.html.twig * field--node--field-top-bar-region-lesson-clon.html.twig * field--node--resource-tutorial.html.twig * field--field-top-bar-region-lesson-clon.html.twig * field--markup.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-field-top-bar-region-lesson-clon field--type-markup field--label-above"> <div class="field--label">Top Bar Region - Lesson - Clone</div> <div class="field--item"><div class="col-md-6 hidden-xs hidden-sm" id="top-bar-left"> <div class="btn-group"> </div> </div> <div class="col-md-6 text-right" id="top-bar-right"></div></div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--node--field-feedback-review--resource-tutorial.html.twig * field--node--field-feedback-review.html.twig * field--node--resource-tutorial.html.twig x field--field-feedback-review.html.twig * field--comment.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'themes/custom/learnful-theme/templates/field--field-feedback-review.html.twig' --> <section id="node-resource-tutorial-field-feedback-review"> <p class="for-guest"><a href="/login">Login</a> or <a href="/signup/beta">register</a> to engage in the review and feedback process.</p> <div id="comment-list"> <h2>Reviews and Feedback</h2> <p class="text-muted small">Be the first to review!</p> </div> </section> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/field--field-feedback-review.html.twig' --> </div> </article> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/node/node.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> </div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_mini_pager' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/views/views-mini-pager.html.twig' --> <nav role="navigation" aria-labelledby="pagination-heading"> <h4 class="sr-only">Pagination</h4> <ul class="pager js-pager__items"> <li class="previous"> <a href="/taxonomy/term/136?page=0" title="Go to previous page" rel="prev"> <span class="sr-only">Previous page</span> <span aria-hidden="true">‹‹</span> </a> </li> </ul> </nav> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/views/views-mini-pager.html.twig' --> <div class="feed-icons"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'feed_icon' --> <!-- BEGIN OUTPUT from 'core/modules/system/templates/feed-icon.html.twig' --> <a href="https://learnful.ca/taxonomy/term/136/feed" class="feed-icon"> Subscribe to Undergraduate </a> <!-- END OUTPUT from 'core/modules/system/templates/feed-icon.html.twig' --> </div> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/block/block--system.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> </section> </div> </div> <footer class="footer container-fluid" role="contentinfo"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'region' --> <!-- FILE NAME SUGGESTIONS: * region--footer.html.twig x region.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> <div class="region region-footer"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'block' --> <!-- FILE NAME SUGGESTIONS: * block--sitefooter.html.twig * block--block-content--ea1b6928-392d-440e-8c5d-44558922bddf.html.twig * block--block-content.html.twig x block.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/block/block.html.twig' --> <section id="block-sitefooter" class="block block-block-content block-block-contentea1b6928-392d-440e-8c5d-44558922bddf clearfix"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--block-content--body--basic.html.twig * field--block-content--body.html.twig * field--block-content--basic.html.twig * field--body.html.twig * field--text-with-summary.html.twig x field.html.twig --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> <div class="field field--name-body field--type-text-with-summary field--label-hidden field--item"><div class="row"> <div class="col-sm-12 col-lg-7 footer-left"> <div class="btn-group"> <a class="btn btn-link btn-sm" href="/">Home</a> <a class="btn btn-link btn-sm" href="/help-centre/partnerships">Partnerships</a> <a class="btn btn-link btn-sm" href="/help-centre/terms-of-use">Terms of Use</a> <a class="btn btn-link btn-sm" href="/help-centre/privacy-policy">Privacy Policy</a> <a class="btn btn-link btn-sm" href="/help-centre">Help Center</a> </div> <p class="small text-mid pt-1 ml-1">Learnful Labs</p> <p class="small text-mid ml-1">Learnful is a free, open, and collaborative platform for educators and education professionals to create, share, and discover reusable content and discuss practices and ideas.</p> <p class="small text-mid pt-1 ml-1"><i class="fab fa-canadian-maple-leaf"></i> Proudly built in Waterloo ON Canada</p> </div> <div class="col-sm-12 col-lg-4 col-lg-offset-1 text-right text-mid small footer-right"> <img src="/sites/default/files/up/ftp/copyright_footer.jpg" alt="Creative Commons License icons" style="max-width: 75px"> <p class="pt-2">Except where otherwise noted, content on this site is licensed under a <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" rel="nofollow">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.</p> <p class="pt-2">H5P is a registered <a href="https://h5p.org/trademark" target="_blank" rel="nofollow">trademark</a> of <a href="https://joubel.com/" target="_blank" rel="nofollow">Joubel</a>.</p> </div> </div></div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/field/field.html.twig' --> </section> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/block/block.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> </footer> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/page.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/system/templates/off-canvas-page-wrapper.html.twig' --> <div id="full-page-overlay"></div> <script type="application/json" data-drupal-selector="drupal-settings-json">{"path":{"baseUrl":"\/","scriptPath":null,"pathPrefix":"","currentPath":"taxonomy\/term\/136","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en","currentQuery":{"page":"1"}},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"ajaxPageState":{"libraries":"ajax_comments\/commands,bootstrap\/popover,codesnippet\/codesnippet.highlightjs,codesnippet\/codesnippet.style.github,colorbox\/colorbox,colorbox\/stockholmsyndrome,core\/html5shiv,google_analytics\/google_analytics,h5p\/h5p.content,hypothesis\/hypothesis.page,hypothesis\/hypothesis.showdefault,learnful_theme\/global-styling,mathjax\/setup,paragraphs\/drupal.paragraphs.unpublished,poll\/drupal.poll-links,quiz\/styles,system\/base,views\/views.module","theme":"learnful_theme","theme_token":null},"ajaxTrustedUrl":[],"google_analytics":{"account":"UA-157130702-1","trackOutbound":true,"trackMailto":true,"trackDownload":true,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackColorbox":true,"trackDomainMode":1,"trackUrlFragments":true},"hypothesis":{"showHighlights":0,"openSidebar":0},"mathjax":{"config_type":1,"config":{"tex2jax":{"inlineMath":[["$$","$$"],["\\(","\\)"]],"processEscapes":"true"},"showProcessingMessages":"false","messageStyle":"none"}},"bootstrap":{"forms_has_error_value_toggle":1,"modal_animation":1,"modal_backdrop":"true","modal_focus_input":1,"modal_keyboard":1,"modal_select_text":1,"modal_show":1,"modal_size":"","popover_enabled":1,"popover_animation":1,"popover_auto_close":1,"popover_container":"body","popover_content":"","popover_delay":"0","popover_html":0,"popover_placement":"right","popover_selector":"","popover_title":"","popover_trigger":"click"},"h5p":{"H5PIntegration":{"baseUrl":"\/","url":"\/sites\/default\/files\/h5p","postUserStatistics":false,"ajax":{"setFinished":"\/h5p-ajax\/set-finished.json?token=931c5d1e6f371","contentUserData":"\/h5p-ajax\/content-user-data\/:contentId\/:dataType\/:subContentId?token=09c8765bc86f1"},"saveFreq":false,"l10n":{"H5P":{"fullscreen":"Fullscreen","disableFullscreen":"Disable fullscreen","download":"Download","copyrights":"Rights of use","embed":"Embed","size":"Size","showAdvanced":"Show advanced","hideAdvanced":"Hide advanced","advancedHelp":"Include this script on your website if you want dynamic sizing of the embedded content:","copyrightInformation":"Rights of use","close":"Close","title":"Title","author":"Author","year":"Year","source":"Source","license":"License","thumbnail":"Thumbnail","noCopyrights":"No copyright information available for this content.","reuse":"Reuse","reuseContent":"Reuse Content","reuseDescription":"Reuse this content.","downloadDescription":"Download this content as a H5P file.","copyrightsDescription":"View copyright information for this content.","embedDescription":"View the embed code for this content.","h5pDescription":"Visit H5P.org to check out more cool content.","contentChanged":"This content has changed since you last used it.","startingOver":"You\u0027ll be starting over.","by":"by","showMore":"Show more","showLess":"Show less","subLevel":"Sublevel","confirmDialogHeader":"Confirm action","confirmDialogBody":"Please confirm that you wish to proceed. This action is not reversible.","cancelLabel":"Cancel","confirmLabel":"Confirm","licenseU":"Undisclosed","licenseCCBY":"Attribution","licenseCCBYSA":"Attribution-ShareAlike","licenseCCBYND":"Attribution-NoDerivs","licenseCCBYNC":"Attribution-NonCommercial","licenseCCBYNCSA":"Attribution-NonCommercial-ShareAlike","licenseCCBYNCND":"Attribution-NonCommercial-NoDerivs","licenseCC40":"4.0 International","licenseCC30":"3.0 Unported","licenseCC25":"2.5 Generic","licenseCC20":"2.0 Generic","licenseCC10":"1.0 Generic","licenseGPL":"General Public License","licenseV3":"Version 3","licenseV2":"Version 2","licenseV1":"Version 1","licensePD":"Public Domain","licenseCC010":"CC0 1.0 Universal (CC0 1.0) Public Domain Dedication","licensePDM":"Public Domain Mark","licenseC":"Copyright","contentType":"Content Type","licenseExtras":"License Extras","changes":"Changelog","contentCopied":"Content is copied to the clipboard","connectionLost":"Connection lost. Results will be stored and sent when you regain connection.","connectionReestablished":"Connection reestablished.","resubmitScores":"Attempting to submit stored results.","offlineDialogHeader":"Your connection to the server was lost","offlineDialogBody":"We were unable to send information about your completion of this task. Please check your internet connection.","offlineDialogRetryMessage":"Retrying in :num....","offlineDialogRetryButtonLabel":"Retry now","offlineSuccessfulSubmit":"Successfully submitted results."}},"hubIsEnabled":1,"reportingIsEnabled":false,"libraryConfig":null,"pluginCacheBuster":"?rhtscj","libraryUrl":"\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js","siteUrl":"https:\/\/learnful.ca\/","contents":{"cid-18":{"library":"H5P.QuestionSet 1.20","jsonContent":"{\u0022introPage\u0022:{\u0022showIntroPage\u0022:false,\u0022startButtonText\u0022:\u0022Start Quiz\u0022,\u0022title\u0022:\u0022Intro to HTML Quiz\u0022,\u0022introduction\u0022:\u0022\u003Cp\u003ETest your comprehension of the basics of HTML as introduced in this tutorial.\u003C\\\/p\u003E\\n\u0022},\u0022progressType\u0022:\u0022dots\u0022,\u0022passPercentage\u0022:50,\u0022questions\u0022:[{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022answers\u0022:[{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003E\\u200b\\u200b\\u200b\\u200b\\u200bHigh Tech Markup Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003EHighly Technical Machine Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:true,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003EHyper Text Markup Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E\\n\u003Cdiv\u003EHyperlinks and Text Markup Language\u003C\\\/div\u003E\\n\u003C\\\/div\u003E\\n\u0022}],\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022type\u0022:\u0022auto\u0022,\u0022singlePoint\u0022:false,\u0022randomAnswers\u0022:true,\u0022showSolutionsRequiresInput\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false,\u0022passPercentage\u0022:100,\u0022showScorePoints\u0022:true},\u0022UI\u0022:{\u0022checkAnswerButton\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgainButton\u0022:\u0022Retry\u0022,\u0022tipsLabel\u0022:\u0022Show tip\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022,\u0022tipAvailable\u0022:\u0022Tip available\u0022,\u0022feedbackAvailable\u0022:\u0022Feedback available\u0022,\u0022readFeedback\u0022:\u0022Read feedback\u0022,\u0022wrongAnswer\u0022:\u0022Wrong answer\u0022,\u0022correctAnswer\u0022:\u0022Correct answer\u0022,\u0022shouldCheck\u0022:\u0022Should have been checked\u0022,\u0022shouldNotCheck\u0022:\u0022Should not have been checked\u0022,\u0022noInput\u0022:\u0022Please answer before viewing the solution\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003EHTML stands for:\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.MultiChoice 1.16\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022Multiple Choice\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022HTML stands for\u0022},\u0022subContentId\u0022:\u002277f7530c-3024-4500-9d1d-003546b8367f\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022answers\u0022:[{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003EDefines the document\u0027s body, and is a container for all the visible contents\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003EDefines that this document is an HTML document\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:true,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003EContains meta information about the HTML page\u003C\\\/div\u003E\\n\u0022}],\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022type\u0022:\u0022auto\u0022,\u0022singlePoint\u0022:false,\u0022randomAnswers\u0022:true,\u0022showSolutionsRequiresInput\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false,\u0022passPercentage\u0022:100,\u0022showScorePoints\u0022:true},\u0022UI\u0022:{\u0022checkAnswerButton\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgainButton\u0022:\u0022Retry\u0022,\u0022tipsLabel\u0022:\u0022Show tip\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022,\u0022tipAvailable\u0022:\u0022Tip available\u0022,\u0022feedbackAvailable\u0022:\u0022Feedback available\u0022,\u0022readFeedback\u0022:\u0022Read feedback\u0022,\u0022wrongAnswer\u0022:\u0022Wrong answer\u0022,\u0022correctAnswer\u0022:\u0022Correct answer\u0022,\u0022shouldCheck\u0022:\u0022Should have been checked\u0022,\u0022shouldNotCheck\u0022:\u0022Should not have been checked\u0022,\u0022noInput\u0022:\u0022Please answer before viewing the solution\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003EWhat is the purpose of the \u003Cem\u003E\u003Cstrong\u003E\u0026lt;head\u0026gt;\u003C\\\/strong\u003E\u003C\\\/em\u003E html element?\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.MultiChoice 1.16\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022Multiple Choice\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022What is the purpose of the \u0026lt;head\u0026gt; html element?\u0022},\u0022subContentId\u0022:\u00223c8a8b34-7299-4a18-ba45-b9e7ab28c225\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022correct\u0022:\u0022true\u0022,\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false},\u0022l10n\u0022:{\u0022trueText\u0022:\u0022True\u0022,\u0022falseText\u0022:\u0022False\u0022,\u0022score\u0022:\u0022You got @score of @total points\u0022,\u0022checkAnswer\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgain\u0022:\u0022Retry\u0022,\u0022wrongAnswerMessage\u0022:\u0022Wrong answer\u0022,\u0022correctAnswerMessage\u0022:\u0022Correct answer\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003ESome HTML elements have no content and therefore do not an end tag\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.TrueFalse 1.8\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022True\\\/False Question\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022Some HTML elements have no content and therefore do not an end tag\u0022},\u0022subContentId\u0022:\u00228ae89f7a-7255-40ce-8aa9-d25d297daa38\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022correct\u0022:\u0022true\u0022,\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false},\u0022l10n\u0022:{\u0022trueText\u0022:\u0022True\u0022,\u0022falseText\u0022:\u0022False\u0022,\u0022score\u0022:\u0022You got @score of @total points\u0022,\u0022checkAnswer\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgain\u0022:\u0022Retry\u0022,\u0022wrongAnswerMessage\u0022:\u0022Wrong answer\u0022,\u0022correctAnswerMessage\u0022:\u0022Correct answer\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003EThe purpose of a web browser is to read HTML documents and display them correctly\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.TrueFalse 1.8\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022True\\\/False Question\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022The purpose of a web browser is to read HTML documents and display them correctly\u0022},\u0022subContentId\u0022:\u0022190118cd-cd89-4000-9116-52b9ff00530b\u0022},{\u0022params\u0022:{\u0022media\u0022:{\u0022disableImageZooming\u0022:false},\u0022answers\u0022:[{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E1989\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:true,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E1991\u003C\\\/div\u003E\\n\u0022},{\u0022correct\u0022:false,\u0022tipsAndFeedback\u0022:{\u0022tip\u0022:\u0022\u0022,\u0022chosenFeedback\u0022:\u0022\u0022,\u0022notChosenFeedback\u0022:\u0022\u0022},\u0022text\u0022:\u0022\u003Cdiv\u003E1993\u003C\\\/div\u003E\\n\u0022}],\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022behaviour\u0022:{\u0022enableRetry\u0022:true,\u0022enableSolutionsButton\u0022:true,\u0022enableCheckButton\u0022:true,\u0022type\u0022:\u0022auto\u0022,\u0022singlePoint\u0022:false,\u0022randomAnswers\u0022:true,\u0022showSolutionsRequiresInput\u0022:true,\u0022confirmCheckDialog\u0022:false,\u0022confirmRetryDialog\u0022:false,\u0022autoCheck\u0022:false,\u0022passPercentage\u0022:100,\u0022showScorePoints\u0022:true},\u0022UI\u0022:{\u0022checkAnswerButton\u0022:\u0022Check\u0022,\u0022showSolutionButton\u0022:\u0022Show solution\u0022,\u0022tryAgainButton\u0022:\u0022Retry\u0022,\u0022tipsLabel\u0022:\u0022Show tip\u0022,\u0022scoreBarLabel\u0022:\u0022You got :num out of :total points\u0022,\u0022tipAvailable\u0022:\u0022Tip available\u0022,\u0022feedbackAvailable\u0022:\u0022Feedback available\u0022,\u0022readFeedback\u0022:\u0022Read feedback\u0022,\u0022wrongAnswer\u0022:\u0022Wrong answer\u0022,\u0022correctAnswer\u0022:\u0022Correct answer\u0022,\u0022shouldCheck\u0022:\u0022Should have been checked\u0022,\u0022shouldNotCheck\u0022:\u0022Should not have been checked\u0022,\u0022noInput\u0022:\u0022Please answer before viewing the solution\u0022},\u0022confirmCheck\u0022:{\u0022header\u0022:\u0022Finish ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to finish ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Finish\u0022},\u0022confirmRetry\u0022:{\u0022header\u0022:\u0022Retry ?\u0022,\u0022body\u0022:\u0022Are you sure you wish to retry ?\u0022,\u0022cancelLabel\u0022:\u0022Cancel\u0022,\u0022confirmLabel\u0022:\u0022Confirm\u0022},\u0022question\u0022:\u0022\u003Cp\u003ETim Berners-Lee invented HTML in which year?\u003C\\\/p\u003E\\n\u0022},\u0022library\u0022:\u0022H5P.MultiChoice 1.16\u0022,\u0022metadata\u0022:{\u0022contentType\u0022:\u0022Multiple Choice\u0022,\u0022license\u0022:\u0022U\u0022,\u0022title\u0022:\u0022Tim Berners-Lee invented HTML in which year?\u0022},\u0022subContentId\u0022:\u0022635c1122-3553-4a56-9beb-b78afea3cd65\u0022}],\u0022disableBackwardsNavigation\u0022:false,\u0022randomQuestions\u0022:false,\u0022endGame\u0022:{\u0022showResultPage\u0022:true,\u0022showSolutionButton\u0022:true,\u0022showRetryButton\u0022:true,\u0022noResultMessage\u0022:\u0022Finished\u0022,\u0022message\u0022:\u0022Your result:\u0022,\u0022overallFeedback\u0022:[{\u0022from\u0022:0,\u0022to\u0022:100}],\u0022solutionButtonText\u0022:\u0022Show solution\u0022,\u0022retryButtonText\u0022:\u0022Retry\u0022,\u0022finishButtonText\u0022:\u0022Finish\u0022,\u0022showAnimations\u0022:false,\u0022skippable\u0022:false,\u0022skipButtonText\u0022:\u0022Skip video\u0022},\u0022override\u0022:{\u0022checkButton\u0022:true},\u0022texts\u0022:{\u0022prevButton\u0022:\u0022Previous question\u0022,\u0022nextButton\u0022:\u0022Next question\u0022,\u0022finishButton\u0022:\u0022Finish\u0022,\u0022textualProgress\u0022:\u0022Question: @current of @total questions\u0022,\u0022jumpToQuestion\u0022:\u0022Question %d of %total\u0022,\u0022questionLabel\u0022:\u0022Question\u0022,\u0022readSpeakerProgress\u0022:\u0022Question @current of @total\u0022,\u0022unansweredText\u0022:\u0022Unanswered\u0022,\u0022answeredText\u0022:\u0022Answered\u0022,\u0022currentQuestionText\u0022:\u0022Current question\u0022}}","fullScreen":"0","exportUrl":"https:\/\/learnful.ca\/sites\/default\/files\/h5p\/exports\/interactive-content-18.h5p","embedCode":"\u003Ciframe src=\u0022https:\/\/learnful.ca\/h5p\/18\/embed\u0022 width=\u0022:w\u0022 height=\u0022:h\u0022 frameborder=\u00220\u0022 allowfullscreen=\u0022allowfullscreen\u0022\u003E\u003C\/iframe\u003E","resizeCode":"\u003Cscript src=\u0022https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-resizer.js\u0022 charset=\u0022UTF-8\u0022\u003E\u003C\/script\u003E","url":"https:\/\/learnful.ca\/h5p\/18\/embed","metadata":{"title":"Introduction to HTML Basic Quiz","authors":[{"name":"Learnful","role":"Author"}],"license":"CC BY","licenseVersion":"4.0"},"contentUserData":[{"state":"{}"}],"displayOptions":{"frame":true,"export":true,"embed":true,"copyright":true,"icon":true,"copy":false},"scripts":["https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/EmbeddedJS-1.0\/js\/ejs_production.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/EmbeddedJS-1.0\/js\/ejs_viewhelpers.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/Tether-1.0\/scripts\/tether.min.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/Drop-1.0\/js\/drop.min.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Transition-1.0\/transition.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-help-dialog.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-message-dialog.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-progress-circle.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-simple-rounded-button.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-speech-bubble.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-throbber.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-tip.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-slider.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-score-bar.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-progressbar.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/js\/joubel-ui.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/scripts\/question.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/scripts\/explainer.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/scripts\/score-points.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.MultiChoice-1.16\/js\/multichoice.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/scripts\/h5p-true-false.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/scripts\/h5p-true-false-answer-group.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/scripts\/h5p-true-false-answer.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/vimeo.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/youtube.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/panopto.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/html5.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/scripts\/video.js","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.QuestionSet-1.20\/js\/questionset.js"],"styles":["https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/FontAwesome-4.5\/h5p-font-awesome.min.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/Tether-1.0\/styles\/tether.min.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/Drop-1.0\/css\/drop-theme-arrows-bounce.min.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.FontIcons-1.0\/styles\/h5p-font-icons.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-help-dialog.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-message-dialog.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-progress-circle.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-simple-rounded-button.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-speech-bubble.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-tip.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-slider.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-score-bar.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-progressbar.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-ui.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.JoubelUI-1.3\/css\/joubel-icon.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/styles\/question.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Question-1.5\/styles\/explainer.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.MultiChoice-1.16\/css\/multichoice.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.TrueFalse-1.8\/styles\/h5p-true-false.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.Video-1.6\/styles\/video.css","https:\/\/learnful.ca\/sites\/default\/files\/h5p\/libraries\/H5P.QuestionSet-1.20\/css\/questionset.css","https:\/\/learnful.ca\/modules\/custom\/h5p_css_overrides\/h5p-global-overrides.css"]}},"core":{"scripts":["https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/jquery.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-event-dispatcher.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-x-api-event.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-x-api.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-content-type.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-confirmation-dialog.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-action-bar.js","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/request-queue.js"],"styles":["https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/styles\/h5p.css","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/styles\/h5p-confirmation-dialog.css","https:\/\/learnful.ca\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/styles\/h5p-core-button.css"]}}},"field_group":{"html_element":{"mode":"default","context":"view","settings":{"id":"","classes":"p-imagecaption width-default","element":"div","show_label":false,"label_element":"h3","label_element_classes":"","attributes":"","effect":"none","speed":"fast"}}},"colorbox":{"opacity":"0.85","current":"{current} of {total}","previous":"\u00ab Prev","next":"Next \u00bb","close":"Close","maxWidth":"98%","maxHeight":"98%","fixed":true,"mobiledetect":false,"mobiledevicewidth":"480px"},"user":{"uid":0,"permissionsHash":"cabcb0237ef9d4df41cff38a33db9a4fb6212384441da3b3ed0d960f7518748f"}}</script> <script src="/core/assets/vendor/jquery/jquery.min.js?v=3.5.1"></script> <script src="/core/assets/vendor/underscore/underscore-min.js?v=1.13.1"></script> <script src="/core/assets/vendor/jquery-once/jquery.once.min.js?v=2.2.3"></script> <script src="/core/misc/drupalSettingsLoader.js?v=8.9.16"></script> <script src="/core/misc/drupal.js?v=8.9.16"></script> <script src="/core/misc/drupal.init.js?v=8.9.16"></script> <script src="/modules/contrib/google_analytics/js/google_analytics.js?v=8.9.16"></script> <script src="/modules/contrib/hypothesis/js/showdefaults.js?v=8.9.16"></script> <script src="https://hypothes.is/embed.js"></script> <script src="/modules/contrib/mathjax/js/config.js?v=8.9.16"></script> <script src="/index.php/libraries/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> <script src="/modules/contrib/mathjax/js/setup.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/drupal.bootstrap.js?rhtscj"></script> <script src="/themes/contrib/bootstrap/js/attributes.js?rhtscj"></script> <script src="/themes/contrib/bootstrap/js/theme.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/bootstrap.min.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/learnful-theme.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/readmore.min.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/h5p-resizer.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/jquery.matchHeight-min.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/widgets.js?rhtscj"></script> <script src="/themes/custom/learnful-theme/js/bootstrap-toc/bootstrap-toc.min.js?rhtscj"></script> <script src="//teams.microsoft.com/share/launcher.js" async></script> <script src="/themes/custom/learnful-theme/js/dknotus-tour.min.js?rhtscj"></script> <script src="/themes/contrib/bootstrap/js/popover.js?rhtscj"></script> <script src="/core/assets/vendor/jquery-form/jquery.form.min.js?v=4.22"></script> <script src="/core/misc/progress.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/progress.js?rhtscj"></script> <script src="/core/misc/ajax.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/ajax.js?rhtscj"></script> <script src="/core/misc/debounce.js?v=8.9.16"></script> <script src="/core/misc/form.js?v=8.9.16"></script> <script src="/themes/contrib/bootstrap/js/misc/form.js?rhtscj"></script> <script src="/modules/contrib/ajax_comments/ajax_comments.js?v=8.9.16"></script> <script src="/modules/contrib/h5p/js/h5p-integration.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/jquery.js?v=1.9.1"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-event-dispatcher.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-x-api-event.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-x-api.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-content-type.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-confirmation-dialog.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/h5p-action-bar.js?v=1.0"></script> <script src="/modules/contrib/h5p/vendor/h5p/h5p-core/js/request-queue.js?v=1.0"></script> <script src="/libraries/colorbox/jquery.colorbox-min.js?v=8.9.16"></script> <script src="/modules/contrib/colorbox/js/colorbox.js?v=8.9.16"></script> <script src="/modules/contrib/colorbox/styles/stockholmsyndrome/colorbox_style.js?v=8.9.16"></script> <script src="/libraries/codesnippet/lib/highlight/highlight.pack.js?v=8.9.16"></script> <script src="/modules/contrib/codesnippet/js/codesnippet.js?v=8.9.16"></script> </body> </html> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/html.html.twig' -->