Refresher Quiz
Let us see how well we remember the concepts from our previous article:
Question 1: What special HTML tag is used to preserve formatting such as spaces and line breaks within the text, making it appear exactly as written in the HTML code?
Answer: The pre tag is used to preserve the exact formatting of the text as it is written in the HTML code, including all spaces, line breaks, and indentation, which are typically not preserved when using standard HTML tags like p tags for paragraphs.
Question 2: Why are comments added to HTML documents, and how do they impact the display of the webpage?
Answer: Comments in HTML are used for adding explanatory notes or reminders within the code that are not meant to be displayed on the web page. They serve as a guide for the developer or others who may work on the HTML document in the future, making the code easier to understand and maintain.
Question 3: In HTML, how can you make a hyperlink open in a new browser tab instead of the current one?
Answer: By adding the target="_blank" attribute to an anchor a tag, you instruct the browser to open the hyperlink in a new tab. This is particularly useful for external links or ensuring that users do not lose their current page position.
Question 4: What function does the 'title' attribute serve when used within an anchor tag in HTML?
Answer: The title attribute provides additional information about the hyperlink, typically displayed as a tooltip when the user hovers their mouse over the link. This can enhance usability and accessibility by giving users more context about the link's destination or purpose.
Question 5: Explain the process of creating a hyperlink that directs to another webpage using HTML.
Answer: A hyperlink is created using the anchor a tag, where the href (hypertext reference) attribute specifies the destination URL of the link. The text or content placed between the opening and closing a tags becomes clickable and directs the user to the specified URL when clicked.
Question 6: What role does the 'href' attribute play in anchor tags in HTML?
Answer: The href attribute in an anchor tag specifies the URL of the page the link points to. It is essential for defining the destination of the hyperlink, enabling users to navigate from one resource to another by clicking on the link.
Question 7: How are absolute and relative links distinguished in HTML, and when might you use each type?
Answer: Absolute links provide the full URL path, including the protocol (http or https) and domain name, and are used to link to external sites. Relative links specify a path relative to the current document's location, useful for linking to resources within the same website without specifying the full URL, making site migration and structure changes easier to manage.
Question 8: What is the correct way to control the display size of an image in HTML?
Answer: The display size of an image can be controlled using the width and height attributes within the img tag. Specifying these attributes allows developers to resize the image directly in the HTML, affecting how it is displayed on the webpage without altering the original image file.
Question 9: How can developers include hidden notes or documentation within HTML code without affecting the webpage’s visual output?
Answer: Developers can include hidden notes or documentation within HTML code by using comments, denoted by <!-- to start the comment and -> to end it. This text is ignored by the browser when rendering the page, allowing for internal documentation or notes to be added without any impact on the page's layout or content seen by users.
Question 10: Can you explain the differences between absolute and relative paths in HTML, providing examples as described in the article?
Answer: In HTML, paths are used to link to other documents or resources. An absolute path includes the complete URL, specifying the protocol, such as
http:// or
https://, followed by the domain name and full path to the resource. For example, linking to a LinkedIn page with
<a href="https://www.linkedin.com/in/ao111">Linkedin</a> uses an absolute path because it provides the entire URL needed to access the resource from anywhere on the internet. Relative paths, on the other hand, specify a link in relation to the current document's location without the domain name. They're used for linking to resources within the same website. An example from the article is the link to the projects page:
<a href="./assets/projects.html">Go to Projects</a>. This relative path starts with
./ indicating that the
projects.html file is located in the
assets directory, which is at the same level as the current document. This method makes it easier to manage links within a website since you don't need to update the domain name if it changes or when moving the site to a different domain.
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.
