HTML Elements (MEDIA)

Hey reader so, in my past few blogs we learned about the very basics of HTML and also learned a lot about how to write the HTML syntaxes, what I mean was their structure. So let’s do a quick recap at first, we learned about elements, tags, and attributes and we also learned about how an HTML document works. Moving forward, check out the following syntax structure so that we can move forward and learn about using tags.

So, what are we waiting for let’s start ……

Sorry in advance if I scare you in between

Check out the following sub-topics in detail-

1. Hyperlink —

Ok so, on a web page we often find some texts or images which take us to a different web page by clicking on. So, these are called HYPERLINKS. For instance, these are parts of your webpage where a hand cursor will appear when you hover your mouse.

Default Points -

• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red (an active link is the one that is in the process of being activated like somewhere between visited and unvisited.)

Syntax -

<a href=”url”>link text</a>

Doesn’t the syntax looks somewhat familiar, Yes you are right, we have discussed links in our previous blogs too, where we discussed in detail the href attribute.

(NOTE: Not necessary it has to be a text, it can any kind of clickable media which will lead to a separate web page)

When some form of media is used as a hyperlink -

There are two types of URLs that can be mentioned in the href attribute -

1. Absolute URLs — These URLs lead to a completely separate web page of a different website.
2. Relative URL — These URLs lead to a webpage of the same website a.k.a the HTML document which is saved at the same place where you have had saved your current HTML document in your local system.

Some most used attributes by <a> tag -

• The title attribute can also be used inside it to give a glimpse of what type of link is it.
• The target attribute is used to specify where the new webpage has to be opened. These are the following values it can only have -

1. _self — It is already there in Default. Opens the document in the same window/tab as it was clicked
2. _blank — Opens the document in a new window or tab
3. _parent — Opens the document in the same frame
4. _top — Opens the document in the full body of the window

(TIP: If you are using this link to directly send an email somewhere use the mailto keyword in the href attribute,

Syntax — <a href=”mailto:someone@example.com”>Send email</a>)

2. Images —

As the name goes, one can clearly understand that the img element is used to embed any image/gif on our web page. Though it may sound like that but works a little differently. The img element links the image to the web page and in order to do that efficiently, it automatically creates a space holding that to give a clear display of the image.

Syntax — <img src=”url” alt=”alternatetext”>

As you can observe there are two attributes used here — src and alt — where src is used to enter the URL or we can say the image address of the image and alt is used to mention the alternate text if the image does not appear in the web page.

These are the image types supported by all the web browsers -

3. Favicon —

When we open a web page, when you see the title/name of the web page, you will often observe a small icon beside it.

As you can see beside the youtube word there is a small icon. This is known as a favicon. We insert the syntax for the favicon in the head tag and just below the title tag.

Syntax -

<link rel=”icon” type=”image/x-icon” href=”/images/favicon.ico”>

Here, the rel attribute is used to specify the relationship between the HTML document and the resource media. It doesn’t have any particular function to perform but it is used to mention the web browser about the type of relationship between HTML documents and the resource media.

The type attribute is necessary to mention the type of media used. Like here as for favicon we will be mentioning “image/x-icon”.

Following are the file formats supported -

4. Video —

The HTML <video> element is used to show a video on a web page.

Syntax -

<video width=”320" height=”240" controls>

<source src=”movie.mp4" type=”video/mp4">

Your browser does not support the video tag.

</video>

In the above syntax, the <video> tag is used to insert the video, now in order to support it the empty <source> tag comes into use. The source element is you provide the link/address of the video where the same src attribute is used and type is used to mention the type of media file. Apart from this, any text you write between <video></video> tags apart from the source element acts as an alternate text if your video doesn’t appear on the web page.

Apart from these, there are some empty attributes where no value is required to enter these are -

• Autoplay — To start a video automatically
• Muted — Add muted after autoplay to let your video start playing automatically but muted.

(WARNING: Definitely enter the height and weight attributes. If height and width are not set, the page might flicker while the video loads.)

Check out the following table for supported media types in different browsers and the media types to be mentioned under the type attribute.

5. Audio —

As it goes by the name, it works the same as the video, it’s just we embedded an audio file in the web page.

Syntax -

<audio controls autoplay>

<source src=”horse.mp3" type=”audio/mpeg”>

Your browser does not support the audio element.

</audio>

Apart from these, there are some empty attributes where no value is required to enter these are -

• Autoplay — To start audio automatically
• Muted — Add muted after autoplay to let your audio start playing automatically but muted.

6. Iframe —

This HTML tag is used to embed another web page within the current HTML document.

Syntax –

<iframe src=”url” title=”description”></iframe>

(TIP: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.)

You can use the height and width attributes to specify the size of the iframe.

So, that’s it I know it was a long blog but trust me I covered most of it that are required for you to know about media and links in HTML. My upcoming blogs will cover more such topics which I am pretty sure will trigger your knowledge a lot. Also, pardon but I think soon enough I will be starting writing blogs on DSA topics too, though not sure about it, let’s see what the future holds for me oops sorry us.

Thank you for reading and happy coding !!!