HTML Tutorial: Img and Anchor tags | Web Development Tutorials #6
HTML Tutorial: Img and Anchor tags | Web Development Tutorials #6
► 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 -> We have learned a lot in this course of our web development.
3.571 -> Now what are we going to do her
5.083 -> Let's move on to our next topic
7.003 -> and that is going to be our links and images
9.918 -> How do we deal with links and images?
12.45 -> I would like to tell one thing here
13.642 -> that as we are moving forward,
15.367 -> I am increasing my speed a little bit.
17.788 -> Because HTML is a very straight forward thing
20.345 -> But the concepts that will remain the CSS, etc.,
22.807 -> That I will explain it very well to you people.
25.138 -> So, first of all quickly put the boiler plate
27.758 -> and boiler plate Many people have asked in the comments
29.513 -> that what are these boiler plates talking about
30.81 -> what is this thing
31.978 -> So, the boiler plate is called the template
33.983 -> this template is called the boiler plate.
36.262 -> So, the meaning of boiler plate code is template, ok
39.402 -> I will write here, Links and images
42.57 -> and at the same time inside the body, we will do main coding
45.878 -> So, inside the body we will put links and images
48.458 -> but before that I would like
50.626 -> that if you have not accessed this playlist
52.399 -> then definitely access it.
53.365 -> Save it by bookmarking here
55.276 -> And now let's move on, okay
56.881 -> so, i start the live server by clicking
59.113 -> And see here the links and images have come by writing
61.739 -> Now what is here
63.108 -> let's say I want to make a website
66.254 -> in which I want to embed all my important links.
70.591 -> So, i can use anchor tag
72.718 -> Then i have to give href, as i write a
75.994 -> And I can write any link inside href
80.092 -> As i wrote, https://google.com
83.875 -> and write here, Go to google
87.832 -> and as soon as is clicked on Go to google
90.219 -> By clicking on Go to google, we will reach Google
94.167 -> As you guys can see here
96.347 -> I will back up so I am back on my website
98.568 -> Along with that I can make more links like this.
101.685 -> Here I can do facebook
103.793 -> and here I can twitter
106.658 -> and here I can do linkedIn, okay
109.911 -> And here also I change the text
112.165 -> I have linkedin here,
113.695 -> I have twitter here
114.941 -> and in the same way I have done facebook here, ok
118.704 -> So, after doing this
121.009 -> I will reload it here
122.642 -> and see this click then click on Go to google
124.591 -> and Google open
125.957 -> If I do it on facebook then Facebook will open
128.415 -> Simultaneously, if I do it on twitter, then Twitter will open.
131.072 -> I do it on linkedin then Linkedin will open, ok
133.711 -> So here we have created a website which does what
138.048 -> sends us in different links, in our important links.
141.274 -> But there is a problem, I want it to remain open
145.071 -> And I would like to open it in a new tab by right clicking it.
147.908 -> And I would not like to right click
149.223 -> I would like as soon as it is clicked
151.646 -> It opened in a new tab, if there is any website
154.178 -> So, for that we have an attribute
156.41 -> And here let's talk a little bit about tags and attributes
159.656 -> What are tags and attributes
161.33 -> A tag like body this is a tag,
164.778 -> a is a tag
166.228 -> and which is href is its attribute, ok
168.592 -> So, there is a difference between a tag and an attribute
170.796 -> then href is an attribute
172.466 -> It can have other attributes as well
174.223 -> e.g., meta is a tag,
175.624 -> and name is an attribute, content is an attribute
178.234 -> same way meta is a tag
179.992 -> and this is the attribute, http-equiv
183.503 -> And after that the content which is there is another attribute
186.912 -> Along with that what we will do here, add a new attribute
190.971 -> And let me tell you a trick of VS Code
193.792 -> Pressing the Alt key on your keyboard
195.521 -> and pressing Option if you have a Mac
197.454 -> Most people are on Windows, so you guys press Alt
200.312 -> And wherever you click, a new cursor will come in this way
202.71 -> And now what you people type will be typed in all those places
206.341 -> So, you add something like this here
207.986 -> target="_blank"
212.172 -> type it what I have typed
214.967 -> And what happens by doing this
216.782 -> target is an attribute
218.372 -> What it does is
219.434 -> It opens your website in a new tab.
221.986 -> That is, if you now click on it on google
225.514 -> See this my website is opening in new tab
228.404 -> Facebook, is opening in a new tab,
230.74 -> LinkedIn, will open in a new tab,
233.069 -> Twitter also
234.478 -> So, this is a way to open new tab
237.547 -> So, these links were our external links
240.335 -> they used to link our external sites
242.715 -> We can also put our internal local links here
247.584 -> you have to use br here
249.105 -> if you want a break to come
251.004 -> So, you guys can put br in this way
253.943 -> And as soon as you put the br, it came like this, okay
257.219 -> And by applying br here
259.892 -> I have made it a bit beautify here.
262.037 -> Now what can I do here
263.804 -> I can also put an internal link
266.635 -> Like I have here tut4, tut5, okay, and harry.html
275.838 -> So, what will I do here in the same way
277.624 -> First of all, I will make an anchor tag
279.696 -> And after that I will write here /
282.956 -> look here I am also getting suggestion
284.667 -> harry.js, tut4.html
287.109 -> So, i will do tut4.html
288.855 -> and will write here tut4
291.234 -> And what will happen by doing this
292.358 -> I will be linked in the file that I have Tutorial 4
295.951 -> And I copy this thing over here, target="_blank"
299.562 -> Because I would like to open my tab in new page only
303.622 -> So I will click on tut4
304.915 -> then see what the document was
306.417 -> inside tut 4 we probably didn't write anything
308.855 -> inside tut 4, yes, we didn't write anything
311.619 -> Much was written inside tut5
312.911 -> So, I link to tut5 also
315 -> And I have made my shortcut
319.158 -> ctrl + d
320.162 -> I have made my shortcut ctrl + d
322.526 -> For what, to copy the line
324.83 -> to copy line down
325.522 -> I told you in the previous of previous video i guess
328.51 -> So, if you guys have not accessed this playlist
330.583 -> and haven't seen it
331.181 -> then watch these videos from the beginning.
333.29 -> let's go well
334.124 -> What are we going to do here after doing this?
337.666 -> I'll show you guys over here
339.385 -> By clicking right click i do the close tabs to the right
341.579 -> Right tabs all closed
342.914 -> Click on tut5 then see this tut5 is opened
345.309 -> And here I put target="_blank"
348.126 -> Thats's why it open in new tab, ok
350.428 -> And see this is opening in new tab
352.363 -> So, what will happen in this way
353.799 -> that i will be able to open my internal links, ok
358.994 -> Now let's talk about images here
360.916 -> We also talked about images, let's talk about images.
363.499 -> I summaries what we learned in this video
366.167 -> We first learned the difference between tags and attributes
368.626 -> We said this is the tag,
370.465 -> like body is a tag,
371.557 -> the first thing that is written is the tag
373.1 -> a is a tag, meta is a tag,
374.687 -> html is a tag, head is a tag
376.051 -> and any words after that if it is written like this charset="UTF-8"
380.272 -> or href=
381.644 -> This is called attributes, ok
383.589 -> So here as soon as you write a tag and write its attribute
388.442 -> then the attribute that is there will modify the tag
391.153 -> That is, will be given to the tag a new quality
393.778 -> In this case target="_blank" gives a property to the anchor tag.
399.088 -> So that clicking on it started opening in new page
402.09 -> It was not opening in new page before
403.549 -> Now as soon as I gave "_blank" to it
405.799 -> then it started opening in a new page, ok
408.368 -> So, we have seen this thing
409.525 -> Now we will see the images here
411.178 -> So, it is very simple to insert the image
413.804 -> You have to write the img
414.835 -> and as soon as you write the img
416.193 -> as soon as you write the img
417.599 -> see what has come here
419.792 -> If i did s, then i get src="" alt="" srcset=""
422.844 -> And here I will do it now
424.984 -> Just write the img
426.483 -> and in img, scr=
429.081 -> You have to provide this source of the image
430.862 -> Where is your image
432.187 -> Either it can be on the internet, or it can be in your local
436.5 -> If it is in your local
438.583 -> then what will you have to do
439.69 -> You have to put it here in this folder
441.777 -> Or wherever you place it, you have to give the full path
443.787 -> The image is also inside the folder
445.781 -> you will have to give its full path.
447.444 -> And what is the meaning of alt
448.707 -> that if this image is not loaded then what text to show
451.61 -> So, i writer, Error loading image, ok
454.501 -> And in most of the cases we do not write Error loading image
458.872 -> We write some such information which is useful.
461.861 -> As if we have some text written inside the image.
465.503 -> So, we will write that text like this inside alt
467.56 -> So that if a person is using slow internet connection
469.79 -> and his image does not get loaded
471.394 -> then he will see the text with this alt
473.023 -> So, if I write here harry.jpg, which is not present here
476.991 -> by the way I will tell you already
478.634 -> So, you guys see
479.831 -> that is coming here by writing Error loading image, ok
481.554 -> Why is it coming here Error loading image
482.905 -> because harry.jpg is not an image
485.757 -> So, i write here
488.239 -> Image is not present hence alt text is shown
494.394 -> That is, the image that was there
496.854 -> was not present inside my folder.
499.203 -> That's why the text with this alt is shown, right.
503.919 -> Now what am I going to do here
505.432 -> that I will take a new image tag
507.915 -> and after writing the img
510.447 -> what am I going to give here in a src?
512.569 -> I'll give a remote image, ok
514.807 -> And you can type anything inside alt
516.393 -> whatever you type
517.361 -> will just show up when your image is not loading
520.094 -> Now as if I am using slow internet
521.902 -> and due to some reason, I am not able to see the image
524.8 -> then I will be able to see alt,
526.18 -> i will be able to see remote image, ok
528.489 -> I want to introduce you guys from a website
530.515 -> And its name, if I'm not wrong
532.885 -> something like, source splash
535.746 -> very nice website
536.699 -> yes, has a look, source.unsplash.com
539.471 -> And let me tell you about what this thing is
541.995 -> Here these people have kept many images
545.191 -> You guys can get a demo image look like this here
548.349 -> And as soon as you guys open it again
551.539 -> So basically, this is a collection of random images
553.903 -> So, if I copy it by right clicking here
556.591 -> and put it here in my src
558.818 -> paste it, and save it
561.302 -> So, you guys see what will happen here
563.197 -> See this image has come here
564.745 -> why has the image come here
566.111 -> because I have picked up this image from here
569.381 -> Now if I reload this page, see the second image has come,
572.162 -> I reload again, another image comes,
574.407 -> I reload again then another image,
575.87 -> reloads another image, look at this
577.932 -> As I will reload, the image is changing
581.122 -> because it is showing random images look at this
583.623 -> This look is showing different images
584.885 -> may also show the same images
585.6 -> but in most cases showing random images
588.109 -> So, I'll close them here for now
590.65 -> And here's one more thing I'll show you
593.697 -> that you guys need nature, etc., like water.
597.228 -> Look at this, Random from a search term
599.007 -> You guys can search
600.427 -> See this, as soon as I wrote water
603.109 -> then here they have shown an image related to water.
606.784 -> And I'm looking over here it's showing the same image
609.244 -> If I don't water, it as if I write something else
613.183 -> I write nature, so I see if it looks anything else to me
617.402 -> I wrote nature so yes look, it is showing the image of nature.
619.691 -> So, in this way I can do the search term also
621.427 -> If I write sport here instead of water, then
627.109 -> look, I wrote sport then it has come
630.671 -> I rewrite sport, the same has come
632.745 -> So, look here there are many search terms you can use
636.116 -> And after doing that search term you will see an image, ok
639.359 -> And here you can also specify the size
642.158 -> See this
643.745 ->
644.498 -> If I do it here 700x900
648.027 -> So, look at this the image of 700x900 has arrived
650.11 -> So here I can also specify the size
652.387 -> And here I would like to tell you one thing
654.871 -> and that thing is
656.463 -> this will not happen with every website
658.618 -> You do not think
659.898 -> that in any website you will write in this way
661.649 -> size and this, it is not the property of HTML
664.038 -> This is a service, which is provided by source.unsplash
667.717 -> This is the URL it contains an image
670.073 -> that image is being displayed
671.16 -> Now it is the source.unsplash ones
673.249 -> what have they done here?
674.728 -> Keeping a lot of images on their server, or whatever it is
677.641 -> And according to what it is displaying you the image
680.309 -> So do not think that you will put any URL
683.011 -> and you will give some size by slashing here
685.863 -> and if you put nature, water
687.037 -> then the nature, water image on that website.
689.257 -> No, it is nothing like that, don't be confused by anything
691.824 -> Whatever we give here the source is
694.319 -> The image which is present in that source
695.571 -> gets displayed by coming here.
697.034 -> We just have to remember this
698.062 -> we don't have to think too much about it
700.483 -> So, look here, I also reduce its height a little
703.734 -> Here I make its height 400, and width 200.
708.772 -> And now look at this look here
710 -> here i kept a small image
712.967 -> And it looks great, okay
714.298 -> And let me reduce the height further
716.665 -> let's say if I make it 100, make it 20
720.137 -> So, look at this
722.322 -> Oops, I have to do it 200x10 over here
725.743 -> Its height is first, width is later
727.863 -> So, see here the width is bigger
730.586 -> Width is first, height is later, sorry
732.375 -> So, what is here now I have made my image very small
735.08 -> But you understand what I am talking about,
737.571 -> what i want to learn you guys
739.545 -> So here if you want to put an image then you can put it like this
742.749 -> And why is this Error loading image
744.609 -> it is coming because there is no harry.jpg here
748.366 -> If there was harry.jpg then the error would not come.
751.949 -> harry.jpg will be shown
753.36 -> So, I comment it so that this error does not come
756.134 -> And here we only see the image
758.274 -> So, I will say one thing here
760.621 -> I will say myself that this website is looking very ugly,
762.698 -> this website is not good
764.079 -> Doesn't look good at all
765.838 -> but we are teaching here only HTML
768.945 -> So, you guys don't think so at all
770.224 -> that our websites
772.774 -> are going to look like this in the coming time also
775.228 -> Our website is going to look very good in the coming time
777.737 -> We will use CSS, we will use JavaScript
780.667 -> A lot of things are going to come
781.937 -> That's why I say that you guys access this playlist
783.249 -> as soon as possible.
785.158 -> Bookmark for yourself, and save it
788.156 -> And at the same time if you people like this video
790.889 -> then you can also like this video by definitely
793.063 -> I will tell one thing before ending this video
795.272 -> and that is, you can set the width and height of the image
797.291 -> from here as well.
799.621 -> Like i made width = 233
802.588 -> and i made height = 34
805.302 -> and save it
806.492 -> So, look here
807.108 -> I have set the width and height from here as well.
809.004 -> But I will say one thing here
810.461 -> I have set width and height
812.633 -> but setting width and height like this is not recommended.
816.789 -> Why not
817.412 -> As we would like to set the width and height through CSS
821.403 -> We will not set width and height like this
824.518 -> it's not a good practice
826.561 -> Will do the work definitely
827.405 -> But always remember
829.262 -> that CSS has to do it for the design,
831.18 -> HTML only has to do it to give the skeleton
833.444 -> So, we will use it only for what the HTML has made,
836.131 -> for whom we will use it.
837.74 -> So here we are going to use HTML only for the design
840.332 -> And the attribute of this one, its width-height
841.987 -> I will not use in HTML
844.384 -> I hope you guys have understood
846.293 -> I will tell you in CSS
847.647 -> that how to set the width and height of any image.
850.187 -> So, stay tuned you guys in this course
851.927 -> That's all for now in this video
853.971 -> Absolutely don't forget to like this video
855.42 -> and don't forget to access this playlist too
857.518 -> Thankyou so much guys for watching this video
859.158 -> And i will see you next time.
Source: https://www.youtube.com/watch?v=z6H22xGAZEA