Website Basics

Today, web pages can be created with a variety of tools and hosted on a variety of sites. This tutorial will focus on building a page from scratch using basic HTML and CSS.

One of the easiest ways to host an html site is to use Neocities, as basic sites are free and there is a large community willing to assist newcomers. There are many tools for editing html pages, Neocities includes one, but Visual Studio Code (VSCode) is one of the most common. Code can also be edited in a using a txt file editor like Windows' default Notepad app, with the file saved as a .html instead of a .txt, though this does lack a lot of formatting and tools that make editing and writing code easier. If the site is not currently being hosted, most common browsers like Firefox, Chrome and Edge can display html files by right clicking the file and selecting "Open with [browser]".

In your website's folder, there are two important files you must start with. "index.html" is your site's homepage, and "style.css" is your Cascading Style Sheet. This just means that you can make stylistic choices that determine how things across your whole site will look, as opposed to having to change every element by hand in the html files every time.

The very basic layout of your site's html files should look like this:

<html>
  <head>
    <title>Browser Tab Text Here</title>
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
    <p>Main content goes in the body section</p>
  </body>
</html>

You can get increasingly complex using things like dividers, ids and classes, but this is the basic layout. One of the benefits of Neocities or other html editors is that the basic structure of most pages will come set up for you.

Headers

They're big and bold and the code looks like this:

<h1>Lorem Ipsum</h1>


Paragraphs, what this text is, make up the majority of text, and their code looks like this:

<p>Lorem Ipsum<p>


To move content to the next line, use breaks (<br>) in between content you want to separate:

First row
<br>Second Row
<br>Third Row

Without breaks:

1 2 3

With breaks:

1
2
3