To create web pages and even entire sites, likeit is known that a special HTML markup language (Hypertext Markup Language) is used, but without photos and various images, each site would be just a structured and boring text. That's why to add images to the site uses a special code that is extremely simple to use and allows you to insert a picture into HTML to a specific place on the page, and use it as a background.
In order to write the code, you need to decide,in which program to do it. Now there are a lot of them, one of the most famous is NotePad ++. It has a number of functions, very useful when writing code, allows you to identify errors and not get confused in the tags. However, if you do not have the opportunity to resort to the help of specialized programs, you can use a simple notepad, the code does not change from this.
Having decided with the program to write the code,you need to understand what to write in it, how to insert a picture in HTML in notepad or any other program. You should start with the tag. It is this tag that declares a picture in an HTML document, it is single and does not require closing.
We announced in the code that we are going to useimage, but we have not yet indicated it. So how do you insert a picture into HTML? To do this, we need the src attribute, which is used with our tag. This attribute specifies the location of our image, regardless of whether it is on some site or on our computer.
The tag has one more attribute - alt.Use it to ensure that the browser can see the description of the picture, if for some reason the image itself can not be downloaded. Its presence is also desirable so that visually impaired people can know what kind of image is present on the site, because the text, which is in the meaning of this attribute, is announced by screen reader programs. The resulting code with the attributes src and alt will look like this:
Among other things, the tag has one moreattribute title. Due to this attribute, when you hover the mouse cursor over the image, the alternative text will be displayed in the tooltip. However, this function is supported only by Internet Explorer so that such prompts pop up in other browsers, special plug-ins will be required. Tooltips are used in conjunction with the alt attribute, they are optional, but if you use them, the code will look like this:
With how to insert a picture into text with HTML, wefigured out. But what if we want to make the image a little bigger or smaller? To do this, HTML has special attributes: width (width) and height (height). The values of these attributes can be in percentages or in pixels. If you set the width in pixels, and the height in percent, then the code will look like this:
If you specify only one of the size attributes, thenThe second one will be calculated automatically, but so that to observe the aspect ratio of the image. When specifying both parameters, it is important to remember that if the sizes exceed the original ones, the picture will be stretched, and if the sizes are smaller, it shrinks.
And what if we want to use the image not in thetext, and insert a picture on the background in HTML, how to do it? To do this, we need a
tag, without which no HTML document can be dispensed with. It contains all the visible contents of the document, and its attributes can specify the size, color of the font, including the background. To insert a picture in HTML as a background image is very simple, for this we will need to use the background attribute. This code looks like this:
...
When forming the background of a web page is betteruse such images, with which you can achieve interesting visual effects, but which would not interfere with the normal perception of the text. However, it should be borne in mind that, perhaps, you will have to change the size and color of your font to make it easier to read.
Sometimes it is necessary that the picture is next totext that would bend it in one way or another. But if you insert a picture just inside the line, then graphically it will look ugly, the text will be broken inaccurately. So how do you insert a picture in HTML so that the image fits seamlessly into the design of the page? To do this, we need the align attribute of the tag. This attribute can take two values: left and right.
If you use the value left, the image will be placed to the left of the text, and if you use the attribute right, respectively, on the right. This code looks like this:
or
If we want the text to be located between two images, the code will look like this:
And after this code will be placed the text, which should be concluded between these two pictures.
Images allow you to diversify the site, makeits brighter, more attractive and more memorable, but do not forget that too many pictures will slow down the loading of the site and will distract from the text.
