Making a index.html file
pretty print - How to format code in html / css / js/ php - Stack Overflow
Coding format and best practices info
a good formatter for html, css & js
What is HTML?
What does HTML do?
What do I need to know before learning HTML?
Videos
Have a look at the Prettify JavaScript library. It's the one generally used by people (it's the one being used here on SO, for example.)
You would use it like this:
In your <head> element:
<link href="prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="prettify.js"></script>
In your <body> element:
<body onload="prettyPrint()">
<!-- any HTML you like here... -->
<pre class="prettyprint">
def say_hi():
print("Hello World!")
</pre>
<!-- any HTML you like here... -->
</body>
That's for simple use of the library. If you're using other JavaScript on your page I would recommend other methods for enabling the Prettify library (i.e., don't use the onload attribute of the <body> element.) For example, if you're using jQuery, I wrote this jQuery plugin that I usually use to syntax highlight certain elements:
// Extend jQuery functionality to support prettify as a prettify() method.
jQuery.fn.prettify = function () { this.html(prettyPrintOne(this.html())); };
Used like this:
$('#my-code-element').prettify();
This is an old question, but as it came up first in Google for me, I thought I'd add another option. While Prettify is still a serviceable option, it's showing its age a bit. A newer library I ran across is Prism, and it seems to work rather well. It's more semantic and gives finer-grained control over how to format your code. It also supports plugins and its themes look nicer out of the box than Prettify's.