10 Questions
What attribute specifies the URL of the video file you want to play?
src
What attribute adds a set of standard controls to the video player?
controls
Which HTML tag is used to add audio to a web page?
What attribute specifies the URL of the audio file you want to play?
src
Which HTML tag is used to create a hyperlink to another page or website?
What is the root element of an HTML document?
html
Which attribute of the img tag provides an alternative text description of the image?
alt
What two new tags does HTML5 introduce for embedding multimedia content?
audio and video
Which section of an HTML document contains metadata like title, descriptions, and links to CSS files?
head
Which tag is used to link pages together in HTML?
Study Notes
Basic HTML: A Primer on Layouts, Images, Videos & Audio, and Links
HTML is the foundation of web pages. While it can't display visual content like CSS or interact with user inputs like JavaScript, it provides the backbone of websites by structuring their information. This guide will introduce you to basic HTML structures, how to embed images, play videos and audio, and link your pages together.
HTML Layout
The core of any HTML document is its structure. It consists of three main elements: <html>, <head> and <body>. The html tag holds all other tags and defines the root element of an HTML document. The head section contains metadata like title, descriptions, keywords, and links to CSS files and other resources. The body tag is where you put all the content that users will see.
Adding Images
To embed images, you use the <img> tag. It has two required attributes: src and alt. The src attribute specifies the URL of the image you want to display, while the alt attribute provides an alternative text description of the image, which is displayed if the image can't be loaded. For example:
<img src="image.jpg" alt="A beautiful sunset over the ocean">
Adding Videos and Audio
For videos and audio, HTML5 introduces two new tags: <video> and <audio>. These tags allow you to embed multimedia content directly into your pages. Here's how you can use them:
Video
The <video> tag has two required attributes: src and controls. The src attribute specifies the URL of the video file you want to play, while the controls attribute adds a set of standard controls: play/pause, volume, current time, and duration. For example:
<video src="video.mp4" controls>
Your browser does not support the video tag.
</video>
Audio
The <audio> tag works similarly to the <video> tag. It has two required attributes: src and controls. The src attribute specifies the URL of the audio file you want to play, while the controls attribute adds a set of standard controls: play/pause, volume, current time, and duration. For example:
<audio src="audio.mp3" controls>
Your browser does not support the audio tag.
</audio>
Adding Links
Linking to other pages or websites is a fundamental part of web development. HTML provides the <a> tag for this purpose. The href attribute specifies the URL of the page you want to link to. For example:
<a href="https://example.com">Visit Example</a>
In conclusion, HTML is the backbone of websites, providing structure and organization to content. It allows you to embed images, videos, audio, and link to other pages, enabling a rich user experience. As you progress in your web development journey, understanding and mastering these basic elements will serve you well.
Learn about the fundamental elements of HTML including document structure, image embedding, video and audio integration, and linking to other pages. This primer covers how to create layouts, embed media content like images, videos, audio files, and create hyperlinks.
Make Your Own Quizzes and Flashcards
Convert your notes into interactive study material.
Get started for free
