Introduction To HTML: Build Your First Website
Learning to code is difficult for many people. It takes time, energy, and often money to commit to this extensive project.
Programming is the future of the modern world. It is the way that we communicate now and how we share information. The more people who can code, the more open our society becomes.
Though learning to code may be difficult, it's worth it in the end! We'll jump right into coding by teaching you HTML and then finally building your first website! No prior programming knowledge is needed.
How to Install Sublime Text and Setup a Dev Environment?
In order for us to get started, we need to set up our environment and we do that by letting's open up Google Chrome and we're going to search for sublime text. This is a text editor that's a lot of developers use. I myself have used it for years. Absolutely love it. In your day to day job, you'll use something like this. I highly recommend sublime text.
We have sublime text. Now, what is a text editor? A text editor is a program that allows us to write code. And there's nothing much different than if you wrote this in word or a text file, but the power with a text editor, especially something like sublime that's geared towards coding. If you click on the plain text, you'll have a whole bunch of options of what type of code you're writing.
So in our case, we're doing HTML. So if I click on HTML, nothing changes, except for the bottom part. But now if I type something, well, everything looks the same. But if I start typing like <br> Well, actually recognize it and help with syntax.
In order for us to have a web page, we write an HTML, which stands for Hypertext Markup Language. So bear with me here.
Just looking at this right now without knowing any HMO, you can get an idea of what everything means. So HMO was defining that. This is an HMO. We're saying that this is the head of the HMO with the title, and we're saying that this is the body of the HMO. So let's try something here. Let's save this file. And we're going to save it. Let's do desktop. And we're going to call it index DOT. You can see that it's already completed the HTML syntax for us safe. And we have an index stuck in my file here. Let's drag this all the way down to our Google Chrome and open it up. And while nothing happens, but let's add a bit of text to it. So in the title, I'm going to say my first website exclamation mark. And then in the body,
How To Add Text That You Typed Into The Code File To A Webpage
I'm just going to put. Hello there. OK, so if I say this. And just to show you from now on, I'm going to be doing commands to save just a little bit faster. And now if I refresh this page. I have hello there, and you can see the power over here of what we just did. We have hello there. As the text, which is. In the body, and then we also have my first website as the title. And you can see over here in the file that we're referencing and that HTML on my desktop. So we can see here that we have HMO, we have the head, which we haven't really talked about yet, but we see that the titles in the head are kind of like a header.
Simple Files - A Peek Into The Creation Of Natural Man
And then we have the body, which by looking at this, we can assume that it's whatever shows up onto the web page before we expand on this and make it a little bit prettier because now it's just simple text. I want to reiterate the fact that what we've just done is very similar to what a server does. If we go back to our mockups here, you remember that when we enter Google.com, the servers send us an email fallback when we move the index slot HDMI file all the way down to Google Chrome. That's what we just did. We mimicked a server and we gave it to the browser to load up the e-mail file. And because browsers are built to know what simple files are. It can read the syntax and say, OK, yeah, this is the natural man.
Creating Your First HTML Website W/ Sublime Text 3
OK, you want my title to be my first website and you want my body to say hello there? That's perfect. These are the default H.M. rules that you'll see all the time. It is a little bit confusing at first, but this is it. You just have to remember that there is a tag. So an actual tag, a head tag, a title tag, a body tag, and these tags usually have an opening and a closing. There's some exception to this rule, and we'll get into that a little bit later on in the videos. But just remember this for now. So I want you to try creating your very first website and seeing how it works. And once you're done with that, I want to show you that sublime text actually has a nice shortcut, so you don't have to keep writing those tags over and over.
How To Make a Website- How to Make a Basic Website in 30 Minutes
So the way you do that is you type in a stamp now and then press the tab key. And it loads all this up for you. OK, so now that we've done this, I want you to go off and create your very first website. I know it's very, very simple. You can put whatever you want in the title and you can put whatever you want in the body. And in the next video, we're going to start expanding on our first website. I'll see you at the next one. Bye-bye.