The following is a free HTML basics course that you can go through to learn the basics of
HTML and web development.
I created this guide for anyone who is a complete newbie or beginners to HTML.
You can access all the lessons by clicking the links below:
- What is HTML?
- Adding Structure To a Webpage With HTML
- How To Add Text To a Webpage
- How To Add an Image To a Webpage With HTML
- How To Link Webpages Together
- How To Create a List With HTML
Hello everybody, welcome to the course. You can watch the video version of this lesson below:
In this video, you’ll going to learn the basics of HTML. Were gonna get started off by creating a new folder on 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 our 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.
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 our webpage.
I’m gonna go ahead and go to Google.com and I want you to type in “Notepad ++” and you will 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 your language here, go through the agreements and everything, and 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 ++.
What we want to do is we’re gonna go back to our HTML 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.
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 tag and we also have to make a closing tag.
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.
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.
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 tag after I write my text here.
We have our h1 tag, it’s closed off and inside of it we have some text and this text is going to be given the style of an h1 element.
When I save our file 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.
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 at its structure.
What you’re going to learn how to do is build the structure of a webpage in this course.
If I go to my courses page here, if I hover my mouse over one of these images, you’ll see that it moves.
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 you know what html is, it’s time to start looking at the structure of an html document in further detail which you will learn in the next lesson.
This lesson is part of my Introductory to HTML and CSS course on Udemy. If you are interested in purchasing the full course, you can do so by clicking here.