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.
So till now we have see heading tags, para tags. But, how we can create lists in HTML. For lists we have
<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>
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.
<ol type="i"> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> </ol>
typeattribute can be
A- Capital letters,
a- small letters,
i- roman numbers,
I- Capital roman number.
We have some more attribute that you can use with
|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)|
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.
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>
<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.
src - stands for source. It is used to locate image path.
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">
<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>
Attributes used in above code.
|Controls||show controls button for the video.|
|autoplay||autoplay the video on page load|
|muted||mute the video|
|loop||play the video in loop|
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>
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.
I appreciate, If you do homework as well for you better practice. Today's homework is.
- Try all the above example on your own
- Try adding video attributes to audio, and image tags to see what attributes work with them.
- 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.
Thanks For reading.