36
loading...
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.
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.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.
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) |
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>
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.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">
<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.
| 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 |
And the last but not least.
This is used to add audio on the page. And it is very easy to understand by the code.
<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.
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.
36