لاراولیستا آموزش HTML - بخش پنجم: عکس‌ - لاراول یستا

در قسمت‌های قبلی با نحوه اضافه کردن متن‌ها و عناوین و در آخر لینک‌ها به صفحات آشنا شدیم. حالا در این بخش قصد داریم تا عکس‌ها را نیز به صفحات خود اضافه کنیم؛ بدین ترتیب وجهه بهتری را از خود نمایش خواهند داد. با ما برای این آموزش همراه شوید.

اضافه کردن عکس:

مرحله اول: برای قرار دادن تصویر در صفحه, در اولین قدم تگ  را در ابتدای کد قرار می‌دهیم.

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

img src=url  / >

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

به مثال‌های زیر توجه کنید:

 

نمونه

تصویر شماره ۱/p>

img src=“http://zoomit.ir/templates/ja_argo/images/logo4.png /> 

نتیجه‌ای که مرورگر نمایش خواهد داد

تصویر شماره ۱

 logo4

توجه داشته باشید که برای نمایش تصاویر در اینترنت باید حتما آن‌ها را در جایی آپلود کرده و آدرس کامل و دقیق آن‌ها را به‌همراه پسوند وارد کنید.  فایل هایی که اسمشان دقیق نباشد یا فرمت عکس در آن‌ها نباشد به نمایش در نمی‌آیند. پس  zoomit.ir/ax.jpg یا zoomit.ir/ax.png صحیح است و  zoomit.ir/ax اشتباه است.

پیشنهاد: پیشنهاد می‌کنیم آدرس مستقیم عکس را از نوار آدرس مرورگر کپی کنید تا به‌طور کامل آدرس آن کپی شود.

اتریبیوت Alt: 

یکی دیگر از اتریبیوت‌های تصاویر alt است که درواقع حاوی حرف یا نوشته‌ است. این نوشته در زمانی‌که عکس بارگذاری نمی‌شود به‌جای عکس نمایش در می‌آید. alt خصوصا در هنگامی که گوگل به‌دنبال جستجوی تصاویر است استفاده می‌شود.

هر چند گاهی برخی افراد چندان به اتریبیوت alt توجه نمی‌کنند، ولی این اتریبیوت نقش بسیار مهمی در طراحی صفحات وب و نتایج گوگل دارد؛ پس همیشه سعی کنید آن را خالی نگذاشته و با کلمات مرتبط پر کنید.  همچنین alt برای معلولین یا افراد ناتوان و دستگاههای خواندن صفحه مثل braille تأثیر بسزایی دارد.

اتریبیوت alt را می‌توانید به‌صورت زیر بنویسید. 

نمونه کد:

"url" alt= "کلمه"  />

 تنظیم ابعاد تصاویر

 در حد امکان سعی کنید تصاویری که در صفحه استفاده می‌کنید سایز مناسبی داشته باشند؛ ولی در اچ تی ام ال می‌توانید تصاویر را با اندازه دلخواه بر حسب پیکسل (px) بزرگتر یا کوچکتر کنید. به مثال زیر توجه کنید.

نمونه

img src = (zoomit.ir/ax/html.jpg ) آدرس اینترنتی تصویر همانند   style=width:256px ;  height:365px; ”  />

نتیجه‌ای که مرورگر نمایش خواهد داد

1024px Spotify HQ 730x492

در اولین قدم, ما اتریبیوت Style را بعد از تصویرمان قرار داده‌ایم. سپس یکبار کلمه hieght را نوشته و بعد از علامت : طول تصویر را بر حسب پیکسل وارد می‌کنیم.  در مرحله بعد نیز  یکبار کلمه width را نوشته و عرض مدنظر را بر حسب پیکسل وارد می‌کنیم.

نکته بسیار مهم: توجه کنید که در هنگام وارد کردن مشخصات در داخل Style، بین هر دو استایل، یک علامت ; قرار دهید. 

نکته: ابعاد تصاویر بر حسب پیکسل وارد کنید.

راه دیگر برای تغییر ابعاد تصاویر آن است که آن‌ها را بدون اتریبیوت استایل بنویسید. درواقع استفاده از اتریبیوت استایل همیشه ضروری نیست و شما می‌توانید طول و عرض را به‌صورت مستقیم نیز استفاده کنید. بنابراین تصویر زیر نیز دقیقا همان کاری را انجام می‌دهد که در حین بکاربردن Style نشان داده شد.

src = “zoomit.ir/ax/html.jpg آدرس اینترنتی تصویر همانند   width=”256px”  height=“365px”  />

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

خلاصه قسمت پنجم:

در این قسمت چیزهایی که یادگرفته‌ایم را به‌صورت کاملا خلاصه مرور می‌کنیم.

  • در پنجمین قسمت از سری آموزش HTML و سی‌اس‌اس با نحوه قرار دادن تصاویر آشنا شدیم. قاعده کلی قرار دادن تصاویر   img src=url > است.
  • در ادامه با اتریبیوت‌های مهم تصاویر از جمله alt بازگو کردیم که به شما در کسب نتایج بهتر در جستجوی گوگل کمک می‌کند.
  • در آخر نیز نحوه‌ی تغییر سایز تصاویر توسط دو اتریبیوت طول (hieght) و عرض (width) فراگرفتیم.

آموزش و یادگرفتن اچ‌تی‌ام‌ال تا به اینجا لذت بخش بوده است؟ اینطور نیست؟ پس منتظر بخش‌های بعدی و یادگیری مطالب تازه باشید!

به این پست امتیاز دهید.
بازدید : 225 views بار دسته بندی : مجله برنامه نویس تاريخ : 2 جولای 2021 به اشتراک بگذارید :
دیدگاه کاربران
    • دیدگاه ارسال شده توسط شما ، پس از تایید توسط مدیران سایت منتشر خواهد شد.
    • دیدگاهی که به غیر از زبان فارسی یا غیر مرتبط با مطلب باشد منتشر نخواهد شد.

برچسب ها