HTML Tutorial for Beginners - Create a simple Basic HTML Website using Notepad++ (2021)

Hello , everyone .

This is ah , welcome to another note pad plus plus tutorial .

Today , we are going to learn how we can use not pad plus plus for html to create a basic website .

Now , the things that we are going to learn is totally free .

You don't need any special tool for that .

All you need is just a notepad plus plus in your imagination .

And so let's get started .

Now , in order to , to create a website , first of all , you need to have a note pad plus plus , install in your computer .

Uh If you don't have this , you can go to note pad plus plus website and download and install note pad plus plus .

But once you have note pad plus plus , you can actually create a website pretty easily or at least start an html page .

So once you open , not by plus plus , you need to go to create a new document and you are going to save that document as an html .

Now , before we actually save uh uh a particular file as an html , let's talk about some file naming convention .

So usually we would like to avoid any spaces in the file name .

Uh If you would like to have a longer name , just use underscore or even hyphen uh but avoid spaces because it may make your life much easier later on .

And so let's go ahead and create a new document and I'm going to save this document as something called index dot html .

Uh You just need to simply type index dot html .

All right .

So this is our first website , our web page , but we need to add some content , right ?

So we need to type this following things .

Now , it might be difficult to go back and forth .

So I'm going to move this file uh into another view .

That is one of the feature , no pad plus plus has , which makes it much easier to work with your web development or source code , editing and so on .

So we are going to start the very first one is a doc type and we will actually go into detail of what this means , but uh at least right now just type these things .

So we'll have HTMO tag and we'll have and html tag usually starts with and , and our closing tag , which is uh these , these uh special characters .

So we just created a , a skeleton , I'll put two spaces in there and I'll go and create a header block or head block and I'm going to call it slash head .

OK .

So this is uh an opening html tag .

This is a closing tag .

Now , immediately you can see as I save this file as an html .

When I click on the opening html tag , it automatically highlights the one that is closing .

So that is also a handy when you're looking at AAA bigger HTML page .

All right , let's go ahead and say this .

Now we are going to create a title page or title name .

So it's , let's say my first web page and I'm going to end with uh this one title , right ?

And as you can see when I click on the html tag , it will also show me the closing tag , right ?

So this is our header block and I'm going to create a body tag and closing body tech and I'm going to just put one header or headings .

So let's say each one and this is my my heading for one and , and closing tag .

All right .

So we just created a very simple html page .

The very first it has the doctor which will talk , adjust in a little bit of uh a little later and then html tag the header and the body .

Now , if you want to see this , uh let's see how it looks in in a web browser .

So if I go to my my document and I'm going to quickly um open this document that we just have created .

And usually when you I double click on html page , it should open in your default web browser and it's , it looks like this , sorry about that .

All right .

So we have this very basic uh html page .

Now , if we put this side by side , you can see that the heading one is right here and the title is actually the title of the page and it is right here .

You can see that .

So that is , you know , your very first html page .

Now as you as you work with html code , uh some , some developer note that I would like to , you know , suggest is try to avoid doing copy and paste .

You can literally find literally thousands of websites out there who will give you just a startup html code .

But you know , it's very easy to copy and paste that .

But as you , at least initially , if you start typing these tags , you know , you are training your brain to , to learn and to to get used to these kind of commands these html tags .

And so at least at the beginning of your development career , I would say try to type everything as possible and as you get used to it , then we will learn how to , you know , quickly create the skeleton with some plugins .

But at least at the beginning , please make sure that you type everything .

And uh I believe you will learn later on how it it really helps in , in remembering these things .

And so that is a quick note , but once you save this file , actually , there are a few things that happen , you can even see the colors are changing , right ?

The colors of each tags are in little blue .

And so note pad plus plus allows you to do a syntax highlighting as well , which is really handy when you are actually looking at at a particular tag or a particular piece of text because it , it , it allows you to , to see the the the the tag closing and opening tags and also the colored uh nicely colored uh uh syntax highlighting .

And if you guys would like to know some more details about some of the plus plus features , you can look at my one minute challenge video in which I take just a one minute uh per video to learn something , something new in not by plus plus .

All right .

So now that we have created our first html page , actually let's go and actually see what these mean .

And so usually let's let's review this this html page .

All right .

So html page actually consists of mainly three items or three blocks .

The very first is a doc type .

Uh and it's a declaration uh to the web browser about the html version that that this html file contains .

Now , we don't want to go too much into detail .

This is a beginner level course or , or a video in which we are trying to create and just learn very basic html uh techniques .

And so for this particular video , just remember to add this small co uh code block at the beginning .

But the later part is more interesting , this is the main block and then as as I mentioned earlier , it contains header block and a body block .

Now , header block is usually not seen when you saw the browser .

It did not show anything in the main browser about what we were , you know what the title was , but the title was shown up right here , right ?

But the body block , anything that you put into the body html tag or blog will show up here .

And so I can actually as simple as type something and say this is a text , OK ?

Save , go to our , our browser and refresh and you can see that it is just had that text in there .

OK ?

All right .

So these are uh the main tag , html tags had a title body , but there are a lot more out there .

Of course , we would like to add more stuff into our HTML page .

And so let's learn some of these most common html tags and uh we will add one by one and we will learn as we go .

So the first one is the heading html tag .

Now , we have already used .

One of them is right here and there are multiple uh heading html tags .

Uh And it's , it's all H one H two H three onwards .

And so I can do this and I can say H two and heading to and age and , and , or closing tag , save and less refresh .

And you can see that the heading two is a little smaller than heading one .

So you can do H one H two H three hh four onwards .

Now , one thing that you might notice here is let's create another one .

And this time we are going to put upper case in three .

All right .

Uh The third heading block which is H three , we just put in an upper case .

I'm going to say this , I'm going to refresh it is able to actually put all three , had a one , had a two and had a three .

So what does it mean ?

Well , that means that not uh or html is not case sensitive .

I can put H one in lower case or upper case and it would not make any difference .

And this comes handy when you know you're working and you don't need to worry about the case sensitivity .

All right .

The next one , we have already created a short paragraph , but it is a good practice to put any paragraph in a P tag or also called as a para paragraph tag .

So let's create a paragraph uh tag which is P and we can say this is a first bar graph .

OK ?

And I'm going to actually copy this and let's put the end tag right here .

And I'm going to just multi multiply or multiple line in this .

All right .

So I had multiple lines of the same , same sentence in a P block or a paragraph block .

So save and let's open our browser and refresh .

Now if you notice something interesting happened , if you look at our html core each , after each sentence , we had you know a new line .

But when we looked at our our HTML page in a browser , it put everything into a single line , right ?

And in fact , if I move this , it will automatically adjust as you can see .

And so the , the lesson from this is that you know that the line breaks that we are putting in here in html are not affected in web browser .

Now , you might say , well , what if I really want actually a uh a line break ?

Well , there is another uh html tag called break .

And if I want specifically a brake line here , I can just put BR all right and save and let's go to our page and refresh and now you can see that it , it just put a break or a line break right here .

But , but the second line is still , you know , flexible .

And so that's what we just learned , right ?

Uh the P block where you need a specific break line , you need to put slash R less than sign BR and you know , greater than sign and so on , I can put multiple of these if I put two of these actually sorry , copy this and put it here .

Now , I have an empty line between this line and this , this big line .

So save and let's check it out .

So refresh and you can see right , because there are two brake lines here .

Ok .

Now , this was the first paragraph , I can put another paragraph again .

It's the same , same method .

I'll say this is my second paragraph .

Right ?

And I'm going to close this and save and refresh and you can see it , put the second paragraph in here .

OK .

So that is about the paragraph , html tag .

And we also learn how we can break line using uh A BR A tag at any point in the paragraph .

Now , it doesn't have to be at the end of the sentence .

It , it can be pretty much at anywhere .

All right .

So now the next is , of course , you would like to , you know , form it , your text in your html website or , or web page .

And so just like any , you know , word processing tools like word , MS word , you can use bold it , uh , you know , underline , you can center it out and so on .

So let's try that .

So I would like to bold , let's say this particular line .

I'm going to remove this and I'm going to add some text here .

All right .

And let's say I would like to bowl or , or , uh , make these tags bold .

And so all you have to do is put B um and tag at the end and make sure the text that you would like to , you know , change to bold between them .

So now if I save this , go back refresh and now you can see right here that I just uh you know , added uh bold uh formatting to this particular text .

Now it can be with anyone or any number of sentences .

So I'm going to say , let's say this is it .

So I'm going to put this here .

I and end of I hope so and save control is save .

By the way , that's what I'm doing and refresh .

And you can see that this particular text was changed to it .

And same thing with strike out , let's say we would like to strike this out .

So I'll do strike and at the end , I'll say strike , save and refresh .

And you can see that this particular sentence was striked out and same with center and some of the other ones .

So you can give it a try with these .

And so we learn how to actually use different text formatting .

Now , if you're looking at this video , I have included uh a time stamp in the description .

And so if you would like to go to a particular uh particular topic , you can click on that and it'll take you right there .

So the next part uh of our , our beginners level html tutorial is how to create a list , right ?

It's very easy to create a list .

A list is basically just a bullet item or numbered item .

So there are two type of list , one is called ordered list .

And usually it says ol uh the tag name is , but basically it means order list .

And the other one is called unordered list , which is basically like a bullet point .

And so let's create both of them , both of them .

So I'm going to actually create a heading .

So I'll say each one , it says uh create list or ordered list .

OK ?

And then I'm going to create an order list and make sure that we close them .

It's kind of hard to actually type and speak .

And now we have to add list items or L I , that's what it is .

So I'm going to say , let's say list item and I'm going to close this and copy this multiple times and now we can put some text into it .

So let's say item , one , item , two , item three .

All right .

So this is our order list uh with some list items .

Uh you don't need , if you keep these spaces , it's not going to impact anything in HTML .

Uh And , and I can show you , you can save this , go back and refresh and you can see that we just created an order list and there was no extra space here is uh html is a markup language .

So not everything that you're doing in here would be translated there .

OK ?

All right .

So , so we just created our order list .

Now , what about uh so , so just one more thing to notice is order list will usually have numbers , right ?

So it's 123 onwards .

Now , if you want to create something unordered list , it will be , again , I'll do another H one block and I'm going to call this unordered list and we'll say UL which is on our list and UO and , and then if you notice actually as , as I'm , I'm typing these , uh , these uh tags , I'm always indenting , right .

There's the indentation of two spaces and it's always good to invent your code because it , it makes it much easier to read through it .

If you put everything in a single , right from the beginning , it will be really hard to read through that .

And so that's the reason why I'm actually putting uh these indentation and you can press tab or , or have two spaces or let's press tab at this time .

And I'll say list , item , list , item , oops .

And I'm going to copy even though I said not to copy for the time saving .

I'm going to just say I'm copying here .

So item one , item , two , item three .

So this is an unordered list , control save and refresh .

And now you can see we created an unordered list and you can see the bullet points .

Now , this is a very basic HTML page .

You have a capability to change every single thing in HTML page .

But because this is more of a beginner's level , you are just going through the basics of html , but you have a lot of more options to modify or fire at these , you know , bullets and numbers and , and a lot more things , right ?

So so far we looked into to header blocks or heading blocks , paragraphs , line breaks , text editing list .

Now it is always good to comment your , your your code , right ?

So that you know what these are .

And so how do you comment a particular section ?

So this is how you can comment is less sign exclamation and then you can say this is a comment .

Oh , what am I doing ?

OK , sorry about that .

There was some kind of automation there .

OK ?

So what are the comments ?

Comments are something that you put into a source code for your , for the for the developer ?

It doesn't show up on the actual website .

It is just uh a way to , to put comments in your source code , right ?

And that's this is how you do it .

Now , you might say , well , this is kind of hard to write every time .

Uh Actually , this is a second comment .

Uh notepad plus plus have a shortcut in which you can automatically come in this section .

So if I would like to come in this part , this line , I can select it or I , I don't need to even select as long as my cursor is in that line , I can go to it , comment and I'll say single line comment and as you can see it automatically added a comment block around this , this text .

So it's pretty easy actually .

And so now we have created our ordered list , uh our unordered list , we , we learn how to add comments .

Now , there might be a time where you would like to add just a horizontal line .

And so the way in which you do it is very simple , put less than or less than hr slash or actually let's do this hr Right ?

And again , it doesn't need to be upper case .

So you just put a , a horizontal rule and that's what hr means .

And then let's save this and refresh this and you can see that it , it just uh in uh put a horizontal line to it .

And so this is hr uh just opening and closing block .

Now there is a shortcut to , to , to put both the tags , opening and closing tags into one and that's how and what you can do is you can do hr slash and , and greater than sign .

And this will basically mean this , right ?

But if you just don't want to type this whole entire thing , you can just put it as it as like this .

So let's save and let's see it actually work .

So right there , you can see that we just added , in fact , we need to put right about this .

So I'm going to cut this and right , save and refresh .

OK ?

So now , so far we have created the heading , you know some text editing list comments and then horizontal line .

Now of course , your website or web page might be pretty boring without any image , right ?

So let's learn how to add an image .

So I'm going to just comment this , add an image and I'll just use notepad plus plus two comments .

So go to edit line operations , oops , sorry , comment and single line comment , right ?

And the most simplest way to add a image is you put eimg and then that's , that's the HTML tag and then SSRC which is means source and then uh the name of the file .

So let's say image or icon dot PNG .

Now html can , can uh you know , detect any kind of or most kind of most common kind of images like pngs JP J and most common type of image uh format uh formats .

And so as long as you , you don't use something unusual , it should be able to identify that .

And so what I just did is I said that the file that I have the , where the folder is the index dot html , there is a file called icon dot PNG and that is the image that I would like to be shown here .

Now , I don't know if I have that .

So let me just make sure that I have that and uh I'll just quickly check and let's put any any picture actually .

So let's put this actually , control C shall we ?

Alright , actually , it was already there .

So , ok .

So control save and I'm going to do a refresh .

And you can see even though it was pretty big image , I should make it a little smaller .

I honestly actually , we will do that right from .

You don't need to manually uh decrease the size of this image .

I can do that right from here and we'll do that .

But you can see that it was able to identify this icon dot PNG and was able to put it here .

Now , as as I said , this seems like a pretty big image .

So how can I actually make it a little smaller ?

And so it's right here .

Uh that is in there are different uh you know properties of the image tag which we can use .

So we can say , well , we don't want the full size , we just want width equals to maybe 40 .

Let's see what happens .

So I just added with equals to 40 .

It will be a pixel by the forth pixel .

And I'm going to refresh it and look at that .

It is able to actually when we put width , it is also going to put the same kind of aspect ratio to the the height also .

So it didn't really stretch the the image , it was able to maintain the aspect ratio of the image .

So if I go and maybe let's put a little bigger .

So I'll say 100 maybe and let's do refresh .

And you can see that it was able to put the 100 pixel , you know , width and and corresponding height , right ?

And if you want to put a border around it , you can also do that .

So border equals to one save and go back and refresh and you can see they just put the border , right ?

So we just learned how to add image tag in , in this html page .

Now , as I said earlier , you , you can have a lot of different properties and , and there's , there's tremendous amount of uh you know , tags out there for html .

But uh in this course , we are just trying to learn the most basic ones are , are the most common one to create an html website .

OK ?

So the next one which might be most common is to add a link , right ?

You may want to add a link to another page or another website .

And so how do I do that ?

So these are called hyperlinks as you know .

And so it is starts with a and , and html tag and then the anchor text , let's say youtube website .

So , so anything between this tag , uh this a tag is called uh anchor text .

So it will show up uh in your site .

But then when you click on it , it'll go to the to the actual site or the URL well , you need to specify that right .

And so in order to do that , you have to add that source or that link to it , which is hr ef equals to and then you can put the website .

Um and it doesn't have to be the main site .

I mean , it can be any link .

Uh You don't need to actually add http S or http , but it is good practice , but you don't need it .

And so what I just did is I created an A or a hyperlink with this as my anchor text .

Actually , the reason why it is says a is an anchor in , in about 10 , 15 years ago when they started the web website and web development , it was called anchor and then this was called anchor text .

So it has still remained the same .

So you might wonder what is this a mean , right ?

All right .

So we just created uh a link , let's save this and refresh .

And you can see that it just created uh our anchor text which is called youtube website and when I click on it , oh , I'm sorry , I just take my words back in need and ht tt uh you do need the http uh at the beginning , right ?

So save and refresh and now if I click on this , it should be able to go to the youtube or any other link .

Sorry about that .

Um And so going back here , we just created uh a link here with uh with our URL mentioned right here and this will be your anchor text .

So we have seen so far nine different html tags to create a website .

The last one is , let's say you create an html page and you would like to have a email link so that when users or somebody who is visiting your site , when they click on it , it automatically emails uh go to that email client and they can email you .

And so it is similar to the hyperlink .

It's just a little different in how we actually reference it .

And so the way in which we create a link , I should put actually uh links , right ?

And here I'm going to say H two , give me the links .

And so again , it does seem like an A tag .

We'll do A , an H equals two .

But this time when we put our email address , we have to add or , or prefix it with mail two , just mail two and then double colon and your email address .

So let's say ABC at gmail dot com .

OK ?

And then uh and double court and then we will say our anchor text which is says uh contact us , contact us .

And then , and a right ?

So we just created an email link , not links , link .

And if I go back and refresh this , now , I just added a header blog , that's why it looks nice and clean .

And you can see that we just created a link .

But when I click on that , it should open whatever client mail client you have in your computer .

So I don't want to email right now , but that's , that's how you add an email link .

So we covered a lot of things today .

Actually .

Uh uh you know , we started with how we can create an html website using note by plus plus .

We created a very basic document and then we created and we save it as an index index dot html .

We , we made sure that there was no underscore uh there was no spaces in them .

And then we also learned what all of these , you know , different html tags mean .

And finally , we spend a lot of time into learning different html tag starting from uh from heading blocks , paragraphs , you know , line breaks , text formatting tags , list , we learn two kind of list , order , list and unordered list .

And then we also learn how to comment uh to add comments , uh horizontal lines , even images and then the links .

So I hope you guys learn something new through this video .

Uh As I said , I have added a time stamp in the description below .

So you can go to a different topics if you want to review again .

But if you like this video , please like this video or please subscribe to my channel .

And uh yeah , if you have any comments , please add into a comment section .

But Thank you for watching .

I hope you learn something new .

Uh , bye bye .