صفحات خالی از تصاویر، جذابیت و زیبایی چندانی ندارند. در واقع این تصاویر و طراحی‌های خلاقانه هستند که صفحات شما را زیبا می‌کنند. پس این بخش یکی از مهمترین بخش‌های آموزش اچ تی ام ال است که در طراحی نمای ظاهری سایت شما کاربرد فراوانی خواهد داشت. با ما برای نحوه قرار دادن تصاویر همراه شوید.
در ادامه با کافه دوستی همراه باشید.
در قسمت‌های قبلی با نحوه اضافه کردن متن‌ها و عناوین و در آخر لینکها به صفحات آشنا شدیم. حالا در این بخش قصد داریم تا عکس‌ها را نیز به صفحات خود اضافه کنیم؛ بدین ترتیب وجهه بهتری را از خود نمایش خواهند داد. با ما برای این آموزش همراه شوید.
مرحله اول: برای قرار دادن تصویر در صفحه, در اولین قدم تگ <img> را در ابتدای کد قرار می‌دهیم.
مرحله دوم: در این مرحله ما بعد از کلمه img, باید به نوعی به صفحه بگوییم که عکسمان کجا قرار دارد تا مرورگر بتواند آن را پیدا کرده و نمایش دهد. برای این کار ما به یک اتریبیوت نیازمند هستیم که این کار را برای ما انجام دهد. این اتریبیوت src نام دارد که در واقع حاوی آدرس (url) عکس ما در اینترنت است.
< img src="url" / >
مرحله سوم: در آخرین مرحله تنها کافیست علامت / را در انتهای تگ img قرار دهیم, تا تصویر ما نمایش داده شود. همانطور که می‌بینید المان عکس بر خلاف المان‌های قبلی که خواندیم نیازی به یک تگ جداگانه برای بسته شدن ندارد. این بدین معناست که ما چیزی به اسم <img/> نداریم. پس همیشه علامت / را در همان تگ ابتدایی قرار می‌دهیم.
به مثال‌های زیر توجه نمایید:
<p>تصویر شماره 1</p>
< img src="http://zoomit.ir/templates/ja_argo/images/logo4.png" />
نتیجه‌ای که مرورگر نمایش خواهد داد:
تصویر شماره 1
توجه داشته باشید که برای نمایش تصاویر در اینترنت باید حتما آن‌ها را در جایی آپلود کرده و آدرس کامل و دقیق آن‌ها را به همراه پسوند وارد نمایید. فایل هایی که اسمشان دقیق نباشد یا فرمت عکس در آن ها نباشد به نمایش در نمی‌آیند. پس zoomit.ir/ax.jpg یا zoomit.ir/ax.png صحیح است و zoomit.ir/ax اشتباه است.
پیشنهاد: پیشنهاد میکنیم آدرس مستقیم عکس را از نوار آدرس مرورگر کپی کنید تا به طور کامل آدرس آن کپی شود.
اتریبیوت Alt:
یکی دیگر از اتریبیوت‌های تصاویر alt است که در واقع حاوی حرف یا نوشته است. این نوشته در زمانی که عکس بارگذاری نمی‌شود به جای عکس نمایش در می‌آید. alt خصوصا در هنگامی که گوگل به دنبال جستجوی تصاویر است استفاده میشود.
هر چند گاهی برخی افراد چندان به اتریبیوت alt توجه نمی‌کنند، ولی این اتریبیوت نقش بسیار مهمی در طراحی صفحات وب و نتایج گوگل دارد؛ پس همیشه سعی کنید آن را خالی نگذاشته و با کلمات مرتبط پر نمایید. همچنین alt برای معلولین یا افراد ناتوان و دستگاههای خواندن صفحه مثل braille تاثیر بسزایی دارد.
اتریبیوت alt را می‌توانید به صورت زیر بنویسید.
نمونه کد:
< img src="url" alt= "کلمه" />
تنظیم ابعاد تصاویر
در حد امکان سعی کنید تصاویری که در صفحه استفاده می‌کنید سایز مناسبی داشته باشند؛ ولی در اچ تی ام ال می‌توانید تصاویر را با اندازه دلخواه بر حسب پیکسل (px) بزرگتر یا کوچکتر کنید. به مثال زیر توجه کنید.
<img src = "(zoomit.ir/ax/html.jpg ) آدرس اینترنتی تصویر همانند " style="width:256px ; height:365px; " />
نتیجه‌ای که مرورگر نمایش خواهد داد:
در اولین قدم, ما اتریبیوت Style را بعد از تصویرمان قرار داده‌ایم. سپس یکبار کلمه hieght را نوشته و بعد از علامت :طول تصویر را بر حسب پیکسل وارد می کنیم. در مرحله بعد نیز یکبار کلمه width را نوشته و عرض مورد نظر را بر حسب پیکسل وارد میکنیم.
نکته بسیار مهم: توجه کنید که در هنگام وارد کردن مشخصات در داخل Style، بین هر دو استایل، یک علامت ; قرار دهید.
نکته: ابعاد تصاویر بر حسب پیکسل وارد نمایید.
راه دیگر برای تغییر ابعاد تصاویر آن است که آن‌ها را بدون اتریبیوت استایل بنویسید. در واقع استفاده از اتریبیوت استایل همیشه ضروری نیست و شما می‌توانید طول و عرض را به صورت مستقیم نیز استفاده کنید. بنابراین تصویر زیر نیز دقیقا همان کاری را انجام می‌دهد که در حین بکاربردن Style نشان داده شد.
<img src = "zoomit.ir/ax/html.jpg آدرس اینترنتی تصویر همانند" width="256px" height="365px" />
نکته: توجه داشته باشید که کلمه px که را که بعد از ابعاد داده شده در اتریبیوت های طول و عرض در مثال بالا نوشته‌ایم، . این کلمه در واقع به مرورگر میگوید که ابعاد عکس شما بر اساسی اندازه گیری شده است. ما در اینجا ابعاد عکس را به صورت پیکسلی px مشخص کرده‌‌ایم پس واحد آن را بعد از آن یادداشت میکنیم. اهمیت این موضوع زمانی مشخص میشود که ننوشتن واحد اندازه‌ها در برخی موارد باعث بروز خطا در نتیجه شود. پس همیشه این موضوع را در طراحی صفحات وب خودتان رعایت کنید.
خلاصه قسمت پنجم:
در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور میکنیم.
- در پنجمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه قرار دادن تصاویر آشنا شدیم. قاعده کلی قرار دادن تصاویر </ " img src="url > است.
- در ادامه با اتریبیوت‌های مهم تصاویر از جمله
altبازگو کردیم که به شما در کسب نتایج بهتر در جستجوی گوگل کمک می‌کند. - در آخر نیز نحوه‌ی تغییر سایز تصاویر توسط دو اتریبیوت طول (hieght) و عرض (width) فراگرفتیم.
نوبت شما:
خب نوبتی هم که باشد، دیگر نوبت شماست. خودتان سعی کنید یک کد برای عکس بنویسید میتونید برای اول کار از لینک رو به رو استفاده کنید و آدرس عکس خود استفاده کنید (http://zoomit.ir/templates/ja_argo/images/logo4.png).برای تمرین بیشتر حتما آدرس عکسهای دلخواه دیگری را امتحان کنید.
آموزش و یادگرفتن اچ‌تی‌ام‌ال تا به اینجا لذت بخش بوده است؟ اینطور نیست؟ پس منتظر بخش‌های بعدی و یادگیری مطالب تازه باشید!از لینک های زیر می توانید به قسمت های قبلی دسترسی داشته باشید. قسمت بعدی فردا قرار داد می شود پس با ما همراه باشید.
تایم لپس چیست ؟ طرز کار تصاویر Time Lapse شارژ کردن گوشی با شارژر های مختلف آپدیت جدید تلگرام: بخش استیکرهای محبوب، فضای شخصی نامحدود و موار گلکسی نوت 7 به طور رسمی معرفی شداسکنر عنبیه چشم و 4 گیگابایت حاف جوانسازی پوست فقط در 28 روز !؟ سارقان مسلح از بازی Pokemon Go برای به دام انداختن قربانیان استف عملکرد سنسور عنبیه گلکسی نوت 7 فاش شد این تکنیک آرایشی به سرعت جوش های صورت تان را می پوشاند!!! جرم گرفتن دندان به دلیل 7 خطا