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.

[code]<img src="https://a1websitepro.com/wp-content/uploads/2014/09/logo200.png" />[/code]

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.

[code]<img src="" />[/code]

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.

[code]<img src="" alt="alt tag"[/code]

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.

[code]<img src="" height="25px" width="25px" />[/code]

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

[code]<img src="" id="foo" />[/code]

Example of a Class

[code]<img src="" class="foo" />[/code]

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.

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

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

Complete Code Used In The Video

[code]<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>[/code]

Try It Here

next Lesson

 

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

Summary
IMAGE TAGS AND EMBEDDING ABSOLUTE BEGINNER COURSE IN WEB DEVELOPMENT PART 2
Article Name
IMAGE TAGS AND EMBEDDING ABSOLUTE BEGINNER COURSE IN WEB DEVELOPMENT PART 2
Description
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.
Author
Publisher
A1WEBSITEPRO LLC
Logo
ABSOLUTE-BEGINNER-CODING-PART-2-I-CAN-DO-IT

2 Comments

Leave a Reply

Your email address will not be published.

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