Please support if you like my work by payment through upi: sinhamit@icici or payment by bank
account name: Amit Kumar Sinha,
account number: 2646728782
IFSC code: KKBK0005660
SWIFT: KKBKINBB
HTML Template in Category: HTML by amit
🕙 Posted on 2023-04-05 at 02:42:31 Read in Hindi ...
DRY (Don't Repeat Yourself) is mantra for programming.
Let't combine all HTML codes we have used before. You can see below that some HTML scripts/codes have not proper indentation. Indentation doesn't matter in HTML, CSS, JavaScript, and PHP. It is inserted in these scripting languages, to display codes visually good. But, in PYTHON programming language, proper indentation is must.
You can also see in the following HTML codes that <meta /> , <link /> , <title> </title> , <style> </style> , and some <script> </script> elements are placed inside <head> </head> element. Howevever, JavaScript CODES placed inside <script> </script> element(s) are inserted into <body> </body> element, just before the closing </body> tag.
Why <link /> and <style> </style> element (CSS styles) is used in <head> </head> element ?
Because scripting languages are processed and loaded in web-browser, from top to bottom. And, codes inside <head> </head> element are not visible to public, except content/information placed in <title> </title> element. Therefore, it is good practice to place <link /> and <style> </style> element (CSS styles) in the <head> </head> element, so that the WEB-PAGE downloaded from the SERVER to the web-browser, looks visually good and proper.
Thus, link for JavaScript files, HTML5shiv.min.js and Respond.min.js for IE8 support of HTML5 elements and media queries are also inserted in the <head> </head> element. These codes (in red color, see below) are commented, and <!-- and --> (HTML Comment tags) must not be removed. These codes are only used, when some person opens the WEB-PAGE in old MicroSoft Internet Explorer (IE8 or previous) browsers.
Also, comments can be written inside <style> </style> and <script> </script> elements, which are not HTML comments, but specific CSS and JavaScript comments, respectively. That's why, I have already described (see previous page) various types of COMMENT used in different scripting and programming languages.
And, why <script> </script> element(s) are used in <body> </body> element ?
You can place <script src="" defer></script> element to load JavaScript codes from third-party (outside your host server) or external javascript files, and <script type="text/javascript" defer> // JS Codes ... </script> element to embed javascript codes. The defer keyword is used as attribute, so that the WEB-PAGE (whole HTML codes, including stylesheets, images, etc.) will first be downloaded to the web-browser properly, and then the JavaScript codes will play their interactivity (roles) to sections and parts of the WEB-PAGE.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="Keywords" content="HTML, CSS, JavaScript, PHP, Python, SQL, MySQL, Bootstrap, XML, Tutorials, Website" />
<meta name="author" content="Amit K. Sinha, entrepreneur, lawyer, innovator, web developer" />
<meta name="Description" content="Precise and Concise tutorials to learn HTML, CSS, JavaScript, SQL, MySQL, PHP, Python, Bootstrap, and more." />
<!-- You should use only one of following two lines, because both files are same. -->
<link rel="stylesheet" href="https://cdn.
<!-- <link rel="stylesheet" href="./bootstrap-3.4.1.css" /> -->
<!-- Optional theme: you can add one of following two lines, if necessary. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net
<!-- <link href="./bootstrap-theme.min.css" rel="stylesheet" /> -->
<title>R.I.B.H.U. Academy</title>
<!-- HTML5shiv and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://cdn.
<script src="https://
<![endif]-->
<!-- many persons and government websites still uses OLD Internet Explorer for security reasons, and it is also used in INDIA, for uploading DIGITAL SIGNATURE in many organization. Above lines of script in red color, is necessary. -->
<style>
/* === EMBEDDED CSS STYLES === */
h1 { color: gold; }
</style>
</head>
<body>
<h1>Exercise: HTML Template</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.
<!-- <script src="./jquery-3.6.1.js"></script> -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://cdn.
<!-- <script src="./bootstrap-3.4.1.js"></script> -->
<!-- You should, similarly, use either second and fifth lines, or third and sixth lines from above six lines of javascript third-party code, because pairs of these files are same.
Disclaimer: copy all codes where integrity attribute is present, and codes (in red color) mentioned above, from the authentic source. -->
<script type="text/javascript">
// JavaScript Embedded codes are written inside script element
</script>
</body>
</html>
What is Bootstrap ? And what is jQuery ?
Bootstrap is a framework, consists of CSS (style rules) and JavaScript codes. Similarly, jQuery is also JavaScript codes. These codes are developed and result of many web developers, including Twitter. Yes! you have read it right. Bootstrap is also known as Twitter Blueprint.
In 1990s, there was hardly internet we saw as today! Even in 2K millennium new decade (mid-2010), internet was just developing. Programmers and developers struggled hard to script WEB-PAGEs. John Resig was frustrated with cross-browser javascript codes, meaning that same interactivity code was to be written differently for different web-browsers. And, so jQuery was developed by him and many versions of jQuery are now released by the jQuery Foundation. jQuery simplified the way to write JavaScript codes, and now it's very easy to learn and write JavaScript codes. Many companies and web-developers including Mozilla Foundation continued to develop JavaScript for different browsers.
CSS was just basic rules for HTML elements (tagName). Now CSS2, CSS2.1 and CSS3, etc. are also released. Now, with HTML5, modern JavaScript (ECMAScript 6 - 2015) and modern CSS, it is very easy to create WEB-PAGEs. You have to write more (HTML, CSS, and JavaScript) CODES, when you use the basic structure of HTML web-page. It looks less codes initially, when there are few HTML elements, but when a complex website has to be created, more and more CODES will be added.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>R.I.B.H.U. Academy</title>
<style>
/* === EMBEDDED CSS STYLES === */
h1 { color: gold; }
</style>
</head>
<body>
<h1>Exercise: HTML Template</h1>
<!-- some contents, text or other HTML elements will be inserted here -->
<script type="text/javascript">
// JavaScript Embedded codes are written inside script element
</script>
</body>
</html>
Leave a Comment:
Amit Sinha March 2nd, 2023 at 9:30 PM
😃 😄 😁 😆 😅 😂 😉 😊 😇 😍 😘 😚 😋 😜 😝 😶 😏 😒 😌 😔 😪 😷 😵 😎 😲 😳 😨 😰 😥 😢 😭 😱 😖 😣 😞 😓 😩 😫 😤
Ribhu March 3rd, 2023 at 9:30 PM
🐵 🐒 🐶 🐩 🐺 🐱 🐯 🐅 🐆 🐴 🐎 🐮 🐂 🐃 🐄 🐷 🐖 🐗 🐽 🐏 🐑 🐐 🐪 🐫 🐘 🐭 🐁 🐀 🐹 🐰 🐇
