18th September 2021

Adding and Editing Images to Html Pages

Html’s tag for images is img. The img tag contains many features in itself. We will examine these ones by one. Let’s start with the simplest of adding images to our web page.

Our code below is the simplest image embed code. You can call the image page by specifying the URL or file address of the image to the src = ”” property.

Linking to Images

We can easily do this with a tag, which is the link tag of Html. If we want to give a link to the image I have added to our web page, it will be sufficient to put our simple image insertion code above in the tags.

Height and Width in Pictures

If you want to size the image we added to our web page, we can use the width and height properties.

LEARN MORE  What is the "I Know You" Tool? How to Use?

Width” – Used to determine the width of our image. For example; It is written as width = “100px”. This indicates that our image will be 100px wide.

Height” – Used to determine the height of our image, eg: height = “100px”. This indicates that our image will be 100px high.

Height and Width in Pictures
Height and Width in Pictures

 

Adding Frames to Pictures

We use the border feature to add frames to the pictures we add to our web page. Although it is not preferred today, it is useful to know. In some cases, maybe you want to use it.

Adding Frames to Pictures
Adding Frames to Pictures

 

LEARN MORE  Getting Local User Password Hashes from SAM and SYSTEM Files - Cain&Abel Tool

Determining the Position of Pictures

We can position the images we add to our web page with the align feature. The values ​​that the align property will take are as follows,

We can position it as.

Determining the Position of Pictures
Determining the Position of Pictures

 

LEARN MORE  General Features of Web Application Firewall (WAF) Products

alt = “” feature

The alt = ”” attribute is used to set the alternative text to your images. By specifying a link to our website. When the image we added among the page files is not loaded due to an error, the alt = ”” feature is activated at this point and the description you provided appears instead of the image. As an example, let’s write the extension of our image file missing and add the alt = ”” property and see what will be the result?

We learned the properties of the img tag in detail.

Leave a Reply

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