Uncaught ReferenceError: Xrm is not defined

Within a standard ASP.NET (WebAPI) project, I created this web page for an external site but I am encountering this: Uncaught ReferenceError: Xrm is not defined
Any help will be appreciated.

<!DOCTYPE html>
<html>
<head>
<script src="Scripts/jquery-3.2.1.js"></script>
<title></title>
<meta charset="utf-8" />
<script>
$(document).ready(function () {
var accountlist = $('accountlist');
$('#Getaccounts').click(function () {
console.log("testing 1234")
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
datatype: "json",
url: Xrm.Page.context.getClientUrl() + "/api/data/v8.0/accounts?$select=accountid,name",
beforeSend: function (XMLHttpRequest) {
XMLHttpRequest.setRequestHeader("OData-MaxVersion", "4.0");
XMLHttpRequest.setRequestHeader("OData-Version", "4.0");
XMLHttpRequest.setRequestHeader("Accept", "application/json");
XMLHttpRequest.setRequestHeader("Prefer", "odata.include-annotations=\"*\"");
},
async: true,
success: function (data, textStatus, xhr) {
var results = data;
for (var i = 0; i < results.value.length; i++) {
var accountid = results.value[i]["accountid"];
var name = results.value[i]["name"];
accountlist.append('<li>' + name + '</li>');
}
},
error: function (xhr, textStatus, errorThrown) {
Xrm.Utility.alertDialog(textStatus + " " + errorThrown);
}
});
});
});
</script>
</head>
<body>
<input id="Getaccounts" type="button" value="Getaccounts" />
<ul id="accountlist " />
</body>
</html>