So you want to make your own Website?

Intro

What a Website is Made of

A website at it's most basic is usually just a HTML file, most commonly this will be named index.html as this is the default page that websites redirect to if a specific file (such as test.html) isn't specified at the end of the URL !
HTML stands for hypertext markup language, and it essentially acts as the structural pieces of the document.
You then can also have CSS (cascading style sheets) which does the styling of all the pieces of the document, tells it where to go and what colour and size etc it should be. And then if you're getting super fancy you might add in some JS (javascript) to change the behaviour of the page in a multitude of different ways ! There's a lot more to it that I will go into some detail later on but for now this will do :3

Where a Website Can Live

So say you've got an index.html file, and maybe even some css or js in that file (or in another file that the html file references!), you can open it up on your computer and view it but unless you send the file to someone else they're not going to be able to see it just by typing a URL into their browser. If you're just starting out, it's probably a good idea to look into finding a webhost online that you can use to host your code once it's ready for people to view. Neocities is a good free option but there are others out there if you want to look for other options !
Once you've signed up and made an account on a site like neocities, most webhosts do have basic index files and maybe a css file to go with it for you to start with. But you can also just make the files yourself and then upload them to the web host when they're ready or after you've made changes to them!

What to Use to Code your Site

The neocities editor is fairly limited, and sometimes you might also want to work on things before saving it on neocities for everyone sees it. My personal recommendation for code editors is to use visual studio code with the live preview extension !

Gettitng this set up and working!

Install visual studio code
Install specifically Microsoft's live preview extension, there are other extensions that do similar out there however in my experience microsofts works the best
open your entire folder where ALL the code you upload to your site will be, this is the "root" folder of your site. If you're using neocities you can download your site's contents as a zip and use the folder from that as your root folder.
open a html file that you want to preview from the folder in vsc
click the little icon on the top right of your code that looks like this
optionally you can copy the url from the live preview pane into your browser to see it in there rather than in vsc (you can close the preview tab in vsc if you want to at this point)

With the live preview extension your pathing will all be relative to the root folder that you oppened in your Visual Studio Code, and will also automatically refresh each time you make a change, clearing cache each time, and display an up to date preview of your code.

HTML

Tags and Elements

HTML is made up of elements, and each element has a tag, most elements have both an opening and a closing tag. An opening tag for an element consists of an open angle bracket "<" the name of the element type, which can then be optionally follwed by any attributes for the element, and then a closing angle bracket ">", e.g. <html>. Most elements also have a closing tag that is the same as the opening tag except for the addition of a forward slash "/" before the name of the element type.e.g.</html>. In between the two tags of an element is the actual content of the element, and can include other "child" elements within it. There are some elements that do not require a closing tag as they are self closing, these are usually elements that do not have any content within them, such as the image element (<img>).

Attributes

Any element in HTML can have any number of attributes, there are a few common attributes you may define for an element, and some elements require certain attributes to function as intended. The method of defining an attribute for an element is simple; you append it into the opening tag (or tag, for those that don't have closing tags) after the element type name but before the closing angle bracket ">". for example image elements need to know what image they are meant to be displaying, this is known as the source of the image and is defined using the "src" attribute, I go into more detail on what this means in the section on the image element, but to demonstrate how you would define the src attribute this is what your code may look like; <img src="/path/to/image.png"> You can also have multiple attributes separated with spces for one element, like so; <img src="/path/to/image.png" alt="Alternative Text">.

!DOCTYPE

The first element that any HTML document must include, is a declaration of the document type. In older versions of HTML, before the present day HTML5, this declaration would contain a few things, but since the usage of HTML5 is now commonplace the declaration need only be <!DOCTYPE html>. This declaration does not need a matching closing tag.

html

After you have defined your document type as HTML, the first element that gets defined is the html element, you typically will also have a closing tag for it that will generally be at the end of your HTML document. All other code should usually be between <html> and </html>.

head and body

After you've got your html element written, there's usually two elements that things go into within the html element. There's the head <head></head> and the body <body></body>

div

Now we're at the good stuff, technically you can just put strings of text directly in the body element, but most commonly people will use div elements to contain pretty much everything.<div></div> Div as in division, it's a division (i.e. a divided part) of your page, and you can have as many as you want. You can also put divs within divs within divs, and then later one once you get to using CSS to style your elements you can do loads of things with each div. If you want a simple way of thinking of a div for now though, think of it as a box that you can put things in that for the most part has no predefined properties.

span

One thing you'll notice about divs is that unless you've used some CSS to define their properties to allow for multiple divs on one line, is that each div takes up the full width of the page regardless of the content on it, and subsequent divs are placed on a new line. A quick and easy alternative to using a div for short things you want to have on the same line as eachother, is to use the span element. <span></span> The span element spans only the width of the content within it, meaning that subsequent spans will be able to fit next to eachother on the same line. And as with divs you can have spans within spans, or even spans within divs or divs within spans and so on and so forth.

a

The a element stands for anchors, but generally most people understand it better when referred to as a link, because it anchors (links) to other pages, whether it be on your own website or anywhere on the web. The a element does hence need to know where it's linking to, which is defined using the href property on the opening tag. In the href property you can either use a direct full URL to the website you want to link to, or you can use a relative path for pages within your own website, you may want to check the section on paths and relativity down below if you are linking within your own site. Another common attribute that gets used within a elements is the target attribute, which defines how the link should be opened. By default links will open in the same tab as the page you're on, but if you want you can use the target attribute to make it so that it opens in a new tab by defining the target attribute as "_blank". <a href="https://example.com" target="_blank">Example</a>

img

The src can be either a path of your own website, defined either relative to the current page or the root of the website (see the section on paths and relativity for more on what this means) or a full URL to a specific image. On the small web it is usually preferred that you upload and host your own images within your site, as opposed to "hotlinking" to images elsewhere as this not only increases your page's load speed, doesn't use up other people's site bandwidth (though this is less important in the modern day as bandwidth restrictions are often much higher than they once were and is no longer as precious a resource), but most importantly it means that you control the image and it is less likely to fall victim to being deleted by a third party and lost to time.