Neocities Basics

Things to Know About Neocities

So, you have decided that you want your own website and thought Neocities.org is the way you want to go? That’s great! Neocities is a great platform for testing the waters for your first website. It’s free and highly accessible, and as many have shown, you can showcase great designs with it.

Starting Off

This isn’t going to be a tutorial of sorts, so I’m not going to go into detail about signing up and all that. This is more to inform you of code related things that you can do right away to start making the website for everyone.

First Steps

Starting off, you will notice multiple files that Neocities gives you. The index.html file is the most important. It is the entry point into your site. If you delete it, you will need to make another one. Also in the folder is an example picture, a not found page, a robot.txt file, and a stylesheet in CSS.

The first thing you should do is open the robot.txt file. This is a list of things for permissions. If you don’t want AI to scrape your data, remove the # mark from all the names and the Disallow. I strongly recommend you do that. Don’t forget to click save when you are done.

The Index

As I stated above, the index.html file is the most important file as it gets the audience into the site. Let’s go over a couple of things. at the top is a line that says . This is to let the system know it is an html file, just in case it couldn’t already tell. After that is the code, wrapped up in a html tag. It had an opening tag, and a closing tag denoted by the / before the tag name. Most, but not all, html tags need opening and closing tags. All the actual content will go between the opening tag and closing tag at the bottom. Now, there are two more tags under the html tag in the hierarchy. The head tag and body tag. The head is meta data and similar things, and the body is the content you want on the actual screen on the website.

The Head

The head deals with metadata and file connections. Assuming that you are looking at the default index.html that Neocities gives you, you will see two meta tags present. These deal with the language encoding and the screen size, and you will probably never have to change them. Now the title tag, that will actually get rendered. If you are using a browser with tabs, the text that you see on the tab is the content between the tags. You can change it and the title will change on the tab. The last item is the link tag. This is the one that allows you to bring in other files, in this case the current css file. There are several different kinds of links, such as style links and script links, and links to fonts. I won’t cover them here, for now just know that’s how you connect external styles.

The Body

P

Ah, the actual content of what you want people to see. Let’s start with the most basic tags first. The p tag is the paragraph tag. Things you put in between p tags are rendered by default in a paragraph. Simple.

A

The next tag in the a tag. This is an anchor tag. They are links to parts of your website and to other websites. the href attribute is where the link will go. The default links to the Neocities homepage. You can change that to anywhere you please. The text between the opening and closing tags is what will be the link. The default here is Neocities, again you can change that to whatever you want. One import thing you can do with a link is the have it open a new tab to that link. Currently if you click the link, you are sent to the homepage. To do this, simply add the target=“_blank” attribute to the opening tag, like so:

<a href="https://neocities.org" target="_blank">Neocities</a>

If you have added this, go ahead and save the file and look back in on your site. The link should redirect now in a different tab.

Strong and Em

The strong and em tags are there to change how words in a paragraph are displayed but also how screen readers interact with them. Strong is the equivalent of bold, em is italics. However, if you want to make words bold and italic for purely visual, there are other ways that won’t be discussed here, as it involves CSS.

Ul and Li

The ul tag is an unordered list. Like most html tags, it has some default styles that you can change using css, but items in it will be denoted by a dot by default. There is a tag not used here, the ol. This is an ordered list, and uses numbers for its items. The li is a list item. Pretty simple. Like most html, you can nest other tags in it. So if you wanted a list of links, put the anchor tags between the li tags.

Img

The image tag. I left this one towards the end as it can be a bit tricky. The only attribute present in this code is the src attribute. This is the source, the location of where this image is. It could be in the same project, in this case the same folder, as the html file, or it could be hosted online, so you would use a url as the src. The tag has other attributes you can give it, such as width and height, which can be changed using css, but there is a very important attribute missing from this tag. The alt attribute defines the alt text of the image for screen readers. I strongly encourage you to add a brief description of the image, such as the one here:

<img src="/neocities.png" alt="The Neocities cat logo with the text 'Hosted by Neocities'">

Adding this to all your images will make your website more user friendly, accessible, and welcoming.

H1

Despite being the first tag, I left this one until last. This is because there are multiple kinds of heading tags, h1-h6. This blog post used h1-h5. Now why they are tricky is because of how they are used. Typically you want to start with an h1, used for things like titles of pages. However, each page should only have a single h1. From there, you can nest heading tags in an organized way. Say you want the page to have the title, and three sections each with a title. You would use the h1 for the title, then each title for the sections would be an h2. Now, one section has two subsections, each with a title. h3s are used in that case, and so on. This not only helps organize your code a bit on the page, but helps screen readers immensely to denote content separation.

Alright, I’m cutting myself off there, I’ve already gone into way more detail that I thought I would. Hopefully in my next post I will go more into detail about that style sheet, and how you can start making your website look how you want.

If you have further questions, just use this website to get ahold of me, either through email or using that contact form. And if you want a website and can pay someone to build it all out to be more bespoke, also feel free to get in touch. I would love to hear from you.