Introduction to HTML
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. 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.
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-2c00054c23c9d13ed0fc4f9fa0375e36e26991bafa038188231e4cc9af83ddfc"> <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="/index.php/lesson/130" hreflang="en">Introduction to HTML</a> by <a href="/index.php/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="/index.php/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-71a2b1e0ed61483eb7e0b5ec5208de434e4e3a35be51eade55c975be73220268"> <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="/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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/index.php/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":"\/index.php\/","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":"\/index.php\/h5p-ajax\/set-finished.json?token=8da6aba5c09e7","contentUserData":"\/index.php\/h5p-ajax\/content-user-data\/:contentId\/:dataType\/:subContentId?token=5cf0f9c49231b"},"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":"?smyg82","libraryUrl":"\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js","siteUrl":"https:\/\/learnful.ca\/index.php\/","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\/index.php\/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\/index.php\/modules\/contrib\/h5p\/vendor\/h5p\/h5p-core\/js\/h5p-resizer.js\u0022 charset=\u0022UTF-8\u0022\u003E\u003C\/script\u003E","url":"https:\/\/learnful.ca\/index.php\/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="/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?smyg82"></script> <script src="/themes/contrib/bootstrap/js/attributes.js?smyg82"></script> <script src="/themes/contrib/bootstrap/js/theme.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/bootstrap.min.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/learnful-theme.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/readmore.min.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/h5p-resizer.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/jquery.matchHeight-min.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/widgets.js?smyg82"></script> <script src="/themes/custom/learnful-theme/js/bootstrap-toc/bootstrap-toc.min.js?smyg82"></script> <script src="//teams.microsoft.com/share/launcher.js" async></script> <script src="/themes/custom/learnful-theme/js/dknotus-tour.min.js?smyg82"></script> <script src="/themes/contrib/bootstrap/js/popover.js?smyg82"></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' -->