Building a website for fun
Here's the question: Why have a website? After all, this is 2022 not 1995. We have loads of social spaces for sharing our thoughts and images, why go to the trouble? I'm not sure I can articulate the answer but it's similar to the reason one might grow a garden. We can easily go to the store to buy vegetables but with a garden we have control over the process, we get the vegetables we want and the satisfaction of seeing our labor turn into something tangible. Building a website by hand is the same. It's not something everyone wants to do but if you're interested let me show you how to get started.
Modern web design is complicated and the barrier to entry is high. Most pages use a raft of technologies, JavaScript, CSS, CMS and so on. These are great and allow institutions to create the web experience we all know but learning each of them is like learning a new programming language. This kept me from building a website for a long time. I felt like not having a huge stylesheet and a full content management system meant that I couldn't have a real website. Luckily, I found that making the conscious decision to avoid those technologies altogether freed me to make what I wanted. That sort of simple, bare bones web design is what I'll be covering here. It doesn't look as fancy but maybe there's something to be said for focusing on content over presentation.
First steps: Most large web hosts want you to use their content systems and templates. This is the opposite of what we're looking for. To get started, you want a shell account. Most shell accounts will let you host your own web page but they also give you access to a different way of interacting with the net. SDF is one of the oldest shell providers and is a great place to get started. In order to connect to a shell account you'll need to use a program called ssh. On Unix like systems such as Linux or Mac OS you can access ssh from the terminal. On windows ssh needs to be enabled first. Check this article from Microsoft for details. Once you're at the terminal you can connect using the command ssh username@ssh.host.name with your username and whatever the address of your shell account provider is. For example, I connect to SDF with the command ssh ipxfong@tty.sdf.org. If all of this seems a little arcane, check out this great intro to using a terminal.
Getting Set Up: Once you have a shell account you'll need to create the space for your website. This process is different for every account provider. On SDF you can follow this tutorial this tutorial. Check the documentation for other providers, they should have something which explains the process of setting up a website. To create your web page, you'll be using a text editor. There a bunch of different editors that range from simple to complex systems that attract followers who will defend them with almost religious fervor. Don't worry about any of that. Most tutorials reference a text editor called Nano. This was the simplest editor "back in the day". It's a fine choice but its command structure is old fashioned. If you're used to a modern graphical interface you might find Micro more to your liking. It has mouse support and it's commands are likely to be more like what you're used to: ctrl+c and ctrl+v for copy and paste, ctrl+s to save and ctrl+q to quit. Both Nano and Micro are available on SDF, on other providers the environment may be different. To use the text editor type micro filename where filename is the file you want to edit or create. For example I would type micro index.html (or nano index.html) to edit the file index.html. If the file didn't exist, it would be created automatically so I could work on it.
HTML: At its heart a web site is a collection of text files which can be linked together by the browser. These files are written in HTML. This has become quite complex but it doesn't have to be. An HTML document is jut a plain text file that contains a bit of extra information that tells the browser how to present the text (should it be bold or underlined or whatever), how it should be arranged on the page (paragraphs, lists and so on) and how the documents should be linked together. By convention documents written in HTML have a filename that ends with .html though this isn't critical. An HTML file tells the browser how to display the file by using tags. Tags are extra bits of text that don't show up on screen but instead tell the browser how to present the information. Tags look something like this: <b>this text will be bold</b>. The tags are the bit in between the < and the >. In this case b tells the browser to make the text bold. Tags often come in pairs, a start tag and and end tag. The text between the tags is affected by the tags. End tags are the same as regular tags but always start with /. Here <b> tells the browser where to start making the text bold and </b> tells it where to stop. Not every tag needs to be followed by a closing tag those that don't operate on text (like adding horizontal line) are often one and done. Some tags also contain a little extra information which we call attributes. We'll see more about this when we look at links. One thing to keep in mind, HTML only uses tags for formatting so if you document is formatted with blank lines and paragraphs they won't show up in your web page unless you also include tags. Here are some of the formatting tags I use:
-
<b></b>: Bold
-
<i></i>: Italic
-
<s></s>: Strike Through
-
<u></u>: Underline
-
<code></code>: Make the text look like code.
-
<pre></pre>: Pre-formatted text. That is use the formatting in the text file. Different browsers interpret this in different ways and it doesn't always work like you might expect.
-
<p>: Start a new paragraph.
-
<br>: Insert a line break.
-
<hr>: Draw a horizontal line across the page.
-
<center></center>: Align the text in the center of the page.
Lists: Lists are a great way to organize information in an HTML document. HTML supports two kids of lists: Ordered lists <ol></ol> where every item gets a number and Unordered lists <ul></ul> which use bullet points instead. Lists are slightly more complex since they require two sets of tags the ol or ul to enclose the entire list and a second set of tags, <li></li>, to indicate each item on the list. Anything you want can go in a list item, even another list. This is a great way to make outlines. A simple list would look something like this:
<ol>
<li>Item One</li>
<li>Item Two</li>
</ol>
The Structure: An HTML document needs a few more tags to make it into a web page. Each page should start with the line <!DOCTYPE html>. This lets the browser know what kind of document to expect. Next we need to enclose the rest of the document in a set of <html></html> tags. Inside the html tags there are two parts: <head></head> and <body></body>. There's lots of information that can go in the head section but for our purposes the important part is a pair of <title></title> tags. The text inside the title tags is displayed in the title-bar of the browser. The body section contains the part of the document that gets displayed as the web page. The final bit of structure we'll talk about is the <div></div> tags. div lets you organize you documents into discrete sections. You can also give these sections an ID which makes it easy to refer to them from other places in your document. You do this by modifying the start tag to add the id attribute. It looks like this: <div id="someName"> the closing tag is unchanged.
Linking it All Together: Links are the defining feature of HTML. They can link to sections of the current document, to other pages in your website and to different websites entirely. To make a link you use the <a></a> tags. The text between these tags is what will show up as the clickable link on the web page. These tags are modified to tell the browser what to link to using the href attribute, similar to the way we modify the div tag to give it an ID. There are three broad classes of things you can link to.
First you can link to parts of the current page. To do this you need to first have a named div. Let's say your page has a section for cool cat pictures. You set up a div to contain them and it looks something like this: <div id="coolcats">Cat pictures go here!</div>. You can link to any div on your page as long as it has an ID by adding the attribute href="#DivID". The # tells the browser that we're looking for a section on this page. So to link to our section of cat pictures we would use: <a href="#coolcats">My cool cat pics!</a>. You also get a couple of freebies. Even if you haven't set up any divs you can always use href="#top" and href="#bottom" to jump to the top or bottom of the page. It looks like this <a href="#top">Back to the top.</a>.
Next you can link to other pages in the same directory. This works just like linking to a div except instead of using a # in our href we use ./ to tell the browser to look in the same directory (or folder) for a new HTML document. If, instead of putting our cat pictures in a div, we put them on a separate page called coolcats.html we could link to it like this: <a href="./coolcats.html">My cat pictures page!</a>
Finally, you can link to other people's web sites. To do this we include the whole web address in our href which looks like this: <a href="https://ipxfong.sdf.org">My cool web site!</a>
One more thing. If you want to link to a specific section on a page you can tack the #id onto the end of the href like this: <a href="./coolcats.html#felix">My cat Felix.</a>
Pictures: You can add pictures to your web page using the <img> tag. There is no closing tag for images. img has two attributes src which tells the browser where to find the picture and alt which should provide a text description of the image. If you wanted to include a picture of your cat Felix on your page, you would put the image file (felix.jpg) in the same directory as the web page and add it to the page with the tag <img src="./felix.jpg" alt="Felix the cat chasing his tail">. There are all sorts of things you can do with the img tag like scaling and so on. If you're interested do a web search for "img tag html".
Special Characters: For whatever reason, HTML doesn't always show special characters like we might want it to. If you have a character you can't get to display correctly you'll need to use something called an HTML entity. Entities start with an & followed by a bit of text. For example, since the browser thinks that < is part of the html code it won't display. To get one on the page you have to use the entity < where lt stands for 'less than'. There are too many entities to list here but there are a bunch of pages have all the codes you could ever want.
Putting it All Together: To understand how all these parts fit together it's best to look at the HTML code for a bunch of web pages. If the page uses lots of scripts or CSS it probably won't be that useful to look at the code but a simple page (like this one) can be pretty helpful. To see the page source type ctrl+u. This works for most browsers though on MacOS I think it's command+option+u instead.
Final Thoughts: Now, you should know enough to build your own web page from the ground up. There's so much information about HTML on the web, a few quick searches should be able to provide info on any topic. Keep in mind, a lot of this information is directed at people who are looking for the latest and greatest. There's nothing wrong with that. But, there's nothing special about it either. It's up to you to decide what fits your needs. Though, in my mind, content is more important than presentation. If I add a bunch of fancy transitions or scripted styles to my writing does it improve the information I'm trying to present? Maybe? But, probably not.
What Next? There are so many things you can do with your shell account. Check out Gopher and Gemini, try IRC or play a MUD. Oh, if your spelling is anything like mine, from the shell prompt you can spellcheck your HTML files using the command aspell check <filename>. Have Fun!
Back to the top.
