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' --> <!-- 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' --> <!-- 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' --> <!-- 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' --> <!-- 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' --> <!-- 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' --> <!-- 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' --> <!-- 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' --> <!-- 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' --> <!-- 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 enable-annotation 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> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--node--resource-tutorial--group-metadata.html.twig * field-group-html-element--node--resource-tutorial--div.html.twig * field-group-html-element--node--group-metadata.html.twig * field-group-html-element--node--resource-tutorial.html.twig * field-group-html-element--node--div.html.twig * field-group-html-element--group-metadata.html.twig * field-group-html-element--resource-tutorial.html.twig * field-group-html-element--node.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="field narrow card field-metadata-region row"> <h2 class="launch-region-title">About this Resource</h2> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--node--resource-tutorial--group-meta-col-left.html.twig * field-group-html-element--node--resource-tutorial--div.html.twig * field-group-html-element--node--group-meta-col-left.html.twig * field-group-html-element--node--resource-tutorial.html.twig * field-group-html-element--node--div.html.twig * field-group-html-element--group-meta-col-left.html.twig * field-group-html-element--resource-tutorial.html.twig * field-group-html-element--node.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 id="about" class="col-sm-6"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-block-field--node-node-license-launch--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-block-field--node-node-license-launch.html.twig * field--expert--dynamic-block-field--node-node-license-launch--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-block-field--node-node-license-launch.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-block-field--node-node-license-launch--resource-tutorial.html.twig * field--node--dynamic-block-field--node-node-license-launch.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-block-field--node-node-license-launch.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">License</h3> <!-- THEME DEBUG --> <!-- THEME HOOK: 'container' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> <div class="views-element-container form-group"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> <div class="view view-node-blocks-license view-id-node_blocks_license view-display-id-launch js-view-dom-id-3d17d097117464109f158d42415adb016d5fe3957d7f1eda17c120ce354c3d13"> <div class="view-content"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_unformatted' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> <div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_fields' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_field' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <div class="license-icons"><img src="/themes/custom/learnful-theme/assets/cc-icons/cc.svg"><img src="/themes/custom/learnful-theme/assets/cc-icons/by.svg"></div> <p class="license-statement"><a href="/lesson/130" hreflang="en">Introduction to HTML</a> by <a href="/member/learnful" hreflang="en">Help@Learnful</a> is licensed under a <a href="https://creativecommons.org/licenses/by/4.0">Creative Commons Attribution License</a> (CC BY), except where otherwise noted.</p> <!-- END OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <!-- END OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-unformatted.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' --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--node-changed-date--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--node-changed-date.html.twig * field--expert--node-changed-date--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--node-changed-date.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--node-changed-date--resource-tutorial.html.twig * field--node--node-changed-date.html.twig * field--node--resource-tutorial.html.twig * field--node-changed-date.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">Last modified</h3> <div class="meta-subtitle"> <p > Tuesday, June 23, 2020 - 00:07</p> </div> </div> <!-- 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' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--node--resource-tutorial--group-meta-col-right.html.twig * field-group-html-element--node--resource-tutorial--div.html.twig * field-group-html-element--node--group-meta-col-right.html.twig * field-group-html-element--node--resource-tutorial.html.twig * field-group-html-element--node--div.html.twig * field-group-html-element--group-meta-col-right.html.twig * field-group-html-element--resource-tutorial.html.twig * field-group-html-element--node.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="col-sm-offset-1 col-sm-5"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--node-title--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--node-title.html.twig * field--expert--node-title--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--node-title.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--node-title--resource-tutorial.html.twig * field--node--node-title.html.twig * field--node--resource-tutorial.html.twig * field--node-title.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">Title</h3> <p class="meta-title"> <a href="/lesson/130" hreflang="en">Introduction to HTML</a> </p> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-block-field--node-node-blocks-node-author-launch--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-block-field--node-node-blocks-node-author-launch.html.twig * field--expert--dynamic-block-field--node-node-blocks-node-author-launch--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-block-field--node-node-blocks-node-author-launch.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-block-field--node-node-blocks-node-author-launch--resource-tutorial.html.twig * field--node--dynamic-block-field--node-node-blocks-node-author-launch.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-block-field--node-node-blocks-node-author-launch.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">Author</h3> <!-- THEME DEBUG --> <!-- THEME HOOK: 'container' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/system/container.html.twig' --> <div class="views-element-container form-group"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view' --> <!-- BEGIN OUTPUT from 'themes/contrib/bootstrap/templates/views/views-view.html.twig' --> <div class="view view-node-blocks view-id-node_blocks view-display-id-author_launch js-view-dom-id-1e91f2a1370efa8462b89384e5943ff36b847567e5ce415bc5420e807177e021"> <div class="view-content"> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_unformatted' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-unformatted.html.twig' --> <div> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_fields' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'views_view_field' --> <!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <p class="meta-title"><a href="/member/learnful" hreflang="en">Help@Learnful</a></p> <div class="meta-subtitle"> <p>Support, Learnful</p> <p>Waterloo, ON </p> </div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' --> <!-- END OUTPUT from 'core/modules/views/templates/views-view-fields.html.twig' --> </div> <!-- END OUTPUT from 'core/modules/views/templates/views-view-unformatted.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' --> </div> <!-- 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/field_group/templates/field-group-html-element.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field_group_html_element' --> <!-- FILE NAME SUGGESTIONS: * field-group-html-element--node--resource-tutorial--group-share-region.html.twig * field-group-html-element--node--resource-tutorial--div.html.twig * field-group-html-element--node--group-share-region.html.twig * field-group-html-element--node--resource-tutorial.html.twig * field-group-html-element--node--div.html.twig * field-group-html-element--group-share-region.html.twig * field-group-html-element--resource-tutorial.html.twig * field-group-html-element--node.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 id="share" class="field narrow card field-share-region"> <h2 class="launch-region-title">Share</h2> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-token-field--node-node-launch-share-url-tutorial--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-token-field--node-node-launch-share-url-tutorial.html.twig * field--expert--dynamic-token-field--node-node-launch-share-url-tutorial--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-token-field--node-node-launch-share-url-tutorial.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-token-field--node-node-launch-share-url-tutorial--resource-tutorial.html.twig * field--node--dynamic-token-field--node-node-launch-share-url-tutorial.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-token-field--node-node-launch-share-url-tutorial.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">URL</h3> <div class="share-url"> <textarea id="130">https://learnful.ca/lesson/130/launch</textarea> <button class="copy-share">Copy</button> </div> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-token-field--node-node-lms-share-launch--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-token-field--node-node-lms-share-launch.html.twig * field--expert--dynamic-token-field--node-node-lms-share-launch--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-token-field--node-node-lms-share-launch.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-token-field--node-node-lms-share-launch--resource-tutorial.html.twig * field--node--dynamic-token-field--node-node-lms-share-launch.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-token-field--node-node-lms-share-launch.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">Share in your Class</h3> <a href="#" class="share-lms gclassroom" data-url="https://learnful.ca/lesson/130/launch" data-title="Introduction to HTML" title="Share in your Google Classroom" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_gclassroom_icon.png">Google Classroom</a> <!--<a--> <!-- href="#"--> <!-- class="share-lms msteams teams-share-button"--> <!-- data-href="https://learnful.ca/lesson/130/launch"--> <!-- data-assign-title="Introduction to HTML"--> <!-- data-title="Introduction to HTML"--> <!-- title="Share in Microsoft Teams"--> <!-- data-toggle="tooltip"--> <!-- data-placement="top">--> <!-- <img src="/themes/custom/learnful-theme/assets/icons/lms_msteams_icon.png">Microsoft Teams</a>--> <a href="#" class="share-lms msteams" data-href="https://learnful.ca/lesson/130/launch" data-assign-title="Introduction to HTML" data-title="Introduction to HTML" title="Share in Microsoft Teams" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_msteams_icon.png">Microsoft Teams</a> <a class="share-lms moodle disabled" title="Moodle LMS coming soon!" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_moodle_icon.jpg">Moodle LMS</a> <a href="#" class="share-lms d2l disabled" title="D2L Brightspace coming soon!" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_brightspace_icon.png">D2L Brightspace</a> <!-- <a href="#" class="share-lms gclassroom" data-url="https://learnful.ca/lesson/130/launch" data-title="Introduction to HTML"> <img src="/themes/custom/learnful-theme/assets/icons/lms_gclassroom_icon.png"> Google Classroom </a> <a href="#" class="share-lms msteams teams-share-button" data-href="https://learnful.ca/lesson/130/launch" data-assign-title="Introduction to HTML" data-title="Introduction to HTML"> <img src="/themes/custom/learnful-theme/assets/icons/lms_msteams_icon.png"> MS Teams </a> <a class="share-lms moodle disabled" title="Coming soon!" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_moodle_icon.jpg"> Moodle LMS </a> <a href="#" class="share-lms d2l disabled" title="Coming soon!" data-toggle="tooltip" data-placement="top"> <img src="/themes/custom/learnful-theme/assets/icons/lms_brightspace_icon.png"> D2L Brightspace </a> --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-token-field--node-node-share-launch--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-token-field--node-node-share-launch.html.twig * field--expert--dynamic-token-field--node-node-share-launch--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-token-field--node-node-share-launch.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-token-field--node-node-share-launch--resource-tutorial.html.twig * field--node--dynamic-token-field--node-node-share-launch.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-token-field--node-node-share-launch.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">Share on Social Networks</h3> <a class="share-on-twitter social-share-btn tweet" alt="Share this tutorial on twitter with a tweet!" href="#" data-text="Check out this great tutorial on Learnful" data-url="https://learnful.ca/lesson/130/launch" data-hashtags=",," data-via="learnfulLabs" data-related="LearnfulLabs"> <i class="fab fa-twitter"></i> </a> <a class="share-on-linkedin social-share-btn linkedin" alt="Share this tutorial on LinkedIn!" href="#" data-summary="Check out this great tutorial on Learnful" data-title="Introduction to HTML" data-url="https://learnful.ca/lesson/130/launch" data-source="learnful.ca"> <i class="fab fa-linkedin-in"></i> </a> <a class="share-on-email social-share-btn email" alt="Share this tutorial via email!" href="mailto:?subject=Check out this great tutorial on Learnful&body=Introduction to HTML: https://learnful.ca/lesson/130/launch"> <i class="fas fa-at"></i> </a> <!-- <a target="_blank" class="twitter-share-button" href="https://twitter.com/intent/tweet" data-text="Check out this great tutorial on Learnful" data-url="https://learnful.ca/lesson/130" data-hashtags="" data-via="learnful.ca" data-related="learnful.ca"> Tweet </a> --> </div> <!-- END OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <!-- THEME DEBUG --> <!-- THEME HOOK: 'field' --> <!-- FILE NAME SUGGESTIONS: * field--expert--node--dynamic-token-field--node-node-launch-embed-tutorial--resource-tutorial.html.twig * field--expert--node--resource-tutorial.html.twig * field--expert--node--dynamic-token-field--node-node-launch-embed-tutorial.html.twig * field--expert--dynamic-token-field--node-node-launch-embed-tutorial--resource-tutorial.html.twig * field--expert--resource-tutorial.html.twig * field--expert--dynamic-token-field--node-node-launch-embed-tutorial.html.twig * field--expert.html.twig * field--ds-field-expert.html.twig * field--node--dynamic-token-field--node-node-launch-embed-tutorial--resource-tutorial.html.twig * field--node--dynamic-token-field--node-node-launch-embed-tutorial.html.twig * field--node--resource-tutorial.html.twig * field--dynamic-token-field--node-node-launch-embed-tutorial.html.twig * field--ds.html.twig * field.html.twig --> <!-- BEGIN OUTPUT from 'modules/contrib/ds/templates/ds-field-expert.html.twig' --> <div class="meta-entry"> <h3 class="meta-label field-label-above">Embed</h3> <div class="row"> <div class="col-sm-6"> <div class="embed-resource mb-1"> <textarea><iframe width="100%" max-width="300px" height="430px" frameborder="0" src="https://learnful.ca/embed/resource/130" title="Introduction to HTML on Learnful.ca"></iframe></textarea> <button class="copy-embed">Copy</button> </div> <p class="small text-muted">This embed code will display a stylized 'card' on your site that displays the thumbnail, title, and link to this resource.</p> <p class="small text-muted">A preview of what the styled card looks like is provided: </p> </div> <div class="col-sm-6 text-right"> <div class="embed-preview"> <iframe src="https://learnful.ca/embed/resource/130" width="100%" max-width="300px" height="430px" frameborder="0" title="Preview of iframe embed"></iframe> </div> </div> </div> </div> <!-- 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' --> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/block/block--system.html.twig' --> </div> <!-- END OUTPUT from 'themes/contrib/bootstrap/templates/system/region.html.twig' --> <nav id="toc" data-toggle="toc"></nav> </section> </div> </div> <footer class="footer container-fluid" role="contentinfo"> <div class="row"> <div class="col-sm-4 launch-footer-logo"> <a href="https://learnful.ca" target="_blank"><img src="/themes/custom/learnful-theme/assets/logos/learnful-logo_v3_beta.png" alt="Learnful logo" /></a> </div> <div class="col-sm-4 text-center"> <p><strong>Powered by Learnful</strong></p> </div> <div class="col-sm-4 text-right launch-footer-icons"> <a href="https://twitter.com/LearnfulLabs" target="_blank" alt="Follow @LearnfulLabs on Twitter" class="social-link"><i class="fab fa-twitter-square"></i></a> </div> </div> </footer> <!-- END OUTPUT from 'themes/custom/learnful-theme/templates/page--view-mode-page--launch.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":"view_mode_page\/launch\/node\/130","currentPathIsAdmin":false,"isFront":false,"currentLanguage":"en"},"pluralDelimiter":"\u0003","suppressDeprecationErrors":true,"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"},"field_group":{"html_element":{"mode":"default","context":"view","settings":{"element":"div","show_label":false,"label_element":"h3","label_element_classes":"","attributes":"","effect":"none","speed":"fast","id":"","classes":"p-imagecaption width-default"}}},"h5p":{"H5PIntegration":{"baseUrl":"\/","url":"\/sites\/default\/files\/h5p","postUserStatistics":false,"ajax":{"setFinished":"\/h5p-ajax\/set-finished.json?token=1470e20f973b6","contentUserData":"\/h5p-ajax\/content-user-data\/:contentId\/:dataType\/:subContentId?token=ef0f86b4bd8bb"},"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":"?s4utoe","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 enable-annotation\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\/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\/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"]}}},"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?s4utoe"></script> <script src="/themes/contrib/bootstrap/js/attributes.js?s4utoe"></script> <script src="/themes/contrib/bootstrap/js/theme.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/bootstrap.min.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/learnful-theme.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/readmore.min.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/h5p-resizer.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/jquery.matchHeight-min.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/widgets.js?s4utoe"></script> <script src="/themes/custom/learnful-theme/js/bootstrap-toc/bootstrap-toc.min.js?s4utoe"></script> <script src="//teams.microsoft.com/share/launcher.js" async></script> <script src="/themes/custom/learnful-theme/js/dknotus-tour.min.js?s4utoe"></script> <script src="/themes/contrib/bootstrap/js/popover.js?s4utoe"></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--view-mode-page--launch.html.twig' -->