Lesson 6: Embedding in HTML
Inserting images
Inserting media is an important part of web design for HTML developers. We referred to images earlier on when we used the image tag as an example of a void element. To insert an image into our web page we use an img tag. The image tag uses a source attribute to dictate what image is displayed.
Example:
<img src="https://www.rowingireland.ie/logo">We can also use an image which has been stored locally on the device:
Example:
<img src="rowing_ire_logo.png"/>Formatting images:
Sometimes an image won’t fit a web page properly as it is too wide or too tall. We can dictate an images size by using a height attribute and a width attribute.
Example:
<img src="rowing_ire_logo.png" width="150px" height="100px"/>In the above example we define the height and the width by the number of pixels for each. We can also define the height using the percentage size of the screen.
Example:
Now the image will take up the full width of the screen.
Inserting Video:
A video element is similar to an image element; however, the video is not a void element and has an opening tag and a closing tag. Like with the image element, we must give our video a source. We can either have the source as a locally saved video or we can give a URL address. If the video source is a URL address, then it is embedding.
Example of a local source video element:
The controls attribute gives the video a pause button and other toggles, with which the user can interact.
Embedding:
For using a video from an external source, like YouTube, on your web page, you first go onto the YouTube page with the video. If you click the ‘share’ option, there is an ‘Embed’ button. If you click this, some HTML code is displayed, which you can copy and paste. It will most likely look similar to the example below.
<iframe width="300px" height="200px" src="https://youtube.com/embed/" frameborder="0" allow="accelerometer, gyroscope, auto-play, picture-in-picture" allowfullscreen> </iframe>After this is pasted into your HTML file, your web page can play the YouTube video. Embedding audio is done in a near identical process.