In this video I'm going to teach you
HTML from very starting to the very end This video is going to be with
complete own handwritten notes You just have to invest your time in this video
there's no any type of pre-requisite Just invest your time in this video
and you'll be able to create beautiful websites Many of you will think that,
this video is quite lengthy But actually this video is quite short because
I've packed my all experience in this video And I've provided hand written notes and the source code
which you can use again & again creating new websites You just have to invest your time in this course and this is
absolutely free, which means you don't have to pay anything You just have to invest your time & attention And teaching you HTML will be my guarantee Before starting this video I want you
to hit the like button and comment.... ...Your name and the city you belong to Doing this makes me feel good And if I ever need to interact with you then
I can find your comment from my comment box It's been a long time for me coding in HTML And I'll tell you what is important
and what's not There are a lot of things which
people usually miss For eg. "Playing Audio" "Main Tag"
"Semantic Tag" "SEO" There are a lot of thing which people usually miss I'm going to cover all these
topics in this video And I'll make you a successful
+ profitable HTML developer So that you can get a good starter
and you can build good websites Now I want to tell you difference between
HTML, CSS & JS with an analogy HTML is like a human skeleton And CSS is just like the
skin on the skeleton This means it beautifies that CSS do the same work on HTML
just like skin do on our skeleton Our skin provides help to our
skeleton to look good And CSS helps the HTML to look beautiful Just like our brain impart the logic in us Just like that JS provides logic to
website made with HTML + CSS I've discuss briefly more about
this in Chapter 0 Where I've explained this
with another analogy But now we'll understand the difference
between the Backend & Frontend And how does a basic website works Whenever a web browser request
"www.codewithhary.com" from a web server So in return web server send the
files of HTML, CSS and JS Your browser parce these
HTML, CSS and JS files And show you what you actually
see in a website Actually it was codes But your browser parce that in such a manner
that a beautiful website is visible to you I've divided this video in 5 chapters Where I've provided a practice set with each
chapter so that you can practice it well I've solved important question in that And I'll provide all the code as a zip file In this video I'll tell you how
to download those codes Let's get started with the introduction So guys I've made a PDF of chapter 0 And I'll open this Chapter 0 PDF here And as you can see I've written
"Chapter 0 introduction" HTML = Hypertext Markup Language
and HTML is the language of the web It is used to create websites If you ever visited a website
Let's suppose "www.codewithharry.com" If you ever visit a website And then you go to "View page source" So you'll be able to see the actual
source of this website You'll be able to see how this website was made What are thing which was used in frontend Which type of tags they have used And now if you don't know about HTML
then maybe you'll find these tags over-whelming But let me tell you, I'm going to make
these things very easy for you all So we've lean about full from of HTML
it is Hypertext Markup Language This is the language of the web
which means you'll need this ...If you want to display
beautiful web pages It is used to create websites We use HTML tags to define
look & feel of a website To define the look & feel of a website
we use the HTML For eg. if I want a link here,
so I'll specify that through an HTML tag And if I want an image here, so I'll
need to specify that through an HTML tag That I need an image here And if I need text or a paragraph here
so I've to specify that through an HTML tag That I need a paragraph here Just take page composition like
a food with different kind of ingredients Like a recipe For eg. in cake if you want to
add chocolate or cake Just like these ingredients you have
to add HTML tags in HTML web page Now just like you make food
there's a recipe You add the ingredients accordingly It's not like you added 10 tsp Chilli powder
and 20 tsp salt There's a sequence in the recipe
which we have to follow Just like there's a sequence of using HTML tags You have to add those tags accordingly Now look, HTML stands
for Hypertext Markup Language HTML is the language of the web
it is used to create websites We use HTML tags to define
look & feel of the website With understanding of these tags and how to put them
together, we can create beautiful websites easily We can create a very beautiful website
with understanding these tags If we know how we can use
these tags together So we can make very beautiful websites Just like I made "codewithhary.com" I definitely used my HTML
knowledge while creating it HTML knowledge will definitely be
used while creating any type of website The biggest question people will have in their mind is
"If HTML is enough so why we need CSS & JS? " Let me tell you HTML is only used to define your
website's page's layout I repeat,to define your website's page's layout It is just a bare bone page structure You haven't added any design or style in it If you don't use the CSS,
let me show you how your website will look I'll only keep the HTML and
remove the CSS from this So all the CSS style sheets....
You don't have to learn these things I'm just showing you after removing the CSS style sheets And look after removing CSS style sheets
this is how it looks Now you don't have to learn how to remove style sheets Because I'm going to teach you this But I just want to show you.... ...If I remove CSS style sheets
so this is how it looks So now you all know why CSS is used for? CSS is used for to handle the designs
and all other things I haven't ruined this website I just changed that on frontend
And I'll also teach you this This was not changes on Backend
which means I haven't changed this for all I only changes "codewithhary.com"
for this particular browser Look, I reloaded this page
and everything is in its place So this button is of green
color or blue or red The sequence of the button...
You can specify all this through CSS You specify all this through CSS And that's why we have added CSS in website Now if I ask you about CSS? CSS is used to add styling in any page Now if I ask you about JavaScript JavaScript is used to program
log in for the page layout If you want to program logic
for any page layout For eg. If we take the example
of this particular website This is running through logic that
at first this have to be written After that "Machine learning" And then "Welcome to CodeWithHarry"
I did all this with the help of JavaScript How can I specify that what program
will run after clicking on which button? I will specify this with the help of JavaScript With the help of JavaScript we
can program the logic We can specify that if a user click
on this button so this will happen Does page have to be reload or not?
We can specify this with JavaScript If any user move their mouse cursor here So let us say tell him to be alert So to specify these type of things
I can use JavaScript JavaScript is used in logic programming
How? You'll know soon about this "What happens when a user hovers on a text? " When to hide or show elements? If you need to hide or show any element
so you can do that with the help of JavaScript You can write code in JavaScript
to hide any element Let me show you a very quick example I'll move this downward For some reason I like it downwards
I don't know why You can write JavaScript here
I'll tell you how these things actually works So I'll open my JavaScript console
where I can write my JavaScript And here I'll quickly write
"document.body.style.backgroundColor = "red" ; I repeat I've written this line
which says.... Turn the body's background 'red' And look as I press the "Enter" as I inject
the JavaScript, this turns 'red' And how to perform these things?
I'll tell in Chapter 1 I'll tell you, how you can do these things But for now I just want to tell you
how you can control your page Now many of you will think that
"BG color" is a part of styling No, You can change the BG color through CSS But with JavaScript you can even control that With JavaScript you can choose to hide
or show anything & for as many minutes as you like With the help of JavaScript We'll learn all these things And you know these things will be
in their place when I'll reload the page Now let's have a look on a beautiful
analogy which I've written This is a very good analogy
that's why I refer it as "Beautiful" If HTML is your car's body Let us assume you are a car manufacturer If you are not, then just assume And now I'll search for a video on YouTube
which is related to car manufacturing And I've got a video
related to car manufacturing Now look at these cars Look at their unpainted body Just take those bodies as HTML And now if I paint this and
make some designs... Add some designed lights in it Tail lights, head lamps
and add a good wind shield And make it like that everyone who
see this will be amazed by its design For now no one will be amazed
by this car's design There are cars, like sport cars You'll be amazed by their design So if you see those type of cars The first one is its frame Along with that they have designed it So just like that with HTML
you design the frame of your website And then you design it with the CSS So now if we forward it, I hope they have
painted it & make it looks good And whatever the car it is
It'll look good So look...... They haven't showed this Look it is looking good now,
They have painted it and done all the detailing So the conclusion is...
At the first the car was like this And now this is how it looks You'll find these types of car very amazing But I just want to tell you that... CSS is used for styling So what is this JavaScript Take JavaScript as car's engine
I mean logic When to put break & at how much pressure How to change the gears What will happen after changing the gear
Take this as an example of JavaScript What will happen when the
user will change the gear Now suppose there is a car which looks good but its
break doesn't function & it's engine is also broken So that car is also useless So this is role of
HTML, CSS & JS on a website The HTML is the frame of a website
CSS is the decoration And JavaScript is the frontend logic Why am I referring it as frontend logic So JavaScript is a type of client side logic
which means the logic that user can also see And backend logic is always hidden from us The server from where this website is coming
for example my website was designed in Django So what logic is Django's backend
is using I will never know I can only see the logic of frontend I can see it's logic that how is it functioning
so I can see all the logic of frontend If you're too confused, then don't be Just understand that
JavaScript program the logic That what will happen by clicking on which button In how much time the action will
be taken by clicking on which button Whatever the action your browser is taking
For eg. If it displaying an Image So I hope you've understood this. We'll start
learning how to beautiful layout in this course We'll soon learn to create beautiful layouts We'll now install the VScode Now many of you will think why are we installing
the VScode and what this is? And do we need to install something special to write basic HTML website Let me answer these questions
NO! We don't need to do anything
fancy to create websites For eg. if I create a notepad file here If I select "New" --> "Text Document"
And if I name it "codewithharry.html" You can save an HTML file by
".htm" or ".html" extension I've made this file And it is saying you're changing the
extension from ".txt" to ".html" is it fine? Yes it is fine
I've changed it knowingly Now I'll open it with notepad I'll open it simple notepad which
every computer have If you're using a Mac or Linux So a basic editor is definitely shipped
with each operating system So let's move here & what we'll do? We'll click right --> View page source And we'll copy this and paste it here I've simply pasted it I'm telling you the website won't
look 100% good Because there are styles which
I'm using through sever roots For now we won't discuss this We'll just keep in mind that it's not this easy to
view page source of any website Copied it's code and paste it in a notepad And we can copy that website,
It's not possible But maybe it is possible
Let's have a look, so I've saved it I've opened it with notepad by clicking right I'll open it with notepad by clicking right And after pasting all this text
I've saved it with "Ctrl + S" And now I'll open this in Google Chrome It is copied to quite extent but not fully It is look same to quite extent To some extent we copied it But we were unable to copy it 100% Look here, this is different & this is different We'll also understand its reason And we'll understand its reason
briefly in the upcoming chapters But for now just remember you
don't have to download anything Look the images are missing from here Style sheets took some time to be downloaded It is working, but some images are missing But again If you click on a Blog so it is not working So the conclusion is... You can copy the
website but not 100% It's not that easy to copy the website Now if you have understanding
so you can do, it's not that difficult But it's not that easy because... ....there are a lot of things.
We'll have a look at them But for now we'll just keep in my mind
that we can do coding with Notepad But the biggest drawback of using
Notepad for coding is... That you don't have any support through
your IDE or Text editor What I mean to say is..
If you use a text editor like VScode Or you use a fully fledged IDE
for eg. dream-weaver There are a lot of things in market nowadays I recommend VScode personally to everyone Because in VScode yo can perform every function.
I also have written this in notes Let me close all these tabs We can use any text editor of our choice You can also use notepad, But using notepad
while building a big website will be stupidity Why? Because if you're using Notepad
then you have to type each & everything And if you're using VScode so it provides
some suggestions when you are typing Now look, How to install VScode?
You just have to open a new tab And you have to search "Download VScode" And if you're using Mac or Linux
so you can download it accordingly I'm using 64-bit windows So I'll download it by clicking on 64-bit
And look my VScode has started downloading It downloads very soon if you have a good internet
connection and my internet speed is quite good So you just download it and after that You just simply have to open it
and then you have to install it It's as simple as that Now I want to ell you a few things While installing it you have
to check some options Which means you'll see some boxes and
you have to select them I'm waiting till it downloads
And it has downloaded When we'll open & run it So look, you've to read & accept
the agreement and then click on "Next" And you have to check some options
look I've checked them "Add "open with code" to
Windows Explorer file context menu" "Add "open with code" action to
Windows Explorer directory context menu Register code as an editor
for supported file types "Add to PATH" and I'll tell
you what will happen by these And then click on "Install" I've already installed but
I'm still installing it If you've installed it wrong. Let suppose
if you forget to check those options So you run it again just like me
you won't face any loss You won't lose any important file I won't launch it and I'll click on "Finish" And if you follow every step and if
you have installed the VScode as I told you And if you right click here so you'll
find an option here "Open with Code" We command it to show this option
when we were installing the VScode Click on "Open with Code"
and after that You'll see all the files of
this directory here Not here but here And you can create a new file by click here
and create a new folder by clicking here If you're using VScode for the first time
then don't be scared Because you'll get used to
once you use it And then you have to click on " + " sign And...... you can create any file
for eg. "This.txt" And you can write anything here This is some content on this file Save it And after this you have to click here
in you extension tab And after that you have to
install an extension Which is "Live server" Now many of you are using this very first time and
you don't have any idea about "Live Server" Just install this "Live Server"
"Installing...." And it is now installed Now as you can see
"Live Server" has been installed And I can open any file with "Live Server" Let me show you the file we created "cwh.html" If I right click on this file And click on "Open with Live Server" Look I'll click on this & it is asking me
something and I'll cancel it And after this look,
it'll create a Live Server for me It creates a server like a website
and then display all the files You can open it directly with
double click on these files But this method is recommended
because this creates a web server for you And if you are using web server So the advantage of using a web server is...
Your files will actually be served through server When you'll host your website If you serve your files through a web server
from the very beginning So everything will be identical and
this method is highly recommended In comparison to this method So I'll close this & this And I hope you've installed the VScode
we can use any text editor of our choice Once again let me tell you Here I'm using VScode because it is
lightweight open-source from Microsoft You just simply have to visit the Google
and search "VScode" just install it like me You can write HTML even in Notepad Text-editors like VScode just
make these things easier We'll see how VScode make
these things easier I'll make this "CWH.html" file, a blank file Let me show you how VScode facilitate
in a great we-development If you add an "exclamation mark" (!) And then press "Enter" then
you'll get this template automatically So this was a very small thing to notice And if you press "Alt + ↑"
so look you can move this You can move all these things In fact you can move this line
upward & downward If you can perform all these actions
so you can definitely become a fast web-developer Compare to if you do coding in Notepad
Nobody codes in Notepad We use VScode for these kind of features
for example "Live Server"... ...And to be able to move this line To duplicate the line To use all these features and to set the
keyboard shortcuts we use VScode I can zoom it by pressing "Ctrl"
and scroll my scroll wheel If I go to "Settings" and then
turn on this setting So you can zoom it by using your
mouse wheel if I check this setting So I can zoom it like this So to learn all these things we use VScode Or I'll say to enjoy these features
we use VScode Because we got a lot of things in
VScode and there's nothing in Notepad To change the font size you have to press a lot keys So that's why we won't use Notepad
But we can definitely use Notepad We just have to understand how to do things Now we'll move to the chapter-1
where we'll create our first website We'll learn different kind of things
and learn about "index.html" And we'll learn about we page structure What is a basic web page structure Let's move to chapter-1 now So guys we'll now move to Chapter-1
Firstly we'll open this And the Chapter-1 is "Creating pour first website" Which will tell us how we can
create our website So before starting this let me tell you
that every website is made up of HTML And we start building a website by creating
a file named "index.html" So I'll open my VScode And my VScode is opened in this folder In which folder?
"html0" I want to open VScode instead of this folder
but in this folder Because that was the chapter-0 and the work
I done in Chapter-0 was in this directory And I want the work of Chapter-1
to be done here So I'll do right click here and then
click on "Open with Code" And as I clicked on "Open with Code"
you can see this folder has been opened Does our old folder has been closed in VScode?
NO! Our old folder is still opened
so we'll close it And we'll maximize it and create
a file here "index.html" Why "index.html" don't we
have any other name? "index.html" is special name for a file Which tells your web server to start with "index.html"
page when someone visit your website I repeat, this is the starting point This is the point from where your
website starts to be visible Let me quickly show you from the
notes what I've written "This is an special file which is presented when the
website root address is types" For eg. if "codewithhary.com"
is purely an HTML website So if someone visit "codewithhary.com" so
its "index.html" page will be visible first I hope this is clear Now let's have a look at a basic HTML page
which we generated What I'll do is..
I'll type an exclamation mark (!) Now look "Emmet Abbreviation" is written here
What does "Emmet Abbreviation" means? Emmet is a tool which helps to write
HTML & CSS correctly Emmet is plug-in which help the web-developers
to write CSS & HTML correctly As soon as I type exclamation mark
and press the "Enter" Look I'll get this boiler-plate-code of HTML Now if I start the second one
just as the first one If I start this so I only found
"DOCTYPE html" In the same manner I can do many things We'll learn how to use these type of
"Emmet Abbreviation" through out the course When I typed the exclamation mark (!)
so look We got the boiler-plate-code generated here in "index.html" Look if I add "h1" in the body And let's leave "What h1 is? " "This is a heading" And after this I'll write a paragraph "This is a paragraph" And let's leave for now
for this heading & paragraph is Because we just want to generate
an HTML page And we want to open that in a "Live Server" Because we want to see how our page
will look in our server Look, as I opened this in a "Live Server" So what is written in the URL
"127.0.0.1:5500" Which is a server created by
"Live Server" extension After creating this server it is displaying
"index.html" page through this server But.... Listen to me carefully If I don't write this "index.html"
then what will happen? If I don't type "index.html" in my URL bar
even then I'll get the same page "This is a heading, This is a paragraph" If my page wasn't named "index.html"
Suppose if I rename this file Let's suppose if I rename
it by pressing "f2" And if I give it any random name
if I give it "this.html" instead of "index.html" You can name it after someone's name
I'll name it "harry.html" Will I be able to see anything after changing it's name?
NO! Look it is saying you have 3 files in this
server root which one do you want to see? At first there was "index.html" present
so it was displaying me the "index.html" It was telling me you have an"index.html"
file so I'll show you "index.html" Because "index.html" is an special name Which is displayed to you when you
visit any server's root That's why "index.html" is an special name And you have to remember this name
when you'll create a website I should have press "f2" And I've rename it to "index.html"
and after that If I reload it,
so look my document has appeared here Let's have a look at this basic HTML page Let's have a look what this is? If I visit "codewithharry.com"
then it have its own page source It also contains all these tags We'll look how we can understand
all these tags in a bare minimum page At first we'll see a "DOCTYPE html" in every website
this specifies that it as an HTML 5 document It is using HTML 5 What is the HTML tag?
It is a root of an HTML page. And what is in the head?
The meta data of the page. And what do we mean by Meta data?
"Information about some already existing data" Which means a brief data about already
existing data, this is called meta data And what is the data?
Data is the information You already know what data is... Let's suppose you have stored someone's data,
address & phone number, so this is called data And what is the meta data?
It means the data about the data This is already a data but meta data means
"The data about the existing data" What's the description of this page and
what's the title of this page There a lot of things which come under "The Head"
we'll see soon what are the those things And now as I opened this tag
now I've to close this tag too We've to open almost all HTML tags
and we also have to close them There are a few tags which doesn't need to be
closed, and those tags are called empty tags But most of the tags which we use in
the page & which contains the content We have to close those type of tags I've added opened "Head" tag
& then "Title" tag And then I've close the "Title" tag
and I've added the title "Harry's website" Let me show you what "Title" does
Now here the title was a document I'm displaying "Harry's website" here Now look here is some meta text her And what is the meta text?
Meta set means the encoding of this page is "UTF-8" I've specified that And now I've specified some more things, and by the way
it was generated by-default through Emmet So "View port" & "XU-A compatible"
what does these means? "XU-A compatible" is used for the
Microsoft's old browser's compatibility And "View Port" is used to
change the initial scale There are more tags similar to these 2
tags which we can use to build our website But first of all we'll learn about
some most important tags in HTML Body contains all the tags
which you'll see on this web page The tags which are displayed
are present in the body Now look here, I've mentioned this in notes "The main body of the page rendered by the browser"
This is the tag visible here And then I've added a paragraph tag
and a heading tag And then I've closed the body Because here my body closes and whatever
I want to render in the browser ends here That's why I've added the closing
tag of body here So I hope you've understood this
here is the HTML closing tag So there were the tags which we used to create this website Is this website looking good?
Obviously not! This website is not looking that.
But this is our first website So write "Congratulations on your first website" in the comments We've made the first website of this course
No matter how it looks But this is our first website of this course
so make sure to write "Congratulations" in comments Now we'll move back to the notes And I've written here
"The difference between the tags & elements" "And how does your browser render your page" So look it is simple, the tag is the container
for the content or for the more HTML tags For eg. Look at the body tag
what does it contains? It contains some more tags And along with that it also
contains some content Now if we talk about "h1" tag "h1" only contains a content "This is a heading"
It doesn't contain any tags So a tag can contain more tag
or directly a content Just like "H1" and the paragraph Now if you want to generate a
dummy paragraph through Emmet So firstly write "p" and then press the "Enter"
and it'll complete automatically And then write "lorem3" As I wrote "lorem3"
the three words have been generated Now if I write "lorem30"
will it generate 30 words ? Obviously 30 words have been generated Now I'll save it, look
30 words have appeared here And now if I want it to generate 300 words That's also possible "lorem300"
300 words have been generated here If you ever have to build a website &
you don't have any idea what to write in this website "lorem300" "lorem30" "lorem3" "lorem5" "lorem7" And you'll be able to see the
dummy text in your paragraph So "This is a heading" , "This is a paragraph"
and you can see "Lorem300" is written here And along with that.... Look here, this have been rendered And as soon as I save this page It is displaying the changes automatically after reloading By the way this is not a work of HTML This is the work if live server Live server is an extension which reflects
the changes when you save your files Every time I build my website template
I always use the Live Server This extension was made greatly in VScode Now we've understood
"A tag is like a container" Your HTML document is nothing
more than this It is just a piece of code Whatever website you see on your daily basis
Just like if you're seeing my website The actual website is not this one But this one This is the source code It's about the code and not about the Images
or Red colored button or anything it contains Your website transports in the
form of this code In actual this code gets transported And then as soon as your browser gets
this code it renders this code in this form So the code is provided to the
browser through server And browser renders the code in this
form which you usually see So now let's understand, as soon as
your browser gets this HTML document So your browser plays a major role in converting
this code to a viewable form So I hope you got the point
"How to display an HTML document" Now let's talk about the important notes
I've written some things here which are important "Head and body tags are children of HTML tags" So look, you can see your whole
code in a way like this First you've specified your doc-type
that your doc-type will be HTML You'll find the first tag very unique
in compare to the other tags And then our main HTML page starts We've written HTML here And where is its closing tag?
Here in line #14 Things it contains.... What are they? Those are its children Now I'll show you one thing very
interesting from the VScode Now if you click on the left
side of "The Head" So look they have collapsed And now they have expanded Collapse-Expend, Collapse-Expend So now look the HTML contains
The Head & The Body Understand this in a way that
HTML have 2 children "Head" & "Body" So when HTML have 2 children
"Head" & "Body: So HTML is obviously the father
of "Head" & "Body" This is simple man, please don't say
that you didn't understood this This is very simple thing So HTML is the parent of
"Head" & "Body" And what is the relation between
"Head" & "Body" They are "Siblings" ,
This is the exact word we use "Head" & "Body" are Siblings Now look here I've written this "Head & Body are the
children tags of HTML tags" In the same way "H1" & "Paragraph"
are the children of? They are the children of "Body" Only in my case It is possible that you create a web page in which
"H1" & "Paragraph" is not the direct children of "Body" We'll see this later But if we talk about this page So in this page "H1" & "Paragraph"
are the children of? But "Head" & "Body" will always be
the children of HTML tags HTML is the parent of "Head" & "Body" tags
this is the very simple thing Just understand this in a way that
Raghav is the son of Shubham So Shubham will be the Father of Raghav Most of the HTMl elements have
Opening & Closing Tags... ...With content in between
Opening & Closing Tags Just as we saw here that... H1 has the opening & closing tags
with content in between Just like that "Paragraph" has the opening & closing
tags with content in between We've understood this Most of the HTMl elements have Opening &
Closing Tags With content in between We've discussed this "Some HTML tags have no content" There are some HTML tags which doesn't
contain any content for eg. "BR" And "HR" HTML's HR tag And what is HTML's HR tag?
This is used to create a horizontal line We'll talk about these tags Now let's move downward and see
"We can either use '.htm' or '.html' extension" Along with ".html" we can also
use ".htm" extension If we don't add "l" in ".html"
if we are lazy And we don't want to type the whole "html"
but we only want to type "htm" So you're welcome you can do that too Your templates will work but I want
to give you a disclaimer Sometimes.....Let me show you the Live Server
is unable to detect the "index.htm" It detects "index.html" as a starting page But if you open the "index.htm" so you'll
get this page totally rendered Which means we mostly have to
use ".html" extension And we don't have to use ".htm"
There's a reason for that Because if someone write code in backend or
create an extension or a piece of software So they sometimes forgot that they also have
to add ".htm" as a supportive extension Because mostly ".html" is used So if they haven't added ".htm" as a
supportive extension for eg. Live Server They haven't added this in Live Server
to detect the ".htm" extension Which is why when we visit the route
it doesn't display in case of ".htm" Now I've changes the name of my file to
"index.html" that's why it is displaying So we always have to use ".html" But we have to be aware that ".htm"
is also a valid extension of HTML files Now we'll talk about the comments But first I want to tell you a fun feature
which you might already know "inspect element or view page source options" We got these 2 options What is "Inspect elements" used for? It is used to inspect any element For eg. I'll show you on my website if I do Right Click on "Browse Blog"
and then click on "Inspect" Now look, blog browse blog If I change "Browse Blog" with
something like this "Browse this website" So look it has changed to
]"Browse this website" If I inspect "Contact me" And then if I change this with
"Contact Shubham" And then if I click anywhere. So look it
has changed to "Contact Shubham" Is it changes for everyone? No this has changed here temporarily So it is not about that you can change
this website by inspecting element If this was possible then You and I have
changed a lot of website till now So you cannot change the backend But you can change the frontend
only or your browser Just like I've shown you So you can do this But it's not like that you can
change the website for everyone So this is not possible When I'll reload this page everything
will be back to the normal So I hope you all have understood
this "Inspect Element" And I've already told about "View Page Source" that
you can see the whole page source by this feature One more thing I want to tell you
about "Inspect Element" When you'll click on this arrow
in the Google Chrome Then you can inspect any element For eg. If I want to inspect this one So look here is the button And then if I click here and then on
this image so look this has been inspected And then if I click here... ...and then here so look this
"Lambda Image" has been inspected So I hope this is cleared to you Along with that I want to tell you if
you click this on your phones So you can see how your website
looks in different phones So this is how my website looks in Pixel 2 And if you open my website in
iPad so this is how it looks And if you open this in Galaxy Fold
so this is how it looks So the website is responsive And what is the meaning of responsive? Responsive means if you use this website
in any device so it looks good It's not like if you a build website
for just phones And if you're opening that in a computer
so it is creating problem Responsive means that your website
is adaptive to all devices So nowadays responsiveness
is must for websites If any client ask you to build website So he won't specify you 10 years ago responsiveness was an extra feature It was count as an extra feature provided
by a good programmer But nowadays it is a necessity not an option 10 years ago it was optional Nowadays internet is used more in
phones as compare to computers So that's why people check it for phones first So that's why the "Mobile First"
Concept is widely used "Mobile First" means the website
is first responsive in phones Whether or not responsive in computer
is second concern Because the mostly used devices for
internet are Phones & Tablets And other pocket devices So I hope you've understood what responsiveness is And how to make a website responsive?
We'll create that through CSS & JS Bur now we're only learning HTML So that's why we'll first finish this HTML step
and then we'll move to the responsiveness You can use "Inspect elements" &
"View Page Source" And HTML elements =
Start Tag + Content + End Tag So the HTML element..... Whenever I talk about a tag so by that
I mean H1 or H1's closing tag H1 is the opening tag And this H1 is a closing tag So whenever I'm saying "Tag"
I mean this tag or this one BUt when I'm saying "Element"
so I mean this whole line This whole "This is a heading"
is an element So it is an element & look here HTML elements =
Start Tag + Content + End Tag So Start Tag & Content & End Tag
creates an HTML element Now let's talk about comments
what are comments? Let's suppose if I want to
write something here I want to write why I added this heading I want to specify this, I want to write
"this heading will be changed in future" Future is pronounced as Fu-Tu-Rey Sorry it is written as Fu-Tu-Rey
but pronounced as "Future" So now if I move to here The problem is, It is also displaying on my web page I just want to write this but
I don't want to display it But Google Chrome is
displaying my line So is there a way for me to
write notes here? For eg. I want to write here
"Improve below paragraph" So let's suppose if I want to
improve this paragraph So what will I do? What to do when I don't want it to display here? I've written "Improve below paragraph" here But I don't want it to be visible
because these are my notes These are the notes which I don't
want to display to the user But I want to keep these notes for me As I'll press "Ctrl + / " Look it has been converted to a comment And I'll again press "Ctrl + / " "this heading will be changed in future"
has been commented out This means it won't be displayed
in my web page These are the comments Things which exist but you don't want to
display them in your web page... ...Are called comments What are the comments?
Let's read "Comments in HTML are used to mark
text which shouldn't be parsed" What do parsed means? When this source code of HTML
converts in this form This is called parsing Google Chrome is reading this code & then displaying
it in this form to the user, this is called parsing Parsing is called to understand
this code, tags & elements So now if I want it to ignore some lines
of text which I don't want to display I'll do right click > view page source
so look it has been ignored "this heading will be changed in future"
has been ignored And "Improve this paragraph"
is also ignored I want it to be ignored by Google Chrome
so I made it a comment And Google Chrome has obeyed me
and it has been ignored So these are the comments And I also have written comments here If you use Notepad for your HTML coding
so you have to write this yourself You can use " Ctrl + /" to do
comment & uncomment Comment means to comment any text Uncomment means to uncomment any
text which is already commented Commenting-Uncommenting....
And we'll use this terminology a lot While programming I'll leave "Improve below paragraph"
& "this heading will be changed in future" I'll leave all these as they are
and read the next point "Case sensitivity"
Is HTML a case sensitive language? NO! HTML is a case insensitive language I mean if you use lowercase or uppercase
it doesn't matter it'll work properly If I write this tag as a capital-P And if I change this to a capital-P So will my browser show it correctly? Yes it'll show it correctly, look if I reload
it so a capital-P has been appeared here So I can use uppercase or lowercase I can use any but lowercase tags
are highly recommended I know it'll work but lowercase tags
are highly recommended This is a whole element & 'P' is an opening tag And this 'P' is a closing tag I hope you got the point Now we'll move to chapter 1's practice set And we'll practice some things And we'll also grasp these things which we
understood & make sure to download the notes I've written these notes for you
so please download them These notes are very helpful And I'll provide the PDF of these
notes to download in the description So I hope you've understood this
HTML website's structure You'll also get the codes & notes &
everything I'm writing here Let's move in to chapter 1 practice set So guys this is the chapter 1 practice set
which I'm opening here And I've added some questions in it
which will help you to understand HTML better Now look "Inspect your favourite website &
change something on the page which is displayed" This is a very simple exercise But I want you do this on your own Because if you inspect a website
so first take away you'll get is... ...That you'll learn to change
your favourite websites And that can be any website
I'll change the "CodeWithHarry" website So now we are on "codewithhary.com"
and I'll show you changing this By the way I already did that one time before Lets suppose I want to change "Contact me"
And I want to change it to... "Contact this person" So this is how I can change this
and make sure to try this on your own Try to change it It's not important to change this website
and I know that 90% of you will change "codewithhary" Try another website You can change anything
or you can also use "codewithhary Try to change your favourite website
it is very fun when the web page is changed Very few people are familiar with that And those who know is good for theirselves Go to your favourite website & try to view the page
source and write the exact lines of code Does it clone the website? Why? Visit any website & do right click >
view page source And see if you're able to clone
that website or not Now what I'll do is... I'll try to clone this website but you can
use any website of your choice You can clone "Wikipedia" And I'll open the "Wikipedia" and then
I'll do right click > view page source And I'll copy it's source And after copying this source
look here are many things Here are a lot of stuff And I'll create a file
"practice.html" And I'll open it with "Live Server" So look this is the Wikipedia which I copied And this one is the actual Wikipedia So you can see that the website is not copied exactly
and you should know the reason about that What was the reason that the website
was unable to be cloned? So look when you use CSS in your website So you sometimes use relative links There's an absolute link
What is absolute link? If I command my computer to visit "codewithhary.com"
so this is the absolute path of this website But how can I command it to visit relative
I can command it to visit "codewithhary.com/blogs" Which website's "/blogs" ?
"codewithhary" So if you visit "/blogs" so you'll be here
And if you visit "/videos" so you'll be here If you click on "/contact me"
so you'll be here And if you click on "/start watching"
so you'll be here When you visit "/videos/Java tutorial for beginners"
so you end up on this page So they have added a mixture of absolute &
relative links in the source of Wikipedia And your version of Wikipedia is unable
to find the relative links... ...Which are related to "Wikipedia.org" But it is trying to find that pages
on "127.0.0:5500" Let me show you this but if you're unable to
understand this so please ignore it But if you are able to understand
this then well & good But if you are not.... then you'll learn it
don't be tensed about it So look here are some pages Which were unable to load which is why
it is showing the error And those things are unable
to be load because... You haven't added the paths correctly So to clone a whole website you've to do some
more things we'll talk about them later So I just wanted to make you do exercise for
cloning a website through this question So you can have a good idea about it is not
that easy to clone a website So it is not that easy So I wanted to tell you this Write any HTML code inside a text file.
Does it work if you write it using Notepad? Will it work if you execute it using Notepad? Now open this And I'll provide you a new text document After writing "New text document"
I'll write... ..."Notepad.html" I'll do one thing, for now
I'll just change it to "notepad.txt" And I'll add some HTML code in it And I'll copy HTML code form here Have you noticed something?
"Notepad.txt" is here VScode doesn't perform any type of magic It only does what you can do with Notepad But because you can perform all those task here in
organized manner so that's why we use VScode Or you use an alternate of VScode So I'll copy this in "notepad.txt" I've opened "notepad.txt" twice
but no problem So I've done "This is heading will be changed
in future" something like this So now I'll change ".txt" with ".html" I'll click on "YES" and then.... I'll open my "notepad.html" with Live Server Or instead of opening it with Live Server
if I click on this twice So also then it'll work "Notepad.html" is working So why are we using Live Server
when it is supported in Notepad We are using Live Server because it
creates a server in actual Whenever you'll do coding in HTML
or create any website in future So all files will be serve
through a server If we use a server from the beginning
so that'll be good for us So that's why we use Live Server So I hope this practice set was
very beneficial for you And you've understood this easily Now we'll move to chapter-2 Where we'll learn about some basic tags I'll see you in chapter-2 So guys we are now on chapter-2
in which we'll learn about some basic tags And we'll use those tags to create some websites So I'll quickly open the chapter-2 I'll open the PDF which I created for you And as you can see I've written
about some basic tags here We can add elements inside the body
tag to define the page layout We've learned that we have a body tags
which is rendered by the body And we can add some tags in that body tag
which will be visible to us in the browser We've learned about H1 tag And we've also learned about the "Paragraph" tags And we learned that when we use these 2 tags
then we got a Heading & Paragraph How many more such tags are there?
And what type of tags can we use? And what are tags which we can use to
create a good looking website? Or I'll say a good enough website So we are going to learn more about this We can add elements inside the body tag
to define the page layout I'll talk about HTML element
What do I mean by HTML Element HTML elements means An opening tag
& a closing tag Whenever we write an HTML tag we write
2 tags "Opening Tag & Closing Tag" And the content in between This content can be a text or more
opening & closing tags So that's why I've written this as content I can also
write this as <H1> then any heading and then </H1> Now pay attention to one thing in
Opening & Closing tag Whenever we write a tag inside
this angular brackets And we have to close that, so what we'll do?
We add a forward slash(/) And we write the name of that tag
which means </body> And it becomes a closing tag We'll open & close all the tags
in the way in HTML We'll create HTML elements here I'll click right > Open with code And this folder has been opened in VScode So now look I've opened this folder in VScode Now we'll create a website here and the name for
HTML page will be "index.html" for obvious reasons Now I'll add an exclamation mark(!) here
and an emmet abbreviations will appear I'll press the "Enter" And then press the "Tab" x3
And now I'm inside the body Now I'll write H1 here Now what Emmet is saying?
It is saying " Where will you write the whole H1? " Emmet is saying "My son...." "...Don't write the whole H1 tag...." "....Just press the 'Enter' and I'll see the rest" Emmet is so good There are very few people like
Emmet in this world Just write "H1" and then
"List of books" You've written "List of books" Or I'll write "Books to read" "Books to read" I'll write whatever the heading
I want to add And then I'll write "P" And then I'll write
"There are a lot of books to read for you" And now I'll save it and then I'll open it
with Live Server & you know what will happen And it'll open in Liver Server and then I'll be
able too see this heading & paragraph So look I've written an opening tag & a closing
tag & then a content in between What is meant by content? Content can be a text or a combination
of opening & closing tag For eg. we have <H1> </H1> <P> </P> tags in the body And in turn we have some content in <H1> Which is "Books to read" So this is how we define the HTML elements Element is the combination of
opening tag, content & closing tag And what is tag? Here are the
some example of tags Tags means anything which is written in this way Element is the combination of all these 3 things Let's talk about HTML attributes What are the HTML attributes &
why do we need them? Sometimes you have to supply some
more information along with tags For eg. if I move to my VScode So there's no need for me to supply more
information with this H1 tag I just want to tell
what is the content in H1 tag I only want to tell this But if I use an anchor tag here
I want to tell you about one more tag Which is an anchor tag If you write "A" and then pressed "Enter" So look an attribute has been added here
It saying "Please tell in which URL I've to go" First let me tell you about the anchor Tag If you click on a text which is in Anchor Tag
so it'll redirect you to a URL So it is asking for the location So this is an attribute href = what? It is asking you You have to add "href = https://codewithharry.com" And then write the content "Click here to go to Harry's website" Suppose you've written something like this Now when you look at it you'll found a
link on "Click here to go to Harry's website" And when you click on it you'll be redirected
to "codewithharry.com" So what is the 'href' written
with the anchor tag In actual 'href' is a link to a website And it'll open whenever you'll
click on this text So if you want to be redirected to
"codewithharry.com" by clicking on the text... ..."Click here to go to Harry's website" So yo can add the website’s
address in the href So this is the attribute And there can be more than one attribute
For eg. I could've add some attributes here "class = "me" " And "id = "that" " So this is how you can add a lot of attributes I'll remove these 2 attributes And I'll only leave 1 attribute here
which is of 'href' So this is the attribute How can you write the attribute? First of all the name of the attribute and then " = "
and then the attribute in double quotes(" ") Can I use the single quotes(' ') ? Yes I can use them So look we can use single quotes(' ') Will it work if I write this in single quotes(' ')
Yes definitely it will work! So look I've added "href =" in single quotes(' ')
this will definitely work So what is the difference between
single quotes(' ') & double quotes(" ") ? Look you can use any one from the
single quotes (' ') & double quotes (" ") But the attribute you're about to enter
contains a double quotes (" ") For some weird reason let's suppose
this will be my website So you cannot use the double quotes (" ") here If you've used the double quotes (" ")
then it would have confused... ...in the closing tags So it'll think that you've only written this
much after the 'href' So it'll be confused and can also
give a syntax error So if you're using the double quotes (" ") in your attribute's
content so remember to use single quotes(' ') in the outer and vice versa if you're using the single quotes(' ')
in attribute so use the double quotes (" ") Or else you can use anyone from the
single quotes(' ') & double quotes (" ") But in the end, I'll advice you to
maintain the consistency. What you have to do?
You've to maintain the consistency If you're using the single quotes(' ')
then keep using them And if you're using the double quotes (" ")
then keep using them So I'll remove these double quotes (" ") from here Because here the URL of the website is this one &
it doesn't contain the double quotes (" ") So now we've understood this So I've written in the notes for you "Attribute used to add
more information corresponding to an HTML tag" Which means an HTML tag is already written And you're using this to add some additional
information corresponding to that attribute For eg. if there's an anchor tag and you're specifying
the href attribute and writing it's value in it So first the name of the attribute and then after " = " the
value of attribute in double quotes (" ") or single quotes(' ') And then you can write the tag as usual Now I've written here we either use single quotes (' ')
or double quotes (" ") in attribute And now comes the Heading Tag Let's discuss the Heading Tag Whenever you build your website or any
page of your website Then you would like to give it a heading Heading Tag is used to mark
Headings in HTML If you want to make any text a Heading
so you can use the Heading Tag And you can use from the H1 to the H6
for the headings H1 means the most important Heading H2 means less important than H1
H3 means less important than H2 H4 means less important than H3
And H6 means the least important heading H6 specify the least important heading If you use the H6 then it is the
least important heading So use the H1 for the most important heading "We have tags for the most important to
the least important headings" Which means we have the tags for the most important
to the least important heading in the HTML I've written a not here You'll write all these code and
I'll also show you this by typing But first let me type this & show you
so you can have a good idea about this What will be the difference you notice when you
write from the H1 all the way to the H6 I'll also tell you about a trick Now if you press "Alt" key
in your keyboard And then whenever you click somewhere,
a cursor will appear And if you click there again... ...the cursor will be gone The benefit of making multiple cursors
is you can change text easily Just like I've changed these 2 to H2 And then you can change then to H3
by pressing "Alt" key And then you can change this to H4 And then again.... I've made a mistake,
I've made H4 twice I just had to change it to H4 here and here And then I've to add H5 here and
I also have to remove the cursor And then by pressing "Ctrl + D" I'll add a
cursor here and change it to H6 So now look.... I've closed it mistakenly That's good that I managed to saved it I've saved it & look how this
page is rendering H1 will look like this And may be this too is H1,
I've written H1 twice if I'm not wrong Yes I'm not wrong, I've written H1 twice
No worries So this is the H1, H2, H3, H4, H5 & H6 When we move to H6 from the H1
so not only their size changes Their importance also decrease What does it means? Whenever the search engines like Google
will read your page so they'll think.. ...That you're writing the most important
heading in the H1 And after that as you're using the H2, H3, H4....
You're decreasing the importance Which means if you've used the
H1 for "Books to read" So the search engine will think Or any bot who's crawling your
website will think That the H1 is the primary topic of your page So you have to use the H1.....H6 tags very wisely
if you want the search engine optimization And if you want to convey your page's content
easily with any bot, crawler or a search engine So use the tag wisely You never have to use the H1-H6 tags to
define the sizes of the headings I've seen some people who learned
the HTML recently use the H1-H6 tags In a way to define the sizes of the heading For eg.
H1 for the bigger heading & H6 for the smaller We don't have to do this and we have to
use the heading carefully We have to write the paragraph
with the paragraph tag And we have to write the headings
with the heading tag We have to use them carefully Now look, I've told you about paragraphs, anchors and all that
Now let's move back to the notes I've written something here
which I've just told you Note:- We should not use HTML headings
to make text thick or bold We don't have to use the headings to
determine the size of the texts Then in what purpose we have
to use the headings? We have to use the headings when we are
actually writing the headings And not when we've to change the
size of the text or design them I hope you got the point Now we'll move forward to the next tag
which we have already seen Paragraph Tag And what does paragraph tag do? I've told you it is used to add paragraph
and how you can add paragraph And if you want to change the paragraph
so you can change it like this When I'll write "lorem34" so
34 words will appear By the way look a Horizontal scroll bar
has appeared here And if you want a view like this instead
of this horizontal scroll bar Let me show you what I'm talking about Now if we click on "Toggle Word Wrap"
So this scroll bar will disappear And Line No. will appear Which means in actual this is not the line #17 But only this content is line #17 But this is displaying you in multiple lines
so you don't have to scroll it horizontally This is called Word Wrap And we can see the Word Wrap functionality
in a lot of IDEs So I've enabled my Word Wrap So the lines which are actually bigger than
my screen width, will be shown like this So line #17 is actually this big Line #18 is this big
that it is fit within a line So the bigger lines will be shown in the same screen
width and I don't have to use the horizontal screen bar And I definitely have to use
the vertical scroll bar I hope you've understood... ...What is Word Wrap and we should use that So we've learned Paragraph Tag
and the Lorem trick Whenever you write the "Lorem" so don't think if you write
"Lorem45" in Notepad so a text of 45 words will be generated This is the feature of Emmet which is
built-in feature of VScode You don't have to install the Emmet
it is build-in feature of VScode I hope you've understood this And if the Emmet is not working in your VScode
that means you have installed a buggy extension It usually happens that if you
install a buggy extension Or an extension which disables your Emmet
knowingly or accidentally So you can face problem By the way Emmet works
perfectly 99.99% of the times And this case is very rare, but if this happens
so restore the VScode and it'll be fix I hope you've understood this Now we'll move back to the notes And we'll have a look on Anchor Tag What is Anchor Tag? Anchor Tag is used to add
links to an existing content inside an HTML Page Which means if you want to add
links in an HTML page It means if you want to redirect the user
to a different page within the site Or you want to redirect the user globally to a
different website so you can the Anchor Tag Just like I've added an absolute URL
here of "Codewithharry.com" So if someone clicks on this so they'll be
redirected to the Harry's website If I write "href = /about.html" And if I press the "tab" key &
write here "Go to about" So it'll try to visit the "about.html" I'll create an "about.html" here
I'll change the Title with "about" And I'll write "Lorem45" by writing a paragraph And then I'll write "This is about" A very simple thing From "index.html" as I click on "Go to about" So look I've been redirected to "about.html" This is the relative link So I'll write one thing here
"Example of absolute link and example of..." "Example of absolute link" And I'll comment it out because I don't
want it to be displayed on my website And then.... "Example of relative link" And it is the example of relative link which you're commanding
to redirect the user to about.html within the server And what are you commanding here?
You're commanding "https://" Which means there's a website on internet
"codewithharry" redirect on that So these two are different The difference is in this you can visit
globally from any computer But in this you can only visit when
you're in a same server Which means you have to only use the
relative link when you're in your server Actually I'm using Live Server so I know
that here's an "about.html" So that's why I'll go to the "about.html" But if you send this to someone else and
ask them to go to "/about.html" So he won't be able to visit
this file in my server But if you're hosting you website so
yes he can visit your about.html I hope you got the point.
But if you're confused, so don't be Simply absolute link means you're
providing the full address And relative link means you're telling
where you want to go form here Which means you have the same server What is my server right now?
This is the URL of my server "/about.html" so I'm now in
"/about.html" I can press the back button and
I'll be on my previous position I hope you've understood the Anchor Tag And it's href attribute &
absolute and relative links Now we'll talk about the "Image Tags" Image Tag is very simple & straight forward
they are used to add images in your HTML page It means if you want to add images
in your HTML page So you can use the IMG tag
there's also it's attribute which is SRC Which tell you which image you want to add
<img src = "name of the image" > Or the complete address of the image For eg. if I want to use the Image tag here And if I write "Image Tag" and then.... I'm changing the line with "Ctrl + Enter" By the way
many people ask me about the keyboard shortcuts So I'm using "Ctrl + Enter" And then I'll write "IMG"
and I'll add an address in the SRC And I'll add the address of
any image in the SRC I'll search for the images on the internet And we can search for any image And I'll visit the "unsplash" BTW "Unsplash"
is a very API. Let me tell you why And firstly I'll visit the URL of this image And I'll paste that in SRC And look this image has been
added on my page So if this is how I can images on my
web page if I want to Obviously it is not looking quite good
but this is how we add images Now what is "ALT" Suppose if this image is
unable to load by any reason So what text you want to display? Let's suppose you want to show
"Human Image" I know this is very weird but "ALT" means the text that
should be shown when the image is unable to load If I change this to "Unsplash4.com"
so this image might not load And I'll be able to see "Human Image"
which means the "ALT" And now if I fix the URL which I messed up So as I'll save it then I won't be
able to see the "ALT" Which means the text in the "ALT" will only be shown
when the image is unable to be load I hope this is clear, because this is
very simple & straight forward Let's move back to the notes And I forgot to mention about the "ALT" in the notes
but Emmet asked me about the "ALT" automatically BTW I want to tell you one more thing
when you'll put your mouse arrow on it So look it displaying some documentation And this is displaying about the image URL What you have to write in SRCs and which is the
Paragraph and do you want to open MDN reference? So it'll redirect you to the
"developer.mozilla.org" So I hope you’ve understood how you can open the
docs within the server by clicking on some links We'll now quickly move to the notes of chapter-2
and learn "Bold, Italic & Underline Tags" BTW I've told you about the relative & absolute tag
so the same thing is applicable to the images I've save it as image and save
it in chapter-2 folder With a name "image.jfif" It's extension will be add automatically
"image.jfif" Look this "image.jfif" has appeared here Now I'll add another image tag here And after copy-pasting it I've made a replicate line shortcut with (Ctrl + D)
From the keyboard shortcuts I've already mentioned that in a video earlier
"Learn VScode in one video" Give it a shot later But now focus on how I'll add the
"/image.jfif" in the SRC And I'll render the same image again So look this image has the SRC If I do "Open image in new tab"
so this is it's source But if I do "open image in new tab" here So this "image.jfif" has been downloaded Which means the source of
image is "image.jfif" I hope this thing is cleared to you That what is the source of this image and how
you can use the relative & absolute link... ...To display the images So the link of this image is absolute image
Sorry! Absolute source URL And this is the relative URL Because you added "/image.jfif" which means
the "image.jfif" from my server And here you've added image from
"images.unsplash.com/....." URL So I hope you've understood how to
write the absolute & relative URLs Now we'll move back to the notes And we'll talk about the
"Bold, Italic & Underline Tags" We can use "Bold, Italic & Underline Tags"
to highlight our texts So let me give you a demo of
"Bold, Italic & Underline Tags" So I'll write "Bold, Italic & Underline Tags" And obviously I'll comment it out And I'll add a <B> tag here and then
I'll write "This is bold" And then I'll add an <i> tag here
and I'll write "This is Italic" And then I'll add an <u> tag here
and I'll write "This is Underline" And after saving it, Look
these tags has appeared here "This is bold" "This is Italic" And "This is Underline"
Maybe it has appeared twice Ah.... I forgot to save it So here it appears once
"This is Bold" This is Italic & This is Underline
BTW I'll do one thing here I'm commenting out both the image tags
The reason being.... They are occupying a lot of space
you can uncomment them later Now our page is looking quite clean So I've written "This is Bold"
"This is Italic" & "This is Underline" Did you notice something? "This is Bold" "This is Italic" &
"This is Underline" appeared in a single line Which means if I add a new line here Even then this new line won't be displayed As you can see new line has not been displayed
and I've even saved the page So even if I add multiple new lines,
that won't effect it" Or if I add some extra spaces..
Look how many extra I've added here Here I've written "This is Italic" And what does rendered here?
"This is Italic" This means the HTML ignores the
extra spaces & new lines It won't effect HTML if you've
added new line explicitly This totally means that you cannot
add new line here in this manner So how will you add new line? I've already told you in my notes With the help of <BR> tag <Br> tag is used to create
line breaks in HTML Which means if you want "This is Bold" "This is Italic" &
"This is Underline" in different lines so you must use <BR> tag <BR> is an empty tag
and this is how you can write <BR> tag And wherever you'll add <BR> tag
a new line will be added I'll expect a new line after "This is Bold"
and "This is Italic" And I won't expect a new line after
"This is Underline" So look new lines appeared after these 2 But there is no new line after "This is underline"
So prove this I'll add "This is underline2" And it'll appear on the same line As you can see So I hope this thing is cleared to you that how you
can highlight your text within the page Big & Small tags We have Big & Small tags in HTML
and we can use them to... This is big or This is small I'll add the "Small" in "This is small" This is small And as you can see I've got Big
& Small of different size And now after this we'll talk about how you
can add a horizontal divider in HTML There's and <HR> tag for it As I'm explaining you these topics Just as I explained the topic
of heading & Paragraph I'll write "Heading & Paragraph" And I'll comment it out And after heading 7 paragraph
I explained you about Links I want that I'll separate them
with a horizontal line And then I explained you
about the Image tag So I want it to separate it
with a horizontal line And then I explained you about the "Bold, Italic & Underline"
and I want to separate it with a horizontal line I've written <HR> <HR> <HR> here
and look I'm able to see the horizontal lines So why am I seeing this horizontal line?
Because I've added <HR> tags here And now I haven't displayed these images here
so let me display it Where is my image?
Here it is Now you'll able to see this properly So as you can see these are the links
this is the image & this one is the "Bold & italic" part I'll shorten the image a little bit and I can do
that by using the height & width attribute If I add "width = 121px" So it's width will be 121px So this is how I can set its width & height But it's highly recommended that you set the height & width of
any image with the help of CSS (Cascading Style Sheets) We'll learn about this later But for now we'll move forward and
learn about more tags Which are the subscripts &
superscripts tags We add subscripts &
superscripts as follows If you want to add subscripts What is the meaning of subscript? Subscript is used for.... for eg.
if I want to write a chemical formula formula of carbon dioxide CO₂
So how will I write that? This is how I'll write. First let me write
subscripts & superscripts And here I'll write "H"... Let me first write a paragraph here I'll write C.... and then O..... and then... I'll write a subscript and then I'll
write a "2" inside it So look this is how CO₂ will render here I'll also remove the space from here
so CO₂ will render like this Which is ideally looking good
so this is how you can write CO₂ Now let's suppose if you want to write an equation And you have to write (a² + b² + c)
something like this So what you can write? You can write "a" and then a superscript and
then "2" so this is how you can write (a²) And then let us say you want to write (+bx) And then (+c)
So this is how you can write that Let me zoom it of you haven't seen it yet By the way I’m zooming it and I've done 500%
so that's why it is looking quite big I haven't done any magic ( a² + bx + c )
Let me change it to to ( ax² ) You can write any equation So I've written ( ax² + bx + c )
I'll reset it with (Ctrl + scroll) By clicking on reset
It'll be reset to its original size Now we'll talk about "Pre Tag" Now what is "Pre Tag" ? I've already shown you that HTML always
ignore extra spaces & new lines Now if we want to display a text
as we have written it For eg. If I take any random python code
and I'll search for it If I find any Python code....
from anywhere
there's nothing to be worried about Let's take a code form "python.org" Let's take a code form the python docs And if I can find any small code
a small one Python please give me a small code Let's suppose I want to take this
and I've copied it And then I've pasted it with a hope.. ...that It'll be displayed as it is
I mean all the new lines will appear And when I'll save it...
I've to face disappointment Because this whole code has been
displayed in a single line Neither these new lines appear
nor these extra spaces It did preserve nothing But if I want these type of extra spaces
& new lines to be preserved Which means I should get the text as it is So what will I do?
I can use the "Pre Tag" Which means I'll write the
opening Pre Tag here And then I'll write the closing pre tag here Now look what will happen That whatever is inside the Opening & closing
Pre Tag will be displayed as they are So look "this means that"
"svs.getfilesystemcoding() return....." Whatever the spaces & new lines there was You can see the them in this text And if I add more new lines here So look we are able to see a lot of new lines So If you want to that your text
will render as it is So you can use Pre Tags Pre Tags are used to add codes
If you want to render your code on HTML websites So use Pre Tags So that your new lines will
preserve as they are So this was chapter-2
I hope you've understood these basic tags IN the upcoming chapters we'll learn
some more HTM L tags But before that let's do some
practice of chapter-2 Let's move on to chapter-2 practice set So guys we are now here to solve
the practice set of chapter-2 And I'm going to open the PDF of chapter-2 And I've also opened the chapter-2's PDF It doesn't matter We've learned a lot of things We learned about Big, Small, Pre,
Subscript & Superscript Tags And I think it was fun because we've
learned how to build a website Now what we'll do is, we'll do some questions
so that you can hold tight on to the HTML And you can understand better about whatever
the tags, properties & attribute we've learned So the first question is,
"Create an HTML page with a heading" Which is going to be the Title of the page
and yes not this Title But the title heading, there's a heading
which is the Title of the whole page And then there's a primary heading
and a sub heading So what I'll do is... I'll open this same folder in the VScode
because this is the chapter-2's practice set I'll create a file here with a name
"Chater_2_practice_set" or "Practice_set.html" I'll add boiler plate code And I'll name it "Chapter
2 practice set" And in the body I'm going to add the code from
which we are going to solve this question So if I want to add a primary heading
so it definitely will be H1 And let's suppose I'm writing about the mountains And after that.... let us say, I'm adding
the secondary heading and I'm writing "Why mountains" And let us say I've written a paragraph Which contains 45 words And I'll turn on the Word Wrap I've told you how to turn on the word wrap So that the text will be displayed without any scroll bar So Line #12 which might not fit in one line
is displayed like this This is the single line
but it is presented in this way And here is the line #13
This is possible because of Word wrap And after "Why Mountain?" I'm going
to add a sub heading in it And...... The main reason Let's suppose we are writing the main reasons And the Paragraph And Let's suppose we've written
45 words in the main reasons So when I'll open my page in Live Server
so this is what it'll look like So there's a page heading and
there's "Why Mountains" And then there's a sub heading
"The main reasons" so we had to this We had to create an HTML page with a heading Which is going to contain the Title Heading,
Primary Heading & The Sub Heading" What tags have you used in it? Was I able to use the any other tag?
Yes definitely I was able And when you'll learn the CSS then you'll know
how many options you have to solve this question And when you'll learn the CSS you'll find that
you can change the size of any element And when you can do that so sometimes you
become too greedy to use the easy tags Just like changing the font & paragraph So I don't want you to be trapped in the greed I know you'll get an intuitive feeling that
let's finish this in an easy way But in actual will that page be read by any robot? Will that page be an SEO friendly? You must ask these type of questions from
yourselves when you do that "Create a page with 5 wallpaper images
taken from the internet" You have to take 5 wallpapers from the internet And you have to display them And if I search for wallpaper Then to the Images
and if you only want to display them So you can find a lot of wallpaper images Look we've got a lot of wallpaper images So you can use any wallpaper from this
it doesn't matter which wallpaper you'll use If I use this wallpaper
I'll do right click > Open image in new tab And I'll copy the URL of this
image and take this So you just have to choose any wallpaper
from these wallpaper & you have to display it And you have to solve this question on your own I'm not going to solve this The reason is... You should have knowledge about how to do this Because I already have shown many examples And the third question is to "Use BR & HR tags
to display a piece of text with line bricks" Try this question too on your own because
I want to keep this video short & to the point That's why I've given questions for the practice So that you can do practice on your own The forth question is
"try the following equation using HTML" You've to write this equation from HTML
( C + O₂ ➜ CO₂ ) This is the equation of carbon oxidization So we'll write this Let me tell you how you can write this in a paragraph You can write it ( C + O2 ➜ CO2 )
If you write it like this So this is how it'll be displayed
let me show you Something like this and which
is not looking good I need subscript tags So I'll select it and then I'll write here
Sub and then 2 I'll remove this space, and similarly I'll use the sub
tag here and then I'll write 2 and I'll remove this space Now look... The equation is now displayed correctly
( C + O₂ ➜ CO₂ ) So this reaction is looking quite correctly So ideally you want that your reaction
will look like this So I want to tell you one more thing Now if we have talked about the chemical
reaction so let me tell you You can.. Take the arrow of the HTML from the internet So let me show you how you can
display these type of arrows So look they have given a lot
of codes of HTML So if you use "m%rarr" so you can use
the arrow symbol of HTML So we have a lot of social
symbols of this type Which you can use in HTML Let me show you one use of
this type of arrow So look this is how this arrow looks
and you can use these type of arrows in HTML And there are a lot of symbols in HTML which you can use And the codes for those symbols
are also given here So I hope you've understood this So if you ever want to use these type of arrows so you can search
on internet that is HTML provide these type of symbols or not In my case it was providing
and I got the right arrow symbol in HTML That's why I use that So I hope you've understood how to do this "Try write a Wikipedia article using HTML" And I want you to solve this question on your own Let us say I want to open the Wikipedia
page of Programming And I want to replicate this page What type of tags will you use? Let's guess what tag will it be This is definitely a heading tag You can inspect it and it will be the H1 tag This is the primary heading of this
page so this will be H1 tag Let's suppose if you won't find
this H1 in any page So the developer of that page
has made a mistake Because if you haven't use the heading tag
even in your heading So there's something wrong with your page Your page can be displayed using the CSS
without using the heading tags But it'll not be called best practice You have to do this with a good practice If you use best software techniques for building
website or apps then you'll get advantages I just want to tell you this Now I'll close this because our chapter-2
practice set has been completed I've also hand picked some question so that you can
do your practice after completing the chapter-2 I just want to keep these notes as if you have these
notes & this video Then whenever you'll turn the page
you'll remember everything And I also have given practice so that if you ever have
to do revision then you just have to turn some pages Now we'll move to the chapter-3 And in chapter-3 we'll learn
how we can structure a website Because if you learn how to structure a website
then you can easily create any type of website Yes I know our website is not looking that
good because we haven't used the CSS But if we learn how to structure our website So it'll be a good win for us Let's move to the chapter-3 now So let's quickly open the PDF of chapter-3 And after opening the PDF we'll learn
how to create a page layout So chapter-3 is about creating a page layout And I've written something here and
they have a very deep meaning And that's why I will focus on that And I've written very minimal amount of notes And I'll close the rest of the tabs When we use the right tag in a right place
this help us to create a better page layout And it also help for the better indexing
through search engines And it also provides better user experience And I've used the word "Better" here because
what is the meaning of better? "More satisfactory" The work will be more satisfactory Look if you won't use the right tags
and create the website But will the search engines be able to index it? Will your website appear on Google? Will your user get a good experience? What is the meaning of user experience? Let's suppose if you install the third party
JavaScript Library Or if you use third-party CSS frame work It is possible that they have targeted
some particular tags Like header or footer And you're not using that layout So maybe you'll face problems
while using that library That's why I'm suggesting
better user experience So now we'll learn how to create
a layout of a website Ideally your website will contain a header
and then a main tag and a footer So now if I quickly show you
this page in VScode And then if I create an "index.html" So look.... I'll..... What shall I call it?
It is called Boiler Plate Code Boiler Plate Code of HTML will appear here And I'll create it with a name "Chapter-3" Now what I'll do is...
As I've told you about a header tag I've used a header tag here and then
I'll use a main tag here And then I'll add a paragraph here and
I'll write "This is the main content" And after pressing ( Ctrl + Enter ) I'll move downward and after "Main"
I'll create a footer with And as you'll create these tags VScode will completely support you By "support" I means that whenever you'll
write something it'll auto-complete it If you put you arrow won any particular tag so it'll
provide you a link for mdn reference So it'll become very easy for you to understand things
and to do to the reference of a particular tag So look I haven't added anything in the header For now I'll write "this is header" And in footer I'll write "This is footer" I'll save it & open it with Live Server
and my website will open in Live Server And as you can see "This header"
"This is the main content" & "This is footer" And many of you might think that
"What was the need to do this? " I can directly do this by added Paragraphs A human can know that how this
website is structured But a robot won't be able to see this It can only see this And how will it know that what is main content,
header & footer of your website? Footer & Header is not that important
as the main content SO you have to add the main content of your
website in between these 2 tags With that it'll become easy for you to read
& for the search engines also And you also want that search engines can easily
understand the content of your website Why that? Because you want that traffic
must hit your website If you're a blogger or you provide any type of service
so you want the traffic on your website And you want the people to come on your
website & appreciate your hard work So we have learned about the se index and
now we'll move back to the chapter-3 notes And we'll learn how to use these 3 tags So we add navigation bar in the header
and we add Nav Tag in it And in in main tags we add
"Section" Article" & "Aside" tag And these three tags are most
commonly used tags You can add "div" here
we'll learn more about "div" later But these 3 are the most important tags
which you must have knowledge about These are the opening & closing
tags of main tag Basically we've talked about Header,
Footer & Main tag And now we're diving deep in the Main Tag We're trying to understand what should Main Tag contain
but I've added paragraph in the Main Tag But in actual what should the Main Tag contain I'll comment this out because I added this
paragraph just to show you I'll create a section in Main Tag And what 'Sections' mean? Let me explain the meaning of section When you create a section tag it means you want to
display a particular part of your page to users When you write an article it might have been that
you've written a particular thing in your page So there you can use the article tag What type of content you'll add in 'Aside' ? In 'Aside' you'll add topic which is
completely different from your main page For eg. If you're using Google Ads or Facebook Ads So there you can add....
You might have seen Ads on websites So if you want to show ads on your website
then you can use the 'Aside' Tag And then comes the closing tag of Main Tag If you follow the layout which I told you
so your page will be SEO friendly The user experience in your
page will boost up I already have told you the benefits
of following this layout So whenever you're creating a serious website This website not a serious one
I'm just creating it to teach you If you're creating a web-page for college fest or to collect information
about your classmates or a group of your company If you're doing stuff like this then
it is not a serious website But if you're starting a Blog and you want
to generate your living from that Then that's a serious business So then you have to structure
your website in this way If you're creating an E-Commerce website
like Flipkart or Amazon Or you're creating a social
network like Facebook So it becomes mandatory for you
to use the tags properly I wanted to write the "Amazon"
and after writing "ama" suggested me If you want websites like this so you want the
search engines to understand your website So I've written
"creating a page like this is not necessary" But it creates a readable &
structured layout Just like I've shown you And these type of pages are also SEO friendly Because when the computer is able to
understand your page Look, the Google also want to index your page If you mention... Let's suppose you're trowing a party for the whole India And you said that whoever comes
I'll provide the best party ever But how will the people know that
you're providing such part You must have to convey the
information by any means Just like that your page must contains
some very obvious tags Because when the things are obvious
so you keep them in mind This person is throwing a party
its very obvious Or if you structure your page like this
so its obvious that it's your main content And it's very obvious that this is a header
and it contains a Nav Tag And Nav Tag contains some navigations
like "Home" "About" etc So I can easily recognize that you've
created this for navigation So the robot... or the computers.... Or let us say web browser it is also a type of
program it is not a human So if it is displaying your content So the additional information you've provided Which additional information? The exact position of your header, footer
& main content So it can use this main information So your web browser will understand that We'll now move forward & discuss
the Link attributes I've told you about the links And the links are.... Let me write
"href="https://codewithharry.com" I want to go to the codewithharry.com And let me write "Harry's website" here So I've written "Harry's website" Now look "Harry's website" is written here
let me zoom it in so you can see it If you click on "Harry's website" so you'll be redirected
to "Harry's website" there's nothing new in it But if you add an attribute here and
you write "Target = _main" So look by writing "Target = _main"
this website will open in new tab So this type of attributes help you to
add additional functionality So many tags provides many
type of attributes And now if you click here and go
to its MDN reference So you'll get to know more about Anchor Tag So look here is the information So whenever you want to gain more information about
any tag so you can visit its MDN reference And there you can ready everything
about that tag If you're an advance user so
you'll understand this But if you're a beginner so don't be scared They have given a little demo here so just look at it
or I've covered everything in notes & this video So there's is, was or will be nothing
to be worries about And we are here to shoot all
the tensions & troubles Now look I've told you about link attribute
how to open in a new tab And I also have told you that we can put any content
inside an Anchor Tag like Images & headings For now I've just added a text But if there was an image so you can also go to the
"codewithharry.com" by clicking on that image So if I add an image here I'll do one thing I had an image..... This one So if I add this image here And let us say I rename it to "cwh.jfif" And then if I come back here and instead
of this text if I add an Image Tag here If I something like this here I'll write "< img src = "cwh.jfif " And in Alt I'll write "Harry's website" So I'll cut this And I'll save it And let me add width attribute
"width = 123" And image have width & height
both attributes We'll talk about this soon But the point I want highlight here
let me show that first So if I click on this image So look I've been redirected to
"codewithharry.com" So it doesn't matter if there's an image or a text
you'll be redirected to the website in a new tab I hope that this was easy Now if I also add height here Let me take you to the note
I've written something "If the page is inside the directory we need to make
sure that we link to the correct page" And I'll tell you about this And I'll also tell you about the image So these are the 2 things which we'll discuss So first let's understand the Directory Or let me first mention about the height of
the image which is very important If you set both width & height of an image Let's suppose if I make it's height 34 So it's aspect ratio will be disturbed
now what is aspect ratio? Let me show you This is the image with a disturbed aspect ratio Which means if you've created a website with a landscape image And the if you take that image in portrait mode with your phone And then you try to show that image
in a landscape mode So it is possible that your image's
aspect ratio will disturb So to avoid this we only set one
The Height or The Width And then the second attribute
is set automatically So if I only set the height so it'll keep the
height 34 and the set the width automatically Such that the aspect ration of this
image won't be disturbed You read online more about aspect ratio And...... Aspect ratio You can read about aspect ratio I hope 90% of you have understood this But if you're in that 10% who don't
understand aspect ratio Just Google it, don't think that you're dumb Everyone is weak at something It is better to gain knowledge about them ASAP Now we'll move forward to the next one
which I've written here If a page is inside a directory we need to make sure
that the link we are using is for the correct page" What do I mean by this? As I've used this "cwh.jfif" Let's suppose this is inside a
folder with name "IMG" Suppose I've moved all my images
to the IMG folder Let us say I'm using 100 images
in this particular website And I don't want a bundles of images
here in my directory So I'll pack all the images
in the IMG folder But there will be a problem This is saying that
"This is image doesn't exist" Now if you inspect it then you'll be
able to see "Failed to load" Which means you tried to use the "cwh.jfif" But we couldn't find that Why so? Because "cwh.jfif" is not here now It is in the IMG folder
so this is how yo have to add its URL "IMG/cwh.jfif"
which means in the IMG folder BTW you can name this folder of your choice
it's not mandatory to name it "IMG" You can also name it "Harry" IO just named it "IMG" because I can
easily recognize that it contains images And this error will be fixed So there's nothing to be worried about I just wanted to tell you because this is mostly
used when you'll use frame work ...If you use Flask, Django, Angular or View You'll have to face these things At the end of the day all these frame
work renders HTML So we've learned this and this and we've learned
that we can use IMG tag in Anchor tag And we've leaned that we can set only one attribute from the Height
& the Width and the second one will be set automatically And we also have learned that we can use any one]
from the Single('_') or Double Quote("_") Because it increase the consistency And you don't want the other developers
to remember you in bad terms You want them to remember you in good terms And you want to write a good code
with the easiest way And if you're maintaining the code on your own
then it increase a reason to maintain it correctly Now we'll talk about 'Div' and 'Div' tag used
as a container for other elements What does it mean? We use 'Div' as a container Sometimes we have to add some
tags in a container For eg. Let us say I have to pack a Paragraph
and a Heading in a particular section Let's suppose I'm creating another section and
I've to add different Heading & Paragraph Let's suppose I've to choose H1 and
I'll write "Why Love HTML" And then I'll write a paragraph here I'll write "HTML is a quite good language and
it has turned my life upside-down" I'll write something like this and any HTML
developer who loves HTML will write this And then I'll write H1 "Why use Boot Starp" Let's suppose I write "Why use Boot Starp"
here and then if I write "Lorem12" So I want to keep them separated It is possible that with the CSS..... What does 'Div' means? It means we've divided this set of
Heading & Paragraph So I've divided this set of heading & paragraph This one is different and
this one is different Now if I want to increase it's size then
I can do that with the CSS How we can increase that? If you don't know CSS then
give it a shot later I've made videos on CSS For now just focus on HTML And I want this div to be of red color I'm showing you but don't think
that you can't do that I'll save this page and the changes
will reflect automatically And let me reset it with (Ctrl + scroll) Now let's suppose I want to change
the BG of this 'Div' to 'Red' How am I doing this? You don't have to be
worried about I'm just adding the CSS Just to show you how you can change
the BG of a particular 'Div' I've change a particular 'Div' BG to 'Purple'
and another 'Div' to 'Red' So this is how I can add styles and to
add styles I've divided them These 2 are together and
These 2 are together Now we'll talk about the In-Line
& Block elements What is In-line element? and
what is Block element? In-line element is the element which
occupies space according to it's need For eg. if I want to put this SD card somewhere So it'll occupy space as per it needs And I can also put a mouse by it And I can put this pen by it too I can everything side by side But let's suppose if there was a rule that you cannot
put SD card and other things in a same line This is the Block element Let me explain what I mean If I write a 'Div' here. Let me show you a 'Div'
and then I'll show you a 'Span' 'Div' is a container and 'Span' is also a container
I'll write "I'm a span tag here" here And then I'll create another 'Span'
and in that I'll write "I'm another span" Now see the difference between them Now I'll inspect it and I already have told you
that you can inspect by doing right click Now I'll click on this arrow Now see my 'Div' tag... This is the Paragraph but
I'll go to my 'Div' tag The 'Div' tag was inside the main tag
I've added that in section Look how much this 'Div' should
occupy space? Only this much But it is occupying the whole space So 'Div' element or 'Div' like other element wherever
they step-in the whole space belongs to them And 'Span' is a like an innocent boy It only focus on it's job And 'Span' only occupy the space it needs I'll remove the Paragraph from here
because it is a Block element And I'll only keep the 'Span' Paragraph is a block element & 'Span'
is an in-line element So 'Span' will only occupy the space it needs You can see as I keep arrow on
it so it is highlighting 'Span' is only occupying this much space
and there's another 'Span' by it Because 'Span' is like an innocent boy Which means it is an In-line element "In-line" contains 2 words "In" & "Line"
which means ins a single line So it is an In-line element
and I'll mention here " 'Span' is an example of an In-line element " And obviously I'll comment this out And then I'll write " 'Div' is an example of a Block element " I'll comment this out too And look I'm using " Ctrl + / ) for commenting out It is a very simple shortcut So we have now learned In-line
& Block element So in chapter-3 we learned that there are
2 types of container 'Div' & 'Span' 'Div' is an In-line element & 'Span' is a
block element I've written this for you 'Div' tag is often used as a container
for other elements 'Div' is a block level element
'Span' is an In-line container Which means it only occupies space it needs So we've learned that 'Span' tag is an In-line
container and 'Div is a Block level element Block element means it occupies
space more than it needs And In-line element means it only
occupies space which is necessary You have to remember one thing if you add a block
level container in an In-line container So the block level container will
occupy the whole space So that's why I didn't add Paragraph in 'Span' and I added
only text or you can also add any other In-line tag So guys as you can see I've provided the
list of In-line & Block elements Whatever we'll name these form elements After going to the backend
pay close attention on my words So guys this is the time for us to discuss
the search engine optimization In chapter-5 I've explained
briefly about the SEO And if you're a web developer then you must
want to learn SEO at any point of time Let me tell you what I've learned
about SEO in my life I'll tell you in very short term
but it'll be very effective In my opinion using SEO with-in
a limit is good But SEO is not about using is a website like... Let me show you which type of
website I'm talking about It's not like if I open this website
in a Live Server If you search for videos on Google If I search videos on Google So this website will never
pop-up on the top Now matter how much SEO I've done What's the reason for that?
Relevance Let's suppose you're Google And you have to rank the websites So if you have to rank the website
then what would you do? If you have to rank the website then you'll
curate the best websites And you want to show the website which
is best suitable with the keyword Let's assume that YouTube Community not
used the Search Engine Optimization And on the internet you search
for "YouTube" So what do you think if you have created a website like
YouTube & done the SEO without providing any value Do you think that your website will pop-up on
the top while searching for the YouTube Definitely not So Search Engine Optimization is a way to
improve the existing ranking a lil-bit Pay close attention I'll rather say SEO is the way to
help Search Engine finding your website So at maximum you can just specify the Google
about your website & it's content If you've made an excellent website on internet and then
you think that your website will pop-up on the top And you've also written a good content So the search engines like Google, Bing & Yahoo also
ask about your website, its content & description Like "Codewithharry.com" is a website This website is about who? If someone search for "Fires" So this description is most important for the
user who is searching for the fire So Search Engines always ask you about
the description like this one So it'll be easy for us to show this page And if you tell about the Title so it'll be easy
for us to show your page title here And the users will be valued who are coming to
search website on the Search Engines So the very first thing for the SEO is...
In my opinion it didn't even include in course SEO To provide the value In actual how much useful is your content? If a website is actually useful
I'll show you If I search for "Bill Gates Blog" So do you think this search is
optimized properly? Yes the optimization has taken place But if a blog is related to a
particular person You may have seen some websites in which
people make a very basic page in HTML After all that those website
pop-up on the top Reason being "Relevance" because those website contains
the content which user actually searched for I won't explain more about SEO I only have included SEO in chapter-5 that is necessary
for you to learn if you're learning the HTML We'll focus only on HTML stand point of SEO We won't dive to depth of the SEO
because it includes a lot of things We will not be looking in to keyword building
in content optimization aspect of SEO How we do keyword building? How we
do content optimization Writing content according to "which content is being
search for how many time" this also comes under SEO But... We won't focus on that aspect We'll look for the existing which
already have written How to add SEO in that page How can we improve the ranking of that website
by adding more HTML tags & optimization And not by any illegal means We'll actually provide value to our users And how will we do that? We'll shorten it's loading time. If a page is taking 10 sec
to be load that, Google might not show that on the top And on the other if a page is taking
fraction of a sec to load Definitely Google will show that on the top Now let's talk about types of SEOs
We've got 2 types of SEOs The first one is the On-page SEO
and the second one is the Off-page SEO We'll talk about On-page SEO which
can be done by HTML developers And what does Off-page SEO means? Off-page SEO means you've
to do link building Many people says there's no
advantage of link building Let me tell you the meaning if Link Building If another website is linked to your website For eg. if I point on a website Let's suppose if I've added a URL
of my Facebook page So there are many people who
are pointing on Facebook So search engines will recognize that many people are pointing
on this website so it must contain something important So this is called link building This comes under Off-page but I'll only talk about
On-page which can be done by HTMl developers And in On-page SEO you can
do SEO through HTML HTML developer can implement SEO
using following techniques We'll talk about some techniques And again this not a
comprehensive right to SEO Which means it's not like if you learn this then you've completed SEO I'll make a course for SEO in future But I just wanted to add a chapter in which
you can know that how to so SEO The first technique I want to tell you is
"it is set the title very nice & to the point" Add a very nice & to the point title And then set a meta description Add a description meta tag And why should we have to add a nice title? Because title is the main thing
which is shown in the search If you come across a good title so there's high
chances that you'll click on that Because the very step is to
Click on to the website And if you'll only read the content
when you'll find it useful If you don't click on the website and your website
doesn't have CTR (Click through rate) So what's the use for that? So that's why the click is important Now this website is taking too long to load or there's
something wrong with my internet If there's some problem in site
then this site might be loosing on.... ...You know... ...On traffic Because it is working too slow Look this website has been loaded Let's have a look on another page This is also loaded Look this website is not working But now this works Sometimes when website gets slow
so they stop working So Google remove them from the first page This type of pop-ups are also not a good
signs for good user experience But again people create this because
they get the incentive Anyways... we won't talk about them much Meta description sets the Meta description Meta description means that you have
to add a meta tag Let me tell you how to add Meta Tag
and let's open this folder in VScode And obviously I'll close the other folder And I'll make a file with
the name "seo.html" And obviously I'll add a
boiler plate code in it And here I'll write "S-E-O" And then let's say I'll add a Header here And then I'll add a Nav Tag And then I'll add "UL" and then "LI" and
then I'll write "Home" in it And similarly I'll add "About" after "Home" And let's say this is how
I'm creating my website "About"...... And after "About"
I'll write "Contact" So a basic website always contains
"Home" "About" "Contact" Now let's say I'm adding a 'Section' in its Main Content
& after that let's say I'm adding a 'Div' in it And I'm adding a paragraph in a container in which I've added "Lorem34" Which I've added some sample text
and let me show you this website in Live Server And this is our website And I'll close all these links And look this is how my website is looking Now let us say that I want to add
Meta Tag in this website Look I already have added the Title Now if I only add SEO in it Let us say I'm talking about SEO
This is not at all an appropriate Title Because if you're talking about the SEO
then write this in this way "SEO: A beginner's guide" SEO in 2021: A beginner's guide "SEO in 2022: A beginners guide" So if someone search for
"How will SEO change in 2021" And your article is providing information for that content
so there's high chance that the user will click on that So your page must contain very click-able title
& the content related to your title This page doesn't contain anything about SEO I'm just taking an example & it's not like that you can
write anything and your page will pop on the top I've written this & now we'll add Meta Tag here Now look there's already a
Meta Tag for "View Port" I'll write "Meta" & then "desc" and
then I'll write about SEO SEO is like... Suppose I'll write anything ...This is a nice article on SEO I know that I've written this for no reason But you can write good content
in 80-100 words And if you've written more then
Google will chop it off There's nothing to be worried about if you've
written SEO which is a very competitive As you can see "Seo stands for...."
They must have added this in their Meta Tag Now look, if I open this website then there's high chance
that they must have added Met Description And you can see that they have added Meta Tag for description We've got a lot of types of Meta Tags But you must set the meta
tag for description There's no guarantee about your
content displaying here as is it Google will use your Meta Description
only when it'll find it usable I'm telling you this with my experience, I've noticed this
from all the websites which I build & appeared on Google Now "Set a nice URL slug" What does this mean? Look, whenever you're working with a backend Let's suppose if you're using Flask, Django or PHP
so you must name your page that So when someone look at it...
Just as they have given "seo" You have to name it in a way that if someone share your URL
then the receiver can easily recognize what is contains If I give you an URL
"boss.com/learn/seo/this" What will be your reaction? You'll ask what it is? You'll say "Yes! This may contain information about SEO" But what information about SEO? But if I give you a URL "What-is-SEO" "What-is-SEO" So you'll say " Yes ! they have mentioned about SEO in URL" There's 99% chance that this URL is telling
us more about "What is SEO" So we'll need a good slug
a URL Slug is like "what-is-seo" So we'll name a goof URL slug that anyone can tell what
does this URL contains just by looking at that So if Google or any other search engine
will index your page so it'll tell That "Yes! If this man has set it's slug nicely
so it definitely want to help the people" This man is not here to earn Google ranking
but to help the people for real So Google notices this And we've done "Set the Meta description"
& "Set the nice URL slug" Now add the meta tag for keywords Many people don't add the
Meta Tag for keywords You can either do or don't but it depends Many people says that the Meta Tag of
keywords is treated as a 'Span' But this is how you can dd Keyword's Meta Tag And I've told you I'll write
"Meta name = keyword" And then " content = seo, search, seo 2021 " So this is how you can set keywords But many people says that this
practice is not good enough This increase the 'Spam' and people
make the keywords tough So this is how you can add meta tag for keywords So in actual people have abused this
"meta name = keywords" more than using it And people started adding more than
enough keywords in their pages Which was an unfair practice So the search engines started discouraging this And they have decided not to use
"meta name = keyword" at all So this came to light and there's no
mdn link for "meta name = keywords" If you hover on it then you'll
find no mdn link You'll find for meta element but not for
"meta name = keywords" And this is reason that even mdn
community has denied this So I wanted to tell you this about
keyword description So do not set the meta keyword tags Because people have abused that and even
if you add sweet keyboard stag If you add a small tag with 2-3 keyword
then it is not a problem in my opinion So the next point is to set
the meta author tag And we have to set the meta author tag because if you are writing
a blog then you must want to mention about the author And your users will also want to know about the author because maybe
they are interested in reading the content of their favourite author And then we'll move to "set a fav icon"
and let me tell you what is fav icon I'll visit the "fav icon generator" And look they are telling how you
can make your fav icon Suppose that I'm visiting this website &
I've downloaded a fav icon So after downloading I'll unzip it &
I'll do "extract to fav icon" And you can see it has given me some icons
and I can use them as a fav icon So I'll copy "favicon.ico" file And after copying I want to use it here So I'll open this folder And I'll write "Reveal in file explorer" And I'll paste it here And then I'll go to "link fav icon"
and I'll write "favicon.icon" Now my icon would appear here when
I press (Ctrl + Shift + R) So look my fav icon has appeared here So this is called fav icon You can use this website or any other
website thee are a lot of them Which helps you to create fav icon Now look they have provided different
options like BG color Now I want to add some padding here because I
think the text is quite close with the boundaries But again you can use another fav icon and for that you
can use fav icon generator or Adobe Photo Shop That's up to you. But once you got the '.ico file'
so this is how yo can set it So I hope you got the point And there were an error in my pages
that the fav icon wasn't appearing But that error has been fixed now So if you set the fav icon in this way then it'll provide a good user
experience and user will find that he is on a genuine website Which is good Now the next point is
"Compress images & other resources" If you write image compressor So you'll find some image compressing website on internet
in which you can upload your image and compress them Which means you can lower their size without
having to lose a lot of quality Your image quality does get low
when you compress them But there are some compressions which can give you
great compression by decreasing minimum quality It is possible that your 25 MB image may turn to 2 MB
and you don't have to pay a lot of loss in quality Now let's suppose if you're displaying your
100 MB image in just this small portion So there's no point in that and there are high
chances that you can optimize it So you have to use things like this So upload your files on it and
download the compressed file and use them And then there comes "Minify & compress" You can minify & compress all of these
JavaScript, CSS & HTML And there are a lot of tools Look here's a website That you can upload your
JS or CSS file here And it'll minimize in actual
so I'll write a sample CSS I'll write.... "background:red" and
then I'll close it in this way And when I'll minify it so look it has removed
all the spaces & new lines If a bigger CSS files contains a lot of spaces so size of
that file will increase and this website remove all of them And when we write HTML or
CSS code in this format We add more spaces & new lines because
we have to increase the readability We do the format document to increase the readability so
that when we or our fellow programmer read this code Or tries to improve this code So he won't find this code difficult
to read & rubbish So we want to avoid these type of things But when computer read this file
so you can give a compressed file Which means you can remove these
new lines & extra spaces So this is what these tools does
so you have to minify your HTML, CSS & JS file So you'll find a boost in SEO
and your
load time will also decrease Because you were loading the file of 100 MB at that
time and now you're loading the file of just 2 MB So definitely your load time
will decrease So compressing the image decrease
your load time And the benefit of minifying & compressing the HTML, CSS
& JS files is that you're not downloading the extra files And after this "Add alt text to images" I've told yo about an alt attribute in which if an image
is failed to load so a text will be displayed And it's a good practice because if your image
failed to load then you'll will see an alt text And if it also help the blind peoples who
come to read the content on your website So the devices read the alt text to explain
them the topic of your image So I hope you got the point and
you've learned the HTML I'll provide all the chapter in
a zip file as they are And also access the notes & codes And many people ask for all
the chapter in 1 PDF file But you can use a tool name "Merge tool" But I'll add a "merge.pdf" in which you'll
get all the chapters merged So I'll add that too I hope you've understood the HTML And in future I'll upload a course for CSS with notes
and please do tell in the comments if you want that too And in that we'll learn how to make websites We'll learn to create good websites
templates and CSS I hope this video we'll will teach
you HTML perfectly So that's it for this video guys And if you want to move ahead then you can watch my CSS playlist
and I've also made a lot of projects for web development I've made some advance project for web
development and I also have made games Using HTML, CSS and JS And I'll soon upload a video for CSS
so you can also wait for that So I hope you've enjoyed this video an if you
do then please tell me in the comments That's it for this video guys
Thank you so much guys for watching this video :)
And I'll see you next time