Learn web development 03 - HTML List tags and Img tag, Html video tag

Hello, Welcome. My name is kunaal. This is a part of learn web development series.

In today's article, you'll learn about lists and images, video, audio tags in HTML. So, let's start.

List tags

So till now we have see heading tags, para tags. But, how we can create lists in HTML. For lists we have

Ordered list

<ol></ol>This is ordered list. This is used to create a list with numbers, or alphabets like that. But in order to create lists we need one more tag it's <li></li>. This is called list item. We define list item with this. Let's take an example.

<ol>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>

Output

But, What if we want roman numbers, or alphabets. We can use type="" type atrribute. Remember we have learnt about attributes in the previous article.

Example of type attribute

<ol type="i">
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
</ol>

Value for type attribute can be 1 - Number, A - Capital letters, a - small letters, i - roman numbers, I - Capital roman number.

Output

We have some more attribute that you can use with ol.

Attributes	value	description
start	numbers(1,4,50..)	Specifies the start value of an ordered list
reversed	------	Specifies that the list order should be reversed(3,2,1)

Unordered List

Now, what if we want un ordered list. Well, for that case, we have <ul></ul> unordered list tag. This work same as ordered list. The only difference is this don't add number.

For example

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Javascript</li>
    <li>React</li>
    <li>Node.js</li>
    <li>Psql</li>
</ul>

Output

Nested Lists

Nested lists refer to list inside another list inside another. Like nesting a list inside another.

Example for nested list.

<ol>
    <li>Car</li>
    <li>Bike
        <ul>
            <li>Electric Bike</li>
            <li>Super Bike</li>
            <li>Bike</li>
        </ul>
    </li>
    <li>Plane
        <ul>
            <li>Fighter Plane</li>
            <li>Commercial Plane</li>
            <li>Private Plane</li>
        </ul>
    </li>
    <li>Helicopter</li>
</ol>

Output

That's sit about Lists in HTML.

Image Tag

<img> Image tag.
This tag is used to add image on the page. Notice we don't close image tag. img tag work with some attributes.
1.src - stands for source. It is used to locate image path.
2.alt - stands for alternate text. If the image for some reason cannot be displayed.

Let's see an example.

<img src="cat.png" alt="cat">

Output

Video Tag

<video></video> Video tag is used to add Video in web page.With this tag you have to you <source> tag also. And <source> tag is non closing tag. Like you define img path using src attributes. The same attribute we use to locate video.

Let's take an example

<video controls autoplay muted loop>
    <source src="video.mp4">
</video>

Output

Attributes used in above code.

attribute	description
Controls	show controls button for the video.
autoplay	autoplay the video on page load
muted	mute the video
loop	play the video in loop

Audio tag.

And the last but not least. <audio> Audio tag.
This is used to add audio on the page. And it is very easy to understand by the code.

<audio src="audio.mp3" controls></audio>

Output

So, that's it for today. I hope you understood each and everything. In the next article we'll learn about forms and tables in HTML. So make sure you follow me.

Homework

I appreciate, If you do homework as well for you better practice. Today's homework is.

1. Try all the above example on your own
2. Try adding video attributes to audio, and image tags to see what attributes work with them.
3. Make a page which contains a para, heading, list, nested lists, two images and one video or audio. Add some links also.

If you want, you can tag your homework to my Instagram. I'll be glad to see you developing web pages.

So, that's sit, if I missed something or you have any doubt feel free to ask me in discussion.

If you like, you can subscribe my youtube channel.I create awesome web development tutorials. You can also watch tutorial on Gradient Infinity loading animation

Thanks For reading.