I recently wrote an essay on why you should set up a personal website rather then using social media.
Doing so lets you own your space on the internet, customize it and free your readers from constant advertising and algorithmic feeds designed to keep you stuck doomscrolling all day.
However, despite how much time we spend using it, creating something for the intenet is seen as arcane wizardy by most people.
This is a fairly accessable guide to getting started.
You’ll need a text editor (any will do) and a browser (you already have one).
All pages are written in HTML, which is a simple text-based format.
To start with, this is a perfectly valid HTML document:
To try this, just create a text file with a ".html" extension, and open it in your favorite browser.
Do this now: experimenting is the best way to learn how everything works.
This is what it should look like:
Check out my epic site!
Plain text is boring, so let’s add some formatting:
Check out my <b>epic</b> site!
Check out my
epic site!
If your browser shows angle brackets on the page, it's likely you accidentally created a file with double extentions.
You can check for this by looking at the URL bar: It should look something like this "file://.../site.html"
If it doesn't end with ".html" but instead ".html.txt" or similar, will will need to fix the file name.
Windows will hide the real file extention by default:
If you are using it, ensure that "Show file extentions" is enabled in the file explorer settings.
The angle bracket things are tags: "<b>" is an opening tag, and "</b>" is the matching closing tag.
The word surrounded by brackets ("b") is the tag name, which tells the browser what to do:
In this case, bolding the enclosed text.
The other formatting tags are <em> emphasis, <u> underline, <sub> subscipt, <sup> superscript, <small> small text, <mark> highlight and <del> deleted.
You don’t have to memorize this list, but go and try a few out.
There’s also <br/> (break), which adds a line break.
It’s special because there’s no closing tag: It always immediately closed and can’t contain any text.
I like to add a slash after the tag name to indicate this
A big wall of text can get quite ugly, so it’s good to break it up with <p> (paragraph) tags.
Each paragraph will be visually separated from other content on the page:
<p>
Check out my <em>new</em> site:
</p>
<p>
I have many <b>epic</b> things here.
</p>
Check out my new site:
I have many epic things here.
Together, the maching tags and their contents form an an element.
Elements can contain other elements, but it’s important that they are closed in the correct order:
This is wrong:
<em>Some <b>random</em> text</b>
<!-- <em> (parent) is closed *before* <b> (child) -->
<!-- Don't do this! -->
<!-- By the way, these are comments. They don't do anything, but they
are good for leaving notes. Just don't use them for secret information:
they can be seen by anyone who presses presses control-u -->
… but this is fine:
<em>Some <b>random</b> text</em>
<!-- <em> (parent) is closed *after* <b> (child) -->
<!-- Perfectly fine. -->
Browsers will attempt to render invalid HTML, but the results may not be what you intended:
It’s best to make it easy for them.
On that topic, it’s good practice to put all your content inside a <body> element which is itself inside a <html> element:
<html>
<body>
<p>Check out my new site:</p>
<p>I have many <b>epic</b> things here.</p>
</body>
</html>
Check out my new site:
I have many epic things here.
This isn’t mandatory, but helps browsers render your page correctly:
In the case of an old browser, you don’t want metadata (we’ll add some later) getting confused for page content.
Ok, back to text-wall-avoidance:
the <ul> and <ol> (unordered/ordered list) tags create, well, lists.
Each item should be wraped in <li> tags (list item)
<html><body>
<p>About this site (unordered):
<ul>
<li>This site has <b>epic</b> things</li>
<li>... and I wrote it myself</li>
</ul>
</p>
<p>
It uses these tags: (ordered)
<ol>
<li><html></li>
<li><body></li>
<li><p></li>
<li><ul> and <ol></li>
<li><li></li>
</ol>
</p>
</body></html>
About this site (unordered):
- It has epic things
- ... and is handwritten HTML
It uses these tags: (ordered)
- <html>
- <body>
- <p>
- <ul> and <ol>
- <li>
You can add angle brackets to a page with > (>), < (<) and & (&).
These entities will render as the corresponding charater, but won’t form tags.
Headings use <h1> (heading 1) through <h5> (heading 5), with larger numbers using smaller font sizes:
<html><body>
<h1>My cool site:</h1>
<p>This site has <b>epic</b> things and I wrote it myself.</p>
<h3>Other cool places:</h3>
<p>To do: Figure out how to add links.</p>
</body></html>
My cool site:
This site has epic things and I wrote it myself.
Other cool places:
To do: Figure out how to add links.
About that. Links are just <a> (anchor) tags, but they have something new:
an attribute after the tag name but before the bracket.
I found this <a href=https://www.righto.com/>cool blog</a> about electronics.
I found this
cool blog about electronics.
The "href= " attribute sets where the link points to.
A lot of other tags can also have attributes: For example, ordered lists with "reverse=true" count backwards.
The URL in "href=" can be relative:
If linking up multiple pages on the same site, instead of this:
<a href=https://example.com/some/page>Some page</a>
… just write this:
<a href=/some/page>Some page</a>
Images work similarly to links, except that they are self-closing elements like <br/>:
<p>Check out this <a href=/astro/m27>picture</a> of a nebula I took!</p>
<img src=/astro/m27/small.jpg />
Check out this picture of a nebula I took!
(If you don’t have a URL for your image, skip to the hosting section to set one up)
That’s all the essentials, but there’s a lot of other useful tags.
For example <details> creates a dropdown that works with ctrl-f:
Awsome dropdown (click me!)
This is a dropdown with just HTML. It works well with browser features (ctrl-f, fragment identifiers, screen readers, etc) by default.
(better usability than 99% of commercial sites!)
…but I can’t cover everything without writing a whole book.
(The Mozzila docs are a fantastic reference)
Making it look nice:
At this point, you should have something like this:
<html>
<body>
<h1>Check out my cool site:</h1>
<p>
I made this site to write about things I do.
More updates <em>soon™</em>.
</p>
<h2>Other cool places:</h2>
<ul>
<li><a href=https://www.righto.com/>Ken Shirriff's blog</a></li>
</ul>
<h2>Photography:</h2>
<p>Here's my <a href=/astro/m27>picture</a> of the Dumbbell Nebula:</p>
<img src=/astro/m27/small.jpg />
</body>
</html>
Check out my cool site:
I made this site to write about things I do.
More updates soon™.
Other cool places:
Photography:
Here's my picture of the Dumbbell Nebula:
Let’s start by giving the page a machine-readable title:
<html>
<head>
<title>My epic site</title>
</head>
<!-- snip -->
Like with <body>, the <head> tag isn’t required, but it is good to include it:
Otherwise, any metadata that the browser doesn’t understand might be mistaken for content.
The page still looks kinda bad:
Text extending the edges of the page isn’t exactly easy to read.
It’s not too bad when crammed into my blog, but longer paragraphs will look terrible on large monitors.
To fix this, we need to add some style and layout information using the <style> tag:
<!-- snip -->
<style>
body {
max-width: 30em;
}
</style>
</head>
<!-- snip -->
Unlike other tags, the contents of <style> isn’t HTML, but CSS: a whole other langauge embedded within the file.
CSS is compoosed of blocks, each begining with a selector to control what gets effected.
Here, this is just the name of a tag: "head"
The selector is followed by a series of declarations wraped in curly braces.
My example only has one: "max-width: 30em;"
This caps the width of the element at 30 times the font size:
Check out my cool site:
I made this site to write about things I do.
More updates soon™.
Other cool places:
Photography:
Here's my picture of the Dumbbell Nebula:
The page is looking rather asymetrical, so let’s center the column.
For fixed-width elements, this can be done using the "margin" property:
<!-- snip -->
<style>
body {
max-width: 30em;
margin: auto;
}
</style>
</head>
<!-- snip -->
Check out my cool site:
I made this site to write about things I do.
More updates soon™.
Other cool places:
Photography:
Here's my picture of the Dumbbell Nebula:
(For varable width elements, use flexbox for centering and other fancy layouts.
A single line of text can be centered with "text-align=center")
Personally, I like dark themed sites, so lets change some of the colors:
<!-- snip -->
<style>
html {
background-color: back;
}
body {
max-width: 30em;
margin: auto;
color: white;
}
a:link {color: #4ee;}
a:visited {color: #399;}
</style>
</head>
<!-- snip -->
Check out my cool site:
I made this site to write about things I do.
More updates soon™.
Other cool places:
Photography:
Here's my picture of the Dumbbell Nebula:
The "color" style will carry over to every element inside of the styled tag, so there’s no need to individually change the text-color of every element.
However, the links do need to be changed because they override the color by default.
That’s it.
Everything you need to replicate my blog, minus a few small bits like the sans-serif font, nagivation box, etc.
Of course, your website can and should be different: It’s yours.
I highly recomend you read some documenation and play around with CSS.
There’s also way more to it then I can possbly cover here.
Every website you see was created with it, and it even supports animations and basic interactivity.
… also, check out your browser’s devtools (ctrl-shift-i):
It will have a nice GUI for editing which shows you the result in real time and shows you what’s going on under the hood.
If you ever run out of tags, you can just make up your own and style them as needed.
As long as the name includes a hypen, it’s guaranteed not to be included in any future version of HTML.
The specification even lists <math-α> and <emotion-😍> as allowed custom elements names.
I’ve used this heavily on this page:
All the example websites aren’t screenshots, they are <fake-frame> elements styled up to look like a browser window.
Custom tags are also very handy for styling text:
<html>
<style>
html {
color: white;
background-color: black;
}
green-text {
color: green;
}
</style>
It <green-text>works</green-text>!
</html>
It works!
Sharing it:
At this point you should have a reasonably nice page ready to put up on the internet.
The easiest way to do this is to use a static file hosting service like Github Pages or Cloudflare Pages.
Both of these have generous free tiers that should last a very long time.
If you don’t like big companies, there are plenty of similar, smaller services.
These can be more limited: The popular Neocities charges $5/mo to use a custom domain.
Another option is to rent a server ($3-$5/mo) or, if you have good internet, run one yourself.
This is by far the most fiddly option: I would not recommend it unless you like playing with computers.
All off these (except a server) will give you a subdomain by default.
For example, Github Pages will give you your-username.github.io
However, I do recommend setting up a custom domain:
This will let you switch providers seamlessly should anything happen.
All of these will work in a similar way:
Upload a file with some name, and it will given a URL with that same name.
The one exception is that files called "index.html" will be viewable at the root of the folder they are in.
Filename URL
root/
+- my_cats.html https://example.com/my_cats.html
+- cat_photos/
| +- cat1.jpg https://example.com/cat_photos/cat1.jpg
| +- cat2.jpg https://example.com/cat_photos/cat2.jpg
| +- index.html https://example.com/cat_photos/
|
+- index.html https://example.com/
You should put an index.html in the root of your site to serve as the homepage, but apart from that, the organization is up to you.
Log in
