<< img, image map, iframe, embed, object, param, video, audio, source, track, media, MathML, svg. >>
Lets take each of them one by one, just by an example.
Img element
<img src=" " alt=" " height=" " width =" ">
Image map element
Generally we do link a whole image, but with images map we can link any part of the image, like the following example:
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Moscow_July_2011-16.jpg/220px-Moscow_July_2011-16.jpg" width="200" height="200" alt="Planets" usemap="#wow">
<map name="wow">
<area shape="rect" coords="0,0,50,50" href="http://example.com/">
<area shape="rect" coords="50,0,200,200" href="http://example.org/">
</map>
Only trick is to use usemap="#____" with hash in img src; after it use this without hash in map. And coordinates work from top-left, x (horizontal),y (perpendicular).
Iframe element
Iframe embeds other webpage into your webpage, most commonly used with YouTube videos. But you shouldn't embed anybody's website without permission, if they allow then it is just another case.
<iframe src="http://example.com" height="600px" width="600px"></iframe>
Embed element
In short, <embed> is used for embedding Flash, such as in below example:
<embed src="somefile.swf">
Object element
It works something like iframe.
<object data=" " type= " ">
Param element
Param stands for "parameter," it is usually nested inside <object> element. See example:
<object data="xyzfile.wav">
<param name="autoplay" value="false">
<param name="controller" value="true">
</object>
Video element
It is used for embedding video on a webpage.
<video src="thisfile.mp4" controls width=" " height=" "></video>
Audio element
This element is used for embedding audio on a webpage.
<audio src="somefile.mp3 controls></audio>
Source element
This element is used for fallback purpose for <audio> and <video> format, when one format doesn't work on a browser, then it falls back on alternate format. See example:
Example 1
<audio controls>
<source src="somefile.mp3" type="audio/mp3">
<source src="somefile.ogg" type="audio/ogg">
</audio>
Example 2
<video controls width="500px" height="400px">
<source src="thisfile.mp4" type="video/mp4">
<source src="thisfile.ogv" type="video/ogg">
</video>
Track element
This element works as a child of <audio> and <video> element, its purpose is to provide a readable text along with audio or video (when played). Here is a good post on tract element, I really love it: https://www.html5rocks.com/en/tutorials/track/basics/. I think tract element isn't fully supported in all the browsers.
Media elements
Above <audio>, <video>, <source> and <track> elements come under media elements.
MathML element
MathML is Mathematical Markup Language, used for doing Mathematical equations. Right now, it isn't supported by all the browsers, but you can read about it: https://www.w3.org/TR/MathML2/chapter2.html.
SVG elements
SVG (Scalable Vector Graphics) is my favourite, it helps you draw anything. Good thing about SVG is, it is self-adjusting, as the page size decreases or increases, it also decreases or increases. Here is a good post on SVG: https://www.ibm.com/developerworks/library/wa-scalable/index.html. But I'd prefer softwares which convert an image into SVG image.
Comments
Post a Comment