Here you will learn the new and improved way to give your website a bit a boost... With the use of images with the img tag you will be adding your images into your website in no time. Image on!
| Tags | Definition |
|---|---|
<img ... /> |
The img states the use of a image |
src="..." |
The src Source tells us where the image is coming from. e.g. neatpic.jpg or a url. |
alt="..."... |
The alt attribute is a alternative to what should be there if the image is corrupted or not found |
height... |
The height attribute is to allow for the change of height of the image
|
width... |
The width attribute is to allow for the change of width of the image. Self Explanatory. |
<img ... /> |
The img states the use of a image |
<object width="..." height="..." data="..."></object> |
The object tag defines an embedded object within an HTML document. Use this element to embed media (like Youtube Video, Audio, Video, Java Applets, ActiveX, PDF and Flash) in your web pages. |
The Basics with Images...
In HTML, images are defined with the img tag. The img tag is empty, it contains attributes only, and does need a closing tag. The src attribute specifies the URL (web address) of the image:
<img src="image.jpg/png/gif">
The "src" shows where the image is coming from. Now we need to add and alternative, if the image does not seem to turn up. This is the text that will show if the image is broken. To add an alternative, you will need to add a alt attribute like this:
<img src="image.png/jpg/gif" alt="alternative">
Height and width attributes can also be like this. N.B. The height attribute specifies the height of an image, in pixels.
<img src="image.png/jpg/gif" alt="alternative" img src="smiley.gif" alt="Smiley face" height="42" width="42">
You are also able to embed Video by using the object tag.
Using the object tag like this:
<object data='https://www.youtube.com/watch?v=w3jLJU7DT5E'></object>
This will embed a youtube video into you page. But by using it like this:
<object data='video.mp4'></object>
This will embed local video files. By using the Width and Height attibute you are able to resize the video as you want.
<object width="510" height="340" data='https://www.youtube.com/watch?v=w3jLJU7DT5E'></object>
Well Done! You now officially now how to put DANK images into your website. The flow is strong. Also here is an example of it:
See the Pen Imagesflowcoding by Sithum Dissanayake (@SithumD) on CodePen.
Sithum Dissanayake
@Coding_Flow