We add images to the WEB page, as well as video and audio! How to insert a picture into HTML - editing, alignment, attributes
It is difficult to find a website on the Internet that does not contain pictures, and this is not surprising, because they are the main part of the website design, which gives it a memorable look. A good website design is the key to its successful development. To display images in html there is only one tag
.
1. Tag syntax ![]()
Description of the image" src ="URL " [attributes ]>
Please note that this tag is single and does not require closing tag .
The src attribute is required. It is used to specify the address of the displayed image. You can specify an absolute or relative URL. If you do not specify the address or write it with an error, the image will not be displayed.
Attribute alt="description" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}
The remaining attributes are optional; we will look at them below. First, let's give a simple example of outputting an image to HTML.
2. How to insert a picture into html
To insert an image into html, use the tag . We looked at the syntax a little higher. Let's give practical examples.
Example 2.1. Using a tag ![]()
...
This code
In this example, we indicated the direct address of the image from the pictures on Yandex Photos. Most often, links are provided to pictures that are located at the same URL. For example, src="/img/kartinka.jpg", i.e. the relative address is indicated.
It is possible to place several pictures in a row. If they do not fit on one line, they will automatically move to the next one.
Example 2.2. Displaying several images in html one after another
...
Converts to the following on the page:
If we placed another image, it would be on a new line, since it would no longer fit in this one.
Example 2.3. Using alternative text (alt) in img
It is recommended to include alternative text (alt attribute) in the tag , to insure yourself against the case that the picture is not available. Below is an example using alt text. In the first case, we did not specify the size of the image, but in the second we do.
...
Converts to the following on the page:
If we placed another image, it would be on a new line, since it would no longer fit in this line.
Now let's take a closer look at all the tag attributes
.
3. Tag attributes and properties ![]()
1. Property align="parameter" - determines the alignment of the picture. This value also affects how the text will flow around the image. Can accept the following parameters:
- left - left alignment
- middle - align the middle of the image to the baseline of the current line
- bottom - align the bottom border of the image to the surrounding text
- top - the top border of the image is aligned to the highest element of the current line
- right - right alignment
Example 3.1. Aligning an image in html to the right
...
Converts to the following on the page:
2. Property alt="text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}
- Shows tooltip on hover
- If images are disabled in the browser, this text is displayed
This attribute is also very important when ranking images in Yandex Images and Google Images. It should be added to each image, since this is one of the factors in search engine algorithms.
Example 3.2. Outputting an image in html with a frame (border)
...
Converts to the following on the page:
4. Property bordercolor="color" - sets the color of the border that wraps around the image. Only makes sense if the border attribute is greater than 0.
Example 3.3. Outputting an image in html with a colored frame
...
The result can be seen just above.
NoteThe border and bordercolor attributes can be set in the CSS styles of the img:
...
5. Property height="NUMBER" - sets the height of the image: either in pixels or as a percentage. For example, if an image has a size of 400x200, and we specify a height of 150 pixels, then it is compressed to 300x150 (25% smaller), i.e. proportionally.
6. Property width="NUMBER" - sets the width of the image: either in pixels or as a percentage. For example, if an image has a size of 1000x800 and the width is specified as 1200 pixels, then it is automatically expanded by 20% to 1200x960.
7. Property hspace="NUMBER" - sets the horizontal indentation of the image in pixels from other html objects.
8. Property vspace="NUMBER" - sets the vertical space of the image in pixels from other html objects.
NoteInstead of hspace and vspace, I advise you to use the old and proven margin (you can read more about it in the lesson about describing html styles). Let me briefly remind you:
- margin-top: X px; (X - top indent)
- margin-bottom: Y px; (Y - bottom indent)
- margin-left: L px; (L - left indent)
- margin-right: R px; (R - right indent)
Set the indents from objects in pixels. Negative values are allowed. By default, it either inherits the ancestor's value or has a value of 0.
For example. The left padding is 50 pixels, and the top padding is 10 pixels.
...
Converts to the following on the page:
In this example, the indentation on the top was 10 pixels, on the left 50 pixels.
9. Property class="class_name" - you can assign a class to an image to set the style for all images of this class.
4. How to make a picture a link
This question arises among young webmasters. It's actually very easy. To do this, just frame the tag
tag (link).
For example
...
5. How to round the corners of a picture
Dear reader, now you have learned much more about the html img tag. Now I advise you to move on to the next lesson.
We hope that this article will be useful to you. Happy reading!
Images instantly let us understand how interesting a given site or article may be for us, they create a mood, and they can reveal a topic in a new way. Sometimes one photo is worth a thousand words.
But you shouldn’t partake of them if you don’t have Instagram or an online store. It is advisable that the images:
- were informative
- match the color scheme of your site
- were appropriate
If you do not have a suitable photo, you can use the so-called photostock (photobank) - a place where many photographs, illustrations and vector graphics are stored. There are a lot of such resources, you may have even heard about one of the largest - Shutterstock, but downloads there are paid.
For those who do not like to overpay, at the end of the article we have prepared bonus- a list of several photo banks where you can download a huge amount of high-quality beautiful materials absolutely free :)
Image formats
There are mainly 3 types of images used on the World Wide Web:
gif(Graphics Interchange Format - image exchange format)
This is the first format that began to be used on the Internet. The advantages of this format are the availability animations and small size, the page loads quickly. In addition, it supports transparency. Disadvantage - only used 256 colors(that’s actually why the size is small), i.e. it cannot be used for full color images.
jpeg, aka jpg(Joint Photographic Experts Group - Joint Photographic Experts Group - this is the name of the development organization)
suitable for creating full-color, high-quality images, photos. The size of such images is large, so they usually place a large load on the server. If you need to compress a jpeg (for a smaller image weight), we recommend taking the size of the final image multiple of eight , so the loss of quality will be minimal.
png(Portable Network Graphics - Portable Network Graphics. Pronounced the same way as ping, i.e. )
this format was originally developed for the web, i.e. The image usually weighs little and does not slow down the page when loading. This format was created to replace the outdated gif, but unlike it, it does not support animation. Png-8, like gif, uses only 256 colors. Format png-24 supports 16 million colors, although it’s already quite heavy. Png-32 contains the same number of colors as png-24, and plus it allows you to get an image with transparent background , and you can adjust the degree of transparency. When reducing the size of png there is no loss in color quality.
Let's summarize
gif- for animation
jpeg- for photographs
png- for icons, buttons, backgrounds, logos, screenshots, drawings, texts, photographs with a transparent background
Inserting an image into an html file
To add a picture to the page, use tag
(from the English image - image, picture). This is a single tag and does not need a closing tag. This tag contains attributes.
Attribute src(from the English source - source) indicates the path to the file (the place where the image is located). If the picture is on your computer (the site is still under development) or on your server, use a relative link. If the image is from the network, then an absolute link is needed. Read how to do this in the article "Links".
So, to connect an image to your web page, you need to write code like this:
alt attribute(from the English alternative - alternative) indicates the text that the user will see if the image does not load. The path is incorrectly indicated, the picture has been deleted, bad Internet - there can be many reasons, and it is desirable that the person understands what lies behind this hated icon.
Search engines pay close attention to ensuring that this attribute is filled out. And the html validator (a resource for checking code for correctness) will perceive the absence of the alt attribute as an error. If all the attributes
In the example below, we deliberately specified a non-existent path for the image so that you can see how the alt attribute works
Height and width of images
You can also set the height and width of the image if the original image is e.g. more than you need.
In HTML5 it is recommended to do this using CSS or style attribute
, like this:
In this example, we took 30% of the width, not of the original image, but of the browser window size. When width = 100%, the image opens to the full width of the browser. Remember this feature percent, as units of measurement.
By the way, if we had written only the width, the result would have been the same, try:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda in the tree" style = "width:30%;" > |
You can also set the width and height in pixels. In the case of our panda, whose original dimensions are 1196 x 796 pixels, so that the animal does not suffer when compressed, we need to maintain the proportions, and here you can’t do without a calculator. Let's say we want to reduce the size of the picture by 3 times, then we need to set the dimensions to 399 x 265 pixels.
Please note that if we enlarge the image proportionally, then it is enough to specify only one parameter, for example. width. The smart browser itself will calculate the full size of the image.
Try running this code and look at the result:
< img src = "https://site/tutorials/wp-content/uploads/2016/07/panda.jpg" alt = "panda in the tree" style = "width:399px;" > |
Always set the image dimensions. Typically, images take longer to load than the rest of the html code. If the browser knows how much space to reserve for images, it can continue loading the site without waiting for the images to load.
A little mothball
If you happen to tinker with the code of a site created in HTML-4 or even earlier, you will notice that image sizes are set using special width attributes And height. This is a deprecated method, although still valid in HTML5. However, we recommend using style, because... The width and height attributes can be affected by internal or external styles that will live in the browser or your CSS file. We'll go into more detail about this when we look at CSS, but for now just look at an example of how styles affect the height and width attributes.
There are 3 tabs in this window: on the first you see the html code, on the 2nd CSS code, and on the last - as always, the result. This works as if the first tab were an index.html file, the second a style.css file, and the third a browser. So, now our CSS says that all elements with the img tag have a width of 100%. The default sizes of the width and height attributes are in pixels, so there is no need to add any units here.
The difference in results is obvious :)
Also in older versions of html the following attributes were used:
align, which was used to align the image horizontally or vertically.
hspace- indentation on the left and right of the image to the surrounding content (for example, text or an adjacent image)
vspace- indentation above and below from the image to the content around it.
border- set the thickness of the frame around the image (by default it is zero)
Nowadays, all this manipulation (and much more) is done using CSS, so we decided not to bother you with it here. If you are still interested in how to work with these attributes, write in the comments, we will add this item :)
Placing an image in the code
From where we place our tag depends on how it will be displayed in the browser.
Example No. 1 - before the paragraph:
Elements such as
AND
refer to block elements
. They always start on a new line and occupy the entire available width of the browser window. If you first place ![]()
, and after it a block element, for example a paragraph, it will be moved to the next line.
Example No. 2 - at the beginning of the paragraph
This is an inline element, it fits inside a block element and does not start a new line. In the example above, the text wraps around the image because the code
registered inside
Captions for illustrations
To mark or sign a photo on a page, use tag
Tag
Please note that by default the browser has some style settings for the tag
So, you and I have learned
- add an image to the page: using tag
- learned the required attributes for this tag: src to indicate the path and alt to describe the picture
- understand which format is better and what to use: jpeg for photographs, png for logos and screenshots, gif for animation
- how best to set the dimensions of the picture: using style attribute with parameters width And height
- We figured out how the image will be displayed depending on the place in the code: separately if in front of a block element and with a wrap if inside a block element (for example
)
And in order for us to have something to work with, we need to take these images from somewhere, without violating anyone’s copyrights.
So it's time for a bonus :)
List of free photo banks
Before we begin, please note that each screenshot here is a link to the site. How to make images as links, read the article "Links".
On pixabay you will find 680 thousand free images on any topic, which are distributed under the Creative Commons CCO (CC Zero) license, i.e. they can be used, distributed, modified for any purpose, even commercial.
The photo bank contains 390 thousand free photos and pictures. It’s harder to find a cool image here, but there are also good examples. The advertising of paid photo banks is quite distracting. We put this resource in second place due to the number of images, but in terms of friendliness it will probably be last in our ranking.
Photostock has more than 250 thousand free photos, mostly of high quality. You can download even without registration. Available in English only.
Lots of stylish photos licensed under CC Zero. You can download without registration. This photo bank will also understand you only in English.
The site was created by an Indian web designer who understands how difficult it can be to find high-quality photos. All photographs were taken by him personally, and you can do whatever you want with them. Likes to photograph food, desktop, computers and all sorts of objects. Search - only in English.
26.06.2015
Hi all!
We continue to diligently study the basics of HTML.
In this lesson I will tell you, how to insert a picture in HTML-document, how to make a picture as a background, picture size, text wrapping around a picture, how to align a picture. I will support all the listed possibilities with examples and results.
So, images on web pages can be either background or regular. What's the difference between a background image and a regular image?
Background image placed as a background on top of which you can insert other pictures, text, tables, etc.
Normal image
will push away other elements of the page (other pictures, text, tables, etc.). Using the example, you will then see and understand everything.
For web pages, it is recommended to use JPEG (JPG), GIF and PNG image formats.
○ How to make a picture as a background inHTML
To make a picture the background for a tag
you need to specify the “background” attribute:
Now let's look at the full example. Insert the image file “fon.jpg” next to the HTML file.
and insert this code into the HTML file:
Jpg">
The result will be like this:
Attention
Wrong name:
Correct name:
○ How to insert an image intoHTML
To insert an image into an HTML document, use the tag with the “src” parameter, which specifies the path or address to the image.
Now let's look at the full example. Insert the image file “kartinka.jpg” next to the HTML file and write this code in the HTML file:
Hello, this is my first page on the site.
The result will be like this:
Attention: The name of the picture must be written in Latin, otherwise the picture will not be displayed.
Wrong name:
Correct name:
I think you have understood everything up to this point. Now let's try to combine the two examples together. Let's create a background for the web page, insert an image and text.
Jpg"> 
○ How to insert a picture if it is in the folder "img" or "images"?
If the picture is in the “img” or “images” folder, then you need to specify the path from the HTML file to the “img” or “images” folder, and then just enter the name of the picture with the extension. It will look like this:
If the picture is on another site or blog, then you need to indicate the site address and, if necessary, the folder where the picture is located. Well, of course, you need to indicate the name of the image with its extension.
Previous post
Next entry
Good day to everyone, my dear friends, readers and guests of my blog. It’s like you’re on vacation, but you don’t have enough time for anything. Everything is somehow in a hurry. But this phenomenon is temporary, everything will settle down soon. And today we will continue to learn the basics of html. Friends, what do you think, without which any Internet page will be faceless, gray and boring? That's right, without graphic content, be it photographs, logos or backgrounds.
So, inserting a picture into html is also one of the most important components, so anyone who is going to make websites on their own should definitely know it. This is exactly what we will do today with all this bacchanalia)))
Well, let's get started. As you already understood from the title, the tag is responsible for inserting the image , but it has two nuances:
- The tag is single, so there is no need to close it
- The tag always works in conjunction with the attribute, which specifies the path to the image.
In general, let's look at an example to consolidate all this action. Am I right? Download the lesson materials and open the html file in Notepad. And now before the main text write the following:
All. This short entry will provide us with a picture on our website. Try writing it in a document.
Now save the file and run it in your browser. Let's see what we can do. I did it like this.
Attributes
As I said above, the img tag immediately comes complete with the src attribute. Well, I think you already understand this, so let's study the rest. There is room to expand here. There are just a ton of attributes here. Pardon my French).
Alt
If suddenly the picture for some reason has not loaded or is inaccessible, you will see the text that was written in the value of the Alt attribute. Usually what is written here is what is shown in the picture, i.e. if something about nationalities is depicted, then in the alt it is best to write “Men and women of different nationalities.” In an example it looks like this:
As a result, if the picture for some reason cannot be displayed, then our inscription will appear.
In principle, you don’t have to enter anything at all as an alternative text, but it’s better to leave the attribute itself, even if it’s empty.
Width and Height
For those who know English, it is not difficult to guess that these two attributes are responsible for the width and height of the image. I decided to combine these two things into one item, since they perform similar functions, one might say - brothers (or sisters).
Width is responsible for the width of the image, and its values include the size itself. In general, if you have an image, for example, 640*480 pixels, and you need to display it on a 320*240 website, then you will simply need to do the following:
All. Now, when you save the document and open it using a browser, you will see a thumbnail image. Note that we only changed the width parameter, and the image was reduced proportionally, i.e. the height decreased automatically.
Height , as you might guess, is responsible for the height of the image. Here everything works exactly the same, but vertically. Let's take the same picture, but we won't set the width, but set only the height.
Save and go to the document. As you can see, the image has been reduced to the same size as in the previous example, although this time we only set the height. You already understand that everything here operates within the framework of proportions, so in principle there is no point in setting both parameters.
Let’s try, just for fun, to set the attributes of both width and height at the same time, but we’ll just give them disproportionate parameters. Well, then we'll see what we can do.
We save and now look at what was given to us. Hmm, this is something disproportionate). In general, I think you get the gist of it. Practice a little yourself to consolidate the work with dimensions, and then move on to the next attribute.
Align
Well, you are already familiar with this attribute from that article, when we actually went through it. And you probably already guessed that he is responsible for the location of the image.
There are a total of five parameters for align:
- left — left alignment
- right — right alignment
- middle - align the image to the baseline of the line (you'll see what this means in the example)
- top - the top border of this image is aligned in height with the tallest element in the given row
- bottom — align the bottom border of the image to the text
Well, let’s not list it here, but according to tradition, I’ll show everything with an example. Download the finished html document from here and open it. There you will see 5 identical paragraphs. Insert pictures with the described attributes there:
Well, now we save our document as usual and see what we got. Well? Do you see the difference? Now you know how these parameters differ).
Border
The border attribute is set to indicate the thickness of the frame on the image. And the larger it is, the thicker the frame accordingly. Try adding this attribute to a picture, but constantly change its value and you will see for yourself how much thicker the frame becomes.
Hspace and Vspace
Well, let’s look at the latest attributes of the img tag for today. Space (English) is translated as space, space, space (key), etc. The prefixes H and V mean horizontal and vertical. There shouldn't be any questions here.
So what do these attributes do? They set the vertical and horizontal margins from the image to the surrounding text (or other content). That is, if you don’t like the picture to be too close to the text, then you can increase the distance between them. Let's see what this looks like with an example.
Do you see? The margins have increased both vertically and horizontally. This is what we wanted.
By the way, you can also insert these pictures as a header for websites, make pictures as links, etc. I talked about all this in.
Well, in general, I seem to have everything. I've told you the basics of inserting images, but if you want to learn HTML and CSS like a pro, I highly recommend you download amazing course on this topic, where thanks to this markup language and cascading style sheets you can easily create three types of sites: business cards, blogs, online stores. Everything is told in simple and understandable language. It's just a bomb!
Well, I say goodbye to you for today. In just a couple of lessons, I plan to give you the last lesson on the basics of HTML, after which we will consolidate all the knowledge we have acquired in practice and create a simple three-page website. In general, everything will be cool)
Well, in order not to miss all the most interesting things on my blog, be sure to subscribe to article updates. And of course, look at other articles. I'm sure you will find a lot of useful information for yourself. Good luck to you. See you in other articles. Bye bye!
Best regards, Dmitry Kostin
Next, we’ll look at how to insert a picture into an HTML document and configure its display. To work, you only need the above-mentioned editor and browser.
If you still don’t have Notepad++ or have a problem downloading it and you are tormented by the question - how to insert a picture into html in notepad?
The answer is simple, working in a regular notepad differs only in that it does not highlight the code in different colors for readability and separation of the code from the text itself.
How to insert a picture into an HTML page
After installing the editor, the corresponding item will appear in the context menu that appears when you right-click on any file.
Now, to edit such a file, just call up the context menu by right-clicking on it, then “Edit with Notepad++”.
A test page will be used to observe the results of changes in the code.
To insert a picture into the html code, use a single line tag img. Its main attribute is the source of the photo.
This can be any file, on a hard drive, or a link to an image existing on the network. Framed with tags <
p> p>.
To add a photo, you will need to enter the following line:
This is how it will look in the editor:
And this is how its presence will be displayed on the page:
Src indicates the source of the image. One file name is enough if the image file is in the same directory as the html document.
If the photo is located in another directory, then you will need to specify the path to it, starting from the folder in which the html file is located.
Advice! It is important to consider that the path to a given photo file should not contain Cyrillic characters. In addition, when writing a file name, case is important.
You can use an illustration from the Internet as a source. To do this, you only need to indicate a link to it in the attribute, instead of the location on the hard drive.
File path format table
To resize an image you will need to add two attributes: width And height. The value is formatted in the same way as for any attribute.
After the equal sign, you must specify the size in pixels.
If there are clearly defined dimensions of the illustration, it will be displayed on the page as follows:
Aligning and editing a picture
How to insert a photo in html in the center? To assign the position of the picture on the page, use align, related to the tag p.
Several values are allowed for it: center(center), left(left edge) and right(right edge).
Here's what the image looks like on the page, centered to the right edge.
Important! To assign the location of the photo relative to the text, rather than the page, the align attribute must be used in the img tag. The values are the same as for the tag attribute.
Depending on the specified value, the image will change its position relative to the text.
To place an image in the text, just enter the tag img(with all borders) in a text block in .
To add a border, use the border attribute with a numeric value that indicates the thickness of the border in pixels.
To set vertical and horizontal indents, use vspace And hspace. Their numerical value means the distance from the text to the image, directly in pixels.
In the example, the attribute vspace the value is set to 50 pixels.
The horizontal padding size will indicate the distance at which the text will be placed when wrapping around the image.
Two more useful attributes - alt And title. The first one sets alternative text for the image.
With it, if the image does not load for some reason, the text specified in the attribute value will be displayed instead.
In order to try out the capabilities of the attribute, you can move the file from the directory specified in the code.
Text specified as attribute value title, will display a tooltip when you hover the mouse directly over the image. In the code, its design is no different from other attributes.
After refreshing the page the result will be like this:
Tag Attribute Table img
| Description |
|
| src=”” | Image source identifier. It can be used either saved on the hard drive or located on the network (the address is indicated instead of the location on the hard drive). |
| width=""; height=”” | Image height and width indicators. If only one is specified, the second one is automatically scaled according to the first one. The numeric value indicates the number of pixels. |
| align=”” | Attribute for the position of the image relative to the text. Valid values: top,middlebottomleftright. |
| border=”” | Assigns a border around the image. The numeric value corresponds to the thickness of the frame in pixels. |
| vspace=""; hspace=”” | Indicators of indentation from adjacent elements vertically and horizontally. The value specifies the number of pixels between elements. When wrapping text, the attribute specifies the distance to the text. |
| alt=”” | Assigns an alternative description in case the image for some reason did not load. The value is arbitrary. |
| title=”” | Sets the hover tooltip text. The value is arbitrary. | vote[s]
