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

Summary

In this video, we explore creating images, lists, and tables in HTML as part of the Sigma Web Development course. You'll learn how to embed images, handle image attributes, and use the snipping tool. The tutorial also covers HTML tables, including table rows, columns, and spanning cells, as well as styling tables with CSS. Additionally, the video demonstrates creating ordered, unordered, and definition lists. The presenter encourages viewers to bookmark the repository for code access and engage with the content by liking, sharing, and subscribing. Follow along for a hands-on HTML learning experience.

Takeaways

• 🖥️ The video is part of the Sigma Web Development course, teaching HTML elements for creating images, lists, and tables.
• 🔗 The instructor encourages viewers to bookmark the getup.com repository for access to all the code used in the course.
• 📚 Viewers are advised to bookmark the playlist and star it for easy access to the course content.
• 🖼️ HTML images are created using the 'img' tag with 'src' and 'alt' attributes, where 'alt' is recommended for better accessibility and SEO.
• 📏 The 'width' and 'height' attributes of the 'img' tag are important for setting the dimensions of an image in pixels and can be adjusted for SEO purposes.
• 📋 HTML tables are made using 'table', 'tr' (table row), 'th' (table heading), and 'td' (table data) tags, with 'rowspan' and 'colspan' for merging cells.
• 🎨 CSS can be used to style HTML tables, including adding borders and adjusting cell dimensions.
• 📝 The 'caption' tag is used to add a title or description to an HTML table, improving readability and context.
• 🔄 The 'br' tag is used to insert line breaks in HTML, useful for organizing content vertically.
• 📝 There are three types of lists in HTML: unordered (using 'ul' and 'li'), ordered (using 'ol' and 'li'), and definition lists (using 'dl', 'dt', and 'dd').
• 🛠️ The 'type' attribute in lists can be customized to change the appearance of list items, such as using different bullet styles or numbering systems.

Q & A

What is the purpose of the video?

The purpose of the video is to teach viewers how to create images, lists, and tables in HTML as part of the Sigma Web Development course.

Why should viewers bookmark getup.com?

Viewers should bookmark getup.com to have easy access to all the code used in the course, which can be helpful for reference and practice.

What is the significance of the 'alt' attribute in an image tag?

The 'alt' attribute in an image tag is significant for accessibility and SEO. It provides alternative text for an image if the image cannot be displayed, helping users understand the purpose of the image.

How can the 'src' attribute in an image tag be used incorrectly?

The 'src' attribute can be used incorrectly if the specified image file does not exist or the file path is incorrect, which will result in an error image being displayed with the 'alt' text.

What are the two main attributes of an image tag that can be adjusted for SEO purposes?

The two main attributes of an image tag that can be adjusted for SEO purposes are 'width' and 'height', which help in optimizing the image display and loading on a webpage.

What is the basic structure of an HTML table?

The basic structure of an HTML table includes the 'table' tag, with rows defined by 'tr' (table row) tags, and cells defined by 'th' (table heading) or 'td' (table data) tags.

What do 'rowspan' and 'colspan' attributes do in an HTML table?

The 'rowspan' attribute allows a cell to span across multiple rows, while the 'colspan' attribute allows a cell to span across multiple columns in an HTML table.

What is the purpose of the 'caption' tag in an HTML table?

The 'caption' tag is used to provide a title or caption for an HTML table, which helps in describing the content of the table and can improve accessibility.

What are the three types of lists in HTML?

The three types of lists in HTML are ordered list ('ol'), unordered list ('ul'), and definition list ('dl').

How can the appearance of list items be customized in an unordered list?

The appearance of list items in an unordered list can be customized using the 'type' attribute with values such as 'disc', 'circle', or 'square' to change the bullet style.

What is the recommended text editor for web development according to the video?

The video recommends using Visual Studio Code (VS Code) for web development due to its modern features, extensive use among developers, and helpful suggestions and examples.

What is the suggested platform for coding on mobile devices?

The video suggests using Repl.it, a mobile app that provides coding templates and is recommended for those with limited computer power or for on-the-go coding.

Outlines

00:00

🖼️ HTML Image and Table Basics

This paragraph introduces the fundamentals of creating images and tables in HTML. The instructor starts by encouraging viewers to like and support their videos for motivational content creation. The video then delves into the technical aspects of HTML, explaining how to create a folder for the project, use the 'code' shortcut, and implement the 'img' tag with 'src' and 'alt' attributes. The importance of the 'alt' attribute for accessibility is highlighted, especially when images fail to load. The paragraph also touches on the attributes 'width' and 'height' for image sizing and how they can be adjusted for better page layout and SEO purposes.

05:01

📊 Understanding HTML Tables with Row and Column Span

The second paragraph focuses on the intricacies of HTML tables. It begins with a demonstration of copying and pasting a table into HTML and previewing it. The instructor explains the use of 'table', 'tr' (table row), 'th' (table heading), and 'td' (table data) tags to structure table data. The concept of 'rowspan' and 'colspan' attributes is introduced, illustrating how they allow cells to span multiple rows or columns. The paragraph also mentions the use of CSS for styling tables and the potential for adding captions, headers, and footers to enhance the presentation of table data.

10:01

📝 HTML Lists and Line Breaks

This paragraph discusses the use of lists in HTML, emphasizing their importance and variety. The instructor outlines the three types of lists: unordered, ordered, and definition lists. Unordered lists are shown using the 'ul' tag with 'li' for list items, which can be customized with different bullet styles using the 'type' attribute. Ordered lists are created with the 'ol' tag and can display numbers, letters, or roman numerals, also controlled by the 'type' attribute. Definition lists, though less common, are introduced with 'dl', 'dt', and 'dd' tags for term and definition pairs. Additionally, the 'br' tag for line breaks is mentioned as a way to organize content on a webpage.

15:03

✍️ Advanced List Customization and Course Feedback

The final paragraph wraps up the video with a deeper look at customizing lists, particularly ordered lists, and a call to action for viewer engagement. The instructor demonstrates how to change the numbering style of ordered lists using various 'type' attribute values, such as roman numerals or alphabetical orders. The benefits of using modern coding tools like VS Code and mobile apps like Replit are highlighted, encouraging viewers to adopt these for their development work. The paragraph concludes with a request for feedback on the web development course, asking viewers to comment, like, share, and subscribe for more content.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language for creating web pages and web applications. It is the foundational building block of the internet, defining the structure and layout of web content. In the video, HTML is used to demonstrate how to create images, tables, and lists, which are essential elements in web design.

💡Images

Images in HTML refer to the visual content embedded within a webpage. The script discusses how to use the 'img' tag with 'src' and 'alt' attributes to include and describe images, respectively. The 'src' attribute specifies the image source, while the 'alt' attribute provides alternative text if the image fails to load, enhancing accessibility.

💡Tables

Tables in HTML are used to organize and display data in a tabular format. The video explains the use of 'table', 'tr' (table row), 'th' (table heading), and 'td' (table data) tags to create a structured grid of rows and columns. The script also covers 'rowspan' and 'colspan' attributes, which allow cells to span multiple rows or columns.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML or XML. In the context of the video, CSS is mentioned as a way to style HTML elements, such as adding borders to table cells or adjusting the layout of web pages.

💡alt Attribute

The 'alt' attribute in HTML is used with the 'img' tag to specify alternative text that describes an image. This is crucial for web accessibility, as it helps screen readers convey the content of images to visually impaired users. The video script illustrates the importance of the 'alt' attribute and its use with examples.

💡src Attribute

The 'src' attribute is a key component of the 'img' tag in HTML, defining the path to the image file that is to be displayed on the webpage. The video script explains that this attribute is required for the image to be properly rendered in a browser.

💡Lists

Lists in HTML are used to present items in an ordered or unordered manner. The script introduces three types of lists: ordered ('ol'), unordered ('ul'), and definition lists ('dl'). These elements help in organizing content, making it easier to read and navigate.

💡Ordered List

An ordered list in HTML is created using the 'ol' tag and is used to present items in a sequence with numerical or alphabetical order. The video script demonstrates how to create an ordered list and customize it with different numbering styles using the 'type' attribute.

💡Unordered List

An unordered list in HTML is created with the 'ul' tag and displays items marked with bullet points. The video script explains how to create an unordered list and how to change the type of bullet points using the 'type' attribute, such as squares or circles.

💡Definition List

A definition list in HTML, created with the 'dl' tag, is used to define terms and their descriptions. It consists of 'dt' (definition term) and 'dd' (definition description) tags. The script mentions that this type of list is less commonly used but important to know for comprehensive web development knowledge.

💡VS Code

VS Code, or Visual Studio Code, is a popular source-code editor developed by Microsoft. It is mentioned in the video script as a recommended tool for web development due to its modern features, extensive plugin support, and the fact that many professional developers use it for coding.

Highlights

Introduction to creating images, lists, and tables in HTML.

Motivation for creating free web development courses based on viewer support.

Recommendation to bookmark getup.com for access to all course codes.

Instructions on using the emmet abbreviation to quickly create HTML elements.

Explanation of the importance of the 'alt' attribute in images for accessibility.

Demonstration of how to use the 'src' attribute to link images in HTML.

Discussion on the use of 'width' and 'height' attributes in images for SEO purposes.

Introduction to creating tables in HTML with the 'table', 'tr', 'th', and 'td' tags.

Explanation of 'rowspan' and 'colspan' attributes for merging table cells.

Use of the 'caption' tag to add a title to an HTML table.

Introduction to the 'BR' tag for adding line breaks in HTML.

Explanation of grouping table content with 'thead', 'tbody', and 'tfoot'.

Introduction to lists in HTML, including ordered, unordered, and definition lists.

How to customize bullet points in unordered lists using the 'type' attribute.

Creating ordered lists with different numbering styles using the 'type' attribute.

The use of 'VS Code' as a recommended modern editor for web development.

Recommendation of 'replit.com' for coding on mobile devices.

Encouragement for viewers to comment on the course and provide feedback.

Transcripts

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!