آموزش HTML - بخش پنجم: عکس‌

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

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

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

<img src="url"  / >

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

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

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

<img src="//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 نشان داده شد.

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

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

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

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

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