در آموزش های قبلی با اصلی ترین بخش های HTML یعنی شکل بندی نوشته ها و ایجاد لینک به عنوان دو قسمت اصلی طراحی صفحات وب پرداختیم. در این جلسه هم قراره به طرز قرار دادن شی های مختلف از جمله تصویر، فایل های فلش و ... با استفاده از زبان HTML بپردازیم.

خوب شاید بیشترین استفاده ها و سؤال ها در قرار دادن تصاویر باشه به خاطر همینم اول به این بخش می پردازیم. اول از همه ما باید اینو برای خودمون مشخص کنیم که میخوایم عکس رو در یک متن قرار بدیم یا اینکه جدا از متن مثلا در وسط صفحه. اینو به خاطر این میگم چون ممکنه اندازه عکستون طوری باشه که بین خطوط فاصله بندازه که خوب زیبایی نوشته ها به هم میخوره و شاید دلخواه نشه. پس این بخش خودش به دو بخش تقسیم میشه: خارج از متن، داخل متن. حالا بررسی هر کدوم.

 خارج از متن: این بخش تقریبا هیچی نداره و یه جورایی زیر مجموعه ای از بخش داخل متنه. برای قرار دادن عکس در صفحات وب به طور کلی از تگ img استفاده می کنیم. این تگ از جمله تگ هایی هست که نیازی یه تگ پایانی نیست. برای ارجاع کردن عکس هم از خصیصه src استفاده می کنیم. یعنی آدرس عکس رو در این خصیصه قرار میدیم. به صورت زیر:

img src="محل آپلود شده عکس">

تا اینجا شما تونستید عکس رو در صفحتون قرار بدید اما شاید دلخواهتون طوری باشه که مثلا در وسط صفحه قرار بگیره. نحوه قرار گرفتن شئ ها هم دقیقا مقل متن ها میمونه که این وظیفه رو خصیصه align انجام میده که به ? صورت Left, Right, Center و justify می باشند. ? تای اولی که مشخص اند اما آخری باعث میشه متن از دو طرف یک اندازه فاصله داشته باشه که البته در شئ ها کاربرد نداره و تقریبا فقط در متون استفاده میشه. پس تا حالا شد این:

img src="محل آپلود شده عکس" align="یکی از حالات گفته شده">

خوب برای این بخش دیگه چیزی لازم نیست بهتره بریم به حالت دومش که در بین متونه.

داخل متن: این حالت هم دقیقا عین حالت قبلیه فقط حالت قرارگیری یعنی align ، انواعش فرق میکنه که شامل موارد زیر میشه: 
baseline ، top ، middle ، bottom ، texttop ، absmiddle ، absbottom ، left ، right .

این حالت ها موقعیت عکس رو نسبت به خط متنی میسنجند یعنی وقتی میگیم middle کامپایلر دقیقا وسط خط عمودی عکس رو در نظر میگیره و عکس رو نسبت به اون نقطه در متن قرار میده. مثل این اعدادی که من برای این بخش ها در نظر گرفتم. اگه دقت کنید دقیقا وسط عکس نسبت به خطر متنی قرار گرفته. برای این قسمت هم کد نوشتن عین قسمت قبلیه با این تفاوت که حالت قرار گرفتن باید فرق کنه.

شایدم دلتون بخواد برای تصویرتون توضیح هم قرار بدید. برای اینکار هم باید از خصیصه Alternate استفاده کنید که به صورت استاندارد برای تصاویر تعبیه شده. اما من به شخصه پیشنهاد می کنم از این خصیصه استفاده نکنید چون فقط مرورگر اینترنتی اکسپلورر رو شامل میشه و اگه کاربری وبلاگ یا سایت شما رو مثلا در موزیلا ببینه دیگه توضیح نمایش داده نمیشه. به خاطر همینم من پیشنهاد میکنم از خصیصه title استفاده کنید که برای تمام موضوعات HTML کاربرد داره و در تمام مرورگر ها هم قابل اجراست. پس کد ما در کل شد این: