در جلسات قبلی آموزش HTML با نحوه کدنویسی عکس ها آشنایی نسبی پیدا کردیم. اینکه چه ویژگی باید در تگ عکس یا همان تگ img وجود داشته باشد تا عکس ما در وب سایت لود شود و می توانیم برای تگ عکس عنوان مشخص کنیم و یا متن جایگزین و … در این جلسه آموزش HTML میخوایم بیشتر وارد توضیحات عکس بشیم تا موارد بیشتری رو بررسی کنیم .
کدنویسی تگ img
کدنویسی تگ عکس بصورت <img> هستش که اصلا این تگ نیاز به بسته شدن نداره و فقط باز میشه . در اصل تگ عکس عکس رو داخل وب سایت نمیاره ! چیکار میکنه پس !؟ میره از لینکی که ما بهش میدیم محتوا عکس رو میگیره و توی وب سایت نمایش میده. پس حتما ما باید اول عکسمون وجود داشته باشه توی وب سایت تا بتونیم از این تگ استفاده کنیم .
دقت کنید میتونیم کلی ویژگی بدیم به عکس . مثلا ویژگی id , class و خیلی چیزهای دیگه . ولی دو تا ویژگی رو حتما باید درج کنیم توی عکس . اولی که src هست که میایم لینک عکس رو میدیم بهش و میگیم عکس رو برو از کجا لود کن بیار نشون بده. دومی هم ویژگی alt هست که در اصل alternative text هستش. این ویژگی هم میاد میگه اگه یه زمانی عکس لود نشد این متن رو نشون بده. الان دیگه باید توی طراحی حتما عکسمون وجود داشه باشه ولی چرا حتما باید این ویژگی رو بذاریم!؟ از نظر ما مهم ترین مورد توی موارد بهینه سازی وب سایت برای موتورهای جستجو هستش . این متن جایگزین میاد میگه به موتورهای جستجو که عکسمون داره راجع به چی صحبت میکنه ؟! و توی سعو تاثیر میذاره . البته روز به روز داره الگوریتم ها پیچیده تر میشه و خیلی موارد جدیدی میاد . الان بحث هوش مصنوعی بسیار داغ هستش و توی دوره های آینده حتما بهش می رسیم که چجوری متن ها رو میتونین توسط هوش مصنوعی تولید کنید و یا گوگل چجوری داره شناسایی میکنه متون تولید شده با هوش مصنوعی و چه تاثیراتی توی رنک وب سایتتون داره .
ویژگی src در تگ عکس
تو مبحث بالا یاد گرفتیم که باید برای اینکه عکس رو نشون بدیم حتما ویژگی src بذاریم که عکسمون لود بشه و ظاهر بشه توی وب سایت . یچیزی هست به نام url که همون آدرس مرورگر که بالای صفحه باز میشه بهش میگن . از url میتونیم استفاده کنیم که عکس رو بهش آدرس بدیم که مرورگر بره بخونه و عکس رو لود کنه . حالا اگه آدرس دهی ما اشتباه باشه مرورگر میره توی اون آدرس و میبینه هیچ عکسی با اون آدرسی ه دادیم وجود نداره و میاد به اصطلاح لینک شکسته میذاره برامون . یه علامت میاد که عکس لود نشده. لینک شکسته هم برای سعو وب سایت و بهینه سازی وب سایت برای موتورهای جستجو بد هستش. پس حتما مطمعن بشید که عکس توی آدرس درستی هست و اون آدرس وجود داره.
ویژگی alt در تگ عکس
تکرار مکررات اشکالی نداره ! باید بعضی چیزها ملکه ذهنمون بشه . حتما دقت کنید که ویژگی alt رو رعایت کنید و توی ویژگی alt معمولا باید بیاید بگید که عکس داره چی رو توصیف میکنه و نشون میده. توی نتایج موتورهای جستجو در حالت جستجوی عکس تاثیر خیلی زیادی داره این حرکت و عکس شما رو توی اون نتایج نشون میده در صورتی که کاربر بخواد متن جایگزین شما رو جستجو کنه.
<img decoding="async" src="img_chania.jpg" alt="Flowers in Chania">
ویژگی ابعاد عکس در تگ img
در جلسات قبلی اشاره کوچیکی کردیم که میتونیم برای عکس ابعاد مشخص کنیم . یعنی بیایم بهش بگیم که توی چه عرضی و چه ارتفاعی عکس رو توی صفحه ظاهر کن . ناگفته نمونه که این حرکت تقریبا داره منسوخ میشه و روش های خیلی بهتری هست ولی در کل هنوز خیلی ها استفاده میکنن ازش و باید بدونید که طرز استفاده ازش چجوری هست .
یک روش وجود داره که شما میاید داخلی ویژگی ها یه style مینویسید که داخل استایل هم خصوصیت و مقدار اون رو درج میکنید. این رو تو جلسات قبلی کمی یاد گرفتیم . برای اینکه به مرورگر بگیم چه عرضی رو نشون بده از خصوصیت width که میشه عرض و برای ارتفاع هم height استفاده میشه . این دو مقدار رو میتونیم به واحد پیکسل یا px مشخص کنیم .
<img decoding="async" src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">
روش دوم این هستش که دیگه نمیخواد بیایم style بنویسیم و داخل اون خصوصیت بزنیم . از خود width و height بعنوان ویژگی استفاده میکنیم و دیگه واحد رو نمینویسیم و فقط عدد میدیم بهشون .
<img fetchpriority="high" fetchpriority="high" decoding="async" src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
قابلیت float در تگ عکس
توی بعضی موارد هست که ما میخوایم بیایم بگیم این عکس باید سمت راست صفحه قرار بگیره و یه عکس دیگه وسط و یکی دیگه هم سمت چپ. این موارد توی css باید زده بشه و فعلا در این دوره HTML رو داریم توضیح میدیم و یه اشاره کوچیکی هم میکنیم به طریقه float دهی به عکس . این float میاد میگه عکس اگر بین متن ها اومد بیاد سمت راست قرار بگیره یا چپ . (موارد دیگه رو توی دوره css توضیح میدیم کامل. فعلا فقط به همین بسنده کنین! )
مثال زیر رو دقت کنید یبار میاد سمت راست و بار دیگه سمت چپ متن عکس رو قرار میده .
<p><img decoding="async" src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img decoding="async" src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
قابلیت map در تگ عکس
یکم وارد موارد حرفه ای تر میشیم ! خیلی راحت بخوایم بگیم ما قبلا یاد گرفتیم که بیایم به عکس لینک بدیم و روی عکس کلیک کردن برن توی یک صفحه یا آدرس خاصی . حالا یک مورد هست که ما میخوایم بیایم توی عکس که چند تا المان توش هست به هر کدوم از اون المان های خود عکس لینک بدیم! مثلا یک عکس هست که داخلش هم کامپیوتر هست هم موبایل. اگر روی کامپیوتر کلیک کردن بره داخل یک لینک و اگر روی موبایل کلیک کردن بره داخل یه لینک مجزا ! این قابلیت رو با تگ map باید انجام بدیم . این تگ میاد یه ناحیه لینک روی عکس ایجاد میکنه که کاربر بتونه روی اون ها کلیک کنه . دقت کنید که خود تگ map باید چند تا زیر مجموعه داشته باشه . زیر مجموعه های تگ map هم area هستن. یک map میتونه خیلی زیر مجموعه area داشته باشه . مثال زیر رو ببینین :
<img decoding="async" src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
و خروجی به شکل زیر میشه یه امتحان بکنید و سعی کنید روی لپ تاپ – موبایل یا فنجون قهوه کلیک کنید .
حالا چجوری اون کد نوشته شده !؟ سخت نیست . فقط اولین اصل این هست که باید بدونیم کجای تصویر باید قابلیت کلیک شدن داشته باشه . مثلا توی مثال بالا لپ تاپ و موبایل و فنجون باید کلیک بشه و لینک ها متفاوت باشه . حالا میایم به تگ عکسمون هم یه ویژگی میدیم به اسم usemap و میایم ویژگی name که به تگ map دادیم رو به اون ویژگی usemap توی تگ img میدیم. اینجوری عکس رو با اون تگ map وصل میکنیم بهمدیگه . فقط دقت کنید که توی ویژگی usemap باید حتما قبل اینکه اسم رو بنویسیم یه علامت # بذاریم .
حالا که تونستیم تگ map رو بنویسیم باید زیرمجموعه هاش رو تشکیل بدیم . اون ها جچوری درست شدن ؟! اون هم ساده است . چند تا شکل رو میتونین برای قسمت area انتخاب کنین . مستطیل – دایره – چند ضلعی و حالت پیش فرض . هر کدوم از این اشکال کدهای خاص خودشون رو دارند و ما باید مختصات دهی کنیم و بگیم که اون ناحیه قابل کلیک رو کجا بیار روی عکس و با چه شکلی ظاهر کن .
مستطیل کشی در تگ map
یکم توضیح میدیم و مثال میزنیم که واضح بشه. برای کشیدن مستطیل توی تگ map باید نقطه شروع مستطیل و نقطه پایان اون رو با چهار تا المان بگیم به مرورگر. چهار تا چی هست !؟ مختصات شروع از محور x و y و همین طور دو تا هم برای مختصات پایانی محور x و y . توی مثال بالا اومدیم برای لپ تاپ یک کد نوشتیم که کد زیر هست :
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>
این کد میاد میگه یه ناحیه بکش و شکل اون رو rect یعنی هون مستطیل بذار و مشخصات نقطه شروع رو بذار روی ۳۴ و ۴۴ . یعنی ۳۴ توی محور x و ۴۴ توی محور y . که میشه عکس زیر :
خب بعدش هم میایم نقطه پایانی که ۲۷۰ محور x و ۳۵۰ محور y هستش رو میزنیم .
که میشه اون نقطه که انتخاب کردیم. و اینجوری میایم ناحیه رو میکشیم و به مرورگر دستور میدیم که کجا رو باید لینک بدیم . بقیه کار هم که این چهار تا نقطه رو توی ویژگی coords میذاریم و به area هم یه ویژگی میدیم بنام href که به اون ناحیه میگه چه لینکی رو لود کنه برای این ناحیه مشخص شده .
دایره کشی در تگ map
مثال بالایی رو یاد گرفتیم . حالا برای دایره کارمون راحت تره ! چرا !؟ دایره فقط ابتدا میایم میگیم مرکز دایره کجا هست !؟ و از مرکز دایره شعاع رو مشخص میکنیم و خودش دایره رو میکشه برامون ! همین پس در کل سه تا عدد مختصاتی باید مشخص کنیم . مختصات محور x و محور y مرکز دایره و عدد بعدی هم شعاع دایره . برای ویژگی shape هم مینویسیم circle . توی مثال بالا مرکز دایره عدد 337 و ۳۰۰ برای مرکز دایره هست و شعاع دایره هم ۴۴ پیکسل میاد روی فنجون یه دایره میکشه برامون تا بشه روش کلیک کرد. بعدش هم که لینک میدیم و تمام ! کد زیر رو نگاه کنید واضح شده کاملا !
<map name="workmap">
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
</map>
چند ضلعی کشی در تگ map
دو تای بالایی رو یاد گرفتین !؟ این یکی هم براتون آسمون میشه اگه کمی دقت کنین . برای چند ضلعی کشیدن فقط باید نقطه به نقطه مختصات محور x و محور y رو بدیم بهش. یعنی نقطه اول از کجا شروع میشه و نقطه دوم و سوم و … عکس زیر رو ببینین.
کد زیر میشه برای اون عکس بالایی :
<map name="workmap">
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
</map>
و عکس رو اینجوری روش ناحیه کلیک شدنی میاره :
یچیزی هم بعنوان پایان این جلسه بگیم. توی دوره های آینده به کدنویسی جاوا اسکریپت میرسیم و یاد میگیرین. الان فقط در همین حد بدونید که میشه این کار رو هم کرد که اگه روی اون ناحیه عکس کلیک شد یه پیغامی روی صفحه بیاد برای کاربر که پیامی رو بهش نشون بده . چطوری ؟! با استفاده از js یا javascript یا همون فارسی خودمون جاوا اسکریپت . کد زیر نمونه اجرای این کار هستش :
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
اون تیکه کد که داخل تگ script نوشته شده میاد میگه هر وقتی فانکشن myFunction اجرا شد کدهای زیر رو اجرا کن که چی هست اون کدها !؟ alert با متن You clicked the coffee cup! رو کاربر نشون بده . اگر دقت کنید توی المان area هم اومدیم گفتیم که ویژگی onclick بیاد تابع myFunction رو صدا کن . یعنی هر بار کلیک شد روی این ناحیه این تابع رو برو از تو کدها پیدا کن و داخل اون تابع هرچی هست رو فراخوانی کن .
تگ picture
خب این تگ به نسبت تگ جدیدی هست . قبلا میومدیم با تگ img مشخص میکردیم که عکس چی لود بشه . ولی یه مبحثی وجود داره بنام رسپانسیو ! یا همون responsive خارجی ها . رسپانسیو یکی از دهن سرویس ترین موارد توی طراحی هستش !!!!! یعنی شما باید به نوعی طراحی کنید وب سایت رو که توی همه دیوایس ها درست لود بشه و خوشگل باشه ! حالا هر روز هم داره دیوایس های جدیدی میاد و کار برنامه نویس ها سخت تر میشه چون باید خودشون رو وفق بدن با دیوایس ها و اندازه های نمایشگر های جدید. از دسکتاپ های سایز بزرگ بالا بگیر تا این ساعت های هوشمند و گوشی های تاشو و … حالا تو حالت رسپانسیو ما میتونیم بیایم بگیم به عکس که اگر این سایز بود این عکس رو لود کن اگر این سایز بود این عکس و همینطور چندین سایز مختلف عکس های مختلف لود بشه توی مرورگر. برای این حرکت خفن از تگ picture استفاده میکنیم و داخل این تگ میایم به اندازه مورد نیاز ابعاد مختلفمون تگ source میریزیم توش . برای اینکه یه سایزی هم از دستمون در نره میایم یه تگ img میذاریم که یجورایی میگه مرورگر اگه هیچی پیدا نشد با این ابعادی که من دادم بهت بیا این عکس رو لود کن برای کاربر . چون خیلی کار سختی هست این همه دیوایس و سایزهای مختلف رو بخوای درست هندل کنی توی کدهات و یه کاربرد دیگه هم داره اینه که اگر مرورگری این تگ رو ساپورت نکرد بیاد اون کد img رو حداقل اجرا کنه لنگ نمونیم این وسط تا کاربر زحمت بکشه مرورگرش رو بروز بکنه! خیلی زحمت میکشیم تا کاربر حس راحتی داشته باشه واقعا !!!!
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img decoding="async" src="img_girl.jpg">
</picture>
