Advice 1: How to insert a picture in the letter

Sometimes when you write an email, there is a need to illustrate the text, picture, chart, table. And it must be done directly in the email body and not add the file attachment. A few years ago this task was something only programmers or those who could correctly repeat their instructions. Now to insert the picture into your email everyone can.
How to insert a picture in the letter
You will need
  • Mail client
  • Computer or laptop
Instruction
1
The mail program Mozilla Thunderbird.

Create a new message. In the messages menu on the top select the tab "Settings". In it we find a submenu of "Format". Choose "Formatted text (HTML)".

In the icon menu located under the column "Theme", click on the icon below pictures.

In the drop-down menu, select "Image".

Just choose the file you want to insert in the text of the letter and click on OK.
2
Mail program The Bat!

Create a new message.

From the bottom we find the button for "text Only" and click on it.

In the drop-down menu, select "HTML" or "HTML/plain text".

In the graphics menu from the top looking for the icon Picture.

Find the file you want and insert into the body of the email.
3
Mail program Microsoft Outlook.

Create a new message.

The menu letters on the top select the Format tab.

Select "HTML".

In the graphics menu, press the icon image and the words "picture".

Select the desired file and click on OK.

In Microsoft Outlook 2007 to insert a picture, you will need to select the top menu "Insert". In the drop down menu "pattern" choose "Picture" to locate and insert the file.
4
Inbox Gmail.

Today is the only service of email forwarding that allows you to insert a picture in the body of the email and not send it as an attachment.

Open Gmail, create an email.

In the upper right corner, click on the link "Settings".

In the opened menu choose the last item "Experimental features".

In the long list of proposed features, find "Inserting images" and select "Enable".

Click on "Save changes".

In the letter template on the left find "Advanced formatting". Choose.

There is a panel with icons.

Now you only click on the icon "Insert image", choose a file and send an email with a picture inserted in the body of the letter.
Useful advice
You can choose not only the picture or photo located on your computer, but also to specify the path to the image file hosted online.

Advice 2: How to insert image in html table

The html language is not perfect and has some significant drawbacks. To assign a picture to a specific place on the page, it is better to insert it in the table. In this case, the image is considered as background and on top of it you can put text.
How to insert image in html table
Instruction
1
You first need to create the table if it does not. This is the attribute of <body>. For this purpose, a tag (end tag required):
• <table> - table;
• <tr> - string;
• <td> the column.

The main extra attributes:
• Border – border;
• Align – horizontal alignment;
• Valign – vertical alignment;
• Bordercolor – the border color;
• Width – width;
• Height – the height.

The syntax of the 2X2 table with no border and a left/right alignment of the content:
<table border= "0">
<tr align="left">
<td>the Contents of the 1st cell</td>
<td> Content of the 2nd cell </td> </tr>
<tr align="right">
<td> the Contents of the 3rd cell </td>
<td> the Contents of the 4th cell </td> </tr>
</table>
2
The picture you need to register after the <td> tag. If you insert the image in the first cell of the table presented above, we get:
<table border= "0">
<tr align="left">
<td><img src="address of image format gif, png, jpeg"></td>
<td> Content of the 2nd cell </td> </tr>
<tr align="right">
<td> the Contents of the 3rd cell </td>
<td> the Contents of the 4th cell </td> </tr>
</table>

Additional attributes:
• Width – width;
• Height – height;
• Alt - alternative text to be displayed to a user if he disabled the feature of viewing images;
• Align – horizontal alignment;
• Valign – vertical alignment;
• Title – the caption of the image.
3
The image can be used as a reference. For this purpose it is sufficient to vest in the relevant tag: <a href="page that navigates"><img src="file name.png"></a>
In the context of the table it will look like this:
<table border= "0">
<tr align="left">
<td><a href="stranitsa.html"><img src="kartinka.png"></a></td>
<td> Content of the 2nd cell </td> </tr>
<tr align="right">
<td> the Contents of the 3rd cell </td>
<td> the Contents of the 4th cell </td> </tr>
</table>
4
Дополнительные возможности изображений.

1. Смена картинки на цвет при наведении на нее мышью и после смены местоположения курсора:
onMouseOver="this.style.background='#номер цвета'" onMouseOut="this.style.background='#номер цвета'"

2. Смена картинки на другое изображение при наведении мышью:
onmouseover="this.src='images/1.gif'" onmouseout="this.src='images/2.gif'"

3. Вставка вращающейся карусели из картинок в ячейку таблицы (значения можно менять):

<td align="left">
<BODY onload="Carousel()" background=>
<script type="text/javascript">
// 7 variables to control behavior
var Car_Image_Width=100;
var Car_Image_Height=100;
var Car_Border=true; // true or false
var Car_Border_Color="000000"; Border="0"
var Car_Speed=5;
var Car_Direction=true; // true or false
var Car_NoOfSides=6; // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
"images/1.gif","",
"images/2.gif","",
"images/3.gif","",
"images/4.gif","",
"images/5.gif","",
"images/6.gif",""

// NOTE No comma after last line
);

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script><div id="Carousel" style="position:relative; width:130; height:21">

</td>
Note
This is a lesson on how to insert a picture in HTML how to make how to make a flow of images with text, etc. it is known that images make the site more attractive and different from other resources, so the ability to use the tag "IMG" and its attributes are very useful in today's Internet. But, the main thing — sense of proportion! An overabundance of graphics will cause the weighting of the html page and hence increase the load time.
Useful advice
If the area is not match the actual size of the image you want to insert, then the picture will be stretched or narrowed to a specified in the html Img tag size. However, you should not use this method, for example, to reduce the size of inserted in the Html document pattern. It is better to resize the images in a graphic editor and then embed images in a Html document using a Html code editor.
Is the advice useful?
Search