How to upload an image to html. We add images to the WEB page, as well as video and audio

This makes it possible to display the contents of another page within one page. For example:

Most of the images that a person sees on websites are also content from another page. Here, in particular, is the address of the emoticon in .gif format:

Here are ways to add a picture to a site, which can be highlighted if you look at the page code:

HTML: tag
http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif" alt="smiley" height="30" width="30"> !}
CSS: properties and
CSS: pseudo-elements and
HTML: tag vector graphics
CSS: no URL

How to find out the address of a picture and copy it

There are several ways to copy the image address:

1. Hover your cursor over the photo and click on right key mice, in the appeared context menu You will be prompted to copy the URL and click on the required item.
   Fig.1 If you point at the photo and click on the right mouse button, then Mozilla Firefox A context menu will open with the following items
2. Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to study the characteristics of the photo, click on the required item (in Fig. 1, see the “Image Information” item; in Internet Explorer see “Properties”), in the window that opens, select the address of the picture,
   • Right-click on the mouse and click on “Copy” in the context menu that appears.
   
   Fig.2 If you point at a photo in Mozilla Firefox, right-click on the mouse, select “Image Information” in the context menu that appears, a window will open where you can see a list of pictures used on the page, their address, alternative text (content V alt attribute), actual size and scale used
3. Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to go to the picture page, click on the required item (in Fig. 1, see the “Open image” item). A page will open containing only one image. To its full height, if it was previously reduced with the help or with using CSS. Select the address of the page that opens in address bar browser,
   • press a key combination keyboard Ctrl+C.
   
   Fig.3 This is what the emoticon page looks like.
   Her URL: http://photos1.blogger.com/x/blogger2/6533/16720282190093/320/140728/plain.gif
4. On touch devices(smartphone, tablet) hold your finger over the photo for a long time without moving, in the context menu that appears you will be asked to go to the picture page, click on the required item (it may be called “View picture”). A page will open containing only one image. At full height if it was previously reduced in size using or using CSS. Then long press on the address in the browser address bar. After the sliders appear and the entire URL is selected (if necessary, the sliders can be moved to the required distance), click the “Copy” button in the appeared panel.
5. Hover the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to go to the page background image, click on the required item. A page will open containing only one image. Full height if it was previously reduced using CSS. Select the address of the page that opens in the address bar of the browser (see Fig. 3),
   • Click on the right mouse button and select “Copy” in the context menu that appears.
   • Press the keyboard shortcut Ctrl + C.
   
   

How to save an image

Place the cursor over the photo, click on the right mouse button, in the context menu that appears you will be asked to save the picture, click on the required item (in Fig. 1, see the item “Save image as...”), in the window that opens, select a folder on your computer, where the drawing will be saved.

If the photo is a background image, then you must first go to the image page (see Fig. 3).

How to add a picture to a web page

First, the image must be uploaded from your computer to the site hosting, in social network(In contact with, Google+ etc.), Yandex.Disk or Google.Disk, so that the picture has its own address on the Internet.

If there is a visual editor, then the sequence of actions is usually as follows:

1. place the mouse cursor in the place where the photo should appear,
2. click on the icon similar to or to,
3. select a file from your computer,
4. if possible, fill in the alternative text (aka image description).

Result: the image will be inserted onto the site page, and most importantly, uploaded to the web project server. She will now have her own address on the Internet. And now you can edit the code provided by the visual editor on the “HTML” tab, since the visual editor often adds unnecessary tags, and the capabilities of HTML and CSS are incomparably greater.

If there is already a URL, but from another little-known site, then it is still better to save such a photo to your computer and then upload it to the site server, if this action permitted by the owner of the photo, so as not to violate copyright, since

• Some sites may prohibit the use of image addresses on other resources (read more about prohibiting hotlinking).
• sites are short-lived and after a while with the deletion of the web project, the picture on your site will also disappear, leaving in its place best case scenario Alt text only.

If not visual editor, then the sequence of actions is usually as follows:

1. create an image folder,
2. create a .htaccess file in the image folder, the contents of which will be # close access to http://site.ru/image/ Options -Indexes # close access to http://site.ru/image/.htaccess order allow, deny deny from all
3. upload to folder image image, which is called, for example, plain.gif (in the future, all pictures will also be uploaded to this folder),
4. on an HTML page use a URL like http://site.ru/image/plain.gif, for example, http://site.ru/image/plain.gif" alt="smiley" height="30" width="30">!}

All that is known about this man is
that he was not in prison, but why he was not in prison is unknown.
Mark Twain.

This is a lesson about how to insert a picture in HTML, how to design it, how to wrap text around a picture, etc. After all, it is known that images make a site more attractive and different from other resources, so the ability to use the tag and its attributes is very useful in modern Internet. But the main thing here is a sense of proportion!

An excess of graphics will make the html page heavier and, accordingly, increase its loading time. In addition, the presence large number images will distract visitors from the main content of the site (unless, of course, graphics are the main content of the site). So, keep it in moderation and use it only where it is needed. And you will be happy!

In the lesson about, I already talked about how you can use pictures as the background of an HTML document. Now let's talk about how graphics are used in the “top layer” of an html page.

§ 1. How to insert a picture

To insert images into HTML, use the tag IMG With compulsory attribute SRC. This attribute tells the browser the path to the image file. Those. to insert a picture with the name logo.jpg to a certain place on the page (provided that both the page and the picture are located in one folder(directory)) you need to insert the following html code in this place:

src="logo.jpg">

If the picture and page are located in different directories (folders), then you need to specify the path to the image relatively pages. For example, if an html page is located in the directory (folder) site, in the same directory (folder) there is a subdirectory (folder) images, in which our image logo.jpg is located, then to insert it you need to write like this:

images/logo.jpg">

Or you don’t have to worry and point out full address of the picture. For example, like this:

http://www..png">

In the latter case, the browser will display the code like this:

Note. If the picture is located on your computer, but you want to insert it to the Internet page, then nothing will come of it. To do this, you must first move the image to some place in the Internet(For example, ). And indicate the full address in the page code up to this point with a picture.

In addition to the required attribute SRC at the tag IMG There are a few more optional attributes. Let's take a closer look at them.

§ 2. Specifying the size of the picture

Let's start with the attributes that allow you to set picture dimensions(more precisely, stake out space for these dimensions on the pages). Here they are:

• width- image width in pixels or percentage;


• height- the height of the image in pixels or percentages.

If these attributes are used, it will first allocate space for the graphics, prepare the document layout, display the text, and only then load the image. At the same time, it will place the image in a rectangle of the selected size, even if the actual width and height of the image are larger (compress) or smaller (stretch). In the case when these attributes are not used, the browser will load the image immediately, and the display of the text and other elements following it will be delayed.

The width and height of images can be specified both in pixels (the size of the image will be constant regardless of the screen resolution) and in percentages (the size of the image will depend on the resolution of the user’s screen). For example:

width="50" height="20">

width="10%" height="5%">

§ 3. Alternative text

If the user has disabled the display of images in the browser settings, then instead of the picture, alternative text can be displayed that would explain what kind of graphics should be there. This is achieved by using the attribute ALT:

In this case, the browser will reserve space on the page for the image, but instead of the image itself, it will show the text that you write in the attribute value ALT:

I repeat, this will happen if the user has disabled the display of graphics. If not, the image will hide the alternative text.

§ 4. Aligning the picture

Using an attribute you already know align you can control the alignment of pictures relative to other elements of the html page. At attribute align there are several meanings, but we are the most this moment I'm interested in two:

• left- the image is located at the left edge of the page, and the text flows around the image on the right;


• right- the image is located at the right edge of the page, and text and other elements flow around the image on the left.

For example, HTML code

the browser will show like this

And this HTML code:

will look like this:

To stop text from wrapping around an image, you can use the tag BR(familiar to us from the previous section about). At the tag BR there is an attribute clear, which can take three values:

• left- stop text wrapping around left-aligned images;


• right- stop text wrapping around right-aligned images;


• all- stop text wrapping around images aligned both left and right.

Images - perhaps they form our general idea of worldwide network. Agree that graphic information a person remembers in general much better than text. Therefore the images are important part any site and any web page. And that's why I want to tell you how to insert into html picture.

Inserting an image in html using a tag

Surely you know that all commands in html are executed using tags. So we came up with our own tag for the images - . It is single, that is, it does not have a closing part.

The most important thing img attribute tag is src (source) – the path to the image. In it you write down the address where the image is located. It can be written as absolute ( website/images/images2/image.jpg) or as relative ( images/images2/image.jpg).

Both of these paths lead to the same image.jpg file, which is located in the image2 folder. That, in turn, is in the images directory, and that one is in the root folder. If you write everything down relatively, then when you change the domain name of your site, everything will remain operational. For example, wordpress editor inserts by default absolute addresses. But personally, I’m not going to change the domain and that suits me.

Additional attributes and design via css

So, let's digress from the topic. To display the picture, it is enough to indicate src attribute, but there are many other attributes for its design.

• width and height – the width and height of the image. It can be set in the corresponding attributes in the img tag
• align – alignment of the image in relation to the text. By default it is aligned to the left. You can also put it on the right and center (right, center)
• alt – alternative text that will be displayed if the user has disabled the display of images in the browser. It is useful to fill it out
• title is almost the same. A kind of description of the picture that will be displayed when you hover the cursor over it
• vspace and hspace – vertical and horizontal space of the image from the rest of the content. Attention! Attributes are already outdated and it is better to set these indents through a style sheet
• class – a style class that is attached to the image and applies some styles to it

Insert such a cute picture. I really want to sing when I look at it. Here we have added a preview class to the picture and now with CSS we can access the picture through it.

Preview( Padding: 20px; Margin: 10px; Border: 5px solid orange; Transform: skewX(10deg); box-shadow: 0 0 15px 10px purple )

Well? Is this obviously cooler than formatting it using HTML alone?

Let me sum it up

So, to display a picture, you just need to write an img tag and include the src attribute in it, which specifies the path to the image. Everything else is additional features- alignment, dimensions, alternative text, rotations, frames, etc.

And finally, ideally all this should be written through CSS. That is, do not set the dimensions in the attributes, but add an additional style class to the image, which will determine the dimensions. The same thing with alignment, which in css can be done using text-align properties, as well as floating blocks float .

I think now you have an idea of ​​how to insert a picture into html and format it normally. See you in the next articles.

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 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 into HTML file write this code:

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

We hope that this article will be useful to you. Happy reading!

Images instantly let us understand how interesting a given site or article can be for us, create a mood, and 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 the png size is reduced, 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 will be filled out, and also contain keywords if possible - the visibility of your site will significantly increase, i.e. it will be shown more often in searches. This is from the field of SEO, and at this stage it is enough for us to know that there is such an attribute, and a “live” site must have it filled in. While the site is on our disk, it can be left empty.

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 picture 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:

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:

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