Oh, no! It's Noah! presents...

Table of Contents

A web-zine about HTML, CSS, and the Indie Web

1. Intro/The Indie Web

Modern websites kinda suck, they all look the same. Almost every website now a’days has the same sleek, bland, and empty vibe to them, to make them as “user friendly” as possible. Most people only use the same 3-5 websites daily, all with that dumb, boring look, but it wasn’t always like this. In the early days of the internet, the web was cluttered with all sorts of fun websites, with things like blogs, shrines, webcomics and all sorts of other neat things! But the biggest thing that made these so unique was that they almost always had personality, as a lot of these websites were personal websites.

Back in the day, instead of making an Instagram account or whatever, you would just make your own website! There were a few things that made this possible. One of the most common services that allowed people to make their own personal websites with ease (and for free) was called Geocities. Geocities would allow anyone with an internet connection to make their own website, giving them digital creative freedom to make whatever they so wanted.

Over time, Geocities would shut down, and the internet would replace these personal websites with boring corporate websites for crappy start-ups and whatnot. When it seemed like the era of personal websites were long gone with the internet already into full social-media swing, a guy on Twitter decided that the world deserved this digital creative freedom once more, and created Neocities in 2013.

Neocities was virtually the same thing as Geocities, however what would come out of it was vastly different than Geocities. There were still tons of blogs, and shrines, and junk like that, but with how the internet had evolved, there were now games, widgets, and even more cool stuff to try out and mess with! But at the end of the day, these were still people’s own websites that they had put their own personal time and effort into, breeding a new side of the web; the Indie Web. In a capitalistic dystopian wasteland that is the internet, YOU can help fight fitting in with these corporate agendas by making your own website, which is what I’ll be teaching you to do in this zine!

2. Setup

Although you can directly go into Neocities and do everything from there (editing, file management, etc), including following their built-in tutorial, I recommend you create everything for your site before you post it on the web, just so you can already have a somewhat-finished looking site right after you make your account, as opposed to making every tiny change one by one. This is also a good practice so you can have the freedom of prototyping stuff and trying out things without worry of everyone on the internet seeing your attempt at trying something new.

Here are the things you will need before getting started:

  • A text editor
    • Your computer should come with one of these. For MacOS, there’s TextEdit, For Windows, Notepad, and Linux comes with Vi. I personally recommend trying out other editors too like VS Code, Sublime Text, and Emacs
  • An empty folder
    • Preferably put this in an easy-to-reach place like your Documents folder, or maybe even pin it somewhere
  • A web browser
    • Any browser will do :)

3. HTML

What you will be using to make your website is a markup language called HTML, or “Hyper-Text Markup Language”. A “markup language” is a type of computer-programming language that is used to control the formatting, structure, and relationship between text, images, links, and more. This language turns easy(ish)-to-read text into something that the computer/browser can render as a website. HTML works off of a system of tags. Different tags give different elements of your file definition. Most tags typically require an opening tag, and a closing tag, for example: 

<html>
  <body>
    Hello World!
  </body>
</html>

NOTE: Keep this bit of code in mind for the next section! Here is some basic HTML code that will soon become your website! As you can see, everything is organized with tags, with some tags being nested in eachother. The “<html>” tags tell your computer/browser that everything in-between those tags is HTML code, while the “<body>” tags tell it that everything in-between those are the body of the web page. An opening tag is specified by just putting whatever something is in a pair of less-than and greater-than symbols (<>), with a closing tag being specified with a forward-slash before the word (</>). Even though everything in this is technically already defined correctly, the more specific you can be, the better, which we’ll talk about in the next section.

4. Making Your First Web Page

Now that you understand the most basic level of HTML, we can get to actually making you first web page! The first step is to open whatever editor you choose to work in, and just recreate the bit of code from the last section, however, change the text “Hello World!” with whatever you want! For this example, we’re going to use “Noah’s Home”, but again this can be whatever you want. 

<html>
  <body>
    Noah's Home
  </body>
</html>

After you do this, save the file in your empty folder as “index.html”. Congrats! You have made your first web page! This file will become your home/landing page. The “index” is the home page because it is the default file delivered by a web server. As you’ve probably noticed by opening it in a web browser, the web page is super basic. This is where using more tags and being more specific with your elements comes into play! As the last section stated, the more specific you can be, the better. Let’s start by specifying just what kinda text that you already have is. We’re going to add a 1st Heading tag to it, which is represented by “<h1>”. 

<html>
  <body>
    <h1>Noah's Home</h1>
  </body>
</html>

After you do this, save the file and view it. You’ll notice that the text is now big, LIKE A HEADING OH MY GOSH!! IT ALL MAKES SENSE NOW!! Now that we have the heading of your page we can get to adding a tiiiiiiny bit more. Let’s add some normal text under the heading. As we’ve seen, adding text into the body will simply just print the text as basic as possible, no formatting or anything. However, now that we’ve messed around with “<h1>”, let’s look into your best friend; the paragraph tag (<p>). This tag makes whatever content you have it a paragraph. This is good for, of course, just labeling what an element is, but also if you have a lot of content on a page that you want to be separated as paragraphs. Let’s add some text now as a paragraph. 

<html>
  <body>
    <h1>Noah's Home</h1>

    <p>This is my website!</p>
  </body>
</html>

Save the file and view it. Now that you have practiced the bare-bones of HTML, you can add more headings, or paragraphs to it as you would like! Experiment different tags too, like 2nd Heading (<h2>), Line Break, (<br>), and more! Don’t be afraid to look up a few things if you still don’t understand, or if you want to try out more stuff. The final thing we’ll add are Head tags. The head tags are where meta-data go, like the page title, which we are also going to add! The head tags should be formatted like the body tags, as an area rather than around a specific piece of content. The title tags can be used as any other tag. Combined, we should get something like this: 

<html>
  <head>
    <title>Noah's Home</title>
  </head>
  <body>
    <h1>Noah's Home</h1>

    <p>This is my website!</p>
  </body>
</html>

Save your file and view it. The title will appear in the tab of the web page on the browser!

5. Links, Lists, Images, Oh My!

5.1. Links

You have already made your first web page. Congrats! As cool as your web page may be, there are still a few things we can add to make it even better. The first thing we should do is make it more interactive is adding links! Links (or Hyper-Links) are what the make the internet the huge “web” that it is. Let’s start by adding a link to another site! The site really doesn’t matter, just link to your favorite website or youtube video! Link tags are a little more complicated than other tags. A link tag looks like this: 

<a href="https://http://info.cern.ch/hypertext/WWW/TheProject.html">The first-ever website!</a>

Let’s take a moment to dissect this. So if you look at this at a basic level, it’s just like any other tag. You have the open “<a>” at the beginning, with the matching closing tag at the end, “</a>”. The only thing that makes this difficult is the properties, aka the part of the tag that tells your computer/browser where exactly to link to. For this example, it says that the “href” (stands for “Hypertext REFerence”, but basically means the link destination) is equal to/leads to “http://info.cern.ch/hypertext/WWW/TheProject.html”. The link reference/link destination must be in double quotes. After that, you can add whatever content you want in-between the tags, just like any other tag! You can also link to other pages on your site locally, by making the reference the file directory/location of the file you’re linking to (more detail on linking things locally in the Images sub-section). From there, you’re page should look like this! 

<html>
  <head>
    <title>Noah's Home</title>
  </head>
  <body>
    <h1>Noah's Home</h1>

    <p>This is my website!</p>

    <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">The first-ever website!</a>
  </body>
</html>

Save it and view it in your browser. As you might notice, the whole phrase “The first-ever website!” is the link, however you can add links as one word, a few, or anything else really! You can also make images links, but we’ll discuss that a little later on. Just as an example of adding a link in a phrase, if we wanted to make just the word “website” a link, we would write something like this: 

The first-ever <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">website</a>!

The link is only affecting the one word because that is the only word that is told to have that link, while all the other text is outside of that link tag. It is gonna look kinda weird when writing some form of long text that has links scattered about it, but you will get over it fairly quick. Another thing to note is links typically aren’t used as formatting tags. For this example, we are using it like it is a formatting tag, however when linking something, you’re usually doing it inside a paragraph tag. Just something to keep in mind :).

5.2. Lists

Now that we know how to add links, let’s learn how to make a list. This may seem like an arbitrary and irrelevant thing to know, but this actually can be very useful! The biggest practical application of lists are using them as a menu for your website! A list is pretty simple, and really only consists of two tags; the type-of-list tag (Unordered List; <ul>, and Ordered List; <ol>) and the List-Item tag (<li>). Here’s an example of a simple unordered list: 

<html>
   <head>
    <title>Noah's Home</title>
  </head>
  <body>
    <h1>Noah's Home</h1>

    <p>This is my website!</p>

    <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">The first-ever website!</a>

    <p>My favorite school subjects:</p>
    <ul>
      <li>English</li>
      <li>Math</li>
      <li>Science</li>
    </ul>
  </body>
</html>

I added a bit of text before it just to give some context. An example of an ordered list would be the same thing, just with the “<ol>” tags instead of “<ul>”. Lists can be used for all sorts of things that go great with a personal website, like listing your favorite albums, talking about different tools you use, or even just making a public to-do list of stuff you plan on adding to your website. If you wanted to use a list as as a menu, all you would do is add links as the list items, like so; 

<ul>
  <li>The next list item is a link to my website</li>
  <li><a href="https://ohnoitsnoah.com">ohnoitsnoah.com</a></li>
</ul>

There are a bunch of cool stuff you can do with lists in terms of formatting and customization, but we’ll cover that in the next main section.

5.3. Images

The last (and one of the most useful) thing we’re gonna cover in this is how to add images. Images make websites a little more pretty to look at, and can be used in very creative ways, like making a portfolio, adding little graphics and buttons to your site, and overall just elevating it a bit from just straight text. Even just adding a background image can change the vibe of your site drastically. An image tag has two parts, the tag indicator, and the source of the image, which is the file location of the image. Together, they combine into an image tag, and looks like this: 

<img src="./image.png">

As you may have noticed, there is no closing tag. This is because all the content is contained within the tag attributes, specifically the “src” attribute, which tells your computer/browser where the image you want to use is on your computer. This is where good image/file naming and file management comes into play. When adding an image to your web page, you typically would want to make sure the image is in the same place as the file you’re using it in is. On that note, you would also want the name of the image file to be easy to type/remember, since the way you insert an image is by typing it’s location and name. If an image you’re using in a file is in the same folder/directory as the file that is using it, the source of the image would be typed as “./[file name and type]” (this also applies to linking to other web pages). The “.” means the file is in the same folder/directory as the image. While this may seem like the best way to add images, it could also cause your website folder to look messy, with different file types scattered about. The way I recommend you add images to a site, is by having a dedicated sub-folder in the main website folder/directory for images. The way you type the image source attribute stays the same, but now instead of the “.”, you type the name of the folder that the image is stored in. For example, if we had an image of a cat named “cat.png” in a sub-folder named “images”, the way we would add that image is like this: 

<img src="images/cat.png">

Now that you know how to add images, try adding an image to your website! For me, I’ll use my profile picture, which I will put in a sub-folder in my website folder titled “images”! 

<html>
  <head>
    <title>Noah's Home</title>
  </head>
  <body>
    <h1>Noah's Home</h1>

    <p>This is my website!</p>

    <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">The first-ever website!</a>

    <p>My favorite school subjects:</p>
    <ul>
      <li>English</li>
      <li>Math</li>
      <li>Science</li>
    </ul>

    <img src="images/pfp.png">
  </body>
</html>

You can also use an image off the internet by putting the image’s URL as the image source in the tag.

5.3.1. Optional - “alt” Attribute

An optional attribute that you can add to an image tag is the “alt” attribute. This give an image alt-text, which is useful for accessibility, as well as captioning. This is an example of an image with an alt attribute: 

<img src="./image.png" alt="An image">

6. Optional - CSS and Applying It to Your Website

NOTE: This section is optional, but covers a lot of cool stuff like using different fonts and colors, adding background images, styling certain parts of your website, and more! If you REALLY don’t care about this stuff, you can skip to the next section. At this point, you should be able to understand the basics of HTML and have made your first web page. Great! Now that we know how to make a web page with HTML, let’s learn about a very helpful tool in making websites; CSS. CSS (or “Cascading Style Sheets”) is another programming language that is used to expand HTML’s looks, making it easy to style HTML code. CSS is able to be linked to through HTML as a separate file, which keeps files clean and clutter-free. Linking a CSS stylesheet is super easy. All you have to do is add a Link File tag in your HTML file of choice in the head tags. The link tag is different from the hypertext-links tags. These link tags use the tag indicator “link”, and has relationship (“rel”) and reference (“ref”) attributes. It should look something like this: 

<html>
  <head>
    <title>Noah's Home</title>
    <link rel="stylesheet" href="style.css">
  <body>
    <h1>Noah's Home</h1>

    <p>This is my website!</p>

    <a href="http://info.cern.ch/hypertext/WWW/TheProject.html">The first-ever website!</a>

    <p>My favorite school subjects:</p>
    <ul>
      <li>English</li>
      <li>Math</li>
      <li>Science</li>
    </ul>

    <img src="images/pfp.png">
  </body>
</html>

The RELationship of the link with the HTML file is a stylesheet, with the REFerence being the file name. Typically, the filename of the CSS file is named “style” or “styles”, followed by the file extension, “.css”. At this point, you should make a new file titled “style.css”, or something equivalent. Now that you have that file, let’s break down the elements of a CSS file. An example of a CSS file looks something like this: 

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

CSS consists of two main elements, the tag you’re styling (the Selector), and the attributes that actually style the tag (the Property and Property Value, combined; the Declaration). As you can see in the example, the tag that is being styled is the Heading-1 tag. The attributes of the h1 tag are placed in a pair of curly brackets, attributes like the color of an h1 tag being blue with a yellow background, as well as a black border that is 1 pixel in size, and solid. A VERY important thing to note is to ALWAYS put a semi-colon (;) after the end of a completed declaration. “Why,” you may ask? Well the answer is simple: because. Anyways, for MY example, I’m gonna make the heading-1 yellow, the paragraphs white, and the lists red. That would look something like this: 

h1 {
  color: yellow;
}

p {
  color: white;
}

ul {
  color: red;
}

a {
  color: gold;
}

NOTE: You can also use HEX color codes in place of the color names for a more precise color. Once you save this file and open your index file, you should see the changes. You may have noticed that the lighter colors are kinda hard to see, but the reason I chose these colors is because I’m going to add a dark background! The next thing we are going to learn is how to add a background image. While this can be done in plain HTML, it is more convenient to do in the stylesheet, as it is easier to add to multiple files on your site (which we’ll talk about later :winkyface:). The way you add a background image is super easy. All we have to do is just add a “background-image” attribute going to the body of the web page, with the attribute having the url of the image. It should look something like this: 

body {
  background-image: url('images/bg.gif');
}

h1 {
  color: yellow;
}

p {
  color: white;
}

ul {
  color: red;
}

a {
  color: gold;
}

Now if you save this file and open your index, you’ll see the image of your selection as the background of your web page. Nice! Now that we have a background image, let’s mess with fonts! Changing fonts is as simple as changing the color of a tag. While you can have different fonts for different tags, I’m just gonna put the font family in the body tag, so it affects the entire file. The default font for HTML is Times New Roman. Personally, I’m a big fan of this, and think Times New Roman is a key element in what makes the old-web look so nice, but let’s change it up a little bit to Arial. The way we’d do this is with the “font-family” attribute/propery, like this: 

body {
  background-image: url('images/bg.gif');
  font-family: "Arial";
}

h1 {
  color: yellow;
}

p {
  color: white;
}

ul {
  color: red;
}

a {
  color: gold;
}

Now save this file and open your index. Bam!! Easy styling done quick. Again, feel free to look online for more resources on even crazier stuff and for other tutorials and guides. There will be a section towards the end of this zine that has a list of resources that are helpful.

7. Uploading to Neocities

Now that you have a folder/directory that holds a full website, it’s time to put it on the World Wide Web! The way were are going to do this is through https://neocities.org, which (as I mentioned in the intro) is a free web-hosting service which gives people 1GB to do whatever they want with, which is a small limit for indie/old websites.

The first thing to do is to make a Neocities account/website. If you’ve never used Neocities before, it is the first thing that appears when you go onto the site (the sign-up). Here you will be asked to name your website (<blank>.neocities.org), give a password and email, and prove you are not of electronic descent. After all of this, you are given your own little slice of the web, all for free!

Neocities has it’s own file manager and text editor, making it easy to upload files, make changes, and organize your files all within Neocities. After you login, click on “Edit Site” from the drop-down menu or any button that says the same thing. After you click that, you’ll be greeted by a file manager with a pre-made "index.html", a "style.css", and a "not_found.html". Since you already have made you’re site, you’re gonna wanna delete everything but the “not_found.html”, as you’ll need that to give a proper “this page doesn’t exist” if someone goes to a non-existent page on your site instead of a weird “connection not found” or whatever on their browser. The next thing to do is click the Upload button and select all your files and folders that you have on your site, which would be your index.html, style.css, and your image folder if you made one, etc. After that, you’re page is ready to go.

Once you go to the web address/URL of your site, you should see your page(s) up for the whole internet to see. Congratulations! You have successfully made a website!! Pop the champagne, pull out the sparklers, it’s party time!

8. Resources

Although I have taught you the basics, there is still much more to learn from HTML and CSS, as well as another programming language that can be used for more complex and interactive things called JavaScript. Here are a few resources to help you learn more and more about web development.

8.1. HTML, CSS, and JavaScript

  • https://developer.mozilla.org/ This website has references and guides for HTML, CSS, JavaScript and much more. They also have “cookbooks” on making completely new things with those languages, as well as tools such as a color picker and generators for certain things
  • https://www.w3schools.com/ W3Schools is “the world’s largest web developer site,” (according to them). Along with references and interactive guides for everything we’ve covered + JavaScript, they also offer guides for other web development stuff like SQL, Python, Java, and more, as well as some non-web development languages like C, C++, React and a few more
  • https://www.htmldog.com/guides/html/beginner/ This is a simple tutorial that goes a little more in-depth with what we covered here, as well as touching on a few other things like tables and forms. They also offer a CSS Beginner Tutorial and a HTML Intermediate Tutorial, however this tutorial specifically only covers HTML basics
  • https://www.codecademy.com/ Codecademy is a general learning resource based around programming with tons of courses ranging from tons of different aspects of programming from software engineering to cyber-security. The offer a free HTML and CSS Course. Majority of their courses are paid however
  • https://sadgrl.online/learn/ This is another simple/basic guide to HTML and CSS (along with Snippets), however it touches on each individual aspect of basic web development as their own things, along with some guides on basic Neocities stuff like working around the website and stuff. sadgrl.online is one of the most popular sites hosted on Neocities, and the main site itself has tons of other great resources which you should check out.

9. Conclusion

The world is always changing, and with it; the internet. There’s no telling what the future holds for the web, and by the looks of it, it doesn’t look so hot. Despite this, YOU can help fight against (the seemingly already failing) Web 3 and 4 by making your own websites, encouraging others to do the same, and supporting people on the web! The indie web is full of all sorts of people, ranging from all sorts of occupations and backgrounds, but the one thing that ties everyone together is the medium of the pure, raw internet. Empowering people instead of these major coporations breathes life back into the internet. While the best way to find new sites are by pure exploration, a very valuable resource is wiby.me, which is a search engine that only searches for indie and old websites. You can even submit your own! All that said, this web page will self-destruct in 3 seconds. Happy hacking!