3. <img> Image Element
(Indicates an image)
Syntax:
<img src=“image.png” alt=“image” />
<img src=“image.png” width=“200” height=“200” alt “image” />
4. <img> image Element Attributes
(Common Attributes Used)
Attribute Description
src Indicates the File Path to load the image
width Indicates the width
height Indicates the height
alt Text shown when image fails to load
5. Src Attribute
(can take a value of a URL or a File Path.)
Syntax:
<img src=“image.png”/>
Width & Height Attribute
(Takes a number in pixels or percentage)
Syntax:
<img src=“image.png” width=“200” height=“200”/>
<img src=“image.png” width=“50%” height=“5%”/>
if you only indicate one of the two then the aspect ratio would be retained
6. Alt Attribute
(Shows the text when the image failed to load)
Syntax:
<img src=“image.png” alt=“error” />
7. Image Links
(Surround the image with <a> tag to make it clickable)
Syntax:
<a href = “home.html”>
<img src=“image.png” alt=“error” />
</a>
8. File Paths
(Different Level of File Paths)
Value Description
“image.png” The file is in the same folder
“images/image.png” The file is in the folder images in the
current folder
“/images/image.png” The file is in the folder images at the
root of the current web
“../image.png” The file is in the folder one level up
from the current folder
Absolute Path The file’s Path is fully specified
9. <source> Source Element
Indicates files for the browser to choose.
Source Tags are used within <audio>, <video> and <picture> elements
Syntax:
<source src = “music.mp3” type = “audio/mp3”>
10. <source> Source Element
(Common Attributes Used)
Attribute Description
src Indicates the File Path
type Indicates the MIME-type of the resource
11. Src Attribute
(Can take a value of a URL or a File Path.)
<source src = “music.mp3”>
Type Attribute
(Specifies the MIME-Type of the Source)
<source src=“music.mp3” type =“audio/mp3”>
<source src=“vid.mp4” type=“video/mp4”>
MIME-Type helps in identifying file types so it can be handled accordingly
12. <audio> Audio Element
(Used to play audio files)
Syntax:
<audio controls>
<source src=“music.mp3” type=“audio/mp3”>
</audio>
OR
<audio src=“music.mp3” controls>
</audio>
NOTE: If your browser does not supported the mp3 file use <source src=music.ogg type=“audio/ogg”>
13. <audio> Audio Element Attributes
(Common Attributes Used)
Attribute Description
src Indicates the File Path
control Shows controls like play, pause, volume
autoplay Play audio automatically when loaded
muted The audio would be muted by default
loop Makes the audio replay infinite times
14. Src Attribute
(can take a value of a URL or a File Path.)
Syntax:
<audio src=“audio.mp3”/>
Other Attributes
(Some attributes doesn’t need any value)
Syntax:
<audio src=“audio.mp3” controls autoplay loop muted />
15. <video> Video Element
(Used to play video files)
Syntax:
<video width=“320” height=“240” controls>
<source src=“vid.mp4” type=“audio/mp4”>
</video>
OR
<video src=“vid.mp4” width=“320” height=“240” controls>
</video>
16. Src Attribute
(can take value of a URL or File Path)
Syntax:
<video src=“vid.mp4” width=“320” height=“240” />
Other Attributes
(Some attributes doesn’t need any values)
Syntax:
<video src=“vid.mp4” width=“320” height=“240” controls autoplay loop muted />
17. Width & Height Attribute
(Takes a number in pixels or percentage)
Syntax:
<video src=“vid.mp4” width=“320” height=“240” />
<video src=“vid.mp4” width=“50%” height=“50%” />
If you only indicate one of the two then the aspect ratio would be retained.
18. Alubijid | Balubal | Cagayan de Oro | Claveria | Jasaan | Oroquieta | Panaon | Villanueva
Home of the Trailblazers
