Jmeow Tutorials - HTML Basics
Welcome to the HTML Basics tutorial! Are you ready to learn some new things? I hope you are!
To start, you should get a text editor if you don't already have one. Some good code editor recommendations are:
- Visual Studio Code. This is my first recommendation because it has really good auto-complete and editing features, and it's what I'm using to program this.
- Text for chromebook users. This sounds really plain, but it does do code highlighting, which is really helpful!
- Plain text editor. This comes with pretty much all computers and is good if you don't want to download any software. Most of them don't have auto-complete or code highlighting, so I would recommend an actual code editor, but again, it's good if you don't want to download anything.
If you don't want to use any of the editors above, that's OK, there are plenty more out there. Now let's finally get started!
The very first thing you should know about HTML is the element. Elements are one of the most basic parts of HTML. To make an element, type in this code into a new .html file:
Now, save it and open it in a web browser. You just programmed your first webpage!
And now... The thing you've been waitig for... The Explanations!
Now you might be wondering what the name for those
<h1> things is. It's called a tag! That particular one was an opening tag (The beginning of the element), but there are also closing tags! Here's a closing
</h1> Also, are you wondering what that
h1 thing means? H1 means a level 1 header. A header is, well, a header. The 1 after it means it's the largest size header and is likely the main header of the page (like the title). The smallest header is an h6. The
p element stands for paragraph. So the main page header of the above HTML is "Hello World" and there's a paragraph under it saying "And I'm a paragraph!".
An attribute is some information about an element inside of an element's tag. Here's an example:
Now, if you really want to try this out and edit it, you can, but if you just want to know what it does, here it is:
title attribute is not the only attribute, there are many others! But that is how you make an attribute. Here is a list of common attributes:
styleattribute. This attribute lets you add inline CSS to an element, but you should usually use the
classattribute. This attribute lets you add CSS to an element, with the CSS defined somewhere else. I recommend using this instead of the
styleattribute to prevent repeated code.
targetattributes. They are very useful for creating links, which you will learn later.
There are many more attributes not covered above, but you can learn them when you need them. These are some of the most common (In my code. You might have other attributes you use more often.).
A link is some text you can click on to go to another page. They can open another page on your website, or even to Google. You should use them for navigation, and almost never as buttons. You can use the
<button> element for that. Now, do you want to start making links? Of course you do, here's how:
Now, here's how it works:
<h1>element is a header, which you already know.
<a>element is a link.
href="https://jmeow.net/"part is where you include the URL you want it to open.
target="_blank"part makes it open in a new tab. If you don't use this, it will replace the current tab. Don't ask me why its value has to be '_blank' though!
An image is, well, an image. The
<img> element is used a little differently:
And the live example:
Here's what those attributes mean:
srcattribute contains the URL of the image to display.
widthattribute is the width in pixels of the image on your screen. You shouldn't use this often, CSS is better for that, but for an HTML tutorial, this is what I'm using. The
heightattribute exists too!
altattribute shows text you want to display if the image can't be loaded and also is useful for screen readers. You can read more about that in the accessibility tutorial.
5. Proper HTML documents
So far, you've been going right to the things you want to display, but there's more! First, in every HTML document you write, you should include this:
This basically tells the browser you want it to interpert it as HTML5, which is (at the time of writing) the latest version of HTML. You should also add a
<head> element with a
<title> element inside, like this:
Oh yes, and also usually you should add
<meta charset="UTF-8"/> because otherwise some text and emojis will appear really weirdly. Like, for example, 🐱 will render as ðŸ± for some reason. Also, instead of putting all your HTML directly inside of the HTML file, put inside a
<body> element, like this:
You've finally reached the end of the HTML Basics tutorial. Congratulations! 🎉 There's lots more to learn after this, so you don't know everything about programming cool stuff yet, but this tutorial is a good start! Want to learn lots more? Go to the CSS Tutorial! It's also pretty simple. HTML is a really good starting point though, and I hope you enjoy it! Now, go make something amazing!