HTML, the language of the web!
Start with the following in index.html:
<!doctype html>
<html>
<head>
</head>
<body>
<h1>Hello World :)</h1>
</body>
</html>
(I use a vim snippet so I can just type html<tab> to start a new page)
Then you can open it in your browser:
$ open index.html
Or you can run an http server in the current directory, and index.html will be served when navigating to the root (/):
$ python3 -m http.server
Then open http://localhost:8000.
Having an http server makes a difference when you have absolute links:
<a href="/about">About</a>
Without an http server it will attempt to navigate to the root of your file system (where only system files and directories go, not what you want).
With an http server, a link to /about will go to http://localhost:8000/about.
The page doesn’t look like much until we add some style!
<!doctype html>
<html>
<head>
<style type="text/css">
body {
background: lightgreen;
}
</style>
</head>
<body>
<h1>Hello World :)</h1>
</body>
</html>
This is called inline css.
Once your css gets to a certain size, it’s worth
splitting it into its own file, like style.css:
/* style.css */
body {
background: lightgreen;
}
Then update index.html as follows:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World :)</h1>
</body>
</html>
You can make most webpages without javascript. javascript was added to the web after its creation in fact! Even somewhat complex web applications can be built only using <form> attributes. And there’s even a movement today towards making websites that work without javascript (such as https://sourcehut.org/).
But let’s add a little inline javascript just to test it out:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World :)</h1>
<script type="text/javascript">
console.log("Hello World")
</script>
</body>
</html>
If your javascript depends on any html elements (though this example does not), it has to be after the HTML. As a convention I put the javascript as the last thing before the close of the <body> tag anyways.
Just like we did with css, let’s split the javascript out into its own file:
// script.js
console.log('Hello World')
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World :)</h1>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
There you have it, a web page skeleton that includes a stylesheet and a script.
If you’re looking for a more complete html template, check out https://html5boilerplate.com/.
Since html is an open standard, it’s up to the user’s browser to interpret it! Each browser has its own html parser and renderer. So there isn’t one “source code” for html.
The organization that develops web standards (such as HTML, CSS, and JavaScript) is the World Wide Web Consortium (W3C).
You can read their technical reports at https://www.w3.org/TR/.
The HTML Standard itself is here: https://html.spec.whatwg.org/multipage/
As you’ll see it’s quite comprehensive!