Hey, this is Sasha and welcome back. Today I want to share with you how to create your first website and just show you the construction of it. It’s not going to be too difficult, you’ll see.
We’ll run through this fairly quickly. I’ll just show you the basic fundamentals behind it and what creates the website. So let’s take a look at some code and then look at our browser and see how this really applies to creating our first page.
Writing Your Code
All right, so you see I have a basic Sublime Text notepad file here open. The way that you write out the code or at least initially in order to start out your website is it’s going to start with his HTML kind of bracket.
You’ll notice that what I have is a plug in by Sublime text, it’s called Emet, and you can install that through your package controls. If you hit tab, you’ll actually automatically fill these things in to set up a basic HTML document. So let’s run through what each of these things does because this is kind of the core or the baseline to writing an HTML document.
Typically, what you’ll notice is right here at the top, this defines the type of document that it is. It is the HTML document. Then what we’ll have is these two brackets that are HTML and you have the opening and you have the closing bracket. You’ll notice that by the slash break there. So the only dark area here is you can see that it does not have a closing bracket is this document type that’s defined. Everything else is going to have one of these closing end brackets.
The next one that we have, if you take a look at it, and I’m going to just highlight it, you can see we have a head tag. The head tag, again, it starts right here and ends right there. Now inside of that head tag, we also have a title tag. This is called nesting and we’ll talk about it later. Basically, it’s a tag within a tag. But we have a dead tag right here and then we also have the body tag.
Now the body tag is going to be your main area where you’re going to do 90% of your HTML work — probably 95%. There are some things that go in the head tag, but other than that most of that would go to the body tag. So that’s what we’re going to do. We’re going to work right there in the body tag in that area. That’s our core. It’s this body tag area.
The great thing about HTML is you can add a lot of additional spaces here and it won’t count those because it’s really the tags. It’s really what’s out there. So all these empty lines and empty spaces, you don’t even have to worry about them. So if you want to make things easier, you could go ahead and add a few lines here. If you want to indent them, with Sublime text, I can highlight them and indent them. In that way, I can see and make things a little more organized. And that’s why you’ll see this title tag also slightly indented.
So again, if we break things apart, there’s your HTML. Within that, I’m going to go ahead and do my heading tag, or head tag. Then in here, I have my body tag. So there it is and I added some spaces right there. So those are my tags and if I want to make them a little more readable — there we go — that’s our baseline for the website.
Now, in order for me to save this, all I need to do is go to File, Save As — pretty simple process. And now I’ll go ahead and pick my location or directory. For me it’s going to be — we’ll do it in the HTML training. I’ll just save it as Mypage01. We’ll just go this route. That way we can reference back other pages. I’m going to add the extension .html here and then we’ll go ahead and hit save.
Checking Your Code
Now if I go on to my desktop right here and I go to HTML training, there is my page. I can simply double click and open it up. And as I look into my other browser and pop that up for you, you can see it takes me right there, Mypage.1.
There’s my directory, my location, you can see it right there. You don’t really see anything on the page because there’s nothing in there. If I right click and I view page source, you’ll see that my page is basically empty if I zoom it. But it’s written exactly the way that I did it — with the spaces and so on and so forth. So I’ll leave this screen up so that way, I can refresh it from time to time as we go back into it.
If I go ahead and pull back my file right here, what I could do is go ahead and add a title tag. This is the title tag that we had in the past. I’ll just type that in. Hit the tab button. It’ll expand it, so I could say My Cooking Website. Now that I have the title in there, I can go ahead and hit control + s or save it one more time.
As I go back and look at this page, you’ll see nothing has changed yet and you can see at the very top also, right there — it says MyPage01. So this is what the title really controls and you can see there is no title yet right here. So if I go right here and click the other tab, this is the empty page, if I hit F5, you can see what happened right there — My Cooking Website. It changed that tab to My Cooking Website. And if I go back to the HTML and I had a five, you can see that code was also added in.
So you can see how this works out real well. But when you’re working with multiple monitors, you are able to flip back and forth very quickly. As we go back into our document, if we want to go ahead and now start adding and typing in some text, I’m just going to — you could just type in some text. I have a little quick program that expands my text for me and I’ll just write in some dummy text right there.
After I wrote in some dummy text, I can go ahead and hit control S and save it again. As I go back into the page, you’ll see nothing has changed yet. If I hit F5 and refresh, you’ll see there is my page, there is the text that I wrote in. If I go back to the code, F5, you can see that there is the code and there is the text that I put in.
So you can see that’s basically our first website. You don’t need a lot of tools to be able to test things. All you need is a browser and just the basic notepad file because your browser itself is going to read these files for you and process them and read them for you and output a look. Whether that’s a basic look right here, where you’re just seeing the text.
If you want to view the source, right click, and then view page source which is what we’re doing right here. You’ll be able to see it right there or if you’re reading the code, eventually as you get better, you’ll simply read the code and you’ll understand kind of what the website will look like.
My Cooking Website 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.
So with time and with practice, you’ll continue to get better and better and ultimately, we’ll continue to evolve your skills, but that’s basically your first website from saving the file right there. Now, one last point that’s important to remember is that when you’re uploading files to your web server, what you want to remember is that the primary name that you want for your home page.
You don’t want it just Mypage_01. You want index.html, and that will be your www.yourdomain.com and that’s what I’ll be — it could be indexed on HTML, or you could make it .html. Typically, be consistent.
As you get into more advanced pages, it might be .php, as you get into PHP base coding and things of that nature. But in either case, for our examples, you would write .html so that way that would be your home page, but in our case, I’ll just name it Mypage_01.html so that way we can keep consistent as we go through the lessons.
Thanks for Watching!
Thanks for joining me in this lesson. I hope you really enjoyed it and found it helpful to get your first website up.
Continue watching some of the next training videos, because that’s where we start getting into a more detailed HTML. But if you want to see some of my business training videos, or get exclusive video content on business training, go ahead, hit the button right here and sign up to my newsletter list and then you’ll get exclusive access to those video training as they are released. Join me for a live class as well, while you’re at it.
Thanks again. Go ahead hit play on the next video and I’ll see you in the next lesson.
