You could use jQuery AJAX to send the PHP data to your HTML page. You could json_encode the response and receive that data as a JSON object and get the data out of it.
EDIT: In a production enviroment and for efficiency, it would be best if you convert the HTML files to PHP files, it will be worth the labour. However this little snippet below could be used for other functionality if modified or built upon so it's a learning experience for you to see basic jQuery AJAX calls.
The following code is a working example of calling your PHP file and getting back the result. Seeing a basic example of using jQuery and AJAX will help you get a firm grounding of how to use it.
check_server.php
<?php
$server='google.be:80';
$split=explode(':',$server);
$ip=$split[0];
$port=(empty($split[1]))?'80':$split[1];
$server=$ip.':'.$port;
$fp = fsockopen($ip, $port, $errno, $errstr, 1);
$result = new stdClass();
if($fp){
$result->result = 'success';
fclose($fp);
}
else{
$result->result = 'offline';
}
echo json_encode($result);
?>
index.html
<html>
<head>
<title>Website</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$.ajax({
url : "check_server.php",
type : "POST",
dataType: "json",
success : function(results){
if (results.result === 'success')
{
$('#status').append('Server online.');
}
else
{
$('#status').append('Server offline.');
}
},
error : function()
{
$('#status').append('An error has occurred.');
}
});
</script>
</head>
<body>
<div id="status"></div>
</body>
</html>