Refresher Quiz

Let us see how well we remember the concepts from our previous article:

Adding Favicons

A favicon or Favourite Icon is an image that appears as the icon of your website or webpage, displayed on the browser tab. Usually, a logo is used as the favicon of your webpage.

• First, get an image you wish to use and add it to your images folder. We will use the passport as our favicon.

• within the head section of our index.html document, create a pair of link tags just above the title tags.

• Notice that this is a self-closing tag, add an href attribute, and set its value to the relative path to the passport.

• Add a type attribute and set its value to image/jpg since the passport is an image file with a .jpg extension.

• Finally, add rel attribute and set its value to icon. Your code should look like this:

<link href="./assets/images/passport.jpg" type="image/jpg" rel="icon">

notice the favicon next to the web page’s title.

Working with Video Files

You can add videos directly to your web page as follows:

• Create a videos folder inside your assets folder in vs code

• Find a video, representing a project you have done. You can get a free one from canva.com.

• In your projects.html file, create a new projects section right under your project 1 and call it project 2, using a h2 tag.

• Next, use a video tag the same way you used the img tag in project 1 above. add a src attribute and set it to the relative path to the the video file.

• Change the width as desired by adding a width attribute and set the width to 400px.

• Add a controls attribute for the video to be able to be played.

• Add an autoplay attribute for the video to play automatically

• Add a muted attribute for the video to be muted by default to avoid distractions to users.

• Add a loop attribute for the video to loop back to beginning when finished.

• Give it a short description using a paragraph tag.

• You should know that you can turn any image or video file into a hyperlink by wrapping it in anchor tags and setting the href attribute to a url of choice. we will set our url to the source file in canva.

• Finally, have the link open in a new tab by setting the target attribute to _blank

<h2>Project 2</h2>
<a href="<https://www.canva.com/design/DAGA8YG9y_w/7Ks8QYsEn-z3X8OTXu0LWA/edit>"><video src="../assets/videos/project 2.mp4" width="400px" controls autoplay muted loop target="_blank"></video></a>
<p>A very short video demo</p>

Here is the code as well as the live preview

Activity h05:

Adding Audio Files

We are going to add a few audio files to our profile:

• In our index.html file, add a new hobby to the hobbies section: “listening to music”

• Wrap this new hobby inside anchor tags and set the relative path to ./assets/music.html. Remember to add a target attribute and set it to _blank to open in a new tab.

• to create this music.html file, inside your assets folder, create a music.html file.

• open this music.html file and create a boilerplate code.

• Title it My Favourite Music

• Using an h2 tag, add a heading titled My Favourite Music

• I am pretty sure you have some audio files of music you listen to regularly, grab those files, create a folder called music inside your assets folder, and paste those songs in there.

• Right under the h2 tag. create an audio tag and specify a source attribute to a relative path to the first song, then do the same for all the other songs, in separate audio tags.

• next create attributes for controls, muted, autoplay and loop.

Try this activity before checking the code on my project repo. check out the mock-up below.

You will realize that as we move on, I expect that you are getting better at this as I will no longer openly post code solutions to activities here. I will only place mock-ups and then push the codes to the repo. Click here for access to the repository.

There you have it, You have Learned how to add Audio, Video, and a Favicon to your HTML Page.