HTML Tutorial For Beginners In Hindi (With Notes) 🔥

Aug 15, 2023

HTML Tutorial For Beginners In Hindi (With Notes) 🔥

Learn HTML in One Video: In this video, we will see how to create beautiful websites using Html. HTML is the language used for website design. This hindi course on html will teach you everything you need to learn about html tags, lists, tables, seo etc.
Download Notes:
https://www.codewithharry.com/notes/
https://drive.google.com/file/d/1XurN…
TimeStamps:
Intro - 00:00
Chapter 0 - 03:07
Chapter 1 - 23:25
Chapter 2: 54:10
Chapter 3 - 01:34:28
Chapter 4 - 2:03:11
Chapter 5 - 2:49:58
►Checkout my English channel here:    / programmingwithharry
►Click here to subscribe -    / @codewithharry

Best Hindi Videos For Learning Programming:
►Learn Python In One Video -    • Python Tutorial In Hindi 🔥

►Python Complete Course In Hindi -    • Python Tutorials For Absolute Beginne…

►C Language Complete Course In Hindi -
   • C Language Tutorials In Hindi

►JavaScript Complete Course In Hindi -
   • JavaScript Tutorials In Hindi

►Learn JavaScript in One Video -    • JavaScript Tutorial

►Learn PHP In One Video -    • Learn Php In One Video In Hindi - हिं…

►Django Complete Course In Hindi -
   • Python Django Tutorials In Hindi

►Machine Learning Using Python -    • Machine Learning Tutorials For Beginn…

►Creating \u0026 Hosting A Website (Tech Blog) Using Python -    • [Hindi] Web Development Using Flask a…

►Advanced Python Tutorials -    • Intermediate/Advanced python Tutorial…

►Object Oriented Programming In Python -    • Object Oriented Programming Tutorials…

►Python Data Science and Big Data Tutorials -    • Python Data Science and Big Data Tuto…

Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Comment “#HarryBhai” if you read this 😉😉

Content

0.23 -> In this video I'm going to teach you HTML from very starting to the very end

3.556 -> This video is going to be with complete own handwritten notes

7.683 -> You just have to invest your time in this video there's no any type of pre-requisite

12.08 -> Just invest your time in this video and you'll be able to create beautiful websites

17.332 -> Many of you will think that, this video is quite lengthy

20.019 -> But actually this video is quite short because I've packed my all experience in this video

25.695 -> And I've provided hand written notes and the source code which you can use again & again creating new websites

32.403 -> You just have to invest your time in this course and this is absolutely free, which means you don't have to pay anything

38.37 -> You just have to invest your time & attention

41.404 -> And teaching you HTML will be my guarantee

43.756 -> Before starting this video I want you to hit the like button and comment....

48.038 -> ...Your name and the city you belong to

50.949 -> Doing this makes me feel good

52.295 -> And if I ever need to interact with you then I can find your comment from my comment box

56.372 -> It's been a long time for me coding in HTML

59.246 -> And I'll tell you what is important and what's not

63.417 -> There are a lot of things which people usually miss

66.904 -> For eg. "Playing Audio" "Main Tag" "Semantic Tag" "SEO"

71.818 -> There are a lot of thing which people usually miss

74.574 -> I'm going to cover all these topics in this video

77.608 -> And I'll make you a successful + profitable HTML developer

81.84 -> So that you can get a good starter and you can build good websites

85.945 -> Now I want to tell you difference between HTML, CSS & JS with an analogy

89.696 -> HTML is like a human skeleton

93.999 -> And CSS is just like the skin on the skeleton

98.376 -> This means it beautifies that

100.079 -> CSS do the same work on HTML just like skin do on our skeleton

105.212 -> Our skin provides help to our skeleton to look good

110.316 -> And CSS helps the HTML to look beautiful

113.977 -> Just like our brain impart the logic in us

118.836 -> Just like that JS provides logic to website made with HTML + CSS

124.896 -> I've discuss briefly more about this in Chapter 0

128.058 -> Where I've explained this with another analogy

131.602 -> But now we'll understand the difference between the Backend & Frontend

135.99 -> And how does a basic website works

139.155 -> Whenever a web browser request "www.codewithhary.com" from a web server

146.835 -> So in return web server send the files of HTML, CSS and JS

151.565 -> Your browser parce these HTML, CSS and JS files

155.466 -> And show you what you actually see in a website

159.828 -> Actually it was codes

161.419 -> But your browser parce that in such a manner that a beautiful website is visible to you

166.826 -> I've divided this video in 5 chapters

169.43 -> Where I've provided a practice set with each chapter so that you can practice it well

174.183 -> I've solved important question in that

176.447 -> And I'll provide all the code as a zip file

180.95 -> In this video I'll tell you how to download those codes

184.734 -> Let's get started with the introduction

188.5 -> So guys I've made a PDF of chapter 0

191.64 -> And I'll open this Chapter 0 PDF here

195.335 -> And as you can see I've written "Chapter 0 introduction"

199.184 -> HTML = Hypertext Markup Language and HTML is the language of the web

204.753 -> It is used to create websites

206.564 -> If you ever visited a website Let's suppose "www.codewithharry.com"

211.112 -> If you ever visit a website

212.939 -> And then you go to "View page source"

215.261 -> So you'll be able to see the actual source of this website

218.207 -> You'll be able to see how this website was made

221.631 -> What are thing which was used in frontend

225.157 -> Which type of tags they have used

226.614 -> And now if you don't know about HTML then maybe you'll find these tags over-whelming

230.004 -> But let me tell you, I'm going to make these things very easy for you all

234.978 -> So we've lean about full from of HTML it is Hypertext Markup Language

238.936 -> This is the language of the web which means you'll need this

244.022 -> ...If you want to display beautiful web pages

249.576 -> It is used to create websites

251.818 -> We use HTML tags to define look & feel of a website

255.028 -> To define the look & feel of a website we use the HTML

258.941 -> For eg. if I want a link here, so I'll specify that through an HTML tag

266.179 -> And if I want an image here, so I'll need to specify that through an HTML tag

270.394 -> That I need an image here

273.086 -> And if I need text or a paragraph here so I've to specify that through an HTML tag

280.006 -> That I need a paragraph here

282.679 -> Just take page composition like a food with different kind of ingredients

292.027 -> Like a recipe

293.631 -> For eg. in cake if you want to add chocolate or cake

296.88 -> Just like these ingredients you have to add HTML tags in HTML web page

305.913 -> Now just like you make food there's a recipe

312.511 -> You add the ingredients accordingly

317.405 -> It's not like you added 10 tsp Chilli powder and 20 tsp salt

322.985 -> There's a sequence in the recipe which we have to follow

326.655 -> Just like there's a sequence of using HTML tags

332.447 -> You have to add those tags accordingly

336.195 -> Now look, HTML stands for Hypertext Markup Language

339.503 -> HTML is the language of the web it is used to create websites

342.743 -> We use HTML tags to define look & feel of the website

346.54 -> With understanding of these tags and how to put them together, we can create beautiful websites easily

353.025 -> We can create a very beautiful website with understanding these tags

357.364 -> If we know how we can use these tags together

363.104 -> So we can make very beautiful websites

366.455 -> Just like I made "codewithhary.com"

369.205 -> I definitely used my HTML knowledge while creating it

372.875 -> HTML knowledge will definitely be used while creating any type of website

376.753 -> The biggest question people will have in their mind is "If HTML is enough so why we need CSS & JS? "

384.899 -> Let me tell you

386.313 -> HTML is only used to define your website's page's layout

390.111 -> I repeat,to define your website's page's layout

394.085 -> It is just a bare bone page structure

396.168 -> You haven't added any design or style in it

400.473 -> If you don't use the CSS, let me show you how your website will look

404.946 -> I'll only keep the HTML and remove the CSS from this

410.505 -> So all the CSS style sheets.... You don't have to learn these things

414.759 -> I'm just showing you after removing the CSS style sheets

418.722 -> And look after removing CSS style sheets this is how it looks

422.742 -> Now you don't have to learn how to remove style sheets

426.246 -> Because I'm going to teach you this

428.503 -> But I just want to show you....

431.204 -> ...If I remove CSS style sheets so this is how it looks

435.591 -> So now you all know why CSS is used for?

438.806 -> CSS is used for to handle the designs and all other things

446.186 -> I haven't ruined this website

447.914 -> I just changed that on frontend And I'll also teach you this

451.389 -> This was not changes on Backend which means I haven't changed this for all

455.172 -> I only changes "codewithhary.com" for this particular browser

459.666 -> Look, I reloaded this page and everything is in its place

462.061 -> So this button is of green color or blue or red

465.382 -> The sequence of the button... You can specify all this through CSS

477.289 -> You specify all this through CSS

480.292 -> And that's why we have added CSS in website

483.558 -> Now if I ask you about CSS?

485.037 -> CSS is used to add styling in any page

487.792 -> Now if I ask you about JavaScript

489.575 -> JavaScript is used to program log in for the page layout

492.735 -> If you want to program logic for any page layout

496.013 -> For eg. If we take the example of this particular website

499.336 -> This is running through logic that at first this have to be written

502.096 -> After that "Machine learning"

504.171 -> And then "Welcome to CodeWithHarry" I did all this with the help of JavaScript

508.184 -> How can I specify that what program will run after clicking on which button?

516.029 -> I will specify this with the help of JavaScript

519.479 -> With the help of JavaScript we can program the logic

522.167 -> We can specify that if a user click on this button so this will happen

528.326 -> Does page have to be reload or not? We can specify this with JavaScript

532.362 -> If any user move their mouse cursor here

536.248 -> So let us say tell him to be alert

538.082 -> So to specify these type of things I can use JavaScript

542.104 -> JavaScript is used in logic programming How? You'll know soon about this

547.178 -> "What happens when a user hovers on a text? "

549.179 -> When to hide or show elements?

550.541 -> If you need to hide or show any element so you can do that with the help of JavaScript

555.688 -> You can write code in JavaScript to hide any element

559.351 -> Let me show you a very quick example

562.664 -> I'll move this downward

564.738 -> For some reason I like it downwards I don't know why

567.812 -> You can write JavaScript here I'll tell you how these things actually works

571.815 -> So I'll open my JavaScript console where I can write my JavaScript

575.52 -> And here I'll quickly write "document.body.style.backgroundColor = "red" ;

580.262 -> I repeat I've written this line which says....

583.398 -> Turn the body's background 'red'

585.815 -> And look as I press the "Enter" as I inject the JavaScript, this turns 'red'

592.015 -> And how to perform these things? I'll tell in Chapter 1

595.563 -> I'll tell you, how you can do these things

598.132 -> But for now I just want to tell you how you can control your page

602.499 -> Now many of you will think that "BG color" is a part of styling

605.942 -> No, You can change the BG color through CSS

608.922 -> But with JavaScript you can even control that

611.701 -> With JavaScript you can choose to hide or show anything & for as many minutes as you like

620.221 -> With the help of JavaScript

621.634 -> We'll learn all these things

622.821 -> And you know these things will be in their place when I'll reload the page

626.503 -> Now let's have a look on a beautiful analogy which I've written

631.642 -> This is a very good analogy that's why I refer it as "Beautiful"

634.208 -> If HTML is your car's body

636.574 -> Let us assume you are a car manufacturer

641 -> If you are not, then just assume

643.326 -> And now I'll search for a video on YouTube which is related to car manufacturing

649.239 -> And I've got a video related to car manufacturing

653.506 -> Now look at these cars

657.167 -> Look at their unpainted body

661.609 -> Just take those bodies as HTML

666.058 -> And now if I paint this and make some designs...

670.52 -> Add some designed lights in it

672.614 -> Tail lights, head lamps and add a good wind shield

677.477 -> And make it like that everyone who see this will be amazed by its design

682.981 -> For now no one will be amazed by this car's design

685.875 -> There are cars, like sport cars

688.65 -> You'll be amazed by their design

691.413 -> So if you see those type of cars

694.783 -> The first one is its frame

698.613 -> Along with that they have designed it

700.955 -> So just like that with HTML you design the frame of your website

705.476 -> And then you design it with the CSS

708.043 -> So now if we forward it, I hope they have painted it & make it looks good

712.357 -> And whatever the car it is It'll look good

715.981 -> So look...... They haven't showed this

718.721 -> Look it is looking good now, They have painted it and done all the detailing

724.441 -> So the conclusion is... At the first the car was like this

729.646 -> And now this is how it looks

731.228 -> You'll find these types of car very amazing

734.301 -> But I just want to tell you that...

737.654 -> CSS is used for styling

739.099 -> So what is this JavaScript

740.35 -> Take JavaScript as car's engine I mean logic

743.366 -> When to put break & at how much pressure

748.58 -> How to change the gears

750.709 -> What will happen after changing the gear Take this as an example of JavaScript

755.326 -> What will happen when the user will change the gear

756.979 -> Now suppose there is a car which looks good but its break doesn't function & it's engine is also broken

760.966 -> So that car is also useless

762.248 -> So this is role of HTML, CSS & JS on a website

767.065 -> The HTML is the frame of a website CSS is the decoration

773.251 -> And JavaScript is the frontend logic

776.241 -> Why am I referring it as frontend logic

777.852 -> So JavaScript is a type of client side logic which means the logic that user can also see

784.044 -> And backend logic is always hidden from us

786.588 -> The server from where this website is coming for example my website was designed in Django

790.458 -> So what logic is Django's backend is using I will never know

793.35 -> I can only see the logic of frontend

795.203 -> I can see it's logic that how is it functioning so I can see all the logic of frontend

801.299 -> If you're too confused, then don't be

803.706 -> Just understand that JavaScript program the logic

807.048 -> That what will happen by clicking on which button

809.713 -> In how much time the action will be taken by clicking on which button

814.09 -> Whatever the action your browser is taking For eg. If it displaying an Image

817.967 -> So I hope you've understood this. We'll start learning how to beautiful layout in this course

822.132 -> We'll soon learn to create beautiful layouts

825.516 -> We'll now install the VScode

827.313 -> Now many of you will think why are we installing the VScode and what this is?

832.915 -> And do we need to install something special to write basic HTML website

838.269 -> Let me answer these questions NO!

840.541 -> We don't need to do anything fancy to create websites

844.85 -> For eg. if I create a notepad file here

848.01 -> If I select "New" --> "Text Document" And if I name it "codewithharry.html"

855.004 -> You can save an HTML file by ".htm" or ".html" extension

861.491 -> I've made this file

862.749 -> And it is saying you're changing the extension from ".txt" to ".html" is it fine?

868.309 -> Yes it is fine I've changed it knowingly

871.288 -> Now I'll open it with notepad

875.527 -> I'll open it simple notepad which every computer have

878.487 -> If you're using a Mac or Linux

882.219 -> So a basic editor is definitely shipped with each operating system

887.583 -> So let's move here & what we'll do?

890.07 -> We'll click right --> View page source

891.928 -> And we'll copy this and paste it here

894.726 -> I've simply pasted it

895.576 -> I'm telling you the website won't look 100% good

900.026 -> Because there are styles which I'm using through sever roots

904.23 -> For now we won't discuss this

905.932 -> We'll just keep in mind that it's not this easy to view page source of any website

911.692 -> Copied it's code and paste it in a notepad

914.532 -> And we can copy that website, It's not possible

917.287 -> But maybe it is possible Let's have a look, so I've saved it

920.478 -> I've opened it with notepad by clicking right

924.073 -> I'll open it with notepad by clicking right

927.962 -> And after pasting all this text I've saved it with "Ctrl + S"

931.81 -> And now I'll open this in Google Chrome

935.432 -> It is copied to quite extent but not fully

939.54 -> It is look same to quite extent

941.771 -> To some extent we copied it

944.513 -> But we were unable to copy it 100%

946.223 -> Look here, this is different & this is different

948.821 -> We'll also understand its reason

950.918 -> And we'll understand its reason briefly in the upcoming chapters

953.903 -> But for now just remember you don't have to download anything

958.006 -> Look the images are missing from here

961.954 -> Style sheets took some time to be downloaded

964.624 -> It is working, but some images are missing

967.214 -> But again

968.914 -> If you click on a Blog so it is not working

973.269 -> So the conclusion is... You can copy the website but not 100%

977.516 -> It's not that easy to copy the website

980.175 -> Now if you have understanding so you can do, it's not that difficult

983.804 -> But it's not that easy because...

986.298 -> ....there are a lot of things. We'll have a look at them

989.006 -> But for now we'll just keep in my mind that we can do coding with Notepad

993.702 -> But the biggest drawback of using Notepad for coding is...

997.12 -> That you don't have any support through your IDE or Text editor

1001.488 -> What I mean to say is.. If you use a text editor like VScode

1007.449 -> Or you use a fully fledged IDE for eg. dream-weaver

1012.163 -> There are a lot of things in market nowadays

1015.228 -> I recommend VScode personally to everyone

1017.995 -> Because in VScode yo can perform every function. I also have written this in notes

1022.519 -> Let me close all these tabs

1024.608 -> We can use any text editor of our choice

1026.786 -> You can also use notepad, But using notepad while building a big website will be stupidity

1031.524 -> Why? Because if you're using Notepad then you have to type each & everything

1034.796 -> And if you're using VScode so it provides some suggestions when you are typing

1039.303 -> Now look, How to install VScode? You just have to open a new tab

1042.33 -> And you have to search "Download VScode"

1047.153 -> And if you're using Mac or Linux so you can download it accordingly

1050.919 -> I'm using 64-bit windows

1054.337 -> So I'll download it by clicking on 64-bit And look my VScode has started downloading

1058.989 -> It downloads very soon if you have a good internet connection and my internet speed is quite good

1063.212 -> So you just download it and after that

1067.627 -> You just simply have to open it and then you have to install it

1071.109 -> It's as simple as that

1073.359 -> Now I want to ell you a few things

1075.263 -> While installing it you have to check some options

1079.261 -> Which means you'll see some boxes and you have to select them

1082.981 -> I'm waiting till it downloads And it has downloaded

1087.056 -> When we'll open & run it

1089.702 -> So look, you've to read & accept the agreement and then click on "Next"

1094.89 -> And you have to check some options look I've checked them

1099.083 -> "Add "open with code" to Windows Explorer file context menu"

1102.215 -> "Add "open with code" action to Windows Explorer directory context menu

1106.102 -> Register code as an editor for supported file types

1108.924 -> "Add to PATH" and I'll tell you what will happen by these

1113.825 -> And then click on "Install"

1114.975 -> I've already installed but I'm still installing it

1117.384 -> If you've installed it wrong. Let suppose if you forget to check those options

1122.686 -> So you run it again just like me you won't face any loss

1126.95 -> You won't lose any important file

1130.23 -> I won't launch it and I'll click on "Finish"

1132.768 -> And if you follow every step and if you have installed the VScode as I told you

1139.939 -> And if you right click here so you'll find an option here "Open with Code"

1144.793 -> We command it to show this option when we were installing the VScode

1150.395 -> Click on "Open with Code" and after that

1154.27 -> You'll see all the files of this directory here

1158.944 -> Not here but here

1160.637 -> And you can create a new file by click here and create a new folder by clicking here

1165.333 -> If you're using VScode for the first time then don't be scared

1168.748 -> Because you'll get used to once you use it

1172.498 -> And then you have to click on " + " sign

1175.04 -> And...... you can create any file for eg. "This.txt"

1180.538 -> And you can write anything here

1182.31 -> This is some content on this file

1188.995 -> Save it

1190.177 -> And after this you have to click here in you extension tab

1194.667 -> And after that you have to install an extension

1197.86 -> Which is "Live server"

1199.315 -> Now many of you are using this very first time and you don't have any idea about "Live Server"

1204.692 -> Just install this "Live Server" "Installing...."

1207.925 -> And it is now installed

1210.094 -> Now as you can see "Live Server" has been installed

1213.367 -> And I can open any file with "Live Server"

1216.147 -> Let me show you the file we created "cwh.html"

1219.909 -> If I right click on this file

1221.616 -> And click on "Open with Live Server"

1226.218 -> Look I'll click on this & it is asking me something and I'll cancel it

1230.058 -> And after this look, it'll create a Live Server for me

1234.353 -> It creates a server like a website and then display all the files

1238.111 -> You can open it directly with double click on these files

1243.283 -> But this method is recommended because this creates a web server for you

1248.022 -> And if you are using web server

1251.096 -> So the advantage of using a web server is... Your files will actually be served through server

1257.509 -> When you'll host your website

1260.442 -> If you serve your files through a web server from the very beginning

1264.279 -> So everything will be identical and this method is highly recommended

1268.562 -> In comparison to this method

1271.929 -> So I'll close this & this

1275.061 -> And I hope you've installed the VScode we can use any text editor of our choice

1280.102 -> Once again let me tell you

1281.902 -> Here I'm using VScode because it is lightweight open-source from Microsoft

1287.871 -> You just simply have to visit the Google and search "VScode" just install it like me

1293.129 -> You can write HTML even in Notepad

1296.759 -> Text-editors like VScode just make these things easier

1300.967 -> We'll see how VScode make these things easier

1304.429 -> I'll make this "CWH.html" file, a blank file

1308.958 -> Let me show you how VScode facilitate in a great we-development

1313.501 -> If you add an "exclamation mark" (!)

1315.297 -> And then press "Enter" then you'll get this template automatically

1319.334 -> So this was a very small thing to notice

1322.839 -> And if you press "Alt + ↑" so look you can move this

1328.066 -> You can move all these things

1330.711 -> In fact you can move this line upward & downward

1334.263 -> If you can perform all these actions so you can definitely become a fast web-developer

1341.265 -> Compare to if you do coding in Notepad Nobody codes in Notepad

1344.83 -> We use VScode for these kind of features for example "Live Server"...

1347.857 -> ...And to be able to move this line

1349.409 -> To duplicate the line

1351.43 -> To use all these features and to set the keyboard shortcuts we use VScode

1356.284 -> I can zoom it by pressing "Ctrl" and scroll my scroll wheel

1358.703 -> If I go to "Settings" and then turn on this setting

1363.24 -> So you can zoom it by using your mouse wheel if I check this setting

1367.439 -> So I can zoom it like this

1369.985 -> So to learn all these things we use VScode

1375.169 -> Or I'll say to enjoy these features we use VScode

1378.926 -> Because we got a lot of things in VScode and there's nothing in Notepad

1381.758 -> To change the font size you have to press a lot keys

1383.926 -> So that's why we won't use Notepad But we can definitely use Notepad

1387.964 -> We just have to understand how to do things

1390.711 -> Now we'll move to the chapter-1 where we'll create our first website

1395.405 -> We'll learn different kind of things and learn about "index.html"

1398.533 -> And we'll learn about we page structure

1401.099 -> What is a basic web page structure

1403.311 -> Let's move to chapter-1 now

1406.496 -> So guys we'll now move to Chapter-1 Firstly we'll open this

1410.633 -> And the Chapter-1 is "Creating pour first website"

1413.279 -> Which will tell us how we can create our website

1416.483 -> So before starting this let me tell you that every website is made up of HTML

1421.542 -> And we start building a website by creating a file named "index.html"

1426.527 -> So I'll open my VScode

1428.877 -> And my VScode is opened in this folder

1432.609 -> In which folder? "html0"

1434.668 -> I want to open VScode instead of this folder but in this folder

1439.803 -> Because that was the chapter-0 and the work I done in Chapter-0 was in this directory

1444.469 -> And I want the work of Chapter-1 to be done here

1449.554 -> So I'll do right click here and then click on "Open with Code"

1452.918 -> And as I clicked on "Open with Code" you can see this folder has been opened

1456.451 -> Does our old folder has been closed in VScode? NO!

1458.818 -> Our old folder is still opened so we'll close it

1461.645 -> And we'll maximize it and create a file here "index.html"

1465.536 -> Why "index.html" don't we have any other name?

1471.394 -> "index.html" is special name for a file

1474.626 -> Which tells your web server to start with "index.html" page when someone visit your website

1481.975 -> I repeat, this is the starting point

1483.928 -> This is the point from where your website starts to be visible

1488.131 -> Let me quickly show you from the notes what I've written

1490.96 -> "This is an special file which is presented when the website root address is types"

1494.761 -> For eg. if "codewithhary.com" is purely an HTML website

1498.545 -> So if someone visit "codewithhary.com" so its "index.html" page will be visible first

1505.323 -> I hope this is clear

1507.041 -> Now let's have a look at a basic HTML page which we generated

1510.679 -> What I'll do is.. I'll type an exclamation mark (!)

1515.033 -> Now look "Emmet Abbreviation" is written here What does "Emmet Abbreviation" means?

1519.228 -> Emmet is a tool which helps to write HTML & CSS correctly

1527.332 -> Emmet is plug-in which help the web-developers to write CSS & HTML correctly

1533.294 -> As soon as I type exclamation mark and press the "Enter"

1536.24 -> Look I'll get this boiler-plate-code of HTML

1541.76 -> Now if I start the second one just as the first one

1546.167 -> If I start this so I only found "DOCTYPE html"

1549.251 -> In the same manner I can do many things

1550.847 -> We'll learn how to use these type of "Emmet Abbreviation" through out the course

1556.427 -> When I typed the exclamation mark (!) so look

1558.794 -> We got the boiler-plate-code generated here

1563.117 -> in "index.html"

1565.015 -> Look if I add "h1" in the body

1567.843 -> And let's leave "What h1 is? "

1570.846 -> "This is a heading"

1572.436 -> And after this I'll write a paragraph

1575.914 -> "This is a paragraph"

1578.592 -> And let's leave for now for this heading & paragraph is

1581.064 -> Because we just want to generate an HTML page

1584.52 -> And we want to open that in a "Live Server"

1587.01 -> Because we want to see how our page will look in our server

1591.613 -> Look, as I opened this in a "Live Server"

1594.578 -> So what is written in the URL "127.0.0.1:5500"

1598.892 -> Which is a server created by "Live Server" extension

1602.271 -> After creating this server it is displaying "index.html" page through this server

1610.512 -> But.... Listen to me carefully

1612.951 -> If I don't write this "index.html" then what will happen?

1615.763 -> If I don't type "index.html" in my URL bar even then I'll get the same page

1622.861 -> "This is a heading, This is a paragraph"

1625.093 -> If my page wasn't named "index.html" Suppose if I rename this file

1629.343 -> Let's suppose if I rename it by pressing "f2"

1632.139 -> And if I give it any random name if I give it "this.html" instead of "index.html"

1640.897 -> You can name it after someone's name I'll name it "harry.html"

1644.05 -> Will I be able to see anything after changing it's name? NO!

1649.463 -> Look it is saying you have 3 files in this server root which one do you want to see?

1655.202 -> At first there was "index.html" present so it was displaying me the "index.html"

1658.895 -> It was telling me you have an"index.html" file so I'll show you "index.html"

1663.265 -> Because "index.html" is an special name

1666.221 -> Which is displayed to you when you visit any server's root

1671.538 -> That's why "index.html" is an special name

1673.786 -> And you have to remember this name when you'll create a website

1678.906 -> I should have press "f2"

1682.384 -> And I've rename it to "index.html" and after that

1686.311 -> If I reload it, so look my document has appeared here

1688.79 -> Let's have a look at this basic HTML page

1692 -> Let's have a look what this is?

1695.002 -> If I visit "codewithharry.com" then it have its own page source

1699.669 -> It also contains all these tags

1701.217 -> We'll look how we can understand all these tags in a bare minimum page

1709.971 -> At first we'll see a "DOCTYPE html" in every website this specifies that it as an HTML 5 document

1716.361 -> It is using HTML 5

1719.299 -> What is the HTML tag? It is a root of an HTML page.

1722.413 -> And what is in the head? The meta data of the page.

1724.989 -> And what do we mean by Meta data? "Information about some already existing data"

1729.713 -> Which means a brief data about already existing data, this is called meta data

1735.467 -> And what is the data? Data is the information

1738.522 -> You already know what data is...

1739.944 -> Let's suppose you have stored someone's data, address & phone number, so this is called data

1745.163 -> And what is the meta data? It means the data about the data

1749.049 -> This is already a data but meta data means "The data about the existing data"

1754.022 -> What's the description of this page and what's the title of this page

1757.112 -> There a lot of things which come under "The Head" we'll see soon what are the those things

1766.53 -> And now as I opened this tag now I've to close this tag too

1771.47 -> We've to open almost all HTML tags and we also have to close them

1779.312 -> There are a few tags which doesn't need to be closed, and those tags are called empty tags

1782.467 -> But most of the tags which we use in the page & which contains the content

1786.425 -> We have to close those type of tags

1787.838 -> I've added opened "Head" tag & then "Title" tag

1790.581 -> And then I've close the "Title" tag and I've added the title "Harry's website"

1793.006 -> Let me show you what "Title" does Now here the title was a document

1796.248 -> I'm displaying "Harry's website" here

1800.442 -> Now look here is some meta text her

1801.882 -> And what is the meta text? Meta set means the encoding of this page is "UTF-8"

1806.771 -> I've specified that

1808.256 -> And now I've specified some more things, and by the way it was generated by-default through Emmet

1813.502 -> So "View port" & "XU-A compatible" what does these means?

1818.277 -> "XU-A compatible" is used for the Microsoft's old browser's compatibility

1824.194 -> And "View Port" is used to change the initial scale

1828.869 -> There are more tags similar to these 2 tags which we can use to build our website

1835.672 -> But first of all we'll learn about some most important tags in HTML

1838.785 -> Body contains all the tags which you'll see on this web page

1843.4 -> The tags which are displayed are present in the body

1846.246 -> Now look here, I've mentioned this in notes

1850.092 -> "The main body of the page rendered by the browser" This is the tag visible here

1855.956 -> And then I've added a paragraph tag and a heading tag

1858.982 -> And then I've closed the body

1860.408 -> Because here my body closes and whatever I want to render in the browser ends here

1868.402 -> That's why I've added the closing tag of body here

1873.384 -> So I hope you've understood this here is the HTML closing tag

1877.635 -> So there were the tags which we used to create this website

1881.403 -> Is this website looking good? Obviously not!

1883.637 -> This website is not looking that. But this is our first website

1886.521 -> So write "Congratulations on your first website" in the comments

1891.839 -> We've made the first website of this course No matter how it looks

1894.809 -> But this is our first website of this course so make sure to write "Congratulations" in comments

1899.37 -> Now we'll move back to the notes

1901.282 -> And I've written here "The difference between the tags & elements"

1904.571 -> "And how does your browser render your page"

1908.299 -> So look it is simple, the tag is the container for the content or for the more HTML tags

1915.316 -> For eg. Look at the body tag what does it contains?

1919.36 -> It contains some more tags

1921.753 -> And along with that it also contains some content

1924.726 -> Now if we talk about "h1" tag

1926.498 -> "h1" only contains a content "This is a heading" It doesn't contain any tags

1930.546 -> So a tag can contain more tag or directly a content

1938.247 -> Just like "H1" and the paragraph

1940.446 -> Now if you want to generate a dummy paragraph through Emmet

1943.756 -> So firstly write "p" and then press the "Enter" and it'll complete automatically

1947.148 -> And then write "lorem3" As I wrote "lorem3" the three words have been generated

1952.527 -> Now if I write "lorem30" will it generate 30 words ?

1956.304 -> Obviously

1957.235 -> 30 words have been generated

1959.366 -> Now I'll save it, look 30 words have appeared here

1961.861 -> And now if I want it to generate 300 words

1964.99 -> That's also possible

1966.842 -> "lorem300" 300 words have been generated here

1970.164 -> If you ever have to build a website & you don't have any idea what to write in this website

1976.533 -> "lorem300" "lorem30" "lorem3" "lorem5" "lorem7"

1980.99 -> And you'll be able to see the dummy text in your paragraph

1986.807 -> So "This is a heading" , "This is a paragraph" and you can see "Lorem300" is written here

1991.677 -> And along with that....

1993.696 -> Look here, this have been rendered

1997.017 -> And as soon as I save this page

1999.032 -> It is displaying the changes automatically after reloading

2002.099 -> By the way this is not a work of HTML

2004.588 -> This is the work if live server

2006.469 -> Live server is an extension which reflects the changes when you save your files

2013.163 -> Every time I build my website template I always use the Live Server

2016.543 -> This extension was made greatly in VScode

2019.604 -> Now we've understood "A tag is like a container"

2023.053 -> Your HTML document is nothing more than this

2026.102 -> It is just a piece of code

2028.297 -> Whatever website you see on your daily basis Just like if you're seeing my website

2031.785 -> The actual website is not this one

2034.079 -> But this one

2035.145 -> This is the source code

2036.265 -> It's about the code and not about the Images or Red colored button or anything it contains

2042.711 -> Your website transports in the form of this code

2046.899 -> In actual this code gets transported

2048.772 -> And then as soon as your browser gets this code it renders this code in this form

2055.33 -> So the code is provided to the browser through server

2057.577 -> And browser renders the code in this form which you usually see

2067.129 -> So now let's understand, as soon as your browser gets this HTML document

2074.882 -> So your browser plays a major role in converting this code to a viewable form

2082.651 -> So I hope you got the point "How to display an HTML document"

2087.308 -> Now let's talk about the important notes I've written some things here which are important

2091.311 -> "Head and body tags are children of HTML tags"

2094.538 -> So look, you can see your whole code in a way like this

2099.609 -> First you've specified your doc-type that your doc-type will be HTML

2103.939 -> You'll find the first tag very unique in compare to the other tags

2108.738 -> And then our main HTML page starts

2112.252 -> We've written HTML here

2114.522 -> And where is its closing tag? Here in line #14

2117.202 -> Things it contains.... What are they?

2120.494 -> Those are its children

2122.257 -> Now I'll show you one thing very interesting from the VScode

2125.776 -> Now if you click on the left side of "The Head"

2129.082 -> So look they have collapsed

2131.57 -> And now they have expanded

2133.023 -> Collapse-Expend, Collapse-Expend

2134.845 -> So now look the HTML contains The Head & The Body

2138.95 -> Understand this in a way that HTML have 2 children

2141.771 -> "Head" & "Body"

2143.797 -> So when HTML have 2 children "Head" & "Body:

2147.334 -> So HTML is obviously the father of "Head" & "Body"

2150.345 -> This is simple man, please don't say that you didn't understood this

2153.139 -> This is very simple thing

2154.451 -> So HTML is the parent of "Head" & "Body"

2157.726 -> And what is the relation between "Head" & "Body"

2159.879 -> They are "Siblings" , This is the exact word we use

2163.955 -> "Head" & "Body" are Siblings

2168.269 -> Now look here

2169.723 -> I've written this "Head & Body are the children tags of HTML tags"

2174.672 -> In the same way "H1" & "Paragraph" are the children of?

2180.776 -> They are the children of "Body"

2183.231 -> Only in my case

2184.676 -> It is possible that you create a web page in which "H1" & "Paragraph" is not the direct children of "Body"

2191.736 -> We'll see this later

2193.077 -> But if we talk about this page

2195.389 -> So in this page "H1" & "Paragraph" are the children of?

2199.386 -> But "Head" & "Body" will always be the children of HTML tags

2204.971 -> HTML is the parent of "Head" & "Body" tags this is the very simple thing

2210.553 -> Just understand this in a way that Raghav is the son of Shubham

2213.529 -> So Shubham will be the Father of Raghav

2216.69 -> Most of the HTMl elements have Opening & Closing Tags...

2219.932 -> ...With content in between Opening & Closing Tags

2221.885 -> Just as we saw here that...

2223.34 -> H1 has the opening & closing tags with content in between

2227.122 -> Just like that "Paragraph" has the opening & closing tags with content in between

2230.712 -> We've understood this

2231.897 -> Most of the HTMl elements have Opening & Closing Tags With content in between

2236.132 -> We've discussed this

2237.307 -> "Some HTML tags have no content"

2239.99 -> There are some HTML tags which doesn't contain any content for eg. "BR"

2243.819 -> And "HR"

2246.478 -> HTML's HR tag

2249.11 -> And what is HTML's HR tag? This is used to create a horizontal line

2253.153 -> We'll talk about these tags

2255.849 -> Now let's move downward and see "We can either use '.htm' or '.html' extension"

2261.372 -> Along with ".html" we can also use ".htm" extension

2265.504 -> If we don't add "l" in ".html" if we are lazy

2268.913 -> And we don't want to type the whole "html" but we only want to type "htm"

2272.506 -> So you're welcome you can do that too

2275.104 -> Your templates will work but I want to give you a disclaimer

2279.095 -> Sometimes.....Let me show you the Live Server is unable to detect the "index.htm"

2284.388 -> It detects "index.html" as a starting page

2287.876 -> But if you open the "index.htm" so you'll get this page totally rendered

2292.957 -> Which means we mostly have to use ".html" extension

2297.464 -> And we don't have to use ".htm" There's a reason for that

2299.515 -> Because if someone write code in backend or create an extension or a piece of software

2306.262 -> So they sometimes forgot that they also have to add ".htm" as a supportive extension

2309.695 -> Because mostly ".html" is used

2311.944 -> So if they haven't added ".htm" as a supportive extension for eg. Live Server

2316.712 -> They haven't added this in Live Server to detect the ".htm" extension

2320.709 -> Which is why when we visit the route it doesn't display in case of ".htm"

2324.666 -> Now I've changes the name of my file to "index.html" that's why it is displaying

2328.361 -> So we always have to use ".html"

2330.917 -> But we have to be aware that ".htm" is also a valid extension of HTML files

2337.323 -> Now we'll talk about the comments

2339.182 -> But first I want to tell you a fun feature which you might already know

2344.601 -> "inspect element or view page source options"

2347.726 -> We got these 2 options

2349.222 -> What is "Inspect elements" used for?

2351.564 -> It is used to inspect any element

2355.616 -> For eg. I'll show you on my website

2358.145 -> if I do Right Click on "Browse Blog" and then click on "Inspect"

2362.062 -> Now look, blog browse blog

2365.17 -> If I change "Browse Blog" with something like this

2368.451 -> "Browse this website"

2373.774 -> So look it has changed to ]"Browse this website"

2375.817 -> If I inspect "Contact me"

2378.582 -> And then if I change this with "Contact Shubham"

2381.674 -> And then if I click anywhere. So look it has changed to "Contact Shubham"

2385.647 -> Is it changes for everyone?

2387.337 -> No this has changed here temporarily

2390.421 -> So it is not about that you can change this website by inspecting element

2393.705 -> If this was possible then You and I have changed a lot of website till now

2399.546 -> So you cannot change the backend

2401.054 -> But you can change the frontend only or your browser

2404.094 -> Just like I've shown you

2406.138 -> So you can do this

2407.263 -> But it's not like that you can change the website for everyone

2410.518 -> So this is not possible

2413.005 -> When I'll reload this page everything will be back to the normal

2417.477 -> So I hope you all have understood this "Inspect Element"

2419.919 -> And I've already told about "View Page Source" that you can see the whole page source by this feature

2425.694 -> One more thing I want to tell you about "Inspect Element"

2428.681 -> When you'll click on this arrow in the Google Chrome

2431.375 -> Then you can inspect any element

2434.271 -> For eg. If I want to inspect this one

2436.546 -> So look here is the button

2438.303 -> And then if I click here and then on this image so look this has been inspected

2442.832 -> And then if I click here...

2444.935 -> ...and then here so look this "Lambda Image" has been inspected

2448.806 -> So I hope this is cleared to you

2450.704 -> Along with that I want to tell you if you click this on your phones

2453.957 -> So you can see how your website looks in different phones

2456.604 -> So this is how my website looks in Pixel 2

2459.442 -> And if you open my website in iPad so this is how it looks

2463.906 -> And if you open this in Galaxy Fold so this is how it looks

2467.744 -> So the website is responsive

2469.666 -> And what is the meaning of responsive?

2471.179 -> Responsive means if you use this website in any device so it looks good

2479.729 -> It's not like if you a build website for just phones

2483.972 -> And if you're opening that in a computer so it is creating problem

2488.325 -> Responsive means that your website is adaptive to all devices

2492.156 -> So nowadays responsiveness is must for websites

2496.955 -> If any client ask you to build website

2500.331 -> So he won't specify you

2501.928 -> 10 years ago responsiveness was an extra feature

2509.913 -> It was count as an extra feature provided by a good programmer

2517.057 -> But nowadays it is a necessity not an option

2521.291 -> 10 years ago it was optional

2523.097 -> Nowadays internet is used more in phones as compare to computers

2527.095 -> So that's why people check it for phones first

2529.683 -> So that's why the "Mobile First" Concept is widely used

2535.398 -> "Mobile First" means the website is first responsive in phones

2538.678 -> Whether or not responsive in computer is second concern

2540.771 -> Because the mostly used devices for internet are Phones & Tablets

2547.011 -> And other pocket devices

2549.909 -> So I hope you've understood what responsiveness is

2552.452 -> And how to make a website responsive? We'll create that through CSS & JS

2557.904 -> Bur now we're only learning HTML

2559.797 -> So that's why we'll first finish this HTML step and then we'll move to the responsiveness

2566.068 -> You can use "Inspect elements" & "View Page Source"

2568.688 -> And HTML elements = Start Tag + Content + End Tag

2572.237 -> So the HTML element.....

2574.345 -> Whenever I talk about a tag so by that I mean H1 or H1's closing tag

2580.117 -> H1 is the opening tag

2582.706 -> And this H1 is a closing tag

2585.431 -> So whenever I'm saying "Tag" I mean this tag or this one

2589.824 -> BUt when I'm saying "Element" so I mean this whole line

2594.35 -> This whole "This is a heading" is an element

2598.018 -> So it is an element & look here

2600.685 -> HTML elements = Start Tag + Content + End Tag

2604.234 -> So Start Tag & Content & End Tag creates an HTML element

2614.158 -> Now let's talk about comments what are comments?

2616.915 -> Let's suppose if I want to write something here

2619.891 -> I want to write why I added this heading

2623.169 -> I want to specify this, I want to write "this heading will be changed in future"

2633.694 -> Future is pronounced as Fu-Tu-Rey

2635.609 -> Sorry it is written as Fu-Tu-Rey but pronounced as "Future"

2637.516 -> So now if I move to here

2640.98 -> The problem is, It is also displaying on my web page

2643.952 -> I just want to write this but I don't want to display it

2647.995 -> But Google Chrome is displaying my line

2651.482 -> So is there a way for me to write notes here?

2654.715 -> For eg. I want to write here "Improve below paragraph"

2660.398 -> So let's suppose if I want to improve this paragraph

2666.063 -> So what will I do?

2668.859 -> What to do when I don't want it to display here?

2672.308 -> I've written "Improve below paragraph" here

2674.787 -> But I don't want it to be visible because these are my notes

2677.774 -> These are the notes which I don't want to display to the user

2680.35 -> But I want to keep these notes for me

2682.298 -> As I'll press "Ctrl + / "

2684.477 -> Look it has been converted to a comment

2687.748 -> And I'll again press "Ctrl + / "

2689.888 -> "this heading will be changed in future" has been commented out

2695.197 -> This means it won't be displayed in my web page

2699.576 -> These are the comments

2700.822 -> Things which exist but you don't want to display them in your web page...

2706.098 -> ...Are called comments

2707.973 -> What are the comments? Let's read

2709.221 -> "Comments in HTML are used to mark text which shouldn't be parsed"

2712.856 -> What do parsed means?

2714.885 -> When this source code of HTML converts in this form

2721.076 -> This is called parsing

2722.68 -> Google Chrome is reading this code & then displaying it in this form to the user, this is called parsing

2730.764 -> Parsing is called to understand this code, tags & elements

2737.292 -> So now if I want it to ignore some lines of text which I don't want to display

2745.005 -> I'll do right click > view page source so look it has been ignored

2747.779 -> "this heading will be changed in future" has been ignored

2750.738 -> And "Improve this paragraph" is also ignored

2753.764 -> I want it to be ignored by Google Chrome so I made it a comment

2757.704 -> And Google Chrome has obeyed me and it has been ignored

2763.367 -> So these are the comments

2764.487 -> And I also have written comments here

2766.07 -> If you use Notepad for your HTML coding so you have to write this yourself

2771.022 -> You can use " Ctrl + /" to do comment & uncomment

2774.597 -> Comment means to comment any text

2777.123 -> Uncomment means to uncomment any text which is already commented

2784.081 -> Commenting-Uncommenting.... And we'll use this terminology a lot

2789.92 -> While programming

2791.318 -> I'll leave "Improve below paragraph" & "this heading will be changed in future"

2795.319 -> I'll leave all these as they are and read the next point

2798.234 -> "Case sensitivity" Is HTML a case sensitive language? NO!

2801.282 -> HTML is a case insensitive language

2803.903 -> I mean if you use lowercase or uppercase it doesn't matter it'll work properly

2809.058 -> If I write this tag as a capital-P

2813.389 -> And if I change this to a capital-P

2816.186 -> So will my browser show it correctly?

2818.856 -> Yes it'll show it correctly, look if I reload it so a capital-P has been appeared here

2823.162 -> So I can use uppercase or lowercase

2826.19 -> I can use any but lowercase tags are highly recommended

2831.03 -> I know it'll work but lowercase tags are highly recommended

2838.411 -> This is a whole element & 'P' is an opening tag

2841.77 -> And this 'P' is a closing tag

2843.63 -> I hope you got the point

2846.346 -> Now we'll move to chapter 1's practice set

2849.834 -> And we'll practice some things

2852.624 -> And we'll also grasp these things which we understood & make sure to download the notes

2857.041 -> I've written these notes for you so please download them

2861.284 -> These notes are very helpful

2862.993 -> And I'll provide the PDF of these notes to download in the description

2868.093 -> So I hope you've understood this HTML website's structure

2872.549 -> You'll also get the codes & notes & everything I'm writing here

2876.846 -> Let's move in to chapter 1 practice set

2879.992 -> So guys this is the chapter 1 practice set which I'm opening here

2883.559 -> And I've added some questions in it which will help you to understand HTML better

2889.559 -> Now look "Inspect your favourite website & change something on the page which is displayed"

2893.698 -> This is a very simple exercise

2895.655 -> But I want you do this on your own

2897.521 -> Because if you inspect a website so first take away you'll get is...

2905.234 -> ...That you'll learn to change your favourite websites

2908.51 -> And that can be any website I'll change the "CodeWithHarry" website

2912.275 -> So now we are on "codewithhary.com" and I'll show you changing this

2917.689 -> By the way I already did that one time before

2919.655 -> Lets suppose I want to change "Contact me" And I want to change it to...

2926.465 -> "Contact this person"

2929.31 -> So this is how I can change this and make sure to try this on your own

2934.975 -> Try to change it

2936.31 -> It's not important to change this website and I know that 90% of you will change "codewithhary"

2942.453 -> Try another website

2945.027 -> You can change anything or you can also use "codewithhary

2947.371 -> Try to change your favourite website it is very fun when the web page is changed

2953.076 -> Very few people are familiar with that

2954.529 -> And those who know is good for theirselves

2957.344 -> Go to your favourite website & try to view the page source and write the exact lines of code

2961.825 -> Does it clone the website? Why?

2964.025 -> Visit any website & do right click > view page source

2967.871 -> And see if you're able to clone that website or not

2972.749 -> Now what I'll do is...

2974.435 -> I'll try to clone this website but you can use any website of your choice

2979.856 -> You can clone "Wikipedia"

2984.016 -> And I'll open the "Wikipedia" and then I'll do right click > view page source

2987.424 -> And I'll copy it's source

2989.727 -> And after copying this source look here are many things

2993.436 -> Here are a lot of stuff

2995.368 -> And I'll create a file "practice.html"

3000.533 -> And I'll open it with "Live Server"

3004.151 -> So look this is the Wikipedia which I copied

3007.59 -> And this one is the actual Wikipedia

3009.584 -> So you can see that the website is not copied exactly and you should know the reason about that

3018.26 -> What was the reason that the website was unable to be cloned?

3020.277 -> So look when you use CSS in your website

3024.826 -> So you sometimes use relative links

3028.86 -> There's an absolute link What is absolute link?

3032.112 -> If I command my computer to visit "codewithhary.com" so this is the absolute path of this website

3036.196 -> But how can I command it to visit relative I can command it to visit "codewithhary.com/blogs"

3040.6 -> Which website's "/blogs" ? "codewithhary"

3043.983 -> So if you visit "/blogs" so you'll be here And if you visit "/videos" so you'll be here

3048.202 -> If you click on "/contact me" so you'll be here

3050.928 -> And if you click on "/start watching" so you'll be here

3053.257 -> When you visit "/videos/Java tutorial for beginners" so you end up on this page

3058.375 -> So they have added a mixture of absolute & relative links in the source of Wikipedia

3064.535 -> And your version of Wikipedia is unable to find the relative links...

3072.453 -> ...Which are related to "Wikipedia.org"

3075.765 -> But it is trying to find that pages on "127.0.0:5500"

3081.521 -> Let me show you this but if you're unable to understand this so please ignore it

3086.755 -> But if you are able to understand this then well & good

3089.154 -> But if you are not.... then you'll learn it don't be tensed about it

3091.795 -> So look here are some pages

3094.301 -> Which were unable to load which is why it is showing the error

3097.186 -> And those things are unable to be load because...

3102.334 -> You haven't added the paths correctly

3104.323 -> So to clone a whole website you've to do some more things we'll talk about them later

3110.246 -> So I just wanted to make you do exercise for cloning a website through this question

3116.22 -> So you can have a good idea about it is not that easy to clone a website

3124.021 -> So it is not that easy

3126.068 -> So I wanted to tell you this

3129.039 -> Write any HTML code inside a text file. Does it work if you write it using Notepad?

3134.662 -> Will it work if you execute it using Notepad?

3139.689 -> Now open this

3141.009 -> And I'll provide you a new text document

3144.295 -> After writing "New text document" I'll write...

3147.404 -> ..."Notepad.html"

3150.742 -> I'll do one thing, for now I'll just change it to "notepad.txt"

3153.894 -> And I'll add some HTML code in it

3156.757 -> And I'll copy HTML code form here

3160.441 -> Have you noticed something? "Notepad.txt" is here

3162.905 -> VScode doesn't perform any type of magic

3164.806 -> It only does what you can do with Notepad

3169.044 -> But because you can perform all those task here in organized manner so that's why we use VScode

3174.025 -> Or you use an alternate of VScode

3177.941 -> So I'll copy this in "notepad.txt"

3181.388 -> I've opened "notepad.txt" twice but no problem

3184.215 -> So I've done "This is heading will be changed in future" something like this

3188.165 -> So now I'll change ".txt" with ".html"

3193.212 -> I'll click on "YES" and then....

3196.572 -> I'll open my "notepad.html" with Live Server

3201.849 -> Or instead of opening it with Live Server if I click on this twice

3205.657 -> So also then it'll work

3207.43 -> "Notepad.html" is working

3209.716 -> So why are we using Live Server when it is supported in Notepad

3213.212 -> We are using Live Server because it creates a server in actual

3218.491 -> Whenever you'll do coding in HTML or create any website in future

3222.559 -> So all files will be serve through a server

3227.193 -> If we use a server from the beginning so that'll be good for us

3231.161 -> So that's why we use Live Server

3235.363 -> So I hope this practice set was very beneficial for you

3240.55 -> And you've understood this easily

3242.531 -> Now we'll move to chapter-2

3244.861 -> Where we'll learn about some basic tags

3247.824 -> I'll see you in chapter-2

3250.47 -> So guys we are now on chapter-2 in which we'll learn about some basic tags

3255.996 -> And we'll use those tags to create some websites

3259.411 -> So I'll quickly open the chapter-2

3261.882 -> I'll open the PDF which I created for you

3265.072 -> And as you can see I've written about some basic tags here

3269.071 -> We can add elements inside the body tag to define the page layout

3272.786 -> We've learned that we have a body tags which is rendered by the body

3277.93 -> And we can add some tags in that body tag which will be visible to us in the browser

3283.517 -> We've learned about H1 tag

3284.964 -> And we've also learned about the "Paragraph" tags

3286.472 -> And we learned that when we use these 2 tags then we got a Heading & Paragraph

3294.216 -> How many more such tags are there? And what type of tags can we use?

3297.969 -> And what are tags which we can use to create a good looking website?

3301.491 -> Or I'll say a good enough website

3304.48 -> So we are going to learn more about this

3306.432 -> We can add elements inside the body tag to define the page layout

3309.209 -> I'll talk about HTML element What do I mean by HTML Element

3313.619 -> HTML elements means An opening tag & a closing tag

3317.519 -> Whenever we write an HTML tag we write 2 tags "Opening Tag & Closing Tag"

3323.957 -> And the content in between

3326.179 -> This content can be a text or more opening & closing tags

3334.268 -> So that's why I've written this as content I can also write this as then any heading and then

3339.56 -> Now pay attention to one thing in Opening & Closing tag

3341.759 -> Whenever we write a tag inside this angular brackets

3345.652 -> And we have to close that, so what we'll do? We add a forward slash(/)

3351.034 -> And we write the name of that tag which means

3358.284 -> And it becomes a closing tag

3360.261 -> We'll open & close all the tags in the way in HTML

3365.924 -> We'll create HTML elements here

3368.357 -> I'll click right > Open with code

3371.198 -> And this folder has been opened in VScode

3375.872 -> So now look I've opened this folder in VScode

3379.943 -> Now we'll create a website here and the name for HTML page will be "index.html" for obvious reasons

3389.879 -> Now I'll add an exclamation mark(!) here and an emmet abbreviations will appear

3396.679 -> I'll press the "Enter" And then press the "Tab" x3 And now I'm inside the body

3401.682 -> Now I'll write H1 here

3403.107 -> Now what Emmet is saying? It is saying " Where will you write the whole H1? "

3407.54 -> Emmet is saying "My son...."

3411.875 -> "...Don't write the whole H1 tag...."

3414.01 -> "....Just press the 'Enter' and I'll see the rest"

3416.233 -> Emmet is so good

3418.669 -> There are very few people like Emmet in this world

3421.604 -> Just write "H1" and then "List of books"

3426.766 -> You've written "List of books"

3428.7 -> Or I'll write "Books to read"

3432.477 -> "Books to read"

3434.117 -> I'll write whatever the heading I want to add

3438.662 -> And then I'll write "P"

3440.985 -> And then I'll write "There are a lot of books to read for you"

3446.197 -> And now I'll save it and then I'll open it with Live Server & you know what will happen

3451.568 -> And it'll open in Liver Server and then I'll be able too see this heading & paragraph

3457.085 -> So look I've written an opening tag & a closing tag & then a content in between

3463.11 -> What is meant by content?

3464.284 -> Content can be a text or a combination of opening & closing tag

3468.059 -> For eg. we have tags in the body

3473.817 -> And in turn we have some content in

3478.235 -> Which is "Books to read"

3479.813 -> So this is how we define the HTML elements

3483.18 -> Element is the combination of opening tag, content & closing tag

3486.079 -> And what is tag? Here are the some example of tags

3491.925 -> Tags means anything which is written in this way

3494.78 -> Element is the combination of all these 3 things

3497.198 -> Let's talk about HTML attributes

3499.766 -> What are the HTML attributes & why do we need them?

3503.885 -> Sometimes you have to supply some more information along with tags

3508.234 -> For eg. if I move to my VScode

3511.335 -> So there's no need for me to supply more information with this H1 tag

3515.447 -> I just want to tell what is the content in H1 tag

3519.302 -> I only want to tell this

3520.575 -> But if I use an anchor tag here I want to tell you about one more tag

3525.487 -> Which is an anchor tag

3526.73 -> If you write "A" and then pressed "Enter"

3529.667 -> So look an attribute has been added here It saying "Please tell in which URL I've to go"

3534.958 -> First let me tell you about the anchor Tag

3537.085 -> If you click on a text which is in Anchor Tag so it'll redirect you to a URL

3543.206 -> So it is asking for the location

3545.989 -> So this is an attribute

3548.858 -> href = what? It is asking you

3551.647 -> You have to add "href = https://codewithharry.com"

3558.288 -> And then write the content "Click here to go to Harry's website"

3565.755 -> Suppose you've written something like this

3567.753 -> Now when you look at it you'll found a link on "Click here to go to Harry's website"

3572.178 -> And when you click on it you'll be redirected to "codewithharry.com"

3574.977 -> So what is the 'href' written with the anchor tag

3579.115 -> In actual 'href' is a link to a website

3584.486 -> And it'll open whenever you'll click on this text

3591.32 -> So if you want to be redirected to "codewithharry.com" by clicking on the text...

3598.743 -> ..."Click here to go to Harry's website"

3601.07 -> So yo can add the website’s address in the href

3603.43 -> So this is the attribute

3604.776 -> And there can be more than one attribute For eg. I could've add some attributes here

3609.398 -> "class = "me" "

3611.057 -> And "id = "that" "

3614.311 -> So this is how you can add a lot of attributes

3617.801 -> I'll remove these 2 attributes

3619.515 -> And I'll only leave 1 attribute here which is of 'href'

3622.337 -> So this is the attribute

3623.647 -> How can you write the attribute?

3624.967 -> First of all the name of the attribute and then " = " and then the attribute in double quotes(" ")

3633.661 -> Can I use the single quotes(' ') ?

3635.466 -> Yes I can use them

3637.349 -> So look we can use single quotes(' ')

3639.837 -> Will it work if I write this in single quotes(' ') Yes definitely it will work!

3643.641 -> So look I've added "href =" in single quotes(' ') this will definitely work

3651.916 -> So what is the difference between single quotes(' ') & double quotes(" ") ?

3654.225 -> Look you can use any one from the single quotes (' ') & double quotes (" ")

3657.144 -> But the attribute you're about to enter contains a double quotes (" ")

3662.071 -> For some weird reason let's suppose this will be my website

3666.146 -> So you cannot use the double quotes (" ") here

3668.197 -> If you've used the double quotes (" ") then it would have confused...

3671.009 -> ...in the closing tags

3673.233 -> So it'll think that you've only written this much after the 'href'

3676.615 -> So it'll be confused and can also give a syntax error

3681.866 -> So if you're using the double quotes (" ") in your attribute's content so remember to use single quotes(' ') in the outer

3689.124 -> and vice versa if you're using the single quotes(' ') in attribute so use the double quotes (" ")

3692.82 -> Or else you can use anyone from the single quotes(' ') & double quotes (" ")

3696.459 -> But in the end, I'll advice you to maintain the consistency.

3701.493 -> What you have to do? You've to maintain the consistency

3703.64 -> If you're using the single quotes(' ') then keep using them

3706.568 -> And if you're using the double quotes (" ") then keep using them

3710.026 -> So I'll remove these double quotes (" ") from here

3712.575 -> Because here the URL of the website is this one & it doesn't contain the double quotes (" ")

3716.739 -> So now we've understood this

3720.363 -> So I've written in the notes for you "Attribute used to add more information corresponding to an HTML tag"

3727.002 -> Which means an HTML tag is already written

3729.655 -> And you're using this to add some additional information corresponding to that attribute

3735.934 -> For eg. if there's an anchor tag and you're specifying the href attribute and writing it's value in it

3742.493 -> So first the name of the attribute and then after " = " the value of attribute in double quotes (" ") or single quotes(' ')

3749.473 -> And then you can write the tag as usual

3751.948 -> Now I've written here we either use single quotes (' ') or double quotes (" ") in attribute

3762.954 -> And now comes the Heading Tag

3764.606 -> Let's discuss the Heading Tag

3767.428 -> Whenever you build your website or any page of your website

3771.866 -> Then you would like to give it a heading

3775.506 -> Heading Tag is used to mark Headings in HTML

3778.4 -> If you want to make any text a Heading so you can use the Heading Tag

3783.596 -> And you can use from the H1 to the H6 for the headings

3787.862 -> H1 means the most important Heading

3790.08 -> H2 means less important than H1 H3 means less important than H2

3793.4 -> H4 means less important than H3 And H6 means the least important heading

3798.247 -> H6 specify the least important heading

3800.604 -> If you use the H6 then it is the least important heading

3803.354 -> So use the H1 for the most important heading

3808.1 -> "We have tags for the most important to the least important headings"

3811.92 -> Which means we have the tags for the most important to the least important heading in the HTML

3818.569 -> I've written a not here

3819.942 -> You'll write all these code and I'll also show you this by typing

3823.819 -> But first let me type this & show you so you can have a good idea about this

3827.629 -> What will be the difference you notice when you write from the H1 all the way to the H6

3833.769 -> I'll also tell you about a trick

3835.631 -> Now if you press "Alt" key in your keyboard

3838.412 -> And then whenever you click somewhere, a cursor will appear

3842.685 -> And if you click there again...

3845.159 -> ...the cursor will be gone

3846.592 -> The benefit of making multiple cursors is you can change text easily

3851.547 -> Just like I've changed these 2 to H2

3854.133 -> And then you can change then to H3 by pressing "Alt" key

3857.772 -> And then you can change this to H4

3861.164 -> And then again....

3862.961 -> I've made a mistake, I've made H4 twice

3865.733 -> I just had to change it to H4 here and here

3868.882 -> And then I've to add H5 here and I also have to remove the cursor

3873.837 -> And then by pressing "Ctrl + D" I'll add a cursor here and change it to H6

3879.266 -> So now look....

3880.612 -> I've closed it mistakenly

3882.664 -> That's good that I managed to saved it

3885.359 -> I've saved it & look how this page is rendering

3889.161 -> H1 will look like this

3891.332 -> And may be this too is H1, I've written H1 twice if I'm not wrong

3894.735 -> Yes I'm not wrong, I've written H1 twice No worries

3898.022 -> So this is the H1, H2, H3, H4, H5 & H6

3901.824 -> When we move to H6 from the H1 so not only their size changes

3906.306 -> Their importance also decrease

3909.339 -> What does it means?

3910.761 -> Whenever the search engines like Google will read your page so they'll think..

3915.041 -> ...That you're writing the most important heading in the H1

3918.996 -> And after that as you're using the H2, H3, H4.... You're decreasing the importance

3924.577 -> Which means if you've used the H1 for "Books to read"

3927.474 -> So the search engine will think

3929.902 -> Or any bot who's crawling your website will think

3934.024 -> That the H1 is the primary topic of your page

3938.46 -> So you have to use the H1.....H6 tags very wisely if you want the search engine optimization

3945.377 -> And if you want to convey your page's content easily with any bot, crawler or a search engine

3959.017 -> So use the tag wisely

3961.989 -> You never have to use the H1-H6 tags to define the sizes of the headings

3967.48 -> I've seen some people who learned the HTML recently use the H1-H6 tags

3975.401 -> In a way to define the sizes of the heading For eg. H1 for the bigger heading & H6 for the smaller

3982.499 -> We don't have to do this and we have to use the heading carefully

3985.747 -> We have to write the paragraph with the paragraph tag

3988.105 -> And we have to write the headings with the heading tag

3990.045 -> We have to use them carefully

3992.229 -> Now look,

3993.882 -> I've told you about paragraphs, anchors and all that Now let's move back to the notes

4000.133 -> I've written something here which I've just told you

4003.715 -> Note:- We should not use HTML headings to make text thick or bold

4009.063 -> We don't have to use the headings to determine the size of the texts

4016.137 -> Then in what purpose we have to use the headings?

4018.473 -> We have to use the headings when we are actually writing the headings

4023.947 -> And not when we've to change the size of the text or design them

4028.269 -> I hope you got the point

4029.635 -> Now we'll move forward to the next tag which we have already seen

4032.67 -> Paragraph Tag

4033.52 -> And what does paragraph tag do?

4034.798 -> I've told you it is used to add paragraph and how you can add paragraph

4039.171 -> And if you want to change the paragraph so you can change it like this

4042.91 -> When I'll write "lorem34" so 34 words will appear

4046.347 -> By the way look a Horizontal scroll bar has appeared here

4049.04 -> And if you want a view like this instead of this horizontal scroll bar

4053.117 -> Let me show you what I'm talking about

4055.454 -> Now if we click on "Toggle Word Wrap" So this scroll bar will disappear

4059.877 -> And Line No. will appear

4061.229 -> Which means in actual this is not the line #17

4064.279 -> But only this content is line #17

4066.943 -> But this is displaying you in multiple lines so you don't have to scroll it horizontally

4071.303 -> This is called Word Wrap

4072.529 -> And we can see the Word Wrap functionality in a lot of IDEs

4076.786 -> So I've enabled my Word Wrap

4079.51 -> So the lines which are actually bigger than my screen width, will be shown like this

4087.345 -> So line #17 is actually this big

4090.397 -> Line #18 is this big that it is fit within a line

4093.981 -> So the bigger lines will be shown in the same screen width and I don't have to use the horizontal screen bar

4103.338 -> And I definitely have to use the vertical scroll bar

4106.915 -> I hope you've understood...

4110.012 -> ...What is Word Wrap and we should use that

4113.287 -> So we've learned Paragraph Tag and the Lorem trick

4116.808 -> Whenever you write the "Lorem" so don't think if you write "Lorem45" in Notepad so a text of 45 words will be generated

4127.171 -> This is the feature of Emmet which is built-in feature of VScode

4131.124 -> You don't have to install the Emmet it is build-in feature of VScode

4136.07 -> I hope you've understood this

4137.46 -> And if the Emmet is not working in your VScode that means you have installed a buggy extension

4142.136 -> It usually happens that if you install a buggy extension

4148.236 -> Or an extension which disables your Emmet knowingly or accidentally

4154.484 -> So you can face problem

4155.536 -> By the way Emmet works perfectly 99.99% of the times

4159.369 -> And this case is very rare, but if this happens so restore the VScode and it'll be fix

4165.064 -> I hope you've understood this

4166.987 -> Now we'll move back to the notes

4171.125 -> And we'll have a look on Anchor Tag

4172.698 -> What is Anchor Tag? Anchor Tag is used to add links to an existing content inside an HTML Page

4177.287 -> Which means if you want to add links in an HTML page

4180.51 -> It means if you want to redirect the user to a different page within the site

4187.996 -> Or you want to redirect the user globally to a different website so you can the Anchor Tag

4194.862 -> Just like I've added an absolute URL here of "Codewithharry.com"

4199.139 -> So if someone clicks on this so they'll be redirected to the Harry's website

4202.269 -> If I write "href = /about.html"

4206.481 -> And if I press the "tab" key & write here "Go to about"

4210.279 -> So it'll try to visit the "about.html"

4214.761 -> I'll create an "about.html" here I'll change the Title with "about"

4220.556 -> And I'll write "Lorem45" by writing a paragraph

4224.479 -> And then I'll write "This is about"

4227.705 -> A very simple thing

4229.676 -> From "index.html" as I click on "Go to about"

4234.11 -> So look I've been redirected to "about.html"

4236.272 -> This is the relative link

4238.6 -> So I'll write one thing here "Example of absolute link and example of..."

4243.337 -> "Example of absolute link"

4246.078 -> And I'll comment it out because I don't want it to be displayed on my website

4251.988 -> And then....

4253.618 -> "Example of relative link"

4258.465 -> And it is the example of relative link which you're commanding to redirect the user to about.html within the server

4266.685 -> And what are you commanding here? You're commanding "https://"

4269.863 -> Which means there's a website on internet "codewithharry" redirect on that

4272.874 -> So these two are different

4274.107 -> The difference is in this you can visit globally from any computer

4278.018 -> But in this you can only visit when you're in a same server

4280.849 -> Which means you have to only use the relative link when you're in your server

4284.291 -> Actually I'm using Live Server so I know that here's an "about.html"

4288.893 -> So that's why I'll go to the "about.html"

4290.357 -> But if you send this to someone else and ask them to go to "/about.html"

4295.115 -> So he won't be able to visit this file in my server

4300.537 -> But if you're hosting you website so yes he can visit your about.html

4305.183 -> I hope you got the point. But if you're confused, so don't be

4309.093 -> Simply absolute link means you're providing the full address

4313.059 -> And relative link means you're telling where you want to go form here

4317.342 -> Which means you have the same server

4319.231 -> What is my server right now? This is the URL of my server

4322.266 -> "/about.html" so I'm now in "/about.html"

4326.439 -> I can press the back button and I'll be on my previous position

4330.133 -> I hope you've understood the Anchor Tag

4332.978 -> And it's href attribute & absolute and relative links

4336.26 -> Now we'll talk about the "Image Tags"

4338.556 -> Image Tag is very simple & straight forward they are used to add images in your HTML page

4345.341 -> It means if you want to add images in your HTML page

4350.81 -> So you can use the IMG tag there's also it's attribute which is SRC

4354.814 -> Which tell you which image you want to add

4360.271 -> Or the complete address of the image

4362.146 -> For eg. if I want to use the Image tag here

4365.565 -> And if I write "Image Tag" and then....

4369.99 -> I'm changing the line with "Ctrl + Enter" By the way many people ask me about the keyboard shortcuts

4374.52 -> So I'm using "Ctrl + Enter"

4376.229 -> And then I'll write "IMG" and I'll add an address in the SRC

4381.936 -> And I'll add the address of any image in the SRC

4385.193 -> I'll search for the images on the internet

4387.577 -> And we can search for any image

4390.238 -> And I'll visit the "unsplash" BTW "Unsplash" is a very API. Let me tell you why

4395.859 -> And firstly I'll visit the URL of this image

4403.483 -> And I'll paste that in SRC

4406.063 -> And look this image has been added on my page

4409.82 -> So if this is how I can images on my web page if I want to

4414.111 -> Obviously it is not looking quite good but this is how we add images

4418.194 -> Now what is "ALT" Suppose if this image is unable to load by any reason

4423.364 -> So what text you want to display?

4425.966 -> Let's suppose you want to show "Human Image"

4431.448 -> I know this is very weird but "ALT" means the text that should be shown when the image is unable to load

4438.371 -> If I change this to "Unsplash4.com" so this image might not load

4442.557 -> And I'll be able to see "Human Image" which means the "ALT"

4446.086 -> And now if I fix the URL which I messed up

4452.99 -> So as I'll save it then I won't be able to see the "ALT"

4456.358 -> Which means the text in the "ALT" will only be shown when the image is unable to be load

4464.218 -> I hope this is clear, because this is very simple & straight forward

4467.873 -> Let's move back to the notes

4469.154 -> And I forgot to mention about the "ALT" in the notes but Emmet asked me about the "ALT" automatically

4476.019 -> BTW I want to tell you one more thing when you'll put your mouse arrow on it

4479.222 -> So look it displaying some documentation

4483.116 -> And this is displaying about the image URL

4485.81 -> What you have to write in SRCs and which is the Paragraph and do you want to open MDN reference?

4492.199 -> So it'll redirect you to the "developer.mozilla.org"

4495.188 -> So I hope you’ve understood how you can open the docs within the server by clicking on some links

4501.975 -> We'll now quickly move to the notes of chapter-2 and learn "Bold, Italic & Underline Tags"

4510.096 -> BTW I've told you about the relative & absolute tag so the same thing is applicable to the images

4515.939 -> I've save it as image and save it in chapter-2 folder

4520.88 -> With a name "image.jfif"

4524.201 -> It's extension will be add automatically "image.jfif"

4527.675 -> Look this "image.jfif" has appeared here

4530.742 -> Now I'll add another image tag here

4533.69 -> And after copy-pasting it

4536.027 -> I've made a replicate line shortcut with (Ctrl + D) From the keyboard shortcuts

4541.805 -> I've already mentioned that in a video earlier "Learn VScode in one video" Give it a shot later

4546.626 -> But now focus on how I'll add the "/image.jfif" in the SRC

4553.683 -> And I'll render the same image again

4556.717 -> So look this image has the SRC

4560.474 -> If I do "Open image in new tab" so this is it's source

4563.056 -> But if I do "open image in new tab" here

4566.083 -> So this "image.jfif" has been downloaded

4570.896 -> Which means the source of image is "image.jfif"

4579.928 -> I hope this thing is cleared to you

4582.146 -> That what is the source of this image and how you can use the relative & absolute link...

4588.114 -> ...To display the images

4589.338 -> So the link of this image is absolute image Sorry! Absolute source URL

4598.734 -> And this is the relative URL

4600.726 -> Because you added "/image.jfif" which means the "image.jfif" from my server

4605.424 -> And here you've added image from "images.unsplash.com/....." URL

4611.366 -> So I hope you've understood how to write the absolute & relative URLs

4616.841 -> Now we'll move back to the notes

4618.248 -> And we'll talk about the "Bold, Italic & Underline Tags"

4621.446 -> We can use "Bold, Italic & Underline Tags" to highlight our texts

4626.776 -> So let me give you a demo of "Bold, Italic & Underline Tags"

4630.269 -> So I'll write "Bold, Italic & Underline Tags"

4635.149 -> And obviously I'll comment it out

4638.565 -> And I'll add a tag here and then I'll write "This is bold"

4641.222 -> And then I'll add an tag here and I'll write "This is Italic"

4647.175 -> And then I'll add an tag here and I'll write "This is Underline"

4652.694 -> And after saving it, Look these tags has appeared here

4657.47 -> "This is bold"

4658.728 -> "This is Italic"

4660.172 -> And "This is Underline" Maybe it has appeared twice

4663.44 -> Ah.... I forgot to save it

4665.242 -> So here it appears once "This is Bold"

4667.832 -> This is Italic & This is Underline BTW I'll do one thing here

4671.13 -> I'm commenting out both the image tags The reason being....

4675.309 -> They are occupying a lot of space you can uncomment them later

4679.035 -> Now our page is looking quite clean

4680.871 -> So I've written "This is Bold" "This is Italic" & "This is Underline"

4684.971 -> Did you notice something?

4686.441 -> "This is Bold" "This is Italic" & "This is Underline" appeared in a single line

4690.294 -> Which means if I add a new line here

4694.37 -> Even then this new line won't be displayed

4697.039 -> As you can see new line has not been displayed and I've even saved the page

4700.725 -> So even if I add multiple new lines, that won't effect it"

4704.539 -> Or if I add some extra spaces.. Look how many extra I've added here

4708.504 -> Here I've written "This is Italic"

4712.149 -> And what does rendered here? "This is Italic"

4715.042 -> This means the HTML ignores the extra spaces & new lines

4721.763 -> It won't effect HTML if you've added new line explicitly

4726.811 -> This totally means that you cannot add new line here in this manner

4732.319 -> So how will you add new line?

4733.726 -> I've already told you in my notes

4735.911 -> With the help of tag

4737.214 -> tag is used to create line breaks in HTML

4739.984 -> Which means if you want "This is Bold" "This is Italic" & "This is Underline" in different lines so you must use tag

4747.638 -> is an empty tag and this is how you can write tag

4752.368 -> And wherever you'll add tag a new line will be added

4756.293 -> I'll expect a new line after "This is Bold" and "This is Italic"

4760.853 -> And I won't expect a new line after "This is Underline"

4763.628 -> So look new lines appeared after these 2

4770.252 -> But there is no new line after "This is underline" So prove this I'll add "This is underline2"

4775.883 -> And it'll appear on the same line

4778.033 -> As you can see

4778.939 -> So I hope this thing is cleared to you that how you can highlight your text within the page

4784.598 -> Big & Small tags

4786.378 -> We have Big & Small tags in HTML and we can use them to...

4791.778 -> This is big or This is small

4796.777 -> I'll add the "Small" in "This is small"

4801.027 -> This is small

4803.363 -> And as you can see I've got Big & Small of different size

4811.197 -> And now after this we'll talk about how you can add a horizontal divider in HTML

4819.981 -> There's and tag for it

4821.206 -> As I'm explaining you these topics

4823.645 -> Just as I explained the topic of heading & Paragraph

4826.584 -> I'll write "Heading & Paragraph"

4831.276 -> And I'll comment it out

4833.973 -> And after heading 7 paragraph I explained you about Links

4837.349 -> I want that I'll separate them with a horizontal line

4840.52 -> And then I explained you about the Image tag

4843.007 -> So I want it to separate it with a horizontal line

4845.071 -> And then I explained you about the "Bold, Italic & Underline" and I want to separate it with a horizontal line

4849.761 -> I've written here and look I'm able to see the horizontal lines

4858.146 -> So why am I seeing this horizontal line? Because I've added tags here

4863.064 -> And now I haven't displayed these images here so let me display it

4867.52 -> Where is my image? Here it is

4870.174 -> Now you'll able to see this properly

4872.455 -> So as you can see these are the links this is the image & this one is the "Bold & italic" part

4878.157 -> I'll shorten the image a little bit and I can do that by using the height & width attribute

4884.317 -> If I add "width = 121px"

4887.423 -> So it's width will be 121px

4890.428 -> So this is how I can set its width & height

4892.995 -> But it's highly recommended that you set the height & width of any image with the help of CSS (Cascading Style Sheets)

4902.707 -> We'll learn about this later

4904.274 -> But for now we'll move forward and learn about more tags

4907.941 -> Which are the subscripts & superscripts tags

4911.122 -> We add subscripts & superscripts as follows

4913.912 -> If you want to add subscripts

4916.057 -> What is the meaning of subscript?

4917.735 -> Subscript is used for.... for eg. if I want to write a chemical formula

4925.117 -> formula of carbon dioxide CO₂ So how will I write that?

4929.059 -> This is how I'll write. First let me write subscripts & superscripts

4937.149 -> And here I'll write "H"...

4940.629 -> Let me first write a paragraph here

4944.255 -> I'll write C.... and then O..... and then...

4949.387 -> I'll write a subscript and then I'll write a "2" inside it

4952.655 -> So look this is how CO₂ will render here

4957.422 -> I'll also remove the space from here so CO₂ will render like this

4960.991 -> Which is ideally looking good so this is how you can write CO₂

4965.583 -> Now let's suppose if you want to write an equation

4967.395 -> And you have to write (a² + b² + c) something like this

4972.384 -> So what you can write?

4973.767 -> You can write "a" and then a superscript and then "2" so this is how you can write (a²)

4979.177 -> And then let us say you want to write (+bx)

4983.928 -> And then (+c) So this is how you can write that

4988.591 -> Let me zoom it of you haven't seen it yet

4991.156 -> By the way I’m zooming it and I've done 500% so that's why it is looking quite big

4995.29 -> I haven't done any magic

4996.696 -> ( a² + bx + c ) Let me change it to to ( ax² )

5000.827 -> You can write any equation

5003.63 -> So I've written ( ax² + bx + c ) I'll reset it with (Ctrl + scroll)

5009.052 -> By clicking on reset It'll be reset to its original size

5014.024 -> Now we'll talk about "Pre Tag"

5017.171 -> Now what is "Pre Tag" ?

5018.808 -> I've already shown you that HTML always ignore extra spaces & new lines

5023.798 -> Now if we want to display a text as we have written it

5028.463 -> For eg. If I take any random python code and I'll search for it

5035.24 -> If I find any Python code.... from anywhere there's nothing to be worried about

5039.132 -> Let's take a code form "python.org"

5041.817 -> Let's take a code form the python docs

5045.757 -> And if I can find any small code a small one

5051.019 -> Python please give me a small code

5053.172 -> Let's suppose I want to take this and I've copied it

5057.176 -> And then I've pasted it with a hope..

5059.965 -> ...that It'll be displayed as it is I mean all the new lines will appear

5064.176 -> And when I'll save it... I've to face disappointment

5067.706 -> Because this whole code has been displayed in a single line

5070.866 -> Neither these new lines appear nor these extra spaces

5073.162 -> It did preserve nothing

5075.578 -> But if I want these type of extra spaces & new lines to be preserved

5080.72 -> Which means I should get the text as it is

5084.05 -> So what will I do? I can use the "Pre Tag"

5087.329 -> Which means I'll write the opening Pre Tag here

5091.618 -> And then I'll write the closing pre tag here

5093.732 -> Now look what will happen

5096.061 -> That whatever is inside the Opening & closing Pre Tag will be displayed as they are

5102.547 -> So look "this means that" "svs.getfilesystemcoding() return....."

5109.165 -> Whatever the spaces & new lines there was

5112.645 -> You can see the them in this text

5115.691 -> And if I add more new lines here

5117.858 -> So look we are able to see a lot of new lines

5120.617 -> So If you want to that your text will render as it is

5124.739 -> So you can use Pre Tags

5126.631 -> Pre Tags are used to add codes If you want to render your code on HTML websites

5132.988 -> So use Pre Tags

5135.079 -> So that your new lines will preserve as they are

5138.861 -> So this was chapter-2 I hope you've understood these basic tags

5143.005 -> IN the upcoming chapters we'll learn some more HTM L tags

5146.184 -> But before that let's do some practice of chapter-2

5149.926 -> Let's move on to chapter-2 practice set

5153.09 -> So guys we are now here to solve the practice set of chapter-2

5156.077 -> And I'm going to open the PDF of chapter-2

5159.246 -> And I've also opened the chapter-2's PDF

5165.716 -> It doesn't matter

5166.518 -> We've learned a lot of things

5169.217 -> We learned about Big, Small, Pre, Subscript & Superscript Tags

5174.769 -> And I think it was fun because we've learned how to build a website

5179.744 -> Now what we'll do is, we'll do some questions so that you can hold tight on to the HTML

5185.865 -> And you can understand better about whatever the tags, properties & attribute we've learned

5191.138 -> So the first question is, "Create an HTML page with a heading"

5196.043 -> Which is going to be the Title of the page and yes not this Title

5199.213 -> But the title heading, there's a heading which is the Title of the whole page

5203.384 -> And then there's a primary heading and a sub heading

5206.898 -> So what I'll do is...

5208.733 -> I'll open this same folder in the VScode because this is the chapter-2's practice set

5215.139 -> I'll create a file here with a name "Chater_2_practice_set" or "Practice_set.html"

5219.849 -> I'll add boiler plate code

5221.506 -> And I'll name it "Chapter 2 practice set"

5229.712 -> And in the body I'm going to add the code from which we are going to solve this question

5236.255 -> So if I want to add a primary heading so it definitely will be H1

5239.954 -> And let's suppose I'm writing about the mountains

5243.926 -> And after that.... let us say, I'm adding the secondary heading and I'm writing

5249.694 -> "Why mountains"

5252.417 -> And let us say I've written a paragraph

5255.5 -> Which contains 45 words

5259.988 -> And I'll turn on the Word Wrap

5262.171 -> I've told you how to turn on the word wrap

5265.407 -> So that the text will be displayed without any scroll bar

5269.846 -> So Line #12 which might not fit in one line is displayed like this

5274.731 -> This is the single line but it is presented in this way

5277.224 -> And here is the line #13 This is possible because of Word wrap

5280.593 -> And after "Why Mountain?" I'm going to add a sub heading in it

5284.565 -> And...... The main reason

5287.677 -> Let's suppose we are writing the main reasons

5292.757 -> And the Paragraph

5294.273 -> And Let's suppose we've written 45 words in the main reasons

5297.579 -> So when I'll open my page in Live Server so this is what it'll look like

5301.416 -> So there's a page heading and there's "Why Mountains"

5306.432 -> And then there's a sub heading "The main reasons" so we had to this

5312.092 -> We had to create an HTML page with a heading

5314.579 -> Which is going to contain the Title Heading, Primary Heading & The Sub Heading"

5317.698 -> What tags have you used in it?

5319.4 -> Was I able to use the any other tag? Yes definitely I was able

5323.147 -> And when you'll learn the CSS then you'll know how many options you have to solve this question

5328.572 -> And when you'll learn the CSS you'll find that you can change the size of any element

5335.937 -> And when you can do that so sometimes you become too greedy to use the easy tags

5343.319 -> Just like changing the font & paragraph

5347.944 -> So I don't want you to be trapped in the greed

5350.481 -> I know you'll get an intuitive feeling that let's finish this in an easy way

5354.783 -> But in actual will that page be read by any robot?

5358.266 -> Will that page be an SEO friendly?

5362.812 -> You must ask these type of questions from yourselves when you do that

5367.101 -> "Create a page with 5 wallpaper images taken from the internet"

5369.983 -> You have to take 5 wallpapers from the internet

5373.012 -> And you have to display them

5374.982 -> And if I search for wallpaper

5378.425 -> Then to the Images and if you only want to display them

5382.193 -> So you can find a lot of wallpaper images

5386.572 -> Look we've got a lot of wallpaper images

5388.929 -> So you can use any wallpaper from this it doesn't matter which wallpaper you'll use

5392.92 -> If I use this wallpaper I'll do right click > Open image in new tab

5397.026 -> And I'll copy the URL of this image and take this

5400.957 -> So you just have to choose any wallpaper from these wallpaper & you have to display it

5408.765 -> And you have to solve this question on your own

5410.865 -> I'm not going to solve this

5412.489 -> The reason is...

5415.067 -> You should have knowledge about how to do this

5417.258 -> Because I already have shown many examples

5419.644 -> And the third question is to "Use BR & HR tags to display a piece of text with line bricks"

5424.985 -> Try this question too on your own because I want to keep this video short & to the point

5430.281 -> That's why I've given questions for the practice

5432.481 -> So that you can do practice on your own

5435.304 -> The forth question is "try the following equation using HTML"

5438.218 -> You've to write this equation from HTML ( C + O₂ ➜ CO₂ )

5441.842 -> This is the equation of carbon oxidization

5443.962 -> So we'll write this

5446.595 -> Let me tell you how you can write this in a paragraph

5448.645 -> You can write it ( C + O2 ➜ CO2 ) If you write it like this

5456.654 -> So this is how it'll be displayed let me show you

5460.147 -> Something like this and which is not looking good

5463.12 -> I need subscript tags

5465.402 -> So I'll select it and then I'll write here Sub and then 2

5472.481 -> 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

5480.667 -> Now look...

5482.443 -> The equation is now displayed correctly ( C + O₂ ➜ CO₂ )

5486.649 -> So this reaction is looking quite correctly

5489.253 -> So ideally you want that your reaction will look like this

5492.662 -> So I want to tell you one more thing

5495.268 -> Now if we have talked about the chemical reaction so let me tell you

5498.623 -> You can..

5500.758 -> Take the arrow of the HTML from the internet

5504.59 -> So let me show you how you can display these type of arrows

5509.134 -> So look they have given a lot of codes of HTML

5512.033 -> So if you use "m%rarr" so you can use the arrow symbol of HTML

5517.346 -> So we have a lot of social symbols of this type

5519.937 -> Which you can use in HTML

5521.379 -> Let me show you one use of this type of arrow

5524.226 -> So look this is how this arrow looks and you can use these type of arrows in HTML

5528.391 -> And there are a lot of symbols in HTML which you can use

5532.104 -> And the codes for those symbols are also given here

5535.615 -> So I hope you've understood this

5537.266 -> 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

5546.73 -> In my case it was providing and I got the right arrow symbol in HTML

5552.442 -> That's why I use that

5553.558 -> So I hope you've understood how to do this

5556.76 -> "Try write a Wikipedia article using HTML"

5558.806 -> And I want you to solve this question on your own

5561.951 -> Let us say I want to open the Wikipedia page of Programming

5567.943 -> And I want to replicate this page

5571.919 -> What type of tags will you use?

5573.438 -> Let's guess what tag will it be

5575.227 -> This is definitely a heading tag

5578.455 -> You can inspect it and it will be the H1 tag

5580.615 -> This is the primary heading of this page so this will be H1 tag

5583.395 -> Let's suppose if you won't find this H1 in any page

5585.963 -> So the developer of that page has made a mistake

5588.096 -> Because if you haven't use the heading tag even in your heading

5592.437 -> So there's something wrong with your page

5593.903 -> Your page can be displayed using the CSS without using the heading tags

5597.779 -> But it'll not be called best practice

5600.814 -> You have to do this with a good practice

5603.226 -> If you use best software techniques for building website or apps then you'll get advantages

5610.518 -> I just want to tell you this

5612.164 -> Now I'll close this because our chapter-2 practice set has been completed

5616.24 -> I've also hand picked some question so that you can do your practice after completing the chapter-2

5623.365 -> I just want to keep these notes as if you have these notes & this video

5633.244 -> Then whenever you'll turn the page you'll remember everything

5637.403 -> And I also have given practice so that if you ever have to do revision then you just have to turn some pages

5642.78 -> Now we'll move to the chapter-3

5645.409 -> And in chapter-3 we'll learn how we can structure a website

5650.078 -> Because if you learn how to structure a website then you can easily create any type of website

5654.208 -> Yes I know our website is not looking that good because we haven't used the CSS

5659.216 -> But if we learn how to structure our website

5663.297 -> So it'll be a good win for us

5665.685 -> Let's move to the chapter-3 now

5668.875 -> So let's quickly open the PDF of chapter-3

5672.252 -> And after opening the PDF we'll learn how to create a page layout

5677.411 -> So chapter-3 is about creating a page layout

5679.529 -> And I've written something here and they have a very deep meaning

5683.347 -> And that's why I will focus on that

5685.926 -> And I've written very minimal amount of notes

5689.764 -> And I'll close the rest of the tabs

5691.498 -> When we use the right tag in a right place this help us to create a better page layout

5699.223 -> And it also help for the better indexing through search engines

5701.59 -> And it also provides better user experience

5703.031 -> And I've used the word "Better" here because what is the meaning of better? "More satisfactory"

5707.675 -> The work will be more satisfactory

5710.737 -> Look if you won't use the right tags and create the website

5716.042 -> But will the search engines be able to index it?

5718.619 -> Will your website appear on Google?

5720.488 -> Will your user get a good experience?

5722.557 -> What is the meaning of user experience?

5723.952 -> Let's suppose if you install the third party JavaScript Library

5727.309 -> Or if you use third-party CSS frame work

5730.129 -> It is possible that they have targeted some particular tags

5733.496 -> Like header or footer

5735.545 -> And you're not using that layout

5736.904 -> So maybe you'll face problems while using that library

5740.322 -> That's why I'm suggesting better user experience

5743.176 -> So now we'll learn how to create a layout of a website

5746.658 -> Ideally your website will contain a header and then a main tag and a footer

5751.976 -> So now if I quickly show you this page in VScode

5756.036 -> And then if I create an "index.html"

5760.864 -> So look.... I'll..... What shall I call it? It is called Boiler Plate Code

5768.184 -> Boiler Plate Code of HTML will appear here

5770.729 -> And I'll create it with a name "Chapter-3"

5773.926 -> Now what I'll do is... As I've told you about a header tag

5778.911 -> I've used a header tag here and then I'll use a main tag here

5783.906 -> And then I'll add a paragraph here and I'll write "This is the main content"

5789.019 -> And after pressing ( Ctrl + Enter )

5791.614 -> I'll move downward and after "Main" I'll create a footer with

5795.652 -> And as you'll create these tags VScode will completely support you

5799.145 -> By "support" I means that whenever you'll write something it'll auto-complete it

5805.717 -> If you put you arrow won any particular tag so it'll provide you a link for mdn reference

5810.783 -> So it'll become very easy for you to understand things and to do to the reference of a particular tag

5816.449 -> So look I haven't added anything in the header

5819.992 -> For now I'll write "this is header"

5821.994 -> And in footer I'll write "This is footer"

5826.613 -> I'll save it & open it with Live Server and my website will open in Live Server

5832.963 -> And as you can see "This header" "This is the main content" & "This is footer"

5835.986 -> And many of you might think that "What was the need to do this? "

5839.898 -> I can directly do this by added Paragraphs

5841.984 -> A human can know that how this website is structured

5846.85 -> But a robot won't be able to see this

5849.03 -> It can only see this

5850.918 -> And how will it know that what is main content, header & footer of your website?

5860.041 -> Footer & Header is not that important as the main content

5864.817 -> SO you have to add the main content of your website in between these 2 tags

5869.641 -> With that it'll become easy for you to read & for the search engines also

5872.576 -> And you also want that search engines can easily understand the content of your website

5876.256 -> Why that? Because you want that traffic must hit your website

5879.791 -> If you're a blogger or you provide any type of service so you want the traffic on your website

5883.74 -> And you want the people to come on your website & appreciate your hard work

5888.219 -> So we have learned about the se index and now we'll move back to the chapter-3 notes

5893.69 -> And we'll learn how to use these 3 tags

5896.689 -> So we add navigation bar in the header and we add Nav Tag in it

5901.061 -> And in in main tags we add "Section" Article" & "Aside" tag

5906.695 -> And these three tags are most commonly used tags

5910.023 -> You can add "div" here we'll learn more about "div" later

5913.818 -> But these 3 are the most important tags which you must have knowledge about

5918.384 -> These are the opening & closing tags of main tag

5921.212 -> Basically we've talked about Header, Footer & Main tag

5924.26 -> And now we're diving deep in the Main Tag

5926.036 -> We're trying to understand what should Main Tag contain but I've added paragraph in the Main Tag

5930.366 -> But in actual what should the Main Tag contain

5932.091 -> I'll comment this out because I added this paragraph just to show you

5935.366 -> I'll create a section in Main Tag

5937.04 -> And what 'Sections' mean?

5938.123 -> Let me explain the meaning of section

5940.723 -> When you create a section tag it means you want to display a particular part of your page to users

5947.692 -> When you write an article it might have been that you've written a particular thing in your page

5952.294 -> So there you can use the article tag

5954.447 -> What type of content you'll add in 'Aside' ?

5956.279 -> In 'Aside' you'll add topic which is completely different from your main page

5964.22 -> For eg. If you're using Google Ads or Facebook Ads

5970.614 -> So there you can add.... You might have seen Ads on websites

5975.703 -> So if you want to show ads on your website then you can use the 'Aside' Tag

5982.665 -> And then comes the closing tag of Main Tag

5984.479 -> If you follow the layout which I told you so your page will be SEO friendly

5991.247 -> The user experience in your page will boost up

5993.361 -> I already have told you the benefits of following this layout

5998.949 -> So whenever you're creating a serious website

6001.94 -> This website not a serious one I'm just creating it to teach you

6005.685 -> If you're creating a web-page for college fest or to collect information about your classmates or a group of your company

6017.092 -> If you're doing stuff like this then it is not a serious website

6019.977 -> But if you're starting a Blog and you want to generate your living from that

6024.512 -> Then that's a serious business

6025.892 -> So then you have to structure your website in this way

6028.836 -> If you're creating an E-Commerce website like Flipkart or Amazon

6033.53 -> Or you're creating a social network like Facebook

6036.134 -> So it becomes mandatory for you to use the tags properly

6041.55 -> I wanted to write the "Amazon" and after writing "ama" suggested me

6044.53 -> If you want websites like this so you want the search engines to understand your website

6049.711 -> So I've written "creating a page like this is not necessary"

6054.538 -> But it creates a readable & structured layout

6060.062 -> Just like I've shown you

6061.174 -> And these type of pages are also SEO friendly

6063.46 -> Because when the computer is able to understand your page

6065.599 -> Look, the Google also want to index your page

6069.714 -> If you mention...

6071.077 -> Let's suppose you're trowing a party for the whole India

6073.95 -> And you said that whoever comes I'll provide the best party ever

6080.291 -> But how will the people know that you're providing such part

6084.108 -> You must have to convey the information by any means

6087.075 -> Just like that your page must contains some very obvious tags

6091.924 -> Because when the things are obvious so you keep them in mind

6096.57 -> This person is throwing a party its very obvious

6099.459 -> Or if you structure your page like this so its obvious that it's your main content

6104.319 -> And it's very obvious that this is a header and it contains a Nav Tag

6108.029 -> And Nav Tag contains some navigations like "Home" "About" etc

6116.116 -> So I can easily recognize that you've created this for navigation

6121.762 -> So the robot... or the computers....

6125.257 -> Or let us say web browser it is also a type of program it is not a human

6131.071 -> So if it is displaying your content

6133.505 -> So the additional information you've provided

6137.225 -> Which additional information?

6138.94 -> The exact position of your header, footer & main content

6142.392 -> So it can use this main information

6146.08 -> So your web browser will understand that

6149.73 -> We'll now move forward & discuss the Link attributes

6152.014 -> I've told you about the links

6154.191 -> And the links are....

6157.145 -> Let me write "href="https://codewithharry.com"

6163.949 -> I want to go to the codewithharry.com

6165.815 -> And let me write "Harry's website" here

6169.987 -> So I've written "Harry's website"

6172.081 -> Now look "Harry's website" is written here let me zoom it in so you can see it

6177.091 -> If you click on "Harry's website" so you'll be redirected to "Harry's website" there's nothing new in it

6181.324 -> But if you add an attribute here and you write "Target = _main"

6188.01 -> So look by writing "Target = _main" this website will open in new tab

6192.806 -> So this type of attributes help you to add additional functionality

6200.204 -> So many tags provides many type of attributes

6203.354 -> And now if you click here and go to its MDN reference

6206.909 -> So you'll get to know more about Anchor Tag

6209.357 -> So look here is the information

6211.525 -> So whenever you want to gain more information about any tag so you can visit its MDN reference

6216.123 -> And there you can ready everything about that tag

6219.862 -> If you're an advance user so you'll understand this

6223.282 -> But if you're a beginner so don't be scared

6226.696 -> They have given a little demo here so just look at it or I've covered everything in notes & this video

6234.279 -> So there's is, was or will be nothing to be worries about

6237.873 -> And we are here to shoot all the tensions & troubles

6242.826 -> Now look I've told you about link attribute how to open in a new tab

6248.212 -> And I also have told you that we can put any content inside an Anchor Tag like Images & headings

6253.366 -> For now I've just added a text

6254.853 -> But if there was an image so you can also go to the "codewithharry.com" by clicking on that image

6261.16 -> So if I add an image here

6262.915 -> I'll do one thing

6263.852 -> I had an image..... This one

6266.824 -> So if I add this image here

6268.724 -> And let us say I rename it to "cwh.jfif"

6272.63 -> And then if I come back here and instead of this text if I add an Image Tag here

6277.817 -> If I something like this here

6279.621 -> I'll write "< img src = "cwh.jfif "

6285.293 -> And in Alt I'll write "Harry's website"

6289.266 -> So I'll cut this

6292.129 -> And I'll save it

6293.705 -> And let me add width attribute "width = 123"

6298.036 -> And image have width & height both attributes

6301.394 -> We'll talk about this soon

6302.841 -> But the point I want highlight here let me show that first

6305.815 -> So if I click on this image

6307.962 -> So look I've been redirected to "codewithharry.com"

6310.301 -> So it doesn't matter if there's an image or a text you'll be redirected to the website in a new tab

6319.997 -> I hope that this was easy

6321.593 -> Now if I also add height here

6322.927 -> Let me take you to the note I've written something

6326.069 -> "If the page is inside the directory we need to make sure that we link to the correct page"

6331.832 -> And I'll tell you about this

6334.409 -> And I'll also tell you about the image

6335.914 -> So these are the 2 things which we'll discuss

6338.022 -> So first let's understand the Directory

6340.137 -> Or let me first mention about the height of the image which is very important

6343.294 -> If you set both width & height of an image

6346.857 -> Let's suppose if I make it's height 34

6348.35 -> So it's aspect ratio will be disturbed now what is aspect ratio?

6351.15 -> Let me show you

6352.49 -> This is the image with a disturbed aspect ratio

6355.213 -> Which means if you've created a website with a landscape image

6363.253 -> And the if you take that image in portrait mode with your phone

6366.44 -> And then you try to show that image in a landscape mode

6368.76 -> So it is possible that your image's aspect ratio will disturb

6371.405 -> So to avoid this we only set one The Height or The Width

6375.7 -> And then the second attribute is set automatically

6378.053 -> So if I only set the height so it'll keep the height 34 and the set the width automatically

6383.226 -> Such that the aspect ration of this image won't be disturbed

6387.94 -> You read online more about aspect ratio

6390.635 -> And...... Aspect ratio

6395.841 -> You can read about aspect ratio

6398.099 -> I hope 90% of you have understood this

6402.494 -> But if you're in that 10% who don't understand aspect ratio

6406.094 -> Just Google it, don't think that you're dumb

6410.445 -> Everyone is weak at something

6412.955 -> It is better to gain knowledge about them ASAP

6417.715 -> Now we'll move forward to the next one which I've written here

6422.025 -> If a page is inside a directory we need to make sure that the link we are using is for the correct page"

6428.132 -> What do I mean by this?

6430.07 -> As I've used this "cwh.jfif"

6432.689 -> Let's suppose this is inside a folder with name "IMG"

6434.912 -> Suppose I've moved all my images to the IMG folder

6437.437 -> Let us say I'm using 100 images in this particular website

6440.529 -> And I don't want a bundles of images here in my directory

6446.876 -> So I'll pack all the images in the IMG folder

6450.363 -> But there will be a problem

6452.223 -> This is saying that "This is image doesn't exist"

6454.11 -> Now if you inspect it then you'll be able to see "Failed to load"

6457.94 -> Which means you tried to use the "cwh.jfif"

6461.78 -> But we couldn't find that

6463.795 -> Why so?

6464.497 -> Because "cwh.jfif" is not here now

6469.027 -> It is in the IMG folder so this is how yo have to add its URL

6472.741 -> "IMG/cwh.jfif" which means in the IMG folder

6477.82 -> BTW you can name this folder of your choice it's not mandatory to name it "IMG"

6483.277 -> You can also name it "Harry"

6484.394 -> IO just named it "IMG" because I can easily recognize that it contains images

6487.781 -> And this error will be fixed

6490.21 -> So there's nothing to be worried about

6492.656 -> I just wanted to tell you because this is mostly used when you'll use frame work

6497.952 -> ...If you use Flask, Django, Angular or View

6502.974 -> You'll have to face these things

6506.519 -> At the end of the day all these frame work renders HTML

6511.245 -> So we've learned this and this and we've learned that we can use IMG tag in Anchor tag

6517.265 -> And we've leaned that we can set only one attribute from the Height & the Width and the second one will be set automatically

6522.833 -> And we also have learned that we can use any one] from the Single('_') or Double Quote("_")

6525.885 -> Because it increase the consistency

6528.461 -> And you don't want the other developers to remember you in bad terms

6533.464 -> You want them to remember you in good terms

6536.34 -> And you want to write a good code with the easiest way

6540.233 -> And if you're maintaining the code on your own then it increase a reason to maintain it correctly

6548.205 -> Now we'll talk about 'Div' and 'Div' tag used as a container for other elements

6553.748 -> What does it mean?

6554.89 -> We use 'Div' as a container

6557.11 -> Sometimes we have to add some tags in a container

6559.91 -> For eg. Let us say I have to pack a Paragraph and a Heading in a particular section

6567.603 -> Let's suppose I'm creating another section and I've to add different Heading & Paragraph

6571.873 -> Let's suppose I've to choose H1 and I'll write "Why Love HTML"

6578.488 -> And then I'll write a paragraph here

6580.169 -> I'll write "HTML is a quite good language and it has turned my life upside-down"

6584.88 -> I'll write something like this and any HTML developer who loves HTML will write this

6591.685 -> And then I'll write H1 "Why use Boot Starp"

6597.87 -> Let's suppose I write "Why use Boot Starp" here and then if I write "Lorem12"

6603.298 -> So I want to keep them separated

6605.326 -> It is possible that with the CSS.....

6608.616 -> What does 'Div' means?

6609.748 -> It means we've divided this set of Heading & Paragraph

6615.45 -> So I've divided this set of heading & paragraph

6618.747 -> This one is different and this one is different

6620.1 -> Now if I want to increase it's size then I can do that with the CSS

6624.5 -> How we can increase that? If you don't know CSS then give it a shot later I've made videos on CSS

6629.101 -> For now just focus on HTML

6630.953 -> And I want this div to be of red color

6633.837 -> I'm showing you but don't think that you can't do that

6638.858 -> I'll save this page and the changes will reflect automatically

6641.688 -> And let me reset it with (Ctrl + scroll)

6644.286 -> Now let's suppose I want to change the BG of this 'Div' to 'Red'

6649.179 -> How am I doing this? You don't have to be worried about I'm just adding the CSS

6654.282 -> Just to show you how you can change the BG of a particular 'Div'

6661.002 -> I've change a particular 'Div' BG to 'Purple' and another 'Div' to 'Red'

6666.183 -> So this is how I can add styles and to add styles I've divided them

6671.533 -> These 2 are together and These 2 are together

6674.933 -> Now we'll talk about the In-Line & Block elements

6677.369 -> What is In-line element? and what is Block element?

6679.895 -> In-line element is the element which occupies space according to it's need

6688.944 -> For eg. if I want to put this SD card somewhere

6695.098 -> So it'll occupy space as per it needs

6698.381 -> And I can also put a mouse by it

6700.958 -> And I can put this pen by it too

6704.361 -> I can everything side by side

6706.524 -> But let's suppose if there was a rule that you cannot put SD card and other things in a same line

6717.274 -> This is the Block element

6718.535 -> Let me explain what I mean

6720.897 -> If I write a 'Div' here. Let me show you a 'Div' and then I'll show you a 'Span'

6726.352 -> 'Div' is a container and 'Span' is also a container I'll write "I'm a span tag here" here

6731.11 -> And then I'll create another 'Span' and in that I'll write

6734.81 -> "I'm another span"

6737.084 -> Now see the difference between them

6740.726 -> Now I'll inspect it and I already have told you that you can inspect by doing right click

6745.11 -> Now I'll click on this arrow

6746.499 -> Now see my 'Div' tag...

6748.686 -> This is the Paragraph but I'll go to my 'Div' tag

6753.303 -> The 'Div' tag was inside the main tag I've added that in section

6757.121 -> Look how much this 'Div' should occupy space? Only this much

6761.121 -> But it is occupying the whole space

6767.051 -> So 'Div' element or 'Div' like other element wherever they step-in the whole space belongs to them

6778.668 -> And 'Span' is a like an innocent boy

6782.585 -> It only focus on it's job

6785.823 -> And 'Span' only occupy the space it needs

6789.784 -> I'll remove the Paragraph from here because it is a Block element

6792.804 -> And I'll only keep the 'Span'

6795.875 -> Paragraph is a block element & 'Span' is an in-line element

6799.217 -> So 'Span' will only occupy the space it needs

6801.053 -> You can see as I keep arrow on it so it is highlighting

6804.15 -> 'Span' is only occupying this much space and there's another 'Span' by it

6807.502 -> Because 'Span' is like an innocent boy

6809.664 -> Which means it is an In-line element

6811.994 -> "In-line" contains 2 words "In" & "Line" which means ins a single line

6816.267 -> So it is an In-line element and I'll mention here

6821.124 -> " 'Span' is an example of an In-line element "

6828.649 -> And obviously I'll comment this out

6830.754 -> And then I'll write

6832.303 -> " 'Div' is an example of a Block element "

6837.738 -> I'll comment this out too

6840.183 -> And look

6842.14 -> I'm using " Ctrl + / ) for commenting out

6845.04 -> It is a very simple shortcut

6846.815 -> So we have now learned In-line & Block element

6850.936 -> So in chapter-3 we learned that there are 2 types of container 'Div' & 'Span'

6855.773 -> 'Div' is an In-line element & 'Span' is a block element I've written this for you

6861.313 -> 'Div' tag is often used as a container for other elements

6865.663 -> 'Div' is a block level element 'Span' is an In-line container

6869.126 -> Which means it only occupies space it needs

6872.801 -> So we've learned that 'Span' tag is an In-line container and 'Div is a Block level element

6879.439 -> Block element means it occupies space more than it needs

6884.564 -> And In-line element means it only occupies space which is necessary

6892.093 -> You have to remember one thing if you add a block level container in an In-line container

6897.132 -> So the block level container will occupy the whole space

6900.28 -> 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

6906.885 -> So guys as you can see I've provided the list of In-line & Block elements

6911.559 ->

6915.163 ->

6918.978 ->

6922.927 ->

6925.087 ->

9129.925 -> Whatever we'll name these form elements

9134.056 -> After going to the backend pay close attention on my words

10199.989 -> So guys this is the time for us to discuss the search engine optimization

10204.436 -> In chapter-5 I've explained briefly about the SEO

10210.825 -> And if you're a web developer then you must want to learn SEO at any point of time

10217.427 -> Let me tell you what I've learned about SEO in my life

10221.114 -> I'll tell you in very short term but it'll be very effective

10226.313 -> In my opinion using SEO with-in a limit is good

10230.241 -> But SEO is not about using is a website like...

10235.292 -> Let me show you which type of website I'm talking about

10237.558 -> It's not like if I open this website in a Live Server

10243.243 -> If you search for videos on Google

10246.91 -> If I search videos on Google

10249.408 -> So this website will never pop-up on the top

10252.529 -> Now matter how much SEO I've done

10254.876 -> What's the reason for that? Relevance

10256.544 -> Let's suppose you're Google

10259.926 -> And you have to rank the websites

10263.993 -> So if you have to rank the website then what would you do?

10267.841 -> If you have to rank the website then you'll curate the best websites

10271.868 -> And you want to show the website which is best suitable with the keyword

10277.109 -> Let's assume that YouTube Community not used the Search Engine Optimization

10285.785 -> And on the internet you search for "YouTube"

10288.886 -> So what do you think if you have created a website like YouTube & done the SEO without providing any value

10297.819 -> Do you think that your website will pop-up on the top while searching for the YouTube

10301.909 -> Definitely not

10303.577 -> So Search Engine Optimization is a way to improve the existing ranking a lil-bit

10309.328 -> Pay close attention I'll rather say SEO is the way to help Search Engine finding your website

10319.613 -> So at maximum you can just specify the Google about your website & it's content

10328.063 -> If you've made an excellent website on internet and then you think that your website will pop-up on the top

10336.125 -> And you've also written a good content

10338.647 -> So the search engines like Google, Bing & Yahoo also ask about your website, its content & description

10348.592 -> Like "Codewithharry.com" is a website

10352.087 -> This website is about who?

10353.504 -> If someone search for "Fires"

10357.985 -> So this description is most important for the user who is searching for the fire

10363.643 -> So Search Engines always ask you about the description like this one

10368.535 -> So it'll be easy for us to show this page

10371.836 -> And if you tell about the Title so it'll be easy for us to show your page title here

10376.749 -> And the users will be valued who are coming to search website on the Search Engines

10383.773 -> So the very first thing for the SEO is... In my opinion it didn't even include in course SEO

10391.746 -> To provide the value

10393.094 -> In actual how much useful is your content?

10395.706 -> If a website is actually useful I'll show you

10398.879 -> If I search for "Bill Gates Blog"

10401.958 -> So do you think this search is optimized properly?

10406.744 -> Yes the optimization has taken place

10409.513 -> But if a blog is related to a particular person

10414.813 -> You may have seen some websites in which people make a very basic page in HTML

10421.084 -> After all that those website pop-up on the top

10422.84 -> Reason being "Relevance" because those website contains the content which user actually searched for

10427.714 -> I won't explain more about SEO

10430.322 -> I only have included SEO in chapter-5 that is necessary for you to learn if you're learning the HTML

10442.932 -> We'll focus only on HTML stand point of SEO

10445.618 -> We won't dive to depth of the SEO because it includes a lot of things

10449.285 -> We will not be looking in to keyword building in content optimization aspect of SEO

10453.251 -> How we do keyword building? How we do content optimization

10456.673 -> Writing content according to "which content is being search for how many time" this also comes under SEO

10460.69 -> But...

10461.369 -> We won't focus on that aspect

10462.727 -> We'll look for the existing which already have written

10466.058 -> How to add SEO in that page

10467.513 -> How can we improve the ranking of that website by adding more HTML tags & optimization

10475.968 -> And not by any illegal means

10478.336 -> We'll actually provide value to our users

10481.304 -> And how will we do that?

10482.319 -> 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

10490.431 -> And on the other if a page is taking fraction of a sec to load

10494.54 -> Definitely Google will show that on the top

10496.944 -> Now let's talk about types of SEOs We've got 2 types of SEOs

10500.021 -> The first one is the On-page SEO and the second one is the Off-page SEO

10501.998 -> We'll talk about On-page SEO which can be done by HTML developers

10505.883 -> And what does Off-page SEO means?

10507.519 -> Off-page SEO means you've to do link building

10510.23 -> Many people says there's no advantage of link building

10513.897 -> Let me tell you the meaning if Link Building

10515.542 -> If another website is linked to your website

10520.048 -> For eg. if I point on a website

10523.752 -> Let's suppose if I've added a URL of my Facebook page

10527.818 -> So there are many people who are pointing on Facebook

10529.852 -> So search engines will recognize that many people are pointing on this website so it must contain something important

10535.641 -> So this is called link building

10538.2 -> This comes under Off-page but I'll only talk about On-page which can be done by HTMl developers

10543.216 -> And in On-page SEO you can do SEO through HTML

10548.773 -> HTML developer can implement SEO using following techniques

10551.227 -> We'll talk about some techniques

10552.527 -> And again this not a comprehensive right to SEO

10556.093 -> Which means it's not like if you learn this then you've completed SEO

10557.933 -> I'll make a course for SEO in future

10559.921 -> But I just wanted to add a chapter in which you can know that how to so SEO

10564.392 -> The first technique I want to tell you is "it is set the title very nice & to the point"

10569.721 -> Add a very nice & to the point title

10572.675 -> And then set a meta description

10575.237 -> Add a description meta tag

10577.774 -> And why should we have to add a nice title?

10578.994 -> Because title is the main thing which is shown in the search

10581.928 -> If you come across a good title so there's high chances that you'll click on that

10586.355 -> Because the very step is to Click on to the website

10589.377 -> And if you'll only read the content when you'll find it useful

10591.602 -> If you don't click on the website and your website doesn't have CTR (Click through rate)

10594.897 -> So what's the use for that?

10596.039 -> So that's why the click is important

10598.468 -> Now this website is taking too long to load or there's something wrong with my internet

10601.808 -> If there's some problem in site then this site might be loosing on....

10605.103 -> ...You know...

10606.749 -> ...On traffic

10607.347 -> Because it is working too slow

10609.258 -> Look this website has been loaded

10610.918 -> Let's have a look on another page

10612.342 -> This is also loaded

10615.01 -> Look this website is not working

10617.938 -> But now this works

10618.932 -> Sometimes when website gets slow so they stop working

10621.622 -> So Google remove them from the first page

10626.399 -> This type of pop-ups are also not a good signs for good user experience

10629.103 -> But again people create this because they get the incentive

10632.869 -> Anyways... we won't talk about them much

10635.934 -> Meta description sets the Meta description

10638.341 -> Meta description means that you have to add a meta tag

10641.43 -> Let me tell you how to add Meta Tag and let's open this folder in VScode

10648.928 -> And obviously I'll close the other folder

10650.766 -> And I'll make a file with the name "seo.html"

10654.885 -> And obviously I'll add a boiler plate code in it

10657.416 -> And here I'll write "S-E-O"

10661.899 -> And then let's say I'll add a Header here

10666.076 -> And then I'll add a Nav Tag

10668.21 -> And then I'll add "UL" and then "LI" and then I'll write "Home" in it

10672.816 -> And similarly I'll add "About" after "Home"

10675.925 -> And let's say this is how I'm creating my website

10678.873 -> "About"...... And after "About" I'll write "Contact"

10684.363 -> So a basic website always contains "Home" "About" "Contact"

10687.467 -> 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

10695.757 -> And I'm adding a paragraph in a container in which I've added "Lorem34"

10699.524 -> Which I've added some sample text and let me show you this website in Live Server

10703.579 -> And this is our website

10704.778 -> And I'll close all these links

10708.759 -> And look this is how my website is looking

10711.05 -> Now let us say that I want to add Meta Tag in this website

10714.913 -> Look I already have added the Title

10716.524 -> Now if I only add SEO in it

10718.021 -> Let us say I'm talking about SEO This is not at all an appropriate Title

10724.094 -> Because if you're talking about the SEO then write this in this way

10728.546 -> "SEO: A beginner's guide"

10732.389 -> SEO in 2021:

10736.349 -> A beginner's guide

10737.327 -> "SEO in 2022: A beginners guide"

10739.6 -> So if someone search for "How will SEO change in 2021"

10742.967 -> And your article is providing information for that content so there's high chance that the user will click on that

10747.817 -> So your page must contain very click-able title & the content related to your title

10752.912 -> This page doesn't contain anything about SEO

10755.04 -> I'm just taking an example & it's not like that you can write anything and your page will pop on the top

10762.731 -> I've written this & now we'll add Meta Tag here

10766.527 -> Now look there's already a Meta Tag for "View Port"

10769.486 -> I'll write "Meta" & then "desc" and then I'll write about SEO

10776.275 -> SEO is like...

10778.487 -> Suppose I'll write anything

10780.417 -> ...This is a nice article on SEO

10785.571 -> I know that I've written this for no reason

10787.043 -> But you can write good content in 80-100 words

10792.503 -> And if you've written more then Google will chop it off

10796.78 -> There's nothing to be worried about if you've written SEO which is a very competitive

10800.551 -> As you can see "Seo stands for...." They must have added this in their Meta Tag

10804.433 -> Now look, if I open this website then there's high chance that they must have added Met Description

10809.674 -> And you can see that they have added Meta Tag for description

10813.174 -> We've got a lot of types of Meta Tags

10815.219 -> But you must set the meta tag for description

10818.34 -> There's no guarantee about your content displaying here as is it

10823.814 -> Google will use your Meta Description only when it'll find it usable

10828.285 -> I'm telling you this with my experience, I've noticed this from all the websites which I build & appeared on Google

10834.078 -> Now "Set a nice URL slug"

10836.329 -> What does this mean? Look, whenever you're working with a backend

10838.937 -> Let's suppose if you're using Flask, Django or PHP so you must name your page that

10846.638 -> So when someone look at it... Just as they have given "seo"

10849.689 -> You have to name it in a way that if someone share your URL then the receiver can easily recognize what is contains

10857.648 -> If I give you an URL "boss.com/learn/seo/this"

10864.415 -> What will be your reaction?

10865.931 -> You'll ask what it is?

10867.306 -> You'll say "Yes! This may contain information about SEO"

10870.595 -> But what information about SEO?

10874.628 -> But if I give you a URL "What-is-SEO"

10878.628 -> "What-is-SEO"

10881.63 -> So you'll say " Yes ! they have mentioned about SEO in URL"

10885.053 -> There's 99% chance that this URL is telling us more about "What is SEO"

10892.752 -> So we'll need a good slug a URL Slug is like "what-is-seo"

10896.805 -> So we'll name a goof URL slug that anyone can tell what does this URL contains just by looking at that

10902.2 -> So if Google or any other search engine will index your page so it'll tell

10908.421 -> That "Yes! If this man has set it's slug nicely so it definitely want to help the people"

10913.957 -> This man is not here to earn Google ranking but to help the people for real

10918.422 -> So Google notices this

10920.614 -> And we've done "Set the Meta description" & "Set the nice URL slug"

10924.815 -> Now add the meta tag for keywords

10926.883 -> Many people don't add the Meta Tag for keywords

10930.543 -> You can either do or don't but it depends

10935.323 -> Many people says that the Meta Tag of keywords is treated as a 'Span'

10939.974 -> But this is how you can dd Keyword's Meta Tag

10944.372 -> And I've told you I'll write "Meta name = keyword"

10952.156 -> And then " content = seo, search, seo 2021 "

10960.828 -> So this is how you can set keywords

10963.638 -> But many people says that this practice is not good enough

10966.214 -> This increase the 'Spam' and people make the keywords tough

10969.001 -> So this is how you can add meta tag for keywords

10972.734 -> So in actual people have abused this "meta name = keywords" more than using it

10979.391 -> And people started adding more than enough keywords in their pages

10984.351 -> Which was an unfair practice

10985.711 -> So the search engines started discouraging this

10989.231 -> And they have decided not to use "meta name = keyword" at all

10996.974 -> So this came to light and there's no mdn link for "meta name = keywords"

11003.283 -> If you hover on it then you'll find no mdn link

11006.417 -> You'll find for meta element but not for "meta name = keywords"

11009.662 -> And this is reason that even mdn community has denied this

11013.736 -> So I wanted to tell you this about keyword description

11017.404 -> So do not set the meta keyword tags

11022.857 -> Because people have abused that and even if you add sweet keyboard stag

11029.255 -> If you add a small tag with 2-3 keyword then it is not a problem in my opinion

11034.746 -> So the next point is to set the meta author tag

11038.407 -> 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

11047.279 -> And your users will also want to know about the author because maybe they are interested in reading the content of their favourite author

11055.424 -> And then we'll move to "set a fav icon" and let me tell you what is fav icon

11060.427 -> I'll visit the "fav icon generator"

11063.696 -> And look they are telling how you can make your fav icon

11067.843 -> Suppose that I'm visiting this website & I've downloaded a fav icon

11072.856 -> So after downloading I'll unzip it & I'll do "extract to fav icon"

11081.115 -> And you can see it has given me some icons and I can use them as a fav icon

11087.296 -> So I'll copy "favicon.ico" file

11090.789 -> And after copying I want to use it here

11097.21 -> So I'll open this folder

11101.489 -> And I'll write "Reveal in file explorer"

11103.969 -> And I'll paste it here

11105.665 -> And then I'll go to "link fav icon" and I'll write "favicon.icon"

11113.045 -> Now my icon would appear here when I press (Ctrl + Shift + R)

11118.262 -> So look my fav icon has appeared here

11119.884 -> So this is called fav icon

11121.237 -> You can use this website or any other website thee are a lot of them

11125.317 -> Which helps you to create fav icon

11128.829 -> Now look they have provided different options like BG color

11132.953 -> Now I want to add some padding here because I think the text is quite close with the boundaries

11138.83 -> But again you can use another fav icon and for that you can use fav icon generator or Adobe Photo Shop

11146.337 -> That's up to you. But once you got the '.ico file' so this is how yo can set it

11150.797 -> So I hope you got the point

11153.046 -> And there were an error in my pages that the fav icon wasn't appearing

11158.569 -> But that error has been fixed now

11160.203 -> 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

11165.724 -> Which is good

11167.001 -> Now the next point is "Compress images & other resources"

11171.226 -> If you write image compressor

11174.1 -> So you'll find some image compressing website on internet in which you can upload your image and compress them

11180.521 -> Which means you can lower their size without having to lose a lot of quality

11186.04 -> Your image quality does get low when you compress them

11189.984 -> But there are some compressions which can give you great compression by decreasing minimum quality

11195.433 -> 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

11203.867 -> Now let's suppose if you're displaying your 100 MB image in just this small portion

11209.761 -> So there's no point in that and there are high chances that you can optimize it

11214.529 -> So you have to use things like this

11217.642 -> So upload your files on it and download the compressed file and use them

11223.532 -> And then there comes "Minify & compress"

11229.232 -> You can minify & compress all of these JavaScript, CSS & HTML

11234.116 -> And there are a lot of tools

11236.767 -> Look here's a website

11238.177 -> That you can upload your JS or CSS file here

11241.518 -> And it'll minimize in actual so I'll write a sample CSS

11245.351 -> I'll write....

11247.879 -> "background:red" and then I'll close it in this way

11251.525 -> And when I'll minify it so look it has removed all the spaces & new lines

11256.047 -> If a bigger CSS files contains a lot of spaces so size of that file will increase and this website remove all of them

11264.112 -> And when we write HTML or CSS code in this format

11270.877 -> We add more spaces & new lines because we have to increase the readability

11278.84 -> We do the format document to increase the readability so that when we or our fellow programmer read this code

11285.228 -> Or tries to improve this code

11287.769 -> So he won't find this code difficult to read & rubbish

11293.173 -> So we want to avoid these type of things

11296.16 -> But when computer read this file so you can give a compressed file

11302.202 -> Which means you can remove these new lines & extra spaces

11305.468 -> So this is what these tools does so you have to minify your HTML, CSS & JS file

11312.356 -> So you'll find a boost in SEO and your load time will also decrease

11317.532 -> Because you were loading the file of 100 MB at that time and now you're loading the file of just 2 MB

11322.327 -> So definitely your load time will decrease

11325.218 -> So compressing the image decrease your load time

11328.877 -> And the benefit of minifying & compressing the HTML, CSS & JS files is that you're not downloading the extra files

11339.149 -> And after this "Add alt text to images"

11341.466 -> I've told yo about an alt attribute in which if an image is failed to load so a text will be displayed

11349.338 -> And it's a good practice because if your image failed to load then you'll will see an alt text

11354.422 -> And if it also help the blind peoples who come to read the content on your website

11360.3 -> So the devices read the alt text to explain them the topic of your image

11366.743 -> So I hope you got the point and you've learned the HTML

11371.559 -> I'll provide all the chapter in a zip file as they are

11376.939 -> And also access the notes & codes

11382.025 -> And many people ask for all the chapter in 1 PDF file

11387.515 -> But you can use a tool name "Merge tool"

11390.411 -> But I'll add a "merge.pdf" in which you'll get all the chapters merged

11396.594 -> So I'll add that too

11398.189 -> I hope you've understood the HTML

11400.317 -> And in future I'll upload a course for CSS with notes and please do tell in the comments if you want that too

11405.464 -> And in that we'll learn how to make websites

11409.239 -> We'll learn to create good websites templates and CSS

11412.792 -> I hope this video we'll will teach you HTML perfectly

11416.503 -> So that's it for this video guys

11418.586 -> 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

11423.795 -> I've made some advance project for web development and I also have made games

11428.858 -> Using HTML, CSS and JS

11432.057 -> And I'll soon upload a video for CSS so you can also wait for that

11442.129 -> So I hope you've enjoyed this video an if you do then please tell me in the comments

11447.261 -> That's it for this video guys Thank you so much guys for watching this video :) And I'll see you next time

Source: https://www.youtube.com/watch?v=BsDoLVMnmZs