Structuring a web page with HTML

Structuring a web page with HTML

Topic outcomes

In this topic, we will look at an example of an HTML basic code and explain it.  

HTML structure in code

Every HTML document has the same structure, every HTML document is divided into the following two parts as mentioned in the previous topic.

HEAD

Please note that metadata means information about information
The head or head element is where all the metadata of the Html page is saved (more on “metadata” later).

Body

The body or body element is where all the content of the webpage is saved or created

Let’s look at the code of a basic empty web page

The declaration defines that this document is an HTML5 document

The element is the root element of an HTML page, the root element defines the start and end of an HTML documents

The element contains meta information about the HTML page. Meta information is the information about the web page such as the title or the page description of the web 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)</div></div><div class="e-hotspot elementor-repeater-item-c480fb3 e-hotspot--sequenced e-hotspot--position-left e-hotspot--position-top e-hotspot--icon"><div class="e-hotspot__button e-hotspot--expand"><div class="e-hotspot__icon"></div></div><div class="e-hotspot__tooltip e-hotspot--tooltip-position e-hotspot--fade-grow " > 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.</div></div></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-96aee37 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="96aee37" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-14c43a0" data-id="14c43a0" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-2017394 elementor-widget elementor-widget-image" data-id="2017394" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2021/12/3.png" class="attachment-large size-large wp-image-2759" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2021/12/3.png 500w, https://mytrainingboard.online/wp-content/uploads/2021/12/3-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2021/12/3-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-1529204" data-id="1529204" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-603c58a elementor-invisible elementor-widget elementor-widget-heading" data-id="603c58a" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Task</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-9dd55af elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="9dd55af" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d580379" data-id="d580379" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-f9f1c36 elementor-widget elementor-widget-text-editor" data-id="f9f1c36" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Let’s see what happens when you copy/paste the HTML code below into the live coding editor below:</p></div></div><div class="elementor-element elementor-element-e0953b9 elementor-widget elementor-widget-shortcode" data-id="e0953b9" data-element_type="widget" data-widget_type="shortcode.default"><div class="elementor-widget-container"><div class="elementor-shortcode"></div></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-593693d elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="593693d" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5529e48" data-id="5529e48" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-a40c435 elementor-widget elementor-widget-text-editor" data-id="a40c435" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Your results should look like the one below</p></div></div><div class="elementor-element elementor-element-2c19f7b elementor-widget elementor-widget-image" data-id="2c19f7b" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MTAiIGhlaWdodD0iMzU0IiB2aWV3Qm94PSIwIDAgODEwIDM1NCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="810" height="354" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/basic-1024x447.jpg" class="attachment-large size-large wp-image-3748" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/basic-1024x447.jpg 1024w, https://mytrainingboard.online/wp-content/uploads/2022/09/basic-300x131.jpg 300w, https://mytrainingboard.online/wp-content/uploads/2022/09/basic-768x335.jpg 768w, https://mytrainingboard.online/wp-content/uploads/2022/09/basic.jpg 1366w" data-sizes="(max-width: 810px) 100vw, 810px" /></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-201cef3 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="201cef3" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-d5793ac" data-id="d5793ac" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-e5231e2 elementor-widget elementor-widget-image" data-id="e5231e2" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2021/12/2.png" class="attachment-large size-large wp-image-2758" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2021/12/2.png 500w, https://mytrainingboard.online/wp-content/uploads/2021/12/2-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2021/12/2-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-27fb722" data-id="27fb722" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-d1d1462 elementor-invisible elementor-widget elementor-widget-heading" data-id="d1d1462" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">What happened?</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-8ced512 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="8ced512" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-af823fd" data-id="af823fd" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><section class="elementor-section elementor-inner-section elementor-element elementor-element-c86eb7d elementor-section-full_width elementor-section-content-middle elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="c86eb7d" data-element_type="section"><div class="elementor-container elementor-column-gap-no"><div class="elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-5a6c707" data-id="5a6c707" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-11722d0 elementor-flip-box--effect-push elementor-flip-box--direction-up elementor-widget elementor-widget-flip-box" data-id="11722d0" data-element_type="widget" data-widget_type="flip-box.default"><div class="elementor-widget-container"><div class="elementor-flip-box"><div class="elementor-flip-box__layer elementor-flip-box__front"><div class="elementor-flip-box__layer__overlay"><div class="elementor-flip-box__layer__inner"><h3 class="elementor-flip-box__layer__title"> What happened?</h3><div class="elementor-flip-box__layer__description"> Nothing showed up right? Find out why</div></div></div></div><div class="elementor-flip-box__layer elementor-flip-box__back"><div class="elementor-flip-box__layer__overlay"><div class="elementor-flip-box__layer__inner"><div class="elementor-flip-box__layer__description"> That’s because the code above is basically like a blank word document. These HTML elements are required to create the necessary HTML structure which would be used to add content later.  Your results should look like the one below</div></div></div></div></div></div></div></div></div></div></section></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-4ed664d elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="4ed664d" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-71f86c1" data-id="71f86c1" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-7a7b668 elementor-widget elementor-widget-image" data-id="7a7b668" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/7.png" class="attachment-large size-large wp-image-3718" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/7.png 500w, https://mytrainingboard.online/wp-content/uploads/2022/09/7-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2022/09/7-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-fc9d5fe" data-id="fc9d5fe" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-c87e7a9 elementor-invisible elementor-widget elementor-widget-heading" data-id="c87e7a9" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h1 class="elementor-heading-title elementor-size-default">Let’s look at an example</h1></div></div><div class="elementor-element elementor-element-1be4ac5 elementor-invisible elementor-widget elementor-widget-heading" data-id="1be4ac5" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Of a web page structure</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-a56055a elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="a56055a" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d7d9fe3" data-id="d7d9fe3" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-484c1c7 elementor-widget elementor-widget-text-editor" data-id="484c1c7" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"> Let’s say we want to create the following webpage SHOW IMAGE ON BELOW.Let’s see how this would look using HTML structure:</div></div><div class="elementor-element elementor-element-e61cf0f elementor-widget elementor-widget-image" data-id="e61cf0f" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NDAiIGhlaWdodD0iMjcwIiB2aWV3Qm94PSIwIDAgNDQwIDI3MCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="440" height="270" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/basicimage.jpg" class="attachment-large size-large wp-image-3749" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/basicimage.jpg 440w, https://mytrainingboard.online/wp-content/uploads/2022/09/basicimage-300x184.jpg 300w" data-sizes="(max-width: 440px) 100vw, 440px" /></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-d12ae69 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="d12ae69" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-2efb850" data-id="2efb850" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-ea985e2 elementor-widget elementor-widget-text-editor" data-id="ea985e2" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"></div></div><div class="elementor-element elementor-element-1aaa1fb elementor-widget elementor-widget-image" data-id="1aaa1fb" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0ODIiIGhlaWdodD0iMzE4IiB2aWV3Qm94PSIwIDAgNDgyIDMxOCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="482" height="318" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/tempsnip.png" class="attachment-large size-large wp-image-3750" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/tempsnip.png 482w, https://mytrainingboard.online/wp-content/uploads/2022/09/tempsnip-300x198.png 300w" data-sizes="(max-width: 482px) 100vw, 482px" /></div></div><div class="elementor-element elementor-element-b969fc9 elementor-widget elementor-widget-text-editor" data-id="b969fc9" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>The <h1> </h1> is the main heading tag used to create a main heading in HTML.</p><p>The <p> </p> is a paragraph tag used to create a paragraph in HTML.</p></div></div><div class="elementor-element elementor-element-cf5c16d elementor-widget elementor-widget-text-editor" data-id="cf5c16d" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-e8e33a9 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="e8e33a9" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-f5a458e" data-id="f5a458e" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-605740f elementor-widget elementor-widget-image" data-id="605740f" data-element_type="widget" data-widget_type="image.default"><div class="elementor-widget-container"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiIGhlaWdodD0iNTAwIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="500" height="500" data-src="https://mytrainingboard.online/wp-content/uploads/2022/09/9.png" class="attachment-large size-large wp-image-3720" alt="" loading="lazy" data-srcset="https://mytrainingboard.online/wp-content/uploads/2022/09/9.png 500w, https://mytrainingboard.online/wp-content/uploads/2022/09/9-300x300.png 300w, https://mytrainingboard.online/wp-content/uploads/2022/09/9-150x150.png 150w" data-sizes="(max-width: 500px) 100vw, 500px" /></div></div></div></div><div class="elementor-column elementor-col-50 elementor-top-column elementor-element elementor-element-c906a2b" data-id="c906a2b" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-4ce230d elementor-invisible elementor-widget elementor-widget-heading" data-id="4ce230d" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="heading.default"><div class="elementor-widget-container"><h2 class="elementor-heading-title elementor-size-default">Let's practise of a web page structure</h2></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-e6fafd6 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="e6fafd6" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b73d989" data-id="b73d989" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-c34c8d2 elementor-widget elementor-widget-text-editor" data-id="c34c8d2" data-element_type="widget" data-widget_type="text-editor.default"><div class="elementor-widget-container"><p>Click here to practice the HTML code yourself.</p><p>In this example – see if you can change the heading and the paragraph text. Click run and see what happens.</p></div></div></div></div></div></section><section class="elementor-section elementor-top-section elementor-element elementor-element-98affe2 elementor-section-boxed elementor-section-height-default elementor-section-height-default wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no" data-id="98affe2" data-element_type="section"><div class="elementor-container elementor-column-gap-default"><div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-e715de6" data-id="e715de6" data-element_type="column"><div class="elementor-widget-wrap elementor-element-populated"><div class="elementor-element elementor-element-8320b1f elementor-align-left elementor-invisible elementor-widget elementor-widget-button" data-id="8320b1f" data-element_type="widget" data-settings="{"_animation":"fadeInUp"}" data-widget_type="button.default"><div class="elementor-widget-container"><div class="elementor-button-wrapper"> <a href="https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default" class="elementor-button-link elementor-button elementor-size-md elementor-animation-grow" role="button"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Practice Now</span> </span> </a></div></div></div></div></div></div></section></div></div></div></div></div></div></div></div></div></div><div id="um_upload_single" style="display:none"></div><div id="um_view_photo" style="display:none"><a href="javascript:void(0);" data-action="um_remove_modal" class="um-modal-close" aria-label="Close view photo modal"> <i class="um-faicon-times"></i> </a><div class="um-modal-body photo"><div class="um-modal-photo"></div></div></div><div class="preloader-plus"><div class="prog-bar-wrapper"><div class="prog-bar-bg"></div><div class="prog-bar"></div></div><div class="preloader-content"><div class="lds-css ng-scope"><div class="lds-dots preloader-plus-default-icons"><div></div><div></div><div></div><div></div></div></div> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OTEyIiBoZWlnaHQ9IjM0NTYiIHZpZXdCb3g9IjAgMCA2OTEyIDM0NTYiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="6912" height="3456" class="preloader-custom-img" data-src="http://mytrainingboard.online/wp-content/uploads/2022/10/GOD-LOGO-WITH-A-WHITE-BACKGROUND.png" /><div class="preloader-plus-custom-content"><p>MyTrainingBoard is loading..</p></div><p id="preloader-counter">0</p></div></div> <a href="#page" class="scrollup" id="btn-scrollup"></a><div class="learndash-wrapper learndash-wrapper-login-modal ld-modal-closed"><div class="ld-modal ld-login-modal"><span class="ld-modal-closer ld-icon ld-icon-delete"></span><div class="ld-login-modal-login"><div class="ld-login-modal-wrapper"><div class="ld-modal-heading"> Login</div><div class="ld-modal-text"> Accessing this course requires a login. Please enter your credentials below!</div><div class="ld-login-modal-form"><form name="loginform" id="loginform" action="https://mytrainingboard.online/mtb/" method="post"><input id="learndash-login-form" type="hidden" name="learndash-login-form" value="8f1ebac169" /><p class="login-username"> <label for="user_login">Username or Email Address</label> <input type="text" name="log" id="user_login" autocomplete="username" class="input" value="" size="20" /></p><p class="login-password"> <label for="user_pass">Password</label> <input type="password" name="pwd" id="user_pass" autocomplete="current-password" class="input" value="" size="20" /></p><p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</label></p><p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Log In" /> <input type="hidden" name="redirect_to" value="/topic/structuring-a-web-page-with-html/" /></p></form> <a class="ld-forgot-password-link" href="https://mytrainingboard.online/mtb/?action=lostpassword&redirect_to=https%3A%2F%2Fmytrainingboard.online%2Ftopic%2Fstructuring-a-web-page-with-html%2F%3Fld-resetpw%3Dtrue%23login">Lost Your Password?</a><div class="ld-login-modal-branding"> <img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2OTEyIiBoZWlnaHQ9IjM0NTYiIHZpZXdCb3g9IjAgMCA2OTEyIDM0NTYiPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNjZmQ0ZGI7ZmlsbC1vcGFjaXR5OiAwLjE7Ii8+PC9zdmc+" width="6912" height="3456" data-src="https://mytrainingboard.online/wp-content/uploads/2022/10/GOD-LOGO-WITH-A-WHITE-BACKGROUND.png" alt=""></div></div></div></div></div></div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://mytrainingboard.online/wp-content/litespeed/js/cd635733ff4f5a2f06e846ffed1a434a.js?ver=156ee"></script><script>const litespeed_ui_events=["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body></html> <!-- Page optimized by LiteSpeed Cache @2023-03-18 19:10:58 --> <!-- Page generated by LiteSpeed Cache 5.3.3 on 2023-03-18 19:10:57 --> <!-- Guest Mode -->