Images | Videos | Background Images
Section outline
-
Adding an image
The art of Self Discipline
Images
Images have their own tag <img>
An <img> tag is self closing.
<img> tags do not need a closing tag</img>
img tags must have an src attribute.
The src attribute is a link to the image.
The image is kept in another folder.
src="link-to-folder-address"
The src attribute is placed inside the img tag.
A style can also be added inside an img tag.<!DOCTYPE html>
<html><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<img src="./images/TriumphRocket3.jpg" alt="Rocket3" width="50%" height="50%">
</body></html>
The video tag supports several types of movies at the same time. If the browser cannot support the first type, it moves on and selects the first one that it can play. Or just delete the second one in the list,
<video width="200" height="240" controls>
<source src="images/Sciencecamp2.mp4" type="video/mp4">
<source src="images/Sciencecamp2.mov" type="video/mov">
Your browser does not support the video tag.
</video>
<div style="background-image: url('./images/CradleMountainTasmania.jpg'); background-size: cover;">Text here if needed</div>