Tutorial: Basic Html

Introduction

HTML is the barebones of your website, it's usually what you want to tell people. HTML is mainly text, images, links and DIVs. That's what I'm going to go over in this tutorial!

You have to think of HTML is a bunch of those measuring cups you get when you're baking. There's a really big cup that holds all the little cups. So our really big cup is the <html> tag. Then they descend and hold more and more code.

Beginning with Html

Before you even begin coding, you absolutely need a code editor. This makes it easier to organise and get suggestions for your code. You can use the notepad on windows, visual code studio, the in-built Neocities editor or the one I use is Phoenix Code (this used to be called brackets!)

When you make your HTML file, you may see that it's completely empty. This is not helpful at all if you have no idea what to do. I recommend using a HTML Skeleton. This contains all the tags you could possibly need to begin coding.

Just a little tip! CSS is either contained inside of a <style> tag, a seperate .css file or inline with HTML. HTML is contained within a <body> tag. It's easy to get these two confused!

To follow along with this tutorial you'll need:

Text

Paragraphs:

Text is the most basic thing you'll ever learn when doing HTML. It's also usually the first thing you learn. This will be nestled inside of your body tag. You may notice that you can write text inside of the body and it will appear, however, you shouldn't do this in case you want to style your text, for example: putting a border around it or moving it to the middle, using CSS.To write a line of text, the code is:

<p>This is a line of text</p>

The correct way this should look inside of body:

<body>
<p>This is a line of text</p>
</body>

To break a line of text we use the <br> tag.

It's something like this:

<p>This is a line<br> of text</p>

You can also make a space between paragraphs by making another line of text in a seperate <p> tag.

<body>
<p>This is a line of text</p>
<p>This is another line of text</p>
</body>

Headings

You can make a heading using h1 all the way to h6 in a tag. H1 is your main heading and they descend as such.

<h1>This is a heading</h1>

And that code will look something like this on your site:

✩Yours won't be in cursive! Mine has a CSS style attached to it!

This is a h1 heading

Here's what this code will look like:

<h4>This is a h4 heading</h4>

This is a h4 heading

Styling Text:

You can do Italic Bold Strikethrough Underlined or small!

Using: i (italics) b (bold) s (strikethrough) u (underlined) small (small)!

Images

Images are what make your site unique. You can make your own using programmes such as Canva, Photoshop (Photopea if you don't want to pay, you can even load custom photoshop brushes!), Pixlr, Ibis Paint X and use sites such as Pinterest for inspiration.

So how do you insert images?

<img src="your image path here">

Now you can reference your image in 1 of 2 ways:

Locally

Ensure that your HTML file and the image are in the same folder, and all you need to do is reference the file location. For example: "images/decorations/button". If you're uploading to Neocities, upload first and then say "rename" and copy the file path. If you're not using Neocities, place it onto whatever server or cloud you're using.

"Copy Image Address"

It must be stated that this way is WRONG and that in 99% of cases, you should not do this. But I will mention it here for that 1% of times where you can.

Right click on an image and say copy image address. Then in your img src="" you place that link in the quotations.

Why this is wrong:

When should you do this?

Links

Links are handy little things you can use to take users to another part of your site or the internet. You can do this with this simple line of code:

<a href ="your link here">

You can put any link inside of the quotations and it will work.

I talk more about in my CSS tutorial how to style links, and styling links on hover, so go check that out if you don't want a bright blue link!

I thought I'd mention that you can make a link a picture. This is super helpful when making a button other people can put on their site. If you're making a neocities, get on this ASAP!

↑Click it!

The code to make this button:

<a href="link to your site"><img src="your image path here"></a>

☆A reminder that people do not have the direct link to that picture; make sure it has: https://yoursite.com/folder it is in/what the button is called.file type

Divs

A div is like a bowl that holds more code. We like putting things inside of divs because it helps with styling in CSS afterwards.

It's also easier to style a div that has a name, instead of a div that is just called div. Let me show you in the example below.

The code for these first 2 examples is the same.

<div> <p>This is example 1</p> </div>

<div> <p>This is example 2</p> </div>

Now watch what happens when I style them using CSS:

This is example 1

This is example 2

They're the same, right? But now when I want to make example 2's text pink...it makes both of them pink!

This is example 1

This is example 2

This makes it messy when we want to style with CSS. Let's try a different approach.

Let's use the <div class=""> attribute to give our div a name!

<div class="example1"> <p>This is example 1</p> </div>
<div class="example2"> <p>This is example 2</p> </div>

Now in CSS, when I make example 2 pink...

            .example2{
            color: pink;
            }

This is example 1

This is example 2


This is an easy and effective way of making sure your CSS applies exactly where you want it to. That is why we name divs. You can name your div whatever you want!

If you want an in-depth styling guide on divs let me know! (i'm probably going to do it anyway - I have no power nor internet😂)

Conclusion:

I hope this guide helped and explained some things for you! If you have any questions, ask in the main chat and I'll try my best to update and explain it to you! Thank you for reading!♡