Image, Lists, and Tables in HTML | Sigma Web Development Course - Tutorial #5

In this video, we will see how images are made, lists are made in HTML and tables are made. So like the video. I know very few people like videos on YouTube.

But if you do, thanks to your support, I get the motivation to bring such free courses. So let's go to the computer screen starting the 5th video of the Sigma Web Development course. Let's roll the intro Intro So guys I have come to my computer screen As you can see I want to tell you first Bookmark getup.

com In fact bookmark this repository So that you get all the code Second thing you click on the playlist Click here and bookmark it click on star and save it now the first thing i will tell you is about the image what is image in html so what we will do is we will quickly make a folder with the name video5 new folder and here video5 you already know this click on shift right and open with code this time i will make it fast because i have already told you this but if you want to see this welcome page again and again then uncheck the show welcome page on startup and you will not see this again and again but what we have to do we will make index. html we will zoom in by mouse wheel we will toggle the screencast port so that you will know which button I am pressing and when and why now I will put an exclamation mark and bring the emmet abbreviation and here I will do view word will put an exclamation mark and bring the M8 abbreviation here And here I will do view word wrap You have to work very hard, you can see here That your word wrap is closed So what will happen here is that the horizontal scroll bar will not come Now what I will do here I will write images First of all I will write images here And what I will do here is that I will bring an image Now you can bring the image from the internet I will write here, let's say we want to bring the image of the train Okay, images of the train Because we have driven a lot of trains in this course So we will bring the images of the train, why will we bring any other image I will save images And here in the Sigma web development course, in the folder of video number 5 This is a CMS file In fact, I do one thing, I cancel it I take its snip Because it is a CMS extension I go to PNG and take it So I pressed Windows, file and take a snip of this file because it is a CMS extension I will take it on png I clicked on windows, shift and s this is a shortcut for snipping tool if you don't know this shortcut now you will know it through this course if you click on windows, shift and s your snipping tool will open who didn't know this tell me honestly in the comment section now what we will do I I have already done windows shift s and then I got into the conversation so here you click and save it here is the option of save floppy disk click on it and go to downloads go to sigma web development codes save it in video 5 image, ok saved in the name of image now there is an img tag in html as soon as you put img it, src and alt both are required attributes infact if you don't write alt, it's ok, but it's recommended I'll tell you what happens with these two attributes first of all, if you write in src image. png, you can see this image is here, so image.

png and I'll put train image in alt, ok now if I show you this in browser by previewing, so see this how it looks, this is our page and this is the train image where is the alt? i will tell you see the alt is not visible suppose for some reason server is not able to show you the image suppose i wrote image2 now image2. png file here So what will be the error?

What will happen? I'll show you what will happen So here the alt will be displayed And this kind of error image will be displayed Which will tell that the image you have put Put it properly, you have done something wrong The URL of the server you have given there is not this image Okay, these things are shown like this And there is an alt there So the user knows what understand the purpose of this image and if I come back here, you can see the alt text if I don't put the alt text, then what will happen if I don't put the alt text, then the alt text will not come so you don't want the user to see this image when you have an error you want the user to see this image the user should see this image I hope you understood this so the image is very straight forward it has two more attributes which are very important one is width which is width in pixels if I do 23 width is equal to so you can see in fact I will correct the image first I wrote image2 by mistake image. png is this so here you can see I have taken 23 pixels which is very small so I will make it 230 pixels you don't need to write px in this When we write width in css, we will see that we need to write px Here we just write width is equal to number in double quotes As you can see So if I bring it here, you see That we have seen this small image If I give its height too Means I give its height too I say if you keep its height 230 Then its aspect ratio will also get worse So it will get a little stretched Because what it did saying that if you keep the height of it to 230 then its aspect ratio will also go down so it will stretch a little because it has made its width and height to 230 as you can see now if you want the height to be 230 and the width to be automatically adjusted then you just use the height attribute now remove the width here so the height will be 230 pixels and the more it can go in the width, the more it will go it will be automatically adjusted, now see it is automatically adjusted in width and in height it took this now what happens is, width and height can be adjusted through CSS and we will see in the CSS section that why we should always set this width and height we should always set one thing from width and height such that when our page is loading then our image inside the page should not come suddenly in the page I will tell you in the coming videos but now you understand that these attributes of width and height I have heard many people saying that they are deprecated and should not be used.

But I say that they should be used for SEO purpose. Why should they be used? I will tell you in the coming videos where I will tell you about Core Web Vitals and SEO.

For now, you understand that width gives width to the image and height gives height to the image. If one of the two is applied then the other one automatically gets set. And these values are in pixels and you don't have to write px or pixel, you just have to write this number and that's it.

This is an attribute, height and an src attribute, an alt attribute, you can also use style attribute in this. In fact, you can use style attribute with almost all tags. So this was about the image, now we will talk about tables in html table tag is very useful in html let me tell you what happens with table tag you can see table from table tag now I will copy this table from here and when I will copy this table from here then you will see my page will look like this so this html table where is my preview page here it is here see name harry age 100 now if I put a lot of things here so this html table where is my preview page here is the name harry age 100 now if i put more things like this name and let us say designation, let us say harry's designation programmer and let us say i want to put more things i will use alt shift bottom arrow alt shift bottom arrow and let us say i want to put all things, I will use Alt Shift bottom arrow key and here let us say I want to write favorite language and I want to write here, let's say javascript and now you see here that this table will be made like this name, destination, favorite language so what is this, how does it work, I will tell you so here you see that we have used table tag table tag has tr tag which is table row.

You'll see what will come in this row. Now if you want to use this as a table heading, You say that this is my table row, That means this is the row, In which name, destination and your favorite language is written. What will come in this row and what will that be?

Here you can see that it will be a heading. So that's why I will use th, th means table heading and we will write that only once so in the first tr we will write th once we have put the heading above then we will put the data so we will put td in table row which stands for table data and here in all the tr you will put rows like this what will happen, your rows will keep getting added so here let's say i write sam and this is also a programmer and let's say this is Java, its favorite language, so these rows will keep on adding under the table, you can see here that these rows are adding, adding, adding, we will see from CSS how it can be given a border, it can be styled, but this default looks like this and yes I know it is ugly but you guys just understand that table works like this now row span and col span are attributes, now you see here that row span means how many rows will span your td for example, let us say I write here, I want sam and programmer, earlier they were taking one cell, sam was taking one cell and programmer was taking one cell, I want to write sam in two cells I don't want to write programmer, I just want to write sam I want to write here that call span is equal to 2 call span is equal to 2 means that sam will take place of two columns what does it mean? sam will take place of two columns means sam will be seen like this I will show you like this so it took place of this whole column so call span means how many columns will be surrounded by default only one cell will be surrounded but sometimes one cell will be surrounded by two columns to demonstrate this I will explain to you through excel in excel you can understand that this is a table of our html sometimes I would like it to span two columns, one data so here we use merge cell and here let's say I write sam in html this thing is done by using call span sometimes we also want to merge it vertically that is, let's say I want to merge these two cells there we use row span and with whom we will use row span we will use row span with td obviously so with td we were using call span and row span so if we use row span then will span like this 2 rows, okay so I hope you understood this and when we will make tables and projects with HTML then you will understand better but I will show you the row span here so if I write here row span is equal to 2 and after this I will write one more tr here so you will see that my table is looking like this now to explain it better I will put a CSS style here what I will do here I will add a style sheet and I will name this style sheet style.

css so in style. css and you don't need to understand CSS I will tell you already I will write border 2px solid black in td and I will tell you all this how it works but for now you understand that I have put this to explain you so I said that I have put this to explain to you so I said that this row will have Harry, programmer and javascript then I said that the row span of this sam will be how much, where did I give 2 rows span one I said that my java will have 2 rows span so how many rows will java take, obviously it will take 2 so here java will take 2 rows so obviously 2 so here java will take 2 rows so here you can see java has taken 2 rows so when java has taken 2 rows it means i don't have to write java in next one because its row has already been filled so i won't write java in next one so you can see here i won't write java i have made its call span 2 and its row span 2 so what happened by doing this? you can see it was harry, programmer and javascript then i said that the sam its call span is 2 means it will cover 2 columns this sam will also cover 2 columns and java will cover 2 rows so you can see here exactly the same thing happened it covered 2 rows and 2 columns so in this way row span and call span can be used in html, in html table we can also add captions and to add captions we can use caption tag like this tag I will show you If we use the caption Student details or employee details Your page will look like this You can see here That the employee details caption will be added Now you can change the font size By default, it looks like this The caption comes up Employee details will look like this Along with that You can also give header and footer But for now, by default, it looks like this, the caption comes up, you will see the employee details like this.

Along with that, you can also give header and footer. You can give T-head and T-foot here. Like if I put some content in T-head and T-foot, something like this, if I put here that header and here I put footer, then you will get to see T-head and T-foot like this.

You see, here is the header and here is the footer. Now I will tell you about another tag, which is called BR tag, which adds line break. So after the image, a line break will come here, you can see everything header and footer now i will tell you about another tag which is br tag which adds line break after image, there will be a line break you can see everything is down this is the header and i will add footer i will not add it here i will add it after my table at the end, this is my table footer now i can change it with css now here i can group the header and footer content with t head and T foot So what will be the header of my table, I can group it with T head Along with that, the content inside the table will come inside the T body So what will come inside the T body, my table content will come like this And after this, if I write T foot here And I want to at the end I want to put some data so I will put one more tr as you can see I will do it by right clicking and documenting it so it will be a little better format suppose I want to put this kind of tr and I want to group it in t foot so this is just the way to group that is I have put it in t foot some trs I have put in t body which is my main body and I have put it in T head which is my table head and obviously nothing will change, I have just grouped it here you can see, I will write footer so that you can know that it is a footer, I will write foot here and you can see that the last row is foot now what is the benefit of doing this, we have just grouped it so that we can target it ahead of CSS so you will use this very less but you can do grouping like this Your whole table, head content will come here, foot content will come here And body content comes in between head and foot but you can write it here But ideally head, body and then foot comes I hope you understood this So that's all about HTML tables, You don't need to know more than this And now we will talk about list List is very important in HTML Because we will use list a lot There are three types of list in HTML One is ordered list, one is unordered list and one is definition list The most used is unordered and ordered list First of all, let's see the unordered list Whenever we want to have unordered data like if i write ul here so here i will write ul as unordered list in this i can write li and i can write harry and then i can write rohan and then i can write shubham so here when i will write harry rohan shubham so ul will come like this This is an unordered list, see Harry Rohan Shubham is here There is no order of 1,2,3,4 But if I want it to be ordered, then I can write this with the help of OL So if I make its opening closing tag OL and keep the rest the same So this will be an ordered list, so here 1,2,3 will come You can do this 1, 2, 3 in ABC You can do it in capital ABC, you can do it in roman numbers You can do it with the help of CSS There are many other ways You can see here in this image That if you align it in UL, it will look like this You can see in this image If you align it in OL, it will be 1, 2, 3 This is an example of ordered list And this is an example of definition list Definition list is very less used, it has a preview like this here I have put a heading and then I have written dl dl means definition list, then dt and then dd so here the definition term is there and then the definition of the definition is there so it comes like this and you can also change it with css, it is very less used but you should know about it for interviews interviewer asks what is definition list so this kind of code is previewed like this I am not showing you by writing it for the sake of time but try it out and here first of all we will see unordered list I have told you about unordered list it is very simple and straight forward you can customize its bullet points by using type attribute for example, if i type type is equal to square i will say type is equal to and i will write square so i wrote type is equal to square in ul so it appears like square similarly i can circle type in ul or disc disc is by default means circle I can square or circle it along with that you can add any other list item now let's see ordered list in detail in ordered list, if you type li, it will come like this 1,2,3 but you can use type is equal to i when you use type is equal to i then you will get uppercase roman numbers type is equal to small i then you will get lowercase roman numbers type is equal to 1 is default you don't need to do this if you do small a then you will get alphabetical and if you do capital a then you will get uppercase alphabetical so let's do this once so I will do its type is equal to capital a you see vs code is giving us examples and suggestions And it becomes easy for us to see what are its possible values So VS code is very useful and many people are using old editors Which were used a long time ago, if you know their correct plugins You have been set a lot in it, then you can do it, VS code is modern Switch to VS code, everyone uses VS code, you can see all the big developers You will see using VS code, if you switch to VS Code Everyone uses VS Code, all the big developers you see, you will see them using VS Code If you want to do coding on mobile, I recommend replit, an app called replit comes And I would like to give a shoutout to replit.

com here Because I use it a lot and I think it's pretty good So you can use replit. com on your mobile too If your computer power is not that much, you can use it You get templates in it, we will cover it more in the coming videos But now I will stick on VS code I hope you understood here ordered list, unordered list, definition list now see, we have completed 5 videos in the sigma web development series I want you to go to the first video and put your comment that how do you like this course I got 5 stars from the 5 stars that what is the initial review of this course you have seen 5 videos, according to that I know that if your order is late for a minute swiggy is a matter of delivery rider that this public does not comment much on YouTube these days I will give the source code in the description, you can access it, the playlist is here, you can access it, like the video, share it with your friends, and subscribe to the channel. I will see you in you guys keep commenting on it.

I feel good. It's a two-way interaction. I will give the source code in the description.

Access it. Like the video. Write Sigma Batch OP in the comment.

And give your village land to me. Thank you so much guys for watching this video. And I will see you next time.

Thanks for watching!