إذا أردنا نقل الصورة إلى مواقع مختلفة على صفحة الويب باستخدام علامة Html، فيجب علينا اتباع الخطوات الموضحة أدناه.

الخطوة 1: أولاً، علينا كتابة كود Html في أي محرر نصوص أو فتح ملف Html الموجود في محرر النصوص الذي نريد محاذاة الصورة فيه:

 Align an Image Hello User! This page helps us to understandhow to specify an image at a particular position in a pargraph using the Html tag. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp"> 

الخطوة 2: الآن، ضع المؤشر داخل علامة تلك الصورة التي نريد محاذاتها. وبعد ذلك، يتعين علينا استخدام سمة المحاذاة لعلامة img لتحديد الموقع. لذلك، يتعين علينا كتابة سمة المحاذاة كما هو موضح في الكتلة التالية.

 <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> 

الخطوه 3: بعد تحديد الموقع علينا حفظ كود Html ثم تشغيل الملف. فيما يلي أكواد Html المتنوعة التي تظهر الصورة في الفقرة في مواقع مختلفة:

1. الأوسط

تقوم قيمة المحاذاة هذه بتعيين الصورة في المنتصف.

 Align an Image at middle Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is first section in this page which describes how to specify an image at middle in a pargraph using the Html tag.</p> 

يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية:

2. الأعلى

تقوم قيمة المحاذاة هذه بتعيين الصورة في الأعلى.

 Align an Image at Top Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is Second section in this page which describes how to specify an image at top in a paragraph using the Html tag.</p> 

يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية:

3. القاع

تقوم قيمة المحاذاة هذه بتعيين الصورة في الأسفل.

 Align an Image at bottom Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is third section in this page which describes how to specify an image at bottom in a paragraph using the Html tag.</p> 

يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية:

4. اليسار

تقوم قيمة المحاذاة هذه بتعيين الصورة على اليسار.

 Align an Image at left Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fourth section in this page which describes how to specify an image at left side of a paragraph using the Html tag.</p> 

يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية:

5. صحيح

تقوم قيمة المحاذاة هذه بتعيين الصورة على اليمين.

 Align an Image at Right Hello User! <p>This page helps us to understand how to align an image in Html. <img src="//techcodeview.com/img/html-tutorial/33/how-align-image-html.webp" alt> It is fifth section in this page which describes how to specify an image at right side of a paragraph using the Html tag.</p> 

يظهر إخراج كود Html أعلاه في لقطة الشاشة التالية: