Module-1

Keith Blackwood

Setting up and enviroment for HTML coding

  • We will be using Github Codespace for our environment.
  • Go to https://github.com/codespaces with your navigator of choice (I will be using Chrome).
  • Select the blank template.
  • Select a theme that works for you (I use dark+).
  • I prefer to display the menu bar.
  • In the language modueles install HTML CSS Support .
  • JavaScript (ES6) code snippets.
  • Prettier.

HTML Emmet boilerplate setup

  • Emmet https://emmet.io/ is a popular and powerful toolkit for webdevelopers.
  • It’s build directly into Codespace and it allows you to rapidly place down commonly used code.
  • In this example we will use Emmet to lay the basics of a html page.
  • Create a new file, name it ‘index.html’.
  • In the file we’ll use Emmet, by adding an exlemation mark ‘!’ then press tab.

HTML boilerplate

  • This will produce text as the image below, this is known as a HTML boilerplate.
  • This contains all the standard HTML5 setup without us needing to fill it in.
  • Every HTML5 page has the same base layout; DOCTYPE and a html element.
  • In the html element there is a head and a body.
  • Information in the head is read by the browser.
  • Information in the body is presented on the page.

HTML boilerplate #2

  • in the section there is an element called , in it put ‘LDD HTML test’.</li> <li>Words in the <title> element will be displayed in the tab of the webviewer, providing an easy way to identify our page.</li> <li>In the <body></li> </ul> <div id="quarto-meta-markdown" class="hidden"> <p><span class="hidden quarto-markdown-envelope-contents" data-render-id="cXVhcnRvLW1ldGF0aXRsZQ==">Module-1 – Let’s Do Digital</span> <span class="hidden quarto-markdown-envelope-contents" data-render-id="cXVhcnRvLXR3aXR0ZXJjYXJkdGl0bGU=">Module-1 – Let’s Do Digital</span> <span class="hidden quarto-markdown-envelope-contents" data-render-id="cXVhcnRvLW9nY2FyZHRpdGxl">Module-1 – Let’s Do Digital</span> <span class="hidden quarto-markdown-envelope-contents" data-render-id="cXVhcnRvLW1ldGFzaXRlbmFtZQ==">Let’s Do Digital</span> <span class="hidden quarto-markdown-envelope-contents" data-render-id="cXVhcnRvLXR3aXR0ZXJjYXJkZGVzYw=="></span> <span class="hidden quarto-markdown-envelope-contents" data-render-id="cXVhcnRvLW9nY2FyZGRkZXNj"></span></p> </div> <div class="quarto-auto-generated-content" style="display: none;"> <p><img src="/media/ldd-logo.png" class="slide-logo" /></p> <div class="footer footer-default"> </div> </div> </section> </div> </div> <script>window.backupDefine = window.define; window.define = undefined;</script> <script src="../../../site_libs/revealjs/dist/reveal.js"></script> <!-- reveal.js plugins --> <script src="../../../site_libs/revealjs/plugin/quarto-line-highlight/line-highlight.js"></script> <script src="../../../site_libs/revealjs/plugin/pdf-export/pdfexport.js"></script> <script src="../../../site_libs/revealjs/plugin/reveal-menu/menu.js"></script> <script src="../../../site_libs/revealjs/plugin/reveal-menu/quarto-menu.js"></script> <script src="../../../site_libs/revealjs/plugin/quarto-support/support.js"></script> <script src="../../../site_libs/revealjs/plugin/notes/notes.js"></script> <script src="../../../site_libs/revealjs/plugin/search/search.js"></script> <script src="../../../site_libs/revealjs/plugin/zoom/zoom.js"></script> <script src="../../../site_libs/revealjs/plugin/math/math.js"></script> <script>window.define = window.backupDefine; window.backupDefine = undefined;</script> <script> // Full list of configuration options available at: // https://revealjs.com/config/ Reveal.initialize({ // Display controls in the bottom right corner controls: false, // Help the user learn the controls by providing hints, for example by // bouncing the down arrow when they first encounter a vertical slide controlsTutorial: false, // Determines where controls appear, "edges" or "bottom-right" controlsLayout: 'edges', // Visibility rule for backwards navigation arrows; "faded", "hidden" // or "visible" controlsBackArrows: 'faded', // Display a presentation progress bar progress: true, // Display the page number of the current slide slideNumber: false, // 'all', 'print', or 'speaker' showSlideNumber: 'all', // Add the current slide number to the URL hash so that reloading the // page/copying the URL will return you to the same slide hash: true, // Start with 1 for the hash rather than 0 hashOneBasedIndex: false, // Flags if we should monitor the hash and change slides accordingly respondToHashChanges: true, // Push each slide change to the browser history history: true, // Enable keyboard shortcuts for navigation keyboard: true, // Enable the slide overview mode overview: true, // Disables the default reveal.js slide layout (scaling and centering) // so that you can use custom CSS layout disableLayout: false, // Vertical centering of slides center: false, // Enables touch navigation on devices with touch input touch: true, // Loop the presentation loop: false, // Change the presentation direction to be RTL rtl: false, // see https://revealjs.com/vertical-slides/#navigation-mode navigationMode: 'linear', // Randomizes the order of slides each time the presentation loads shuffle: false, // Turns fragments on and off globally fragments: true, // Flags whether to include the current fragment in the URL, // so that reloading brings you to the same fragment position fragmentInURL: false, // Flags if the presentation is running in an embedded mode, // i.e. contained within a limited portion of the screen embedded: false, // Flags if we should show a help overlay when the questionmark // key is pressed help: true, // Flags if it should be possible to pause the presentation (blackout) pause: true, // Flags if speaker notes should be visible to all viewers showNotes: false, // Global override for autoplaying embedded media (null/true/false) autoPlayMedia: null, // Global override for preloading lazy-loaded iframes (null/true/false) preloadIframes: null, // Number of milliseconds between automatically proceeding to the // next slide, disabled when set to 0, this value can be overwritten // by using a data-autoslide attribute on your slides autoSlide: 0, // Stop auto-sliding after user input autoSlideStoppable: true, // Use this method for navigation when auto-sliding autoSlideMethod: null, // Specify the average time in seconds that you think you will spend // presenting each slide. This is used to show a pacing timer in the // speaker view defaultTiming: null, // Enable slide navigation via mouse wheel mouseWheel: false, // The display mode that will be used to show slides display: 'block', // Hide cursor if inactive hideInactiveCursor: true, // Time before the cursor is hidden (in ms) hideCursorTime: 5000, // Opens links in an iframe preview overlay previewLinks: false, // Transition style (none/fade/slide/convex/concave/zoom) transition: 'none', // Transition speed (default/fast/slow) transitionSpeed: 'default', // Transition style for full page slide backgrounds // (none/fade/slide/convex/concave/zoom) backgroundTransition: 'none', // Number of slides away from the current that are visible viewDistance: 3, // Number of slides away from the current that are visible on mobile // devices. It is advisable to set this to a lower number than // viewDistance in order to save resources. mobileViewDistance: 2, // The "normal" size of the presentation, aspect ratio will be preserved // when the presentation is scaled to fit different resolutions. Can be // specified using percentage units. width: 1050, height: 700, // Factor of the display size that should remain empty around the content margin: 0.1, math: { mathjax: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js', config: 'TeX-AMS_HTML-full', tex2jax: { inlineMath: [['\\(','\\)']], displayMath: [['\\[','\\]']], balanceBraces: true, processEscapes: false, processRefs: true, processEnvironments: true, preview: 'TeX', skipTags: ['script','noscript','style','textarea','pre','code'], ignoreClass: 'tex2jax_ignore', processClass: 'tex2jax_process' }, }, // reveal.js plugins plugins: [ RevealMath, RevealNotes, RevealSearch, RevealZoom ] }); </script> <script id = "quarto-html-after-body" type="application/javascript"> window.document.addEventListener("DOMContentLoaded", function (event) { const tabsets = window.document.querySelectorAll(".panel-tabset-tabby") tabsets.forEach(function(tabset) { const tabby = new Tabby('#' + tabset.id); }); const isCodeAnnotation = (el) => { for (const clz of el.classList) { if (clz.startsWith('code-annotation-')) { return true; } } return false; } const onCopySuccess = function(e) { // button target const button = e.trigger; // don't keep focus button.blur(); // flash "checked" button.classList.add('code-copy-button-checked'); var currentTitle = button.getAttribute("title"); button.setAttribute("title", "Copied!"); let tooltip; if (window.bootstrap) { button.setAttribute("data-bs-toggle", "tooltip"); button.setAttribute("data-bs-placement", "left"); button.setAttribute("data-bs-title", "Copied!"); tooltip = new bootstrap.Tooltip(button, { trigger: "manual", customClass: "code-copy-button-tooltip", offset: [0, -8]}); tooltip.show(); } setTimeout(function() { if (tooltip) { tooltip.hide(); button.removeAttribute("data-bs-title"); button.removeAttribute("data-bs-toggle"); button.removeAttribute("data-bs-placement"); } button.setAttribute("title", currentTitle); button.classList.remove('code-copy-button-checked'); }, 1000); // clear code selection e.clearSelection(); } const getTextToCopy = function(trigger) { const codeEl = trigger.previousElementSibling.cloneNode(true); for (const childEl of codeEl.children) { if (isCodeAnnotation(childEl)) { childEl.remove(); } } return codeEl.innerText; } const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', { text: getTextToCopy }); clipboard.on('success', onCopySuccess); if (window.document.getElementById('quarto-embedded-source-code-modal')) { const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', { text: getTextToCopy, container: window.document.getElementById('quarto-embedded-source-code-modal') }); clipboardModal.on('success', onCopySuccess); } var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//); var mailtoRegex = new RegExp(/^mailto:/); var filterRegex = new RegExp("https:\/\/letsdodigital\.org\/"); var isInternal = (href) => { return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href); } // Inspect non-navigation links and adorn them if external var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)'); for (var i=0; i<links.length; i++) { const link = links[i]; if (!isInternal(link.href)) { // undo the damage that might have been done by quarto-nav.js in the case of // links that we want to consider external if (link.dataset.originalHref !== undefined) { link.href = link.dataset.originalHref; } } } function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) { const config = { allowHTML: true, maxWidth: 500, delay: 100, arrow: false, appendTo: function(el) { return el.closest('section.slide') || el.parentElement; }, interactive: true, interactiveBorder: 10, theme: 'light-border', placement: 'bottom-start', }; if (contentFn) { config.content = contentFn; } if (onTriggerFn) { config.onTrigger = onTriggerFn; } if (onUntriggerFn) { config.onUntrigger = onUntriggerFn; } config['offset'] = [0,0]; config['maxWidth'] = 700; window.tippy(el, config); } const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]'); for (var i=0; i<noterefs.length; i++) { const ref = noterefs[i]; tippyHover(ref, function() { // use id or data attribute instead here let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href'); try { href = new URL(href).hash; } catch {} const id = href.replace(/^#\/?/, ""); const note = window.document.getElementById(id); if (note) { return note.innerHTML; } else { return ""; } }); } const findCites = (el) => { const parentEl = el.parentElement; if (parentEl) { const cites = parentEl.dataset.cites; if (cites) { return { el, cites: cites.split(' ') }; } else { return findCites(el.parentElement) } } else { return undefined; } }; var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]'); for (var i=0; i<bibliorefs.length; i++) { const ref = bibliorefs[i]; const citeInfo = findCites(ref); if (citeInfo) { tippyHover(citeInfo.el, function() { var popup = window.document.createElement('div'); citeInfo.cites.forEach(function(cite) { var citeDiv = window.document.createElement('div'); citeDiv.classList.add('hanging-indent'); citeDiv.classList.add('csl-entry'); var biblioDiv = window.document.getElementById('ref-' + cite); if (biblioDiv) { citeDiv.innerHTML = biblioDiv.innerHTML; } popup.appendChild(citeDiv); }); return popup.innerHTML; }); } } }); </script> </body> </html>