How To Place A Picture

Table of contents:

How To Place A Picture
How To Place A Picture

Video: How To Place A Picture

Video: How To Place A Picture
Video: MS Word - Insert Pictures 2024, November
Anonim

Pictures, like all other elements of a web page, are displayed by the browser in accordance with the detailed instructions sent by the server. These instructions are written in HTML (HyperText Markup Language) and consist of “tags”. Tags describe the type of all elements of a web page, their location and appearance.

How to place a picture
How to place a picture

Instructions

Step 1

First you need to upload the image file to the server. This can be done using FTP (File Transfer Protocol) through a special program. These programs are called FTP clients - for example, Cute FTP, WS FTP, FlashFXP and others. But you can download it through the file manager, which should be in the control panel of the hosting on which your site is hosted. The file manager allows you to upload files through your browser.

Step 2

After that, you need to put the corresponding tag in the html-code of the desired page. That is, you should find this page and open its source code for editing. If you have a page file, then you can open it with a simple text editor - for example, standard Notepad. And if you use any system to manage the site, then in the administration panel of this system, find the page editor and open the desired page in it. After that, it remains to insert the image tag in the place you need on the page and save the changes.

Step 3

More about the tag itself - in its simplest form, it can look like this: The tag contains various additional information - "attributes". There is only one required attribute for the image tag - src. It tells the browser the address where it should take the file containing the carnink. If this file is on the server in the same folder (or subfolder) as the page itself, then it is enough to specify only its name or the path to the subfolder. Such addresses are called "relative". And an absolute address might look like this:

--Another attribute - alt="Image" - contains the text that appears in the tooltip on mouse hover: The other attributes - title do the same thing: - Two attributes - width and height - set the size of the rectangle in which the browser will display the image: These attributes are not required, but if something goes wrong and the image is not able to load, then all the other elements of the page may be out of place, since the browser does not recognize the dimensions that the image should have occupied. Dimensions are specified in "pixels" - this is the main unit of measurement used in page layout. - The border attribute sets the width of the border around the image (in pixels): If an image is made a link, the browser will draw a blue border around it by default. To get rid of it, you need to set the border value to zero: - Two attributes set the indentation of the picture from adjacent elements (for example, from lines of text) - hspace sets the horizontal indentation (left and right), vspace - vertically (bottom and top): - These are the most commonly used attributes, and there are over 50 of them for this tag!

Recommended: