HTML Page Skeleton
This code is a good place to start for a basic HTML5 page:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="style.css" /> <title>Page Title</title> </head> <body> <h1>Page Title</h1> </body> </html>
If we're going to think about small-screen browsers (and we should), we can add this to the <head>:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Basic CSS
There is no analogous “default” stylesheet template, but this is a nice start for a stylesheet, with rationale described in Responsive Design.
body {
max-width: 40em;
line-height: 1.4;
margin: 1em auto;
color: #333;
}
I also have a slightly more complete template that is a little more opinionated, which I actually use for simple pages I create
JavaScript
As we start working with JavaScript, we will add the jQuery library and our own JavaScript code by adding elements like this to our HTML pages' <head>:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="my-code.js"></script>
And later add the Raphaël library as well:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script> <script src="my-code.js"></script>
The JavaScript code we create will likely start with a setup function that connects events after the page is loaded:
setup = function() {
...
}
jQuery(document).ready(setup)