Hey this is Sasha and thanks for joining me in this HTML Training little mini course.
If you’d like to learn HTML, how to not only just make a basic website but more importantly use it within your business and how to modify certain things, it’s going to be really helpful to learn HTML.
Even if you’re not the web developer or going to be designing the website, maybe sometimes there are things that you’ll want to make modifications to.
Maybe there will be some things that maybe you’ll need to make a quick tweak on your own because the web developer is not available and you need to make a quick change.
Why Should You Learn HTML?
Learning HTML can give you a lot of room for doing things hands on if you need to. Even if you don’t need to that and you have a web developer, or you plan to be a web developer, this little mini course should get you started.
Keep in mind, HTML is the framework. It’s the frame of the car. And everything else, like the paint, the doors, all those things are still part of that frame in the body.
Once you get into like the colors of it, the leather versus the cloth type interior, the little nitty gritty things that actually make it look a little bit different, that’s where you get into the CSS aspect of it.
So CSS will be dealing with more like lay out options and things of that nature. But you got to learn HTML because the HTML is that framework. It’s the core to allow you to put that paint on. It’s the core to allow you to choose the cloth of the interior, or the website, the images, the background images — those kinds of things. The way things work.
Either case starts with HTML and that’s what we’re going to be covering in this basic tutorial series.
Your Materials
Here’s the thing, when we get started in this, there are a few things you need in order to learn HTML. You basically need a web browser. And the one that we’re going to be using is Google Chrome.
It’s typically the best browser plus it has an auto refresh chrome plug in that you can get. You can set it to refresh the page, so you don’t have to hit the F5 key every single time.
You could use Firefox, you could use Opera, you could use Safari, but ultimately Chrome is one of the better ones. Firefox is also pretty good. I would say, try to stay away from Internet Explorer. It’s just a little more glitchy in the development field.
In either case, that’s my recommendation. As far as writing the code, you could just use Notepad. Notepad on its own, from a Windows version, will work just fine. But the one that I’ll be using is called Sublime Text. That is the main program that I’ll be using and it just color codes your code or the code that you write.
You could also use things like the Adam. You could use Brackets, or even Notepad ++ which gives you a lot more — let’s just say a lot more power and control when you write your code.
Creating the Code
Now if we look here at writing HTML, it is as simple as creating. It starts with a certain tag which starts with that angle bracket and we can say, “Okay, well, let’s create a heading.” And a heading tag is the H1 tag and then we’ll type in our text that we want in the heading and we’ll close it with a slash.
Heading
All HTML tags pretty much start with that angle bracket, closing bracket. You type your tag and then you have the text or the things you want to write and then you’ll go ahead and close it off.
So here’s my heading and you can see there it is the heading. I can also view the source, so if right click and view the source here, you can see the HTML is right there. And this works just fine. It outputs to the browser.
Now, how do you register or use this HTML? Well, I can just go and hit File Save As, and I can just go into whatever folder I want to do. We’ll just call it report.html. So you can save with an extension even if you’re using like Notepad right there.
And if I go to that directory, this is just on my hard drive. So if I just type that in — okay so I’ll just type ‘report’ right there, or you could go to your desktop and just double click the file. And you can see there it is. There’s my report file. Okay?
I can type in other tags like there’s the H2 tag. So I’ll type that in and with Sublime text if I hit tag, it creates both of those tags for me by installing a few plug ins. So this is Heading 2 tag. There you go. There’s a heading 2 tag, and I basically created a basic HTML website.
Now keep in mind this is not the normal way websites are made, or created right here with NHTML. Normally, you have things — everything is within the body tag, so we start with the body and we end with the body.
This is called nesting which we will talk about a little bit later as we get more into HTML. The other thing is that all the HTML documents are really structured kind of like this. So, let me back track a little bit.
When we first start out an HTML document, this is the typical template you start out with. So just like if you’re painting a house, you typically want to pressure clean it and pressure wash it first. You want to have the brick up. You want to have the walls up, and then you paint it. You don’t start painting things on the floor and then nailing them. They’re usually already nailed. So this is our framework and this the way HTML starts.
You basically start with the HTML defined document. That’s the type of document it is and we close it right there with the ending HTML document. Now at the very top, you can see you have this heading area.
In that heading area, you have met a data and that’s not usually where you write a lot of HTML that’s visible. It’s usually for search engines. Where you right most of the HTML will be in between the body area. So we’re gonna stick around mostly in the green area.
There will be some things we’ll use if for search engines in the orange area right there, and then that’s basically it. The remaining part, things above right here is just starting and declaring like I mentioned right here, this is just declaring the doc type and then we have the HTML right there and the closing HTML type.
So that’s kind of creating a basic HTML document okay? Then most of the things that we write will be right there in the body area and everything for search engines, robots, and other things, will be in this heading area and this is the title.
HTML Examples
Now, just to give you some quick examples so you can see, the title right here — and I’ll add a few extra spaces so it’s easier to read. If you look at the very top of this page, at the moment — you can see right now we have report.html. That’s the name of the document. But if I just write in — Welcome to our — let’s just call it — Cookie Monster — and that’s the name of our business. You can see right there at the very top, it changes to Cookie Monster.
So again, it’s not really visible on the page. But anything on the body — even if I just type just some basic characters, you can see it shows up. Now they’re no tags associated with that. But you can see here, there’s our doc type. There’s our HTML opening tag, closing tag. Here’s our body, here’s the thing we mentioned at the very top.
Within our body, this is where we can start structuring things. So I can create a structure such as — here’s a heading that I can create a paragraph tag and let’s just say, okay, well write in some dummy text.
Let’s go ahead and do that. So there we go. I’ve written in some dummy text. If I hit refresh, you can see there you go, there’s our heading, and then there’s our body text, okay? So that’s how basically HTML works. It’s that you’re now constantly adding in tags.
You’re adding in all kinds of different things if you want. Like an image based. You can type in an image tag, and then you’ll also include like little properties or attributes, and this is where the image is. So you can go ahead and do something like that.
For example, if I pull an image from let’s say, Pixabay, and I take an image that’s a cat and I go ahead and copy the image address. So, I’ll go back right here. I’ll paste it in. All right, so there you can see the cat that shows up after I basically added this SRC URL.
Now within these things, you have a lot of different attributes you could do. Like with the paragraph. You could create a whiff. There are all kinds of different things you can do with time as I’ll show you, but most of the time, it’s usually used within CSS or together in conjunction with CSS.
Cookie monster
Heading
Business Launch Pad is focused on showing you the critical concepts on how to build a
profitable business from scratch. Even if you have a business you will learn how to accelerate
it into hyperdrive. This book focused on the foundational concepts, setup structure, essentials
of marketing, and time-saving productivity tips. Pick it up today by clicking one of the links below.
But with an image example, I’ll show you here, with the whiff, let’s just say we want ig 300 pixels, so I can make it a little bit smaller. If I wanted 200 pixels, I can make it even smaller. So those are again, additional attributes that you can do and play with as you continue learning HTML.
In either case, in order to get things started, that’s just the basic premise of how you write a basic site and basic HTML.
Let’s continue through all these lessons. You’re going to learn a lot more as we get into detail about creating a basic page, creating headings, structure, and paragraphs, you can create forms and things like that. You’ll see really what the power of it is.
At the end of this, you should be able to create, kind of a basic framework for a website and then as you learn CSS, you’ll be able to go ahead and make it a little bit more beautiful. You’ll be able to create a little more style to it and really make it your own.
Thanks for Watching!
Thanks for hanging out with me and learning. I hope you found this video helpful and if you did, remember to hit the subscribe button right here, or best of all, get on my newsletter list, by clicking this button right here.
When you’re on the newsletter list, that’s where I share all the exclusive video training and you can even get discounts or promotions to some of the video courses that I create. So get on the newsletter list by clicking this button up here.
Thanks again and hope to see you on the next video.
