تصاویر می توانند شکل و شمایل ظاهری یک وب سایت را زیبا کنند.
کاربران در هنگام بازدید از صفحات وب و برای مثال در هنگام خواندن مقالات، قاعدتا آن دسته از مقالات که دارای تصاویر مرتبط هستند را ترجیح می دهند، به همین دلیل برای اینکه یک وب سایت با کیفیت داشته باشید، نیاز دارید تا بتوانید در صفحات خود تصاویر متعددی قرار دهید تا نظر کاربران را جلب کنید.
برای اضافه کردن عکس به یک سند HTML از تگ img استفاده می شود و آدرس عکس به src داده می شود.
در این مثال، با استفاده از تگ img عکس به صفحه اضافه شده و مقدار alt (Alternative Name) یا همان نام مشابه عکس، به آن اضافه شده. همچنین با استفاده از width و height به عکس عرض و ارتفاع داده شده است. نتیجه کد بالا را می توانید در زیر مشاهده کنید:
قاعده ی نوشتاری تصاویر HTML
تگ img به منظور قرار دادن یک تصویر در صفحه ی وب سایت به کار می رود. تصاویر در حقیقت وارد یک وب سایت نمی شوند، تصاویر به وب سایت لینک می شوند. در واقع تگ img یک فضای ذخیره سازی برای تصویر مربوطه درست می کند. تگ img خالی می باشد، فقط شامل ویژگی ها بوده و تگ پایانی ندارد. تگ img دو ویژگی مورد نیاز دارد:
- src - مسیر به عکس را مشخص می کند
- alt - یک متن جایگزین به جای عکس مشخص می کند
ویژگی src
ویژگی src، مسیر (URL) عکس را مشخص می کند.
نکته: وقتی یک وب سایت بارگذاری می شود، این مرورگر است که عکس را از وب سرور دریافت می کند و آن را وارد صفحه می کند. بنابراین: اطمینان حاصل کنید که تصویر در حقیقت در همان نقطه ی مرتبط با صفحه ی وب سایت بماند، درغیر این صورت کاربران شما با یک لینک خراب مواجه می شوند. آیکون لینک خراب درصورتی که مرورگر نتواند عکس را پیدا کند ظاهر می شود.
ویژگی alt
این ویژگی یک متن جایگزین را برای عکس در صورتی که کاربر به دلایلی نتواند عکس را ببیند فراهم می کند، (بخاطر سرعت ضعیف اینترنت، یک ارور در src و یا وقتی که کاربر از یک screen reader استفاده می کند)
مقدار ویژگی alt باید عکس را عنوان کند.
اگر مرورگر قادر به پیدا کردن یک تصویر نباشد، مقدار ویژگی alt را نشان می دهد.
سایز تصویر – عرض و ارتفا
شما می توانید از ویژگی style برای تنظیم کردن عرض و ارتفای یک تصویر استفاده کنید.
در مثال بالا، با استفاده از ویژگی style عرض و ارتفاع عکس مشخص شده اند که نتیجه آن را می توانید در زیر مشاهده کنید:
به جای آن می توانید از ویژگی های width و height هم استفاده کنید:
ویژگی های width و height همیشه عرض و ارتفای تصویر را در پیکسل تعریف می کنند.
عرض و ارتفا یا Style؟
همه ی این ویژگی ها در HTML معتبر می باشند. اما در هر صورت، ما استفاده از ویژگی style را پیشنهاد می کنیم، زیرا این ویژگی از تغییر دادن سایز عکس ها توسط styles sheets جلوگیری می کند.
تصاویر یک پوشه دیگر
اگر شما تصاویر خود را در یک زیرپوشه در اختیار دارید، باید نام فولدر را در ویژگی src قرار دهید:
در این مثال، تصویر درون پوشه images است که با فرمت ذکر شده به آن دسترسی پیدا می کنیم.
تصاویر روی یک سرور دیگر
برخی از وب سایت ها تصاویر خود را در یک سرور دیگر نگه داری می کنند:
تصاویر انیمیشنی
HTML از GIF پشتیبانی می کند:
تصاویر بعنوان لینک
به منظور استفاده از یک تصویر به عنوان یک لینک، تگ img را داخل یک تگ a قرار دهید:
در این مثال، تگ img داخل تگ a تعریف شده که خاصیت لینک را به تصویر داده است. حال اگر کسی روی تصویر کلیک کند، به صفحه default.asp منتقل خواهد شد.
شناوری تصاویر
از مشخصه ی float برای شناور کردن تصویر به چپ و راست یک متن استفاده کنید:
با استفاده از float می توانیم هر تصویری را به صورت شناور در صفحه وب قرار دهیم. در این مثال تصویر از به سمت راست و تصویر دوم به سمت چپ شناور شده است و عرض و ارتفاع هر دو از طریق style تعیین شده است.
فرمت های متعارف تصاویر
این لیستی از متعارف ترین فرمت های تصویر می باشد که در تمام مرورگرها پشتیبانی می شوند:
همچنین در مقالات بعدی با یادگیری عناوینی مانند image map می توانید روی تصاویر خود نقاط قابل کلیک شدن ایجاد کنید، در مقاله تصاویر پس زمینه می توانید برای عناصر خود تصاویر پس زمینه بگذارید و با یادگیری Picture Element می توانید تصاویر خود را Responsive یا واکنش گرا کنید.