Answer: To do this, place a tag code after the tag as follows:
<![CDATA[
<body background = </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/relation-between-html-and-css/2/509">
<small># Tutorial: Relation Between HTML and CSS</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/46">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/what-happens-if-the-list-style-type-property-is-used-on-a-non-list-element-like-a-paragraph-question/49/705">
<h5 class="mb-1" style="color:#194757;">705. What happens if the list-style-type property is used on a non-list element like a paragraph?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: If the list-style-type property is used on a non-list element like a paragraph, the property will be ignored and do not affect the paragraph. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/list-introduction/2/246">
<small># Tutorial: List Introduction</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/49">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: HTML Lists</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/when-is-it-appropriate-to-use-frames-question/47/706">
<h5 class="mb-1" style="color:#194757;">706. When is it appropriate to use frames?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: Frames can make navigating a site much easier. If the main links to the site are located in a frame that appears at the top or along the edge of the browser, the content for those links can be displayed in the remainder of the browser window. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/html-elements/2/237">
<small># Tutorial: HTML Elements</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/47">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/what-happens-if-the-number-of-values-in-the-rows-or-cols-attribute-doesn-t-add-up-to-100-percent-question/51/707">
<h5 class="mb-1" style="color:#194757;">707. What happens if the number of values in the rows or cols attribute doesn</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: The browser sizes the frames relative to the total sum of the values. If the cols attribute is set to 100%, 200% the browser displays two vertical frames with the second being twice as big as the first. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/table-elements-and-attributes-part-1/2/254">
<small># Tutorial: Table Elements and Attributes part 1</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/51">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: HTML Table</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/which-browsers-support-html5-question/46/708">
<h5 class="mb-1" style="color:#194757;">708. Which browsers support HTML5?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: The latest versions of Google Chrome, Apple Safari, Mozilla Firefox, and Opera all support most of the HTML5 features. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/introduction-to-html/2/234">
<small># Tutorial: Introduction to HTML</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/46">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/name-two-new-tags-included-in-the-html-5-question/47/709">
<h5 class="mb-1" style="color:#194757;">709. Name two new tags included in the HTML 5</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: <Video> and <Audio> are new tags which are included in HTML5 version. They are mainly used as a replacement for Flash, Silverlight, and similar technologies to play multimedia items. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240">
<small># Tutorial: HTML Tags</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/47">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/do-you-know-which-are-two-semantic-tags-are-included-in-html5-version-question/46/710">
<h5 class="mb-1" style="color:#194757;">710. Do you know which are two semantic tags are included in HTML5 version?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: The <article> and lt;section> tags are two new tags that are included in HTML5. Articles can be composed of multiple sections that can have multiple articles. An article tag represents a full block of content which is a section of a bigger whole. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/introduction-to-html/2/234">
<small># Tutorial: Introduction to HTML</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/46">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Introduction to HTML5</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/what-is-lt-figure-gt-in-html5-question/47/711">
<h5 class="mb-1" style="color:#194757;">711. What is <figure> in HTML5?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: This tag represents a piece of self-contained flow content. It is mostly used as a single unit as a reference to the main flow of the document. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240">
<small># Tutorial: HTML Tags</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/47">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/what-is-the-use-of-canvas-element-question/47/712">
<h5 class="mb-1" style="color:#194757;">712. What is the use of Canvas element?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: The canvas element helps to build charts, graphs, bypass Photoshop to create 2D images and place them directly into HTML5 code. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240">
<small># Tutorial: HTML Tags</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/47">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<div class="list-group divStyleQuestion" style="border:1px solid #e0e0e0;padding:8px">
<div class="d-flex w-100 justify-content-between">
<a href="/qanswer/what-are-the-new-form-elements-which-are-available-in-html5-question/47/713">
<h5 class="mb-1" style="color:#194757;">713. What are the new FORM elements which are available in HTML5?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: <p>The new Form elements in HTML5 offers much better functionality than the earlier versions.</p>
<p>The tags given provided to carry out these functions are:</p>
<p>1) <datalist> – This tag is used to specify a list of options for input controls.</p>
<p>2) <keygen> – This tag represents a key-pair generator field.</p>
<p>3) <output> – It represents the result of any scripting calculation.</p> </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/html-tags/2/240">
<small># Tutorial: HTML Tags</small>
</a>
</div>
<a style="color:#9e9d9d;" href="/qa/-/2/47">
<small><i class="fa fa-code" aria-hidden="true"></i> Question: Structuring Web Documents</small>
</a>
<span class="float-end" style="color:#9e9d9d"> <small><i class="fa fa-check" aria-hidden="true"></i> Short </small></span>
</div>
<li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/overview-of-java-language/0/2"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise Java Program</a></li>
<li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/fundamentals-of-c-language/1/20"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise C Program</a></li>
<li class="list-group-item d-flex justify-content-between align-items-center main-gradient-tutorials mb-2"><a href="http://www.atnyla.com/array/3/54"><i class="fa fa-code" aria-hidden="true"></i> Chapterwise Data Structure Program</a></li>
</ul>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<style>
#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: blue; /* Set a background color */
background-color: transparent;
box-shadow: 0 6px 6px rgba(0, 0, 0, 0.6);
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 15px; /* Some padding */
border-radius: 10px; /* Rounded corners */
font-size: 18px; /* Increase font size */
border-radius: 50%;
}
#myBtn:hover {
background-color: #00a7f5; /* Add a dark-grey background on hover */
}
</style>
<script>
// Get the button:
let mybutton = document.getElementById("myBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
<footer id="footer" style = "background: linear-gradient(to right, #1a2980, #26d0ce); margin-top: 10px;" class = "text-white p-3">
<div class="footer-top">
<div class="container-fluid">
<div class="row">
<div class="col-lg-2 col-md-6 footer-contact text-white">
</div>
<div class="col-lg-3 col-md-6 footer-links text-white">
<p style="font-size: 16px; color: white;">Useful Links</p>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/" class = "text-white">Home</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/" class = "text-white">About us</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/terms-and-conditions/" class = "text-white">Terms of service</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/about/guest-post" class = "text-white">Guest Post</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="hhttps://www.atnyla.com/about/ads/" class = "text-white">Advertisement</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links text-white">
<p style="font-size: 16px; color: white;">Login</p>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">login</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/user/" class = "text-white">Sign Up</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-newsletter">
<p style="font-size: 16px; color: white;">Visit All Home</p>
<ul>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/syllabus/java-programming-language/0" class = "text-white">Syllabus</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/java-programming-language" class = "text-white">Subject</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/library/" class = "text-white">Library</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/gk-and-current-affairs" class = "text-white">GK/MCQ</a></li>
<li><i class="bx bx-chevron-right"></i> <a href="https://www.atnyla.com/blog/" class = "text-white">Blog</a></li>
<!--<p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>-->
<!--<form action="" method="post">-->
<!-- <input type="email" name="email"><input type="submit" value="Subscribe">-->
<!--</form>-->
</ul>
</div>
<!--<div class="col-lg-2 col-md-6 footer-newsletter">-->
<!-- <p style="font-size: 16px; color: white; ">Social Links</p>-->
<!-- <ul> -->
<!-- <li> <a href = "https://chat.whatsapp.com/BfdvA6k89H28bD4q4QqiaK" class="text-white"> Join Whatsapp Group <i class="fa-brands fa-whatsapp"> </i> </a></li>-->
<!--<li> <a href = "https://t.me/ComputerLanguageWithRumman" class="text-white"> Join Telegram Group <i class="fa-brands fa-telegram"></i> </i> </a></li>-->
<!--</ul>-->
<!--</div>-->
</div>
</div>
</div>
<div class="container d-md-flex text-white">
<div class="social-links text-center text-md-end pt-3 pt-md-0 text-white">
<!--<a href="#" class="twitter"><i class="bx bxl-twitter"></i></a>-->
<!--<a href="#" class="facebook"><i class="bx bxl-facebook"></i></a>-->
<!--<a href="#" class="instagram"><i class="bx bxl-instagram"></i></a>-->
<!--<a href="#" class="google-plus"><i class="bx bxl-skype"></i></a>-->
<!--<a href="#" class="linkedin"><i class="bx bxl-linkedin"></i></a>-->
</div>
</div>
<div class="me-md-auto text-center text-md-start">
<div class="copyright text-center">
© Copyright <strong><span>atnyla</span></strong>. All Rights Reserved
</div>
<div class="credits text-center">
Designed by <a href="https://atnyla.com/" style="color: white">atnyla.com</a>
</div>
</div>
</footer>
<!-- Scripts -->
<!-- Bootstrap core JavaScript -->
<script src="https://atnyla.com/vendor/jquery/jquery.min.js"></script>
<script src="https://atnyla.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="https://atnyla.com/assets/js/isotope.min.js"></script>
<!--<script src=" https://unpkg.com/isotope-layout@3.0.6/dist/isotope.pkgd.min.js"></script> -->
<script src="https://atnyla.com/assets/js/owl-carousel.js"></script>
<!--<script src="https://atnyla.com/assets/js/lightbox.js"></script>-->
<script src="https://atnyla.com/assets/js/tabs.js"></script>
<!--<script src="https://atnyla.com/assets/js/video.js"></script>-->
<!--<script src="https://atnyla.com/assets/js/slick-slider.js"></script>-->
<script src="https://atnyla.com/assets/js/custom.js"></script>
<!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=desert"></script>-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
//according to loftblog tut
$(".nav li:first").addClass("active");
var showSection = function showSection(section, isAnimate) {
var direction = section.replace(/#/, ""),
reqSection = $(".section").filter(
'[data-section="' + direction + '"]'
),
reqSectionPos = reqSection.offset().top - 0;
if (isAnimate) {
$("body, html").animate(
{
scrollTop: reqSectionPos,
},
800
);
} else {
$("body, html").scrollTop(reqSectionPos);
}
};
var checkSection = function checkSection() {
$(".section").each(function () {
var $this = $(this),
topEdge = $this.offset().top - 80,
bottomEdge = topEdge + $this.height(),
wScroll = $(window).scrollTop();
if (topEdge < wScroll && bottomEdge > wScroll) {
var currentId = $this.data("section"),
reqLink = $("a").filter("[href*=\\#" + currentId + "]");
reqLink
.closest("li")
.addClass("active")
.siblings()
.removeClass("active");
}
});
};
$(".main-menu, .responsive-menu, .scroll-to-section").on(
"click",
"a",
function (e) {
e.preventDefault();
showSection($(this).attr("href"), true);
}
);
$(window).scroll(function () {
checkSection();
});
</script>
<script>
$(document).ready(function () {
$("#side-bar-toogle-btn").click(function () {
$("#sidebar-list-group").toggle("slow");
});
});
</script>
<script async src="https://fundingchoicesmessages.google.com/i/pub-7357847575760859?ers=1" nonce="P8qLHGFgH5IxNN3G6pLnUA"></script><script nonce="P8qLHGFgH5IxNN3G6pLnUA">(function() {function signalGooglefcPresent() {if (!window.frames['googlefcPresent']) {if (document.body) {const iframe = document.createElement('iframe'); iframe.style = 'width: 0; height: 0; border: none; z-index: -1000; left: -1000px; top: -1000px;'; iframe.style.display = 'none'; iframe.name = 'googlefcPresent'; document.body.appendChild(iframe);} else {setTimeout(signalGooglefcPresent, 0);}}}signalGooglefcPresent();})();</script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script>
// prettyPrint();
</script>
</body>
</html>
]]>