How do I make my own sites?

Firstly, I'd like to welcome you to the world of web development - I know you're gonna love it

Imagine the web were a canvas, bare and boring, and the paint is HTML + CSS. This page should get you set for making your first website! how exciting

Getting Started

To start writing a website, you're gonna need a text editor. Literally anything will do, but I recommend using one with colour coding and automatic indentation, since it will make it easier to read and understand your code. Right now, I'm using Visual Studio Code, but you can use something as basic as Notepad if you really want to -- literally just use anything to type your code up, and then save it as a .html file
You should call your homepage index.html. This will make it your default homepage. From there, you can made the pages whatever.
As for hosting, you can either e-mail me all your files and I will host them under this domain, or you can figure out your own hosting. Neocities is an extremely simple way to get your site onto the web.


The Basic Template

HTML code is made up of tags. You can think of these as labels which tell the web browser what we want to be shown.

<html>
<head>

This is inside the HEAD tag

</head>
<body>

This is inside the BODY tag

</body>
</html>

First of all, please notice how the tags are set out. The name of the tag is between a set of less-than and greater-than signs. You will also notice that they come in pairs. To close a tag, simply take the tag and put a '/' before the name.

We begin by passing the <html> tag. By starting with the <html> tag, we tell the browser that what it's about to read is HTML code, and to understand it as such. Everything we want to tell the browser must be within these tags.

Let's take a look at what we put inside the <html> tag...

This tag is going to contain all the things not displayed in the main browser window, like the title of a page shown in the tabs bar.

Titles

Without even knowing HTML, you could probably tell me what we would call the tag that holds the title... <title>. And here's the <title> tag for this page:

<title>HTML 101</title>



The <body> Tag

The <body> tag contains what's shown on your webpage. Please read on for the basics of how to display text and links.

Displaying Text

To display text, you would use the <p> tag.

<p> Hello World! </p>

There are a variety of ways you can change the style of your text, such as make it bold, underlined, italic, subscripted, superscript, highlighted or crossed out
Let's take a look at the tags we use for this:

Text Styles HTML tag
Bold <b>
Underlined <u>
Italic <i>
Subscript <sub>
Superscript <sup>
Highlighted <mark>
Crossed Out <del>

As I mentioned before, tags come in pairs. To style some text, you simply surround it with the tags.

<b>This text is bold</b>
<u>This text is underlined</u>
<i>This text is italic</i>


Headers

There are 6 headers for you to use, and you're probably only gonna ever use 3. The tags are: Here is what the main heading for this page looks like in HTML:

<h1>How do I make my own sites?</h1>


Links are how you would direct your visitors to other sections of your website, or to entirely new sites. Thankfully, they're extremely easy to get the hang of.

<a href="website.com">Website</a>


You should be famililar with how tags look at this point, but- what's href=""??
It's just the way you pass the link into the browser - it needs to know where to take you.
In between the <a> tags, you need to put the text you want to be shown in place of your link.

Images

Now, let's add some visuals to your page!

The syntax of the <img> is:

<img src="your_image.jpg">

src="" is what you need to use to tell the browser where the image is.
If your image isn't the size you expected, you can use height="" and width="" to change the size.

<img src="your_image.jpg" height="500px" width="500px">

You can play around with the size of your image in pixels (px) or in percentages (%). The percentages are relative to the size of the window - it you set the width to 100%, it will span across the whole page.