HTML Tutorial: Title, Script, Link & Meta Tags | Web Development Tutorials #4
HTML Tutorial: Title, Script, Link & Meta Tags | Web Development Tutorials #4
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
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
Content
0 -> So guys we saw in our previous video,
2.225 -> that how a structure of basic website looks.
5.831 -> How does a website looks.
6.867 -> Along with that, I want you all to access this playlist.
9.831 -> Bookmark it and save it.
11.606 -> If you have not done it yet.
13.478 -> Now quickly what I'll do here is,
15.382 -> in this vs code
18.811 -> I made a file harry.html
20.972 -> And what I'll do here is, I'll make a new file.
23.325 -> And I'll name this file as tut4.html
28.007 -> And after writing tut4.html
30.649 -> I'll use basic Emmet Abbreviation.
32.89 -> So first I will put an exclamation mark.
35.501 -> And I got a suggestion over here.
38.224 -> I pressed enter and it is ready.
41.606 -> So now it is completed here.
43.124 -> Purpose of this video is to understand head of html.
46.136 -> So here we have understood the basic structure of html.
49.341 -> Now 1 by 1 we will go down.
50.859 -> Firstly we will understand what things are been written in head.
53.775 -> After that we'll understand what things are been written in body.
59.293 -> As you all can see here,
61.036 -> meta charset="UTF-8"
63.935 -> So what is this ? This is character set.
66.08 -> Now, what is the work of meta tag ?
68.241 -> The work of meta tag is mainly used in SEO.
73.228 -> And SEO means Search engine optimization.
75.838 -> And what is Search engine optimization ?
77.581 -> It is the way to increase your web traffic.
80.673 -> Basically what you do is, you help google,
84.359 -> or Bing,
85.636 -> and all this other search engine.
87.33 -> And you let them know that how you
90.583 -> help them, so that they show your website.
93.772 -> And how will help them, that I'll show you.
95.772 -> As you can see here, this is title.
97.788 -> What is SEO / Search engine optimization ?
101.908 -> Here I have opened this, and if I do view page source.
104.663 -> See here they have kept meta tags.
106.294 -> They have kepty different types of meta tags here.
108.471 -> And all these meta tags are
110.873 -> togetherly helping this to do ranking on site.
115.411 -> But that doesn't mean your site will rank just my putting meta tags.
118.824 -> If your site is not good enough than it will not rank.
121.9 -> But, by using all these tags
124.864 -> search engines like Google can nicely display your page.
129.803 -> As you can see this description here.
131.642 -> This description you can write as a meta description tag.
135.682 -> Along with this, what else you can do ?
137.698 -> Along with that the title and other things which you can see here
141.336 -> or how you link has been pasted
144.252 -> on any platform like, twitter or facebook.
148.662 -> Or on instagram, or other social platforms.
150.839 -> How the preview of your link looks,
153.53 -> this all things can be decided with meta tags.
155.98 -> On this point we will not see meta tag too closely.
158.542 -> But yes, here it is generated by vs code for us.
161.955 -> This meta tags I'll show you here.
165.641 -> Now see, charset="UTF-8" means
169.44 -> The character set which will be used will be UTF-8
171.713 -> As you can see, This attribute declares the pages's character encoding.
175.48 -> And also it is written, Authors are encouraged to use UTF-8
178.877 -> So here we will just see that,
181.15 -> our encoding is UTF-8
183.6 -> and we will not go further than that.
185.6 -> After this, there is this another meta tag, and what is it ?
188.58 -> Here it shows us initial-scale=1.0
192.234 -> And the width is set as equal to device width.
194.925 -> So this is to encourage the responsive design.
198.081 -> So that in laptop or in phone or in different sizes of screen
202.057 -> your page looks good.
204.523 -> After this the tag is X-UA-Compatible tag
208.739 -> So what basically it does ? It is for ie.
211.831 -> And here when we write ie=edge , it means
215.598 -> the content should be displayed in highest compatiblity mode.
220.634 -> Again, this is for them who uses ie.
223.276 -> At this point, I want to tell you that
225 -> the internet explorer
226.582 -> has created many problems for web developers in the past.
230.943 -> And now also there are very less percentage
234.26 -> of people using internet explorer. Who are old people.
238.059 -> People who does not update their computers, like aged people
241.826 -> so this ie=edge will be useful for them.
247.472 -> As they are still using internet explorer.
250 -> So this is for them, we will not do deep dive in this.
254.875 -> But in which we have to deep dive in
257.26 -> from that I'll tell you some 2-3 tags.
259.356 -> This topic of meta tags will be a complete different topic,
262.609 -> this topic will become a very big topic.
264.159 -> Thats why I'll not talk much about it.
267.107 -> Now as soon as we write meta here,
268.77 -> it shows us suggestions like compat, edge, redirect.
273.051 -> So here i'll write, meta
275.196 -> and after that I'll write name="description"
278.674 -> And the description of the site I'll write in content=
283.003 -> I'll write, content="This is description"
291.026 -> I'll save this.
292.175 -> Along with this we can also add keywords.
295.219 -> If you want to add keywords, you can add it like this.
300.64 -> Here I want to let you know that, SEO is a different topic.
305.306 -> And here it is html, so I'll write html.
309.009 -> I'll write html tutorials.
310.334 -> Suppose I am making a website, in which I want to publish html tutorial.
314.052 -> And I want that when people search this
318.975 -> at that time my page should be shown,
320.108 -> so i can add keywords here.
322.22 -> Along with this, the last tag which I'll show you is,
325.65 -> robots
326.927 -> and here it decides that the search engines
331.095 -> index or does not index you content.
334.284 -> If you do NOINDEX and NOFOLLOW
337.376 -> So it will not index your page,
339.151 -> nor it will follow the links inside your page.
342.372 -> So this you'll write, when you want that
344.26 -> your website does not comes in the search engine.
346.87 -> But mainly we write INDEX and FOLLOW.
350.798 -> So when you'll write INDEX and FOLLOW here,
353.071 -> your website will be scrolled.
355.505 -> So here this is the use of meta tags
357.601 -> We'll not deep dive in this.
360.837 -> Now I'll come to how we can add css externally.
365.809 -> So if I write LINK here,
369.174 -> then see Emmet has given me a suggestion of :css
373.599 -> So I'll write link rel="stylesheet"
375.952 -> and href= , I'll write the name of my stylesheet.
379.462 -> Like here I want to include harry.css
381.783 -> So like this I can include harry.css
383.895 -> So this is the way to include css.
387.164 -> So I'll write here, This is how you include
389.71 -> external css.
392.256 -> And I'll save this.
393.533 -> So you guys don't think much about this, like what is this, etc.
396.801 -> Just understand that this is a template.
399.058 -> And here is the name of file.
401.154 -> For now you just need to understand this and nothing much.
404.149 -> You should have understanding that,
406.823 -> we can include external css.
409.257 -> In the same way as we included the external css,
412.333 -> we can also include external javascript.
416.365 -> This is how you include external JavaScript.
422.541 -> So I'll comment out this,
424.782 -> and I'll write here script.
426.782 -> And script:src
428.605 -> script:src means
430.139 -> script source is equal to harry.js
433.28 -> And what I did here is,
435 -> I included my harry.js script.
437.803 -> So like this our head tag works.
440.574 -> I hope that, how head tag works and what things are included in it
444.26 -> and what is the meaning of all this thing is understood.
446.919 -> Now we have understood everything from top to bottom.
449.545 -> And in the coming video, we'll focus on body.
452.204 -> Tags which are included in body
454.204 -> which we use to write contents, that we'll see.
457.457 -> We'll see what are heading and paragraphs,
459.345 -> how to do bold, italic and underline.
461.264 -> There are many aspects of html, which I'll tell you.
463.874 -> This all things I'll include in this video series only, soon.
468.797 -> We will quickly finish html,
471.215 -> and we'll complete the further aspects.
473.36 -> As in web development, designing is an important aspect.
478.155 -> And html is the easiest part.
480.958 -> There is nothing more easy than this.
482.492 -> So in the coming time we'll go little advance.
485.504 -> And we'll see how to do things.
487.392 -> If you have not accessed the playlist of web development
490.548 -> then please access it.
491.793 -> Go to channel in playlist action, I'll keep the link in description.
495.287 -> But in case you can't find, visit to channel and go to playlist section.
499.535 -> And if you like this video and it's useful for you, please like it.
505.261 -> Thats it for this video.
507.116 -> Thank you so much for watching this video.
509.309 -> And I'll see you next time.
Source: https://www.youtube.com/watch?v=EZCc_4abdcE