HTML pictures - a cheat sheet for beginners

Send

Last time we looked at the withdrawal option. images from a folder in PHP.

From the above example, we realized that the image is displayed on the page using HTML tags.
And the dimensions of the picture, we registered directly in the HTML code.

Now I’ll show you how to set the image size using the stylesheet. All this data will be placed in a separate file with the css extension and name it as an example style.css.

Image dimensions are set by the width and height parameters.
In order to set the dimensions for the image and register it through the CSS file, you need to create a class for the src tag. For example, write>

Then in the css file the dimensions will be written this way

With this recording option, if the actual image height is more than 170 pixels, for example, 400 pixels, then a distorted image will be displayed on the page. It will be flattened.

In order to avoid this, you can set only one parameter, the image width, the default height will be set without automatically violating the image proportions:

In the same way, you can set the height height, then the width will be set automatically maintaining the image proportions.

If we want to see the actual size of the image, then it is not necessary to specify the size of the image in the file. Only if we approximately know that the image size occupies the entire page, then there should not be any tags on the page specifying the size.

For example, a table

or block div

If we want the picture to occupy the entire width of the browser page or the entire width of the site column, then the width must be specified in percent.

In this way:

In this example, we looked at the option of setting image sizes using css. But in fact, with the help of the css file all parameters are set for the design of the entire site. It contains all the parameters for sizes, appearance, for all menu items and so on.

For web designers, it’s bad form if styles are attributed in HTML format. Only classes and id for each element are registered in the template. And all styles are taken out in a separate css file.

In addition, if you want to create a surprisingly beautiful and unique design of your site, then you can not do without a background image. How without it? How to do this is described in this section, and where to place the background image itself can be found right here.

And if you have any opinions about the read comment form below.

How to embed image in HTML?

To insert an image into an HTML page, a single simple tag is used:

where xxx is the image address. In the event that the picture is in the same directory as the page, the tag will look like:

However, high-speed and stable Internet access has not yet reached all corners of the globe, and it happens that the image on the website simply does not load. For such cases, there is the concept of alternative text.

It is shown on the site of the picture at the time of its inaccessibility, loading, or in the browser mode "without pictures". It is added using the alt attribute of the tag.

An example of adding alternative text to an image file:

HTML image sizing

In order to change the display size of an image file, use the height and width tags, where height is the height and width is the width, measured in pixels.

When using these attributes, the browser first allocates space for the graphic content, prepares a general page layout, displays the text, and then loads the picture itself.

The picture is placed in a rectangle with the given sizes, and in the event that the parameters are smaller or larger than the original, the picture is stretched or compressed.

If the height and width attributes are not used, the browser loads the image immediately, delaying the display of text and other page elements.

These parameters can be specified both in pixels (the image size is constant and does not depend on the user's screen resolution), or in percentage (the image size depends on the screen resolution).

It should be remembered that at the moment when you change the original size of the image, you must keep its proportions.

To do this, just specify the value of only one of the parameters (width or height), and the value of the second will be calculated automatically.

HTML image layout

As with many HTML tags,

Image link

In HTML, to create a link, use the tag:

In order to set a graphic link, you just need to combine the image tag with the link tag.

This is done as follows:

As you can see, the graphic insert can be a link and redirect to any address recorded in full or shortened version when clicked.

How can I make a picture a background in HTML?

The image can not only be inserted into the page as a visible object, but also set as a background. To define a picture as a background, it is necessary to specify the attribute background = ”xxx” in the tag, where xxx is the address of the picture specified in the same way as in the examples above.

For an example, we will set such a texture image as a background image: