HTML code is a programming language used in website building and website templates. It is used to format the look and format of a web page, to set design features such as basic layout, colors, and fonts. HTML: The Ultimate Guide provides a crash course in HTML, its history, key features, different versions available, various tags and elements, as well as the advantages and disadvantages.
This book also covers the fundamental concepts of CSS and JavaScript and guides the reader through creating websites and games with it. As the reader progresses through the lessons, they will learn how to insert JavaScript commands directly into the HTML document, and how the script executes when viewed in browser.
This is a valuable resource for anyone who wants to create a website or any 2d and 3d game in HTML. After finishing this book, readers will be able to quickly build their website or game with absolute ease.
This book is organized as follows
Discusses code optimization in HTML code, Web Scripting and Security ideas in HTML.
Introduces the HTML for Game Development, benefits and types of games (2d and 3d).
Includes a Cheat Sheet of HTML where you will get all key terms and useful information that is easy to access.
Author(s): Sufyan bin UzayrPublisher: CRC PressYear: 2023
Language: EnglishPages: 324City: Boca Raton
Cover
Half Title
Title Page
Copyright Page
Dedication
Contents
About the Author
Acknowledgments
CHAPTER 1: Crash Course HTML
FRONTEND VS. BACKEND
MOSTLY USED FRONTEND TECHNOLOGY
How Does HTML Work as Frontend?
Next Is CSS
How CSS Work as Frontend Technology?
DOM: THE STRUCTURE OF WEBSITES
How DOM Works
Where DOM Came From
JavaScript
How JavaScript Works
Library and Framework
JavaScript AS BACKEND
WHAT IS A MARKUP LANGUAGE?
HTML – HYPERTEXT MARKUP LANGUAGE
HTML INTRODUCTION
HISTORY
HTML FUTURE
HTML VERSIONS
DIFFERENT VERSIONS OF HTML
MARKUP IN HTML
BASIC HTML CONCEPTS
Structure of an HTML Document
HTML DOCUMENT TYPE
HTML TAGS
Paired Tag
Unpaired Tags
Heading Tags (H1 Tag to H6 Tag)
HTML p Tag – Paragraph Tag
HTML Tag – Anchor Tag
HTML img Tag – Image Tag
Self-Closing Tags
Utility-Based Tags
Structure Tags
The
tag tag tag tag tag tag tag tag tag Tag Tag Tag TAG) for Navigation Tag<br />
<body><br />
HTML DOCUMENT INFORMATION<br />
<base><br />
<meta><br />
<link><br />
<style><br />
<script><br />
HTML DOCUMENT STRUCTURE TAGS<br />
<h1 to h6><br />
<div><br />
<span><br />
<p><br />
<br><br />
<hr><br />
TEXT FORMATTING AND INLINE TEXT SEMANTICS<br />
<strong><br />
<b><br />
<em><br />
<i><br />
<tt><br />
<strike><br />
<cite><br />
<del> … </del><br />
<ins> … </ins><br />
<blockquote> ... </blockquote><br />
<q> ... </q><br />
<abbr> ... </abbr><br />
<address> … </address><br />
<dfn> … </dfn><br />
<code> … </code><br />
<smap> ... </smap><br />
<kbd> ... </kbd><br />
<var> ... </var><br />
<pre> ... </pre><br />
<sub> … </sub><br />
<sup> … </sup><br />
<small> … </small><br />
HTML LINKS<br />
SETTING TARGETS FOR LINKS<br />
<a href=””> … </a><br />
<a href=“ mailto: ”> … </a><br />
<a href=“tel://###-###”> … </a><br />
<a href=“tel://###-###”> … </a><br />
<a name=“name”> … </a><br />
<a href=“#name”> … </a><br />
HTML LISTS<br />
<ol><br />
<ul><br />
<li><br />
<dl><br />
<dt><br />
<dd><br />
HTML FORMS<br />
<form> … </from><br />
<input><br />
<label>…</label><br />
<textarea><br />
<fieldset><br />
<legend><br />
<select><br />
<option>…</option><br />
<optgroup><br />
<progress> … </progress><br />
<datalist>…</datalist><br />
<button>…</button><br />
FORM ATTRIBUTES EVENTS LIST<br />
KEYBOARD ATTRIBUTES EVENTS LIST<br />
MOUSE ATTRIBUTES EVENTS LIST<br />
DRAG ATTRIBUTES EVENTS LIST<br />
WINDOW ATTRIBUTES EVENTS LIST<br />
MEDIA ATTRIBUTES EVENTS LIST<br />
HTML TABLES<br />
<table> … </table><br />
<caption> … </caption><br />
<thead> … </thead><br />
<tbody> … </tbody><br />
<tfoot> … </tfoot><br />
<tr> … </tr><br />
<th> … </th><br />
<td> … </td><br />
<colgroup> … </colgroup><br />
<col><br />
HTML MULTIMEDIA<br />
<img><br />
<audio><br />
<video><br />
<figure><br />
<figcaption><br />
<embed><br />
<object><br />
HTML CHARACTERS AND SYMBOLS<br />
HTML CHARACTER ENTITIES<br />
COPYRIGHT, TRADEMARK, AND REGISTERED SYMBOL<br />
PUNCTUATION SYMBOL<br />
ARROWS SYMBOL<br />
MATHEMATICAL SYMBOLS<br />
OTHER SYMBOL<br />
CURRENCY SYMBOLS<br />
HTML ATTRIBUTES<br />
NEW HTML TAGS<br />
NOTES<br />
APPRAISAL<br />
INDEX </div>
</div>
<div class="tab-pane fade" id="women-tab-pane" role="tabpanel" aria-labelledby="women-tab" tabindex="0">
<div class="content__body">
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables */
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://ebookily.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a rel="nofollow" href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Section Start -->
<footer class="footer__section">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 col-sm-12">
<div class="footer__wrapper">
<div class="footer__widget d-block">
<div class="footer__logo">
<a href="/"><img src="/assets/images/logo/logo.png" alt="logo" /></a>
</div>
<p>Ebookily is a publicly available free scientific platform. Learning has never been so easy.</p>
<div class="footer__social">
<a rel="nofollow" href="https://www.facebook.com/ebookily"><i class="fa-brands fa-facebook"></i></a>
<a rel="nofollow" href="#"><i class="fa-brands fa-twitter"></i> </a>
<a rel="nofollow" href="#"><i class="fa-brands fa-linkedin"></i></a>
<a rel="nofollow" href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="footer__wrapper">
<div class="footer__widget">
<div class="title">
<h5>My Account</h5>
</div>
<ul>
<li><a rel="nofollow" href="/about">About</a></li>
<li><a rel="nofollow" href="/dmca">DMCA & Copyright</a></li>
<li><a rel="nofollow" href="/terms">Terms</a></li>
<li><a rel="nofollow" href="/privacy">Privacy</a></li>
<li><a rel="nofollow" href="/contact">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-2 col-md-3 col-sm-12">
<div class="footer__wrapper">
<div class="footer__widget">
<div class="title">
<h5>Infomation</h5>
</div>
<a title="DMCA.com Protection Status" rel="nofollow" target="_blank" href="https://www.dmca.com/site-report/ebookily.org"><img width="150" height="53" src="https://images.dmca.com/Badges/DMCA_logo-grn-btn150w.png?ID=145a9254-51e9-46c5-b021-51f04aba7b31" alt="DMCA.com Protection Status" title="DMCA.com Protection Status"></a>
</div>
</div>
</div>
<div class="col-lg-4 col-md-3 col-sm-12">
<div class="footer__wrapper">
<div class="footer__widget">
<div class="title">
<h5>Talk To Us</h5>
</div>
<div class="address">
<ul>
<li>
<a href="mailto:contact@ebookily.org"><i class="fa-solid fa-envelope"></i>contact@ebookily.org</a>
</li>
<li>
10 Brugstraat <br />
Zevenbergen <br />
Netherlands
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="container">
<div class="row">
<div class="col-12">
<div class="footer__content text-center">
<div class="content">
<p>
© 2024 Copyright @ <a href="/">Ebookily.org</a>
</p>
</div>
<!--
<div class="footer__payment">
<img src="/assets/images/footer-pay.png" alt="footer-pay" />
</div>
<div class="link">
<a href="#"><i class="fa-brands fa-twitter"></i> </a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-facebook"></i></a>
</div> -->
</div>
</div>
</div>
</div>
</div>
</footer>
<!-- Footer Section End -->
<!-- Header Flyout Menu Start -->
<div class="flyoutMenu">
<div class="flyout__flip">
<div class="flyout__inner">
<div class="menu__header-top">
<div class="brand__logo">
<a href="/"><img src="/assets/images/logo/logo.png" alt="logo" /></a>
</div>
<!-- Close -->
<div class="closest__btn action__btn">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path d="M6 6L18 18" stroke="#344054" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<!-- Close -->
</div>
</div>
<!-- Search Form -->
<form action="/search.php" method="get" class="search__form full__width">
<input type="search" class="form-control" name="q" placeholder="Search Books & documents" />
<button type="submit">
<img src="/assets/images/search.png" alt="search" />
</button>
</form>
<!-- Search Form -->
<div class="flyout__menu">
<ul class="flyout-main__menu">
<li>
<a href="/category/technique">Technique</a>
</li>
<li>
<a href="/category/history">History</a>
</li>
<li>
<a href="/category/mathematics">Math</a>
</li>
<li>
<a href="/category/linguistics">Linguistics</a>
</li>
<li>
<a href="/category/computers">Computers</a>
</li>
<li>
<a href="/category/other-social-sciences">Social Sciences</a>
</li>
<li>
<a href="/category/psychology">Psychology</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Header Flyout Menu End -->
<!-- JS -->
<script src="/assets/js/jquery-3.6.0.min.js"></script>
<!--<script src="/assets/js/popper.min.js"></script> -->
<script src="/assets/js/bootstrap.min.js"></script>
<!--<script src="/assets/js/jquery.fancybox.min.js"></script>-->
<!--<script src="/assets/js/jquery.plugin.min.js"></script>
<script src="/assets/js/jquery.countdown.min.js"></script>
<script src="/assets/js/counterup.min.js"></script>
<script src="/assets/js/jquery.waypoints.js"></script>
<script src="/assets/js/jquery.nice-select.js"></script>-->
<script src="/assets/js/swiper-bundle.min.js"></script>
<script src="/assets/js/scripts.js"></script>
</body>
</html>
