1 Star2 Stars3 Stars4 Stars5 Stars (17 votes, average: 5.00 out of 5)

IMAGE TAGS AND EMBEDDING ABSOLUTE BEGINNER COURSE IN WEB DEVELOPMENT PART 2

To use an image tag we use a file on the internet. This file to the image could be located on your server or an external server. For example the following image tag would work anywhere.

Tip: Click on images to make them larger. If you find anything wrong on this page or need further assistance please comment below or contact me. 🙂
<img src="https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png" />

Breaking Down The Image Tag

The syntax that we use to embed an image is always the same. It would be good to commit this to memory. After we type src=” we will put a file path to an image. We will then end that file path with another quote “. This will tell our browser to go out on the internet and find the file and bring it into our web page.

<img src="" />

Alt Tags in Images

You also want to include alt attributes in the image tag. This should explain what the picture is all about in a few short words.

Subscribe To My YouTube Channel:
<img src="" alt="alt tag"

Height and Width in Image Tags

In your image source code you can also give a height and width on the image itself. It looks like this.

<img src="" height="25px" width="25px" />

Id’s and Classes on Image Tags

You can also add id’s and classes on image tags. Here is a couple examples.

Example of An Id

<img src="" id="foo" />

Example of a Class

<img src="" class="foo" />

Other Attributes You Can Use In An Image Tag

  • style=””
  • title=””
  • usemap=””

Embedding Videos into A Webpage

You can embed videos into your webpage with the use of iFrames. In the video tutorial we discussed how iFrames are closely related to the image tag. Here is an example.

<iframe src="https://www.youtube.com/embed/SCeW5pSTAig?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>

Notice that the attributes are very similar to that of an image tag.

Complete Code Used In The Video

<html>
<head>
<title>Embeding Images In HTML</title>
</head>
<body>
<h1>Embeding Images In HTML</h1>
<p>This is all about images</p>
<img src="https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png" />
<iframe src="https://www.youtube.com/embed/SCeW5pSTAig?ecver=2" width="640" height="360" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Try It Here

next Lesson

 

IMAGE TAGS AND EMBEDDING ABSOLUTE BEGINNER COURSE IN WEB DEVELOPMENT PART 2 was last modified: June 26th, 2017 by Maximus Mccullough

Please like, share and subscribe.

Advanced Programming Made Easy

I hope you enjoyed the article. If I was able to help you please consider a tip for the content.

One Time Tip

more tips

Reoccuring Tips

Tips

Cool People Share:
ABSOLUTE-BEGINNER-CODING-PART-2-I-CAN-DO-IT

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.