Adding image:

For adding image ,we need <img> tag. We can add image directly from the folder where we are doing HTML and also we can add image from other folder

.For adding from the same folder,we have to import the image to that folder.Then inside the body tag we will use the “img” tag.For attaching image the tag must have this kind of format

<img src=”folder’s name”>

The picture we want to attach can be of any format like-.png,.jpg.The format through which you saved the image,it should be used inside the image tag.Otherwise,the image won’t be imported.We can also add Gif to the webpage likewise we are adding image.

For example-if we want to import image from the same folder and the name of the picture we want to add is “lyrics” which is in .png format then we can write it in the following way:

<img src=”lyrics.png”>

We can also import image from different folder .But in that case we have to mention the folder’s name along with the picture’s name .

For example-if we want to import image from a folder name “photos” and the name of the picture we want to add is “lyrics” which is in .png format then we can write it in the following way:

<img src=”images/lyrics.png”>

We can also change the height and width of the image which we want to add.For that we will specify the height and width inside the image tag like —

<img src=”lyrics.png”

height=”300”

width=”200”>

Moreover,we can also add hyperlink with the image .For that we have to add the hyperlink before the image tag.

Alternate text:

Alternate text is a detailed and specific description of images for the users of webpages. Alt text works by adding my text tag to HTML code on embedded images. The user doesn't see these tags. However, the search engine bots do. The better the tags, the higher the search ranking for these web pages. Webpages miss out on around 20% of google searches because of their lack of use of alternate or alt text. Alt text is not only good for SEO, but it is absolutely essential for people with visual impairment disabilities. Alt texts should be cohesive and specific. The alt attribute should be used with the <img> tag like the one below

<img src="path_to_image.jpg" alt="Description of the image">

Adding audio:

Adding Audio is somewhat like adding image.We have two options for adding image.One of the approaches is adding audio directly from the working folder by importing audio to that folder and the other approach is adding audio from a different folder.

For adding audio we need “<audio control >” tag which is written like the following way:

<audio control>

</audio>

Inside the audio control tag we will use another tag which is source tag.It can be written in the mentioned way:

<audio control>

<source src=”Name of the audio file”>

</audio>

The audio can be of any format like .mp3 etc.

If we consider the name of the file which is directly taken from the working folder is “Night changes” and video format is mp3 then we can write in this way:

<audio control>

<source src=”Night changes.mp3”>

</audio>

Moreover ,we can add the option of autoplay in the audio .For that we have to just do the following thing:

<audio control autoplay>

<source src=”Night changes.mp3”>

</audio>

Furthermore ,we can add the option of mute in the audio .For that we have to just do the following thing:

<audio control muted>

<source src=”Night changes.mp3”>

</audio>

Again,we can add the option of autoplay and muted togetherin the audio .For that we have to just do the following thing:

<audio control autoplay muted>

<source src=”Night changes.mp3”>

</audio>

Moreover ,we can add the option of playing the audio in loop .For that we have to just do the following thing:

<audio control autoplay loop>

<source src=”Night changes.mp3”>

</audio>

We can also use different types of audio at a time. Just in that case we have to mention the type of the audio file .Like-we want to attach the wav version of that file just in case our web browser doesnot support mp3 file,then it will work.

We can implement in the described way :

<audio control autoplay loop muted>

<source src=”Night changes.mp3” type=”audio/mpeg”>

<source src=”Night changes.wav” type=”audio/wav”>

</audio>

Adding video:

Adding video to webpage is similar to adding audio to webpage.

Here we will news two tag like we used at the time of adding audio .Those tags are -<video control> tag and <source> tag.

We can write in the same way we write in case of adding audio which is

<video control autoplay loop muted>

<source src=”Night changes.mkv” type=”video/mkv”>

</video>

We can also change the width of the video according to our wish .For this we have to make change in the <video> tag

We can do the following thing:

<video width=”500px” controls autoplay loop muted>

<source src=”Night changes.mkv” type=”video/mkv”>

</video>

HTML headers are crucial for organizing content on a web page. They range from to, with being the main heading and for smaller subheadings. Using these headers properly helps make your content more readable and structured. Plus, they’re important for SEO because search engines use them to understand and rank your content. So, by using HTML headers well, you make your web pages easier to read and better for search engines.

<FOOTER>

A footer in HTML is the section at the bottom of a webpage. It often contains important information like copyright notices, contact details, or links to privacy policies and social media pages. Adding a footer helps visitors find this information easily and makes your website look more professional. It's created using the <footer> tag and is usually styled with CSS to match the overall design of the site. Using a footer is a great way to organize your webpage and provide valuable information to your users.

<ARTICLE>

An article in HTML is a section of a web page that contains standalone content, like a blog post or news story. It's marked up using the tag. This tag helps browsers and search engines understand that the content inside it is a complete piece on its own. Using the tag is good for organizing your web page and improving SEO, making it easier for people to find and read your content online.

<SECTION>

The <section> tag in HTML is used to define different sections of content on a web page. It helps to organize the page into distinct parts, like chapters in a book. For example, you might use <section> tags for the introduction, main content, and conclusion of an article. Using <section> makes your HTML code more readable and helps search engines understand the structure of your content better. This can improve your site's SEO and make it easier for visitors to find the information they need.

<NAV>

The <nav> element in HTML is used to define a section of a web page that contains navigation links. These links help users move around different parts of a website, like the home page, about page, contact page, and more. Using <nav> makes your site more accessible and easier to navigate. It also helps search engines understand the structure of your website, which can improve your site's visibility in search results. By organizing your navigation links inside a <nav> element, you create a better experience for your visitors.

<ASIDE>

In HTML, the <aside> element is used to define content that is related to the main content but not essential to its meaning. Think of it like a sidebar that contains additional information, like ads, links to related articles, or author bios. This helps keep the main content focused while still providing useful or interesting extras. Using <aside> correctly can make your webpage more organized and user-friendly.

Written by,

Md. Sybeen Abrar Prohor, Samia Bhuiyan, Shajeeah Juwairiya, Naznin Choity

BRAC University