Read a SharePoint List and put the data on a HTML file through JavaScript function

Question 1

The SPServices library will do that for you very easily.

You'll want to use this call. I usually encapsulate it in my own function to make the code prettier, especially if I'm making a lot of AJAX list queries.

Basically what will happen is SharePoint will return an ugly XML document that has all your list items as defined by the Microsoft Documentation. You'll traverse this document using SPServices like this:

<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
<script language="javascript" type="text/javascript">

$(document).ready(function() {
  $().SPServices({
    operation: "GetListItems",
    async: false,
    listName: "Announcements",
    CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
    completefunc: function (xData, Status) {
      $(xData.responseXML).SPFilterNode("z:row").each(function() {
        var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
        $("#tasksUL").append(liHtml);
      });
    }
  });
});
</script>
<ul id="tasksUL"/>`

Line by line:
<script type="text/javascript" src="filelink/jquery-1.6.1.min.js"></script>
JQuery is required by SPServices
<script type="text/javascript" src="filelink/jquery.SPServices-0.6.2.min.js"></script>
Including SPServices
$(document).ready(function() {
"When the DOM is loaded, execute this function"
$().SPServices({
"This is an SPServices function"
operation: "GetListItems",
"We are using the 'GetListItems' web service"
async: false,
"Not asynchronous, do it now"
listName: "Announcements",
"We're using the list 'Announcements"
CAMLViewFields: "<ViewFields><FieldRef Name='Title' /></ViewFields>",
Don't worry about this line
completefunc: function (xData, Status) {
"Run this function when the request is complete. The data is passed as xData, the completion status is passed as Status"
$(xData.responseXML).SPFilterNode("z:row").each(function() {
"Take the response string and only take the "row" XML nodes. For each of these nodes, run this function..."
var liHtml = "<li>" + $(this).attr("ows_Title") + "</li>";
"Create a variable called liHtml equal to an li tag and the XML attribute ows_Title"
$("#tasksUL").append(liHtml);
"Append this list item to the element with an ID of 'tasksUL'"

Question 2

There's a number of issues with your code.

First, it will only work in a SharePoint page, not as standalone, as you are using SharePoint functions like SP.ClientContext.

Second, there seems to be errors in the snippet. For example, I think this.collList should actually be var collList.

Maybe try this other reference (but again it'll only work within a SharePoint 2010 or 2013 page):

http://msdn.microsoft.com/en-us/library/hh185007(v=office.14).aspx

Question 3

Actually the code you are using is for the SPServices library written by Sympmarc and there in its documentation its mention that it is to be used within the pages running on SharePoint Context as for making calls it uses __REQUESTDIGEST post variable and this will not be available on normal HTML5 pages, the options i can give to you are these:-

1) Enable Basic Http Authentication on the SharePoint Site and then use $ajax function of jquery with Basic Auth credentials in your call to service.

2)Create a http handler with code to do your work and then pass json from jquery to bring data from this handler.