Answer: To change text into a clickable link to send email, use the mailto command within the href tag. The format is as follows:
<![CDATA[
<a href= </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/are-br-tags-the-only-way-to-separate-sections-of-text-question/47/696">
<h5 class="mb-1" style="color:#194757;">696. Are <br> tags the only way to separate sections of text?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: No. The <br> tag is only one way to separate lines of text. Other tags, like the <p> tag and <blockquote> tag, also separate sections of text. </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/are-there-instances-where-the-text-will-appear-outside-of-the-browser-question/51/697">
<h5 class="mb-1" style="color:#194757;">697. Are there instances where the text will appear outside of the browser?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: By default, the text is wrapped to appear within the browser window. However, if the text is part of a table cell with a defined width, the text could extend beyond the browser window. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/table-elements-and-attributes-part-2/2/256">
<small># Tutorial: Table Elements and Attributes part 2</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/how-are-active-links-different-from-normal-links-question/47/698">
<h5 class="mb-1" style="color:#194757;">698. How are active links different from normal links?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: The default color for normal and active links is blue. Some browsers recognize an active link when the mouse cursor is placed over that link; others recognize active links when the link has the focus. Those that don </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/html-links/2/247">
<small># Tutorial: HTML Links</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-style-sheets-limit-the-number-of-new-style-definitions-that-can-be-included-within-the-brackets-question/47/699">
<h5 class="mb-1" style="color:#194757;">699. Do style sheets limit the number of new style definitions that can be included within the brackets?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: Style sheets do not limit the number of style definitions that can be included within the brackets for a given selector. Every new style definition, however, must be separated from the others by a semicolon symbol. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/presentational-elements/2/243">
<small># Tutorial: Presentational 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/can-i-specify-fractional-weight-values-such-as-670-or-973-for-font-weight-question/47/700">
<h5 class="mb-1" style="color:#194757;">700. Can I specify fractional weight values such as 670 or 973 for font weight?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: Implementation largely depends on the browser, but the standard does not support fractional weight values. Acceptable values must end with two zeroes. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/presentational-elements/2/243">
<small># Tutorial: Presentational 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-is-the-hierarchy-that-is-being-followed-when-it-comes-to-style-sheets-question/47/701">
<h5 class="mb-1" style="color:#194757;">701. What is the hierarchy that is being followed when it comes to style sheets?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: If a single selector includes three different style definitions, the definition that is closest to the actual tag takes precedence. Inline style takes priority over embedded style sheets, which takes priority over external style sheets. </div>
</div>
<div class="d-flex w-100 justify-content-between">
<a style="color:#9e9d9d;" href="/tutorial/presentational-elements/2/243">
<small># Tutorial: Presentational 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/can-several-selectors-with-class-names-be-grouped-together-question/46/702">
<h5 class="mb-1" style="color:#194757;">702. Can several selectors with class names be grouped together?</h5>
</a>
</div>
<div class="card">
<div class="card-body">
Answer: You can define several selectors with the same style definition by separating them with commas. This same technique also works for selectors with class names. </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>
<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>
]]>