An HTML file can quickly appear monotonous if it consists only of text. Therefore it is advisable if you include some graphics. In the following article we will show you how to embed images with HTML and how to define the height, width and alignment of the graphics.
Basics
The basic HTML code required to insert an image is:
<img src="bilder/bild.jpeg">
The tag is the main part of it. scr stands for source . In other words, it is the " image " file in JPEG format . This is saved in the " Pictures " folder . Upper and lower case does not play a role here . <img src="...">
Of course, if you want to insert an image from an external website , you have to specify a different source . For example, it could look like this:
<img src="https://www.google.de/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
The address here shows the Google logo on www.google.de. To insert a graphic, you need to know the graphic address of an image . To do this click with the right mouse button on the image in the browser. Then select " Copy graphic address ". You can <img src="..."> integrate these directly into your source code with the command.
This process works for all kinds of images . Even pictures in GIF format can be integrated with it. These images are like small, repeating video sequences . Even so, they are considered a graphic file ..
Detailed picture settings
Now there are various things that you can edit on your image, so-called attributes . In the following we will show you how you can edit the height , width and the alternative text. We will also help you with the alignment and creation of a frame .
Note: The attributes are not individual commands. The properties of a graphic are <img src="..."> inserted directly into the code : between the second quotation mark and the end of the command>..
Adjust the height and width
You set your image height with the command height="..." . The width of the image is width="..." specified with the command . Enter the respective size in pixels . In the case of a rectangular image, this could be, for example:
<img src="..." height="100" width="200">
Create alternative text
alt="..." You can use the command to create alternative text for your image. This is displayed if your graphic does not load properly .
Alignment
You can also align an image in the same way that you align text . For this there is the command Now you have to enter your appropriate attribute , ie "left" (left-justified), "right" (right-justified), "center" (centered). You can also set "top" and "bottom". align="...".
Frame creation
You can also add a frame to your graphic . To do this, use the command border="...". Now you only have to set a number of pixels for your frame width.
Example of a complete picture integration
<img src="bilder/bild.jpg" height="100" width="100" alt="Bild kann nicht geladen werden." border="3" align="center">
In this example the picture " Picture " comes from the folder " Pictures ". It is a graphic in JPG format . The graphic is 100 pixels high and wide . If the image does not load, you will see " Cannot load image ". The picture has a 3 pixel wide frame and is displayed in the middle .