Block-level Element
A block-level element always starts on a new line and takes up the full width available.
Some Block level elements are:
<div>
<ul>
<section>
<ol>
<p>
<h1> to <h6>
<hr>
Inline Element
An inline element does not start on a new line and it only takes up as much width as necessary.
Some Inline elements are:
<a>
<span>
<br>
<img>
<i>
A block-level element can contain an inline element but an inline element can not contain a block-level element.
Table in HTML
A table contains rows and columns.
Rows are the horizontal cells in the table and Columns are the vertical cell in the table.
Tables are used to collect the data in the form of rows and columns. We can understand complex data in very simple terms with the help of tables.
Like when we go to school we have a time table by which we know about the timing of periods.
We know about that when will be physics period or when will be chemistry period.
Table in html is made up by some tag first we use <table></table>
Tag everything related to table is written in table tag.
Then we have <thead>>/thead> tag all the heading will come on thead tag. By <th> tag we can give the headings.
We also have a <tbody> tag, in tbody tag all the data/content of the table is written.
We can add border attribute to make cells of the table.
We use the cellpadding attribute for space inside the cell.
Lists in HTML
List is a series of particular images, details, or facts.
Lists is of three types:
1. Ordered list
Used to create a list of related items, in a specific order.
There can be 5 kinds of markers for the ordered list:
● Numbers [ 1 ]
● Lowercase Alphabets [ a ]
● Uppercase Alphabets [ A ]
● Lowercase Roman Numbers [ i ]
● Uppercase Roman Numbers [ I ]
Example:
<ol>
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
2. Unordered list
Used to create a list of related items, in no particular order.
There can be 4 kinds of markers for unordered lists:
● disc
● circle
● square
● None
Example:
<ul>
<li>one</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
3. Description list
Used to create a list of terms and their descriptions.
Example:
<dl>
<dt>Dog Breed</dt>
<dd>golden retriever</dd>
<dd>labrador retriever</dd>
<dd>german shepherd </dd>
<dd>bulldog</dd>
<dd>beagle</dd>
</dl>
Multimedia in HTML
We have multimedia like images, videos, audio etc. Let us discuss each one by one.
Images
Images are used on webpages mainly for 2 reasons, the first one is to make websites attractive. The second reason is for information,by the image we give some type of information to the user.
If we want an image on our webpage then we will use <img/> tag.
Image tag is a self-closing tag.
Image tag have some attributes those are src, alt, height, width, title.
<img src=” ” alt=” ” height=” ” width =” “title =” “/>
In src attribute we give the image address.
In any situation, If the image is not loaded, then we will write text in alt attribute which represents the image.
Height and width attributes decide the image size.
Whatever we write on the title attribute that will be displayed when we move our cursor on the image.
Videos
Videos never/less used for website beautification, videos are used for information.
Like I am a videographer so I can add videos that show my work to the users.
If we want a video on our webpage then we will use <video></video> tag.
Video tag contain attributes like src, controls, autoplay, muted, height, width.
src is the main attribute we give the video address in it.
By controls attributes a video look like as video ,we know if a video does not have play/pause,timing track feature so it's just like image so controls provide all these features.
When we open website video will be automatically play by autoplay attribute.
If we don't want any sound on video we use muted attribute.
Height, width give the video size.
Audio
Normally audio is never used for beautification purposes.
Audio is used in music websites like Spotify, gaana, resso etc.
If we want audio on our webpage then we will use <audio></audio> tag.
In src attribute we give the audio address.
By controls attributes a audio look like as an audio ,like it shows play/pause buttons.
Thank you for reading...