Inserting an image into HTML. Insert a graphic file into a web page
Inserting an image
An unpaired tag is used to insert an image into an html document
, which is placed where the image is to be inserted. This tag has a required parameter src, the value of which indicates the path to the desired image in the directory of your site.
For example, to place an image on a page:
the line is placed in the right place in the document:
This makes the browser understand that in root directory site www.mysite.com there is a subdirectory img 1.png
Here we have specified the full path (or absolute address) to the image. And you can specify relative address Images:
The browser interprets such a line as follows: in the directory where given html document, there is a subdirectory img, it contains an image named 1.png, which should be placed on the page.
And here is an example of specifying the relative address of an image if your site has a more complex structure and the previous example does not work:
The browser interprets such a line as follows: a combination of characters ../ means that from the directory where the given html-document is located, you need to go up one level; and then as in the previous example: in the directory where we ended up there is a subdirectory img, it contains an image named 1.png, which should be placed on the page.
For security reasons, it is preferable to indicate the relative address of the image, unless you place an image on your page that is located on another site.
Image dimensions
The size of each image is set by two parameters: width and height. Tag
there are corresponding parameters: width and height... These parameters take values in pixels (px).
You can ask true dimensions Images:
This is optional, but useful because slightly speeds up the process of loading the page by the browser (the browser does not have to calculate these values on its own). If the dimensions of the image are immediately set in the parameters of the tag
, then a space on the page will be allocated for this image, and the structure of the page will not change when loading - the text will jump, for example.
Or you can enlarge or reduce the image by assigning the parameters width and height other values. Moreover, if you want to proportionally change both parameters, it is enough to specify the new value for only one of them, and simply omit the second. The browser will calculate it automatically.
For example, to enlarge our image by 1.5 times, you can write:
or
The result will be one:
More parameters width and height can take values in percent. But! Note that this is a percentage of the size of the browser window. In this case, you can also specify only one parameter, and omit the second.
For example, if we want the image to occupy exactly half of our page in width, we need to write the following:
And we get:
Frame around the image
Tag
there is one more optional parameter border... It can be used to set the thickness of the frame around the image. By default, the thickness of the image frame is zero, i.e. no frame.
For example, this is how you can add a 3-pixel border to our picture:
Here's what the browser will show us:
The color of the border matches the color of the text on the page set using the parameter text tag (See Lesson 6. Page Properties - Body Tag Parameters), by default it is black.
And if you don't want to see the frame, force the parameter border null value:
Alternative text
Alternative text displayed by the browser in place of the picture until it is loaded. Or instead of a picture, if for some reason it was not displayed.
When and if the picture was loaded, alternative text will be shown when you hover the mouse cursor over this very picture.
To add alternative text, use the parameter alt tag
to which a string value is assigned, which must be enclosed in quotation marks.
You can create multi-line alt text.
To do this, just insert a line break in the html document.
Image alignment
For an image, as for a paragraph, there is the concept of alignment with respect to text and other images on the page. You can also set the type of alignment using the parameter align tag
.
Below is a table of possible parameter values align:
Options texttop, top, middle, absmiddle, baseline, bottom set the vertical alignment of the image. And the parameters left and right let the browser know which side the text should be wrap around image.
Padding around the image
To prevent text from flowing close to the image when wrapped, you can set padding around the image. This can be done using parameters hspace(left and right padding) and vspace(top and bottom padding) tag
.
V following example the case is demonstrated when the text wraps around the image, while the image is aligned to the left and has padding around equal to 5 pixels:
In the city of Stockholm, on the most ordinary street, in the most ordinary house lives the most ordinary Swedish family by the name of Svanteson. This family consists of the most ordinary dad, the most ordinary mother and three most ordinary guys - Boss, Bethan and the Kid.
Here's the result in the browser:
In the city of Stockholm, on the most ordinary street, in the most ordinary house lives the most ordinary Swedish family by the name of Svanteson. This family consists of the most ordinary dad, the most ordinary mother and three most ordinary guys - Boss, Bethan and the Kid.Splitting an image into parts
There are times when it is necessary to place on the page big picture... But then the page will take a long time to load. What to do?
One of the possible
ways out of the situation - cut the image into parts and place it on the page using a table. And for the image to look as a whole, it is necessary to remove the border from the table and all indents inside and between the cells. Those. assign corresponding tag parametersnull values: border = "0", cellspacing = "0", cellpadding = "0".
In the following example, we have split the image into 4 parts. This is what the table will look like:
And here's the result:
When surfing the Internet, of course, you see on many sites various pictures, banners, photographs, graphic images... Today we will learn how to insert images into an HTML page.
Adding an image takes place in two stages: first, it is prepared graphic file the right size and format, and then it is added to the web page via the tag:
... The HTML document itself is intended only to display the required image, while without changing it in any way.
There are a few things to keep in mind when preparing images.
1. Since a web page is loaded over the network, a significant factor is size ("weight") of the graphic file embedded in a web document. The smaller it is, the faster the image will be displayed.
2. Quite often, the physical dimensions of the image (width and height) need to be limited (reduced) in width and height. For example, set the width to no more than 700-800 pixels. Otherwise, the entire image will not fit in the browser window, and scroll bars will appear.
Graphic formats for websites
There are two main formats most widely used for web graphics: GIF and Jpeg... Such qualities as: multifunctionality, versatility, small volume source files with sufficient good quality have served these formats well by defining them as the de facto standard for web images.
There is also a format: PNG image which is also supported by browsers when adding images and comes in two flavors: PNG-8 and PNG-24. However, the popularity PNG format much inferior in recognition to the GIF and JPEG formats.
Usually for images (pictures) create separate folder in the root directory and put all the images for the site into it. Sometimes there are several such folders (if the site structure requires it or it is easier for you to navigate). This folder is most often called: img or images (Images). In the code of the web page, the full path to the graphic file (where the image is located) is prescribed, as well as the name of this file(pictures) that you want to insert into the html-document.
Writing the code to insert an image into a web page
To insert images into an HTML document, the construction specified in Listing 8.1. This code is inserted in the desired place on the web page (where you want to see the picture).
On our car we page, I have prepared and inserted two images. You see the embed code for the first image in Listing 8.1.
Listing 8.1.
This is what the first inserted image on the website's web page will look like:
And now I will comment in more detail on what is written in Listing 8.1.
The image itself is "inserted" using the tag: img src... The entire record looks like this: img src = "img / mers1.jpg", where "img / mers1.jpg"- indicates that our picture is in the folder: img, and the name of the graphic file (picture): mers1.jpg.
In principle, this is already enough to insert an image on a web page, the rest of the parameters are optional, but still, I recommend always prescribing them, otherwise the picture may undergo geometric distortion.
Let's take a look at additional options:
border = "0"- indicates that there is no border around the image, try changing 0 to another number, for example 1 , - corresponds to the thickness of the frame around the image in 1 pixel, 2 - corresponds to the thickness of the frame around the image in two pixels, etc.
Important! If you plan to make an image a link, be sure to specify the value: border = "0".
width = "400"- indicates that the width of the image is: 400 ppi(put a real number for the width of your images).
height = "209"- indicates that the height of the image is: 209 ppi(put a real figure for the height of your images).
If you do not specify the parameters: width and height, then the image may get geometric distortion.
hspace = "20"- indicates the indentation of the text around the image by 20 pixels.
align = "left"- this is a tag you are already familiar with ... .. That's right, it denotes left alignment, it can also take on the value: right- right alignment.
alt = "(! LANG: Car front view" !}- here the alternative text is written, which is highlighted when you hover the mouse over the image.
In the same way, we will "insert" the second image into the web page, with the only difference that it will be right-aligned.
Comments on this article (lesson):
Please tell me where exactly should you create the img folder?
The img folder is just a conventional name, you can call it whatever you like, so long as you understand it yourself later. You can create it anywhere, for simplicity, create it in the root directory and put all the images there.
The fact is that the picture is not displayed, only the inscription. What can be wrong? Thanks.
Look closely at Listing 8.1 above. Take it entirely to you. In the root directory (where all the HTML files of your site are located) create an img folder. Place all your images in this folder. In the listing, change mers1.jpg to the name of your file. Change the width and height values to real size your file. Good luck.
Thank you very much, everything worked out.
Hello. I have the same situation as the previous speaker: I write the code like yours, I change only the name of the file: instead of mers.1 / jpeg I insert a bunch of Mercedes / jpeg. Only a window appears on the page with the inscription "Front view of the car" on top, and there is no image. In my opinion, the browser cannot find the path to the photo or it is not correctly registered. HERE IS MY CODE:
b
Look closely at your img / mercedes / jpeg code. You understood correctly the browser does not find the path to the graphic file. 2. The file name is incorrect, see how I have mers1.jpg
Well, I copied the code and pasted an oval without a picture in the oval at the top there is a link!
Hello! The problem is the same, I created a folder called img in the same place as the site documents, images with the name 1.jpg are saved in this folder, I write everything as in your example.
If you noticed my picture is in the img folder
A very useful article for novice "webmasters". The only caveat is for the "alt" attribute. With regard to the figure, the article gives the following interpretation: "alt =" (! LANG: Front view of the car" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}
here is my code
SO WHY DOES THE PICTURE BECOME SIDE WHEN THE TASK IS FOR HER CENTER?
And if I take an image from someone else's site, will it not be a copyright infringement?
Explain why when laying out HTML document to server in place of images empty spaces in frame. Although before the release, the images were just right.
Dmitry, miracles do not happen, you made a mistake somewhere, check all the paths to the pictures, i.e. how the pictures are written in the code.
this is my code, the page shows everything except images, I'm whole day trying by any means but no way. please tell me what to do
AndreyK, please pay attention to my letter. I can not insert the image in any way, I enter everything correctly, but in no way, only the frame and the inscription are revealed
Elvira, I have read your letter, as well as all the other comments and letters. But the answer is where ... to the village grandfather ???
I don’t know why everyone has a steam !? you just need to not copy the codes, then paste, but write them yourself and the mustache will work .. here is the text of my picture
I copied your listing, pasted my values, there is a picture. Then I drive in the same (manually) picture below, no, what a miracle?
AndreyK please tell me where is the error?
how many tried it does not work ((
Andrey, tell me why you can't see the picture. My code:
There is an inscription, no picture. My address: [email protected] Thanks.
I also suffered for a long time, but it worked! Indeed, the imj folder must be opened in an HTML document.
I will definitely try, thanks
andiiiiiiiiuuuuuuu krrrrrroshi my
also suffered for a long time, it turns out that the folder with pictures should be in the same place as index.html, thank you Elena
Andrew, I insert:
Andrew, I insert:
my code ... no picture either. The img folder is in the same folder as index ... help, please. [email protected] Thanks!
Well I do not know. I read all the comments. I tried everything. I copied and pasted my data. Nothing works. The folder with pictures (img) is in the same place as index.html. But there is no picture. Instead, a red cross and an inscription. I work in the IE browser. Here's what I entered:
I looked at the HTML code of the page in place of the photo in the lesson:
The code on the page is different from the code in the listing. Why? and by the way on the page the code "mers1.jpg" is underlined. Failed to copy with underscore. I tried to insert it like that. There is no picture anyway. What's the matter?
We ask ourselves, and we ourselves answer. The picture was not inserted for a long time. It turned out: 1, instead of the src tag, I had srk 2. got confused when I made the path to the picture. Renamed the folder to IMG and everything worked out. I spent almost two days on it, but it was worth it.
Love, but now you will remember this for the rest of your life :) just kidding, of course, do not be offended. But seriously, if a person does not leave a return address, then it is almost impossible on my part to help him.
Hello and tell me how to place one image on top, the second below the left, and the third from the bottom right))))
........... what is my mistake of missing an image?
Everything is correct in the code, if nothing is messed up everything should work. But the name of the file (picture) write English letters... Many servers do not accept the Latin alphabet.
But here's the strange thing ... while she called the folder by different names, the picture did not want to appear, although the path was spelled out correctly. As soon as I called IMG, it immediately appeared. What's the catch?
Marina, there is no catch or provocation :). Into the code in Listing 8.1. it is indicated that this image is in the folder: img. If you change the name of the folder for images on your host, then change it in the listing, that's the whole trick.
I am trying to insert an image !!! I prescribe everything through a notebook, I'm doing everything right, maybe it's not worth it through a notebook?
And I open everything in the mozilla fire fox last))
The path of my picture and C: Documents and SettingsdenisDesktopkoffevinogradwwwImg and the picture itself is named gif too 1.gif is included in the name ... I do this in notepad
cool site did and the full path does not come out of the moss does not see the photo of the expoler with a red cross highlights
Denis, rename the Img folder to img, i.e. all in capital letters, and rename the path to it too. Many servers do not display uppercase correctly.
I still have the same question: why not images, but only an inscription. I created a separate folder for the site: it contains a Web page and a picture. Inserted:
HELP WHAT IS THE ERROR MY MAIL: [email protected]
How to make a picture so that it can be enlarged or reduced?
For some reason, it does not center the picture either. What's the catch? .. The code is:
The tag is responsible for inserting pictures into an HTML document.
and its attributes, the main of which can be considered src specifying the address of the image. It is required, because if you do not specify where to get the picture, the browser will not be able to know what to add to the page.
The simplest case for inserting a picture will look like this (the image is called image.png and is located in the same folder as the HTML document):
Previously, the tag
there was one more required attribute - alt but with the arrival of HTML 5 it was made desirable. alt sets the text that the user will see instead of the picture if it suddenly does not load. This attribute is also recommended by some SEOs, because it is believed that it has a positive effect on the promotion in search engines.
If you do not specify any additional attributes for the image, then it will be displayed in full size, and this is not always necessary. Fortunately, the desired size of the picture can be set using the attributes width(indicates the width) and height(determines the height). Dimensions can be written either in pixels or as a percentage. In the second case, the browser will calculate the percentage from the parent element (for example, the paragraph in which the picture is inserted).
Let's say we need to add an image to the page image.png with an alternative text "Just a picture", 420 pixels wide and 280 pixels long. The code in this case will be as follows:
Navigation map
We talked about how to make a picture a link in the previous article. However, HTML allows you to set more than one link on one image, but several at once. As a result, the user, clicking on different places of the same picture, will go to different Internet addresses. This feature can be used, for example, to create eye-catching menus, interactive tests, or visual graphical models.
To create an image map (this is what the described feature is called), you need the following tags and attributes:
- - the container inside which the image map is described.
- - tag inside describing one area of the picture. How many active areas you plan to divide the image into, so many elements and have to deliver. Bundle - works exactly the same as bundles
-
- and
-
- creating lists.
- shape- tag attribute specifying the form of the link. The active area can be in the form of a rectangle, polygon, or circle.
- cords- attribute defining the coordinates of the area. Also belongs to the tag ... For a rectangle, the coordinates of the upper left and lower right corners are specified, for a polygon - the coordinates of the vertices, defining a circle, you must specify the coordinates of its center and radius.
- usemap- tag attribute img that links the image to the map. Thanks to him, the browser understands that in the container the map of this particular figure is described.
Image map example
To make it clear how to use all of the above, I will give an elementary example. There is a drawing map.jpg... It needs to be divided into two active areas. Clicking on the upper part (green) will open the Odnoklassniki website, while the lower part (blue) will lead to VKontakte. Links should open in a new tab. To create a map, follow these steps.
1. Insert the image on the page and attach it to the future card (it will be called social), for which we write the following code:
2. Define the future active areas in the picture and their corresponding coordinates. This can be done in Paint, Photoshop or any other graphics editor. In our case, everything is elementary: the rectangles are equal in height (114 pixels) and in width (384 pixels).
3. We begin to create a map: open the tag and write its name in the name attribute, which must necessarily match the value of the usemap property of the image itself:
4. Using the area tags, we define the active areas:
5. Close the card:
The result of the work was a picture, clicking on different parts of which leads to the opening of different social networks, and this is the HTML code:
Navigation map 
