HTML5: How to specify the address of the document's cache manifest?

Last update on February 09 2024 12:52:54 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!doctype html><!-- Declaration specifying the document type -->
<html manifest="https://www.w3resource.com/html-css-exercise/basic/solution/w3r_example.appcache"><!-- Root element with manifest attribute specifying the URL of the cache manifest file -->
<head><!-- Opening tag for the document's header section -->
<title>This is an example of HTML manifest attribute</title><!-- Title of the HTML document -->
<link rel="stylesheet" type="text/css" href="https://www.w3resource.com/html-css-exercise/basic/solution/findbrowser.css"><!-- Link to an external CSS stylesheet -->
</head><!-- Closing tag for the document's header section -->
<body><!-- Opening tag for the document's body section -->
<img src="https://www.w3resource.com/images/w3resource-logo.png" alt="w3resource logo"><!-- Image element displaying the w3resource logo -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna eros, varius vitae odio at, scelerisque bibendum dui. Suspendisse pellentesque mauris non blandit porttitor. In hac habitasse platea dictumst. Sed eu leo eu leo sagittis porttitor id id lorem. Fusce pretium justo nisl, non porttitor nulla sollicitudin a. Duis porta in metus congue rhoncus. Pellentesque non orci massa. Sed dictum, massa et ornare rutrum, dui erat vehicula felis, non pellentesque sapien dui maximus dolor.</p><!-- Paragraph element with Lorem Ipsum text -->
<button onclick="findBrowser()">Show my browser</button><!-- Button triggering a JavaScript function -->
<p id="display"></p><!-- Paragraph element with an empty ID to display browser information -->
<script src="https://www.w3resource.com/html-css-exercise/basic/solution/findbrowser.js"></script><!-- Link to an external JavaScript file -->
<p>Note : If you <a href="https://www.w3resource.com/html-css-exercise/basic/solution/findbrowswer.html">open the file and then go offline, you will still be able to see the page and interactivity</p><!-- Note about offline accessibility -->
</body><!-- Closing tag for the document's body section -->
</html><!-- Closing tag for the root element of the HTML document -->

CSS Code:


body {
background-color: #f4f7f8;
color: #1eb6f1
}

button {
background-color: #52ad4c;
color: #fff;
font-size: 20px
}

a:link, a:visited, a:active, a:hover {
color: #ea6512
}

JavaScript Code :


function findBrowser() {
  var wn = window.navigator,
        platform = wn.platform.toString().toLowerCase(),
        userAgent = wn.userAgent.toLowerCase(),
        storedName;

// ie
    if (userAgent.indexOf('msie',0) !== -1) {
        browserName = 'ie';
        os = 'win';
        storedName = userAgent.match(/msie[ ]\d{1}/).toString();
        version = storedName.replace(/msie[ ]/,'');

        browserOsVersion = browserName + version;
    }
var el = document.getElementById("display");
el.innerText = platform + userAgent;
}

Manifest

CACHE MANIFEST
# v1 2015-06-26
# This is another comment
https://www.w3resource.com/html-css-exercise/basic/solution/findbrowser.js
https://www.w3resource.com/images/w3resourcelogo.gif
https://www.w3resource.com/html-css-exercise/basic/solution/findbrowser.css

Explanation:

This HTML code represents a basic HTML document structure with various elements and attributes.
The <!doctype html> declaration specifies the document type as HTML5.
The <html> element is the root element of the HTML document, containing all other HTML elements. It includes a manifest attribute, which specifies the URL of the cache manifest file to enable offline access.
The <head> element contains meta-information about the HTML document, such as the title and links to external resources like CSS and JavaScript files.
Inside the <head> element, there is a <title> tag defining the title of the HTML document, and a <link> tag linking to an external CSS stylesheet.
The <body> element contains the visible content of the HTML document, such as text, images, buttons, and scripts.
Inside the <body> element, there is an <img> tag displaying the w3resource logo, followed by a <p> (paragraph) element containing Lorem Ipsum text.
There is a <button> element triggering a JavaScript function when clicked, and a <p> element with an empty ID to display browser information.
At the end of the document, there is a <script> tag linking to an external JavaScript file, and a note about offline accessibility with a link to another page.

Live Demo:

See the Pen html-manifest-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page