What is HTML?

The following post will introduce you to HTML help you get started with learning the basics of HTML.

Enroll in the full course for free by clicking here.

Video Transcript:

Hello everybody, welcome to the course. In this video, you’ll going to learn what the basics of html are. So, were gonna get started off by creating a new folder in your computer to organize the files for this course. So, go ahead and do that right now.

I’m going to create a new text document. This is going to be a web page. Open up your newly created text document and go to file and save it as index.html.

Notice how now we have an html file here that we can open up with our web browser. We can go ahead and delete our old notepad file since we don’t need it anymore and if we open up this file, we can see we have a blank webpage. This is because we haven’t actually written any html yet.

So, the next thing we have to do is we have to get our html or coding editor so that we can use it to write html on your webpage. I’m gonna go ahead and go to Google.com and I want you to type in “Notepad ++” and you want to click on the first result here or you can go to this URL here, which is the homepage. Navigate to the download section and download Notepad++ onto your computer. We will wait for the file to download.

After the file is downloaded, give it a click and start the installation process. Select my language here, go through the agreements and everything here, pick where you want it to be installed.

I’m just gonna leave all this stuff as default since I don’t really know what any of it does. Again, just kind of skip through all this stuff, don’t worry about any of it and it will start installing.

Now, I have an earlier version of Notepad ++ so I’m just gonna ignore these little things that pop up and I think that’s what’s causing that but again, you can just kind of ignore them and Notepad ++ will just install normally and now we can hit “run” and now we have Notepad ++.

So, I’m gonna delete all this stuff in here. Let’s close it for now. What we want to do is we’re gonna go back to our document, I’m going to right click it and go edit with Notepad ++. Now, we have our document opened up in Notepad ++ and we can begin to write some html.

So, I’m just gonna write some basic html elements here and just kind of show you how we can start to build a website. The first thing I’m going to create is called a tag, this is an html tag and this is the start of the peg and we also have to make a closing tag.

So, I’ll write the closing tag here. You’ll notice that there’s a forward slash here at the closing tag. You’ll also notice that it changes color in our coding editor.

So, what this means is all of our html content on this page has to be within this html tag. Pretty simple to understand. Right? If we click on the tag, Notepad ++ will highlight the closing section as well.

So, within our tag, I’m going to hit space and I’m going to write an h1 tag and again, like your html tag, I’m gonna create a closing element after I write my text here. So then, we have our h1 tag, it’s closed off and inside of it we have some text here and this text is going to be given the style of an h1 element. When I save this webpage and preview it, you’ll see exactly what I mean.

So, we can see our text here is now a headline on our webpage. Pretty simple, right? And if we go back into our document and if we change this text here to something a little bit different and we save our file, and then refresh our page by hitting F5, we will see that our text will change to whatever we wrote again.

This is basically how we add html elements to an html document. It’s pretty simple, it’s not super complicated. So, let’s go ahead and look at a website online that is using html elements. Amazon.com is predominantly made up of html elements.

Now, there is some CSS JavaScript and different styling going on here but predominantly this website, on the back end is created with html. Again, if we go into my blog, we can see here that html is predominantly creating this website. We have some text, we have some content and again, it is styled with CSS to make it look different, but this is predominantly html that is building this website as the structure.

This is what you’re going to learn how to do is build the structure of a webpage in this course. So remember, html is the structure of a webpage, CSS is what styles the website and there’s also a third option called JavaScript, which adds interactivity to a webpage.

If I go to my courses page here, if I hover my mouse over one of these images, you’ll see that it moves. No, that’s actually JavaScript that’s doing that, it’s adding that interactivity kind of factor to a webpage.

Before we can do any of that, you have to have a firm and strong understanding of working with html. Really, that’s what creates the backbone and the structure of a webpage.

Now that I know what html is, it’s time to start looking at the structure of an html document in further detail.

Leave a Reply

Your email address will not be published. Required fields are marked *