تخفیف ویژه

آموزش HTML (قسمت 6) : کار با تصاویر در HTML

دسته بندی: آموزش
زمان مطالعه: 4 دقیقه
۰۴ مهر ۱۳۹۱

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

فهرست محتوای این مقاله

تگ </ img>

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

حالا میخواهیم آن را در فایل html مان بگنجانیم. برای این کار میتوان از چنین کدی استفاده کنیم:

<img src="7learn.png" alt="7Learn Logo" border="2" width="400" height="150" />

نتیجه در مرورگر:

تگ <img>

حال شما را با صفت‌های این تگ آشنا می‌کنیم:

align : این صفت نحوه قرار گیری عکس نسبت به متن و عناصر اطرافش در صفحه را کنترل میکند. که میتواند مقادیر زیر را بپذیرد:

  •  right : عکس را در سمت راست متون اطرافش قرار می‌دهد.
  • left : عکس را در سمت چپ متون اطرافش قرار می‌دهد.
  • top : قسمت بالای عکس با خطی که در آن قرار دارد تراز خواهد شد.
  • middle : میانه های(وسط) عکس با خطی که در آن قرار دارد تراز خوهد شد.
  • bottom : قسمت پایینی عکس با خطی که در آن قرار دارد تراز خوهد شد.

alt : متنی را به عنوان مقدار می‌پذیرد و در صورتی که به هر دلیلی عکس مورد نظر پیدا نشود این متن به جای عکس نمایش داده خوهد شد. در نسخه XHTML شما باید حتما از صفت alt برای عکس عکس هایتان استفاده کنید. حتی خالی!!! موتورهای جستجو ار مقدار تعیین شده برای این صفت به منظور بدست آوردن اطلاعاتی در مورد عکس‌ها استفاده می‌کنند.

border : میزان ضخامت حاشیه عکس را با عددی بر حسب px مشخص می‌کند.

height : ارتفاع عکس را بر حسب px یا درصد بیان میکند.

width : عرض عکس بر حسب px یا درصد بیان می‌کند.

hspace: میزان فاصله سمت چپ و راست عکس نسبت به عناصر اطراف را کنترل میکند.

vspace : میزان فاصله سمت بالا و پایین عکس نسبت به عناصر اطراف را کنترل میکند.

src : این صفت اصلی‌ترین صفت برای تگ img است و آدرس عکسی که میخواهیم نمایش داده شود را مشخص میکند. مقدار این صفت می‌تواند یکی از انواع آدرس‌های نسبی و مطلق باشد.

استفاده از تصاویر به عنوان لینک

تبدیل تصاویر به عنوان لینک بسیار آسان است. بدین منظور کافی است به جای قرار دادن متن ساده در بین تگ‌های باز و بسته a از یک تگ img که اشاره به عکس مورد نظرتان دارد استفاده کنید. تصاویر در این حالت معمولا برای ایجاد دکمه‌های گرافیکی یا لینک به سایر صفحات همانند مثال زیر استفاده می‌شود:

لینک متنی :

<a href="https://7learn.com" target="_blank"> 7Learn </a>

لینک تصویری:

<a href="https://7learn.com" target="_blank" title="click here to return to the 7Learn.com" > <img src="7learn.png" alt="7Learn Logo" border="2" width="400" height="150" /> </a>

نتیجه در مرورگر :

لینک تصویری به سایت سون لرن

درج توضیحات در HTML

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

<!-- this is a comment -->

همانطور که می‌بینید یک توضیح با !> و با < ختم می‌شود. در حقیقت متنی که بین دو -- ابتدایی و دو -- انتهایی قرار میگیرد توسط مرورگر‌ها به عنوان comment تعبیر خواهد شد.

دفت داشته باشید که بین دو -- ابتدایی و انتهایی نباید -- دیگر قرار گیرد. به عنوان مثال دستور زیر نادرست است:

<!-- this is a -- comment -->

یک دستور comment میتواند حاوی بیش از یک متن به عنوان توضیحات باشد. به عنوان مثال دستور زیر دو comment  را تعریف میکند:

<!-- this is a -- -- comment -->

در دستور فوق this is a یک comment ، و عبارت comment ، یک comment دیگر است.

نکته :

دقت داشته باشید که تعداد کاراکترهای -- در یک comment  صحیح باید همیشه مضزبی از 4 باشد.

میتوان از comment‌ها برای از کار انداختن تگ‌های یک صفحه استفاده کرد. به عنوان مثال در کد زیر دیگر محتوای p در صفحه نمایش داده نخواهد شد:

<--! this paragraph not display in page -->

اما نمی‌توان از comment هابرای از کار انداختن صفت‌های داخل یک تگ استفاده کرد. به عنوان مثال کد زیر نمی‌تواند از عملی که صفت title انجام می‌دهد. جلوگیری کند:

<p <!-- title="my paragraph" --> > This is a Pragraph </p>

در مطلب بعدی به کار با لیست‌ها و طریقه ایجاد آن‌ها خواهیم پرداخت.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

......

آقا کامنت هم تگ هارو از کار میندازه هم صفت هارو،من آزمایش کردم این نتیجه رو گرفتم(آقای دریس گفت که صفت ها رو از کار نمیندازه)

[email protected]

مرسی از پاسخ هاتون آقای آوند…

آقای دریس در آخر آموزش این قسمت فرمودن :
“میتوان از comment ها برای از کار انداختن تگ های یک صفحه استفاده کرد. به عنوان مثال در کد زیر دیگر محتوای p در صفحه نمایش داده نخواهد شد:

من متوجه نشدم ، مثلا من اگه با تگ p یه پاراگراف چیزی بنویسم و داخل همون پاراگراف کامنت بالا رو قرار بدم دیگه پاراگراف توی مرورگر به من نمایش داده نمیشه؟!!!
یه کم غیر منطقی میاد ، فکر کنم من منظورو بد برداشت کردم .

کلا توی نکته آخر آموزش این قسمت گیر افتادم!

لقمان آوند

در واقع کامنت ها برای نوشتن یادداشت هایی در حین کدنویسی هستند . مرورگر کامنتها رو اصلا برای نمایش در صفحه نشون نمیده و رها می کنه . حالا می خواد هر چی توی کامنت باشه !
در عین حال اگر بخواید قسمتی از کد وجود داشته باشه ولی نمایش داده نشه (چون ممکنه بعدا بهش نیاز داشته باشید) می تونید اون قسمت رو در کامنت قرار بدید .

وحید صالحی

هر تگ یا نوشته ای که بین کامنت ها قرار بگیره نمایش داده نمیشه …اگه در یک تگ p چیزی بنویسید قسمتی که بین کامنت باشه نمایش داده نمیشه مثلا در این تگ

سلام این یک متن

قسمت آزمایشی است که بین کامنت قرار گرفته نمایش داده نمیشه…

[email protected]

ببخشید چجوری کامنت ها میتونن تگ ها رو از کار بندازن؟؟ من متوجه نشدم!

لقمان آوند

متوجه نشدم . سوالتون رو واضحتر بپرسید .

علی

ببخشید ولی فکر کنم align مقدار center رو هم بپذیره؟؟!!!!! ❗

لقمان آوند

بله درسته

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.