آموزش کامل HTML - قسمت پنجم


با سلام خدمت دوستان و همراهان همیشگی زُلند .

توی قسمت پنجم آموزش میخوایم با نصاویر در HTML آشنا بشیم.

خب ما برای ایجاد تصویر در صفحات HTML باید از تگ <img> که یک تگ تهی و بدون پایان هست استفاده کنیم.

همچنین برای نمایش تصویر در صفحه وب باید از خصوصیت src که مخفف source هست استفاده کنیم و ادرس تصویر مورد نظر رو بعنوان مقدار به این خاصیت بدیم.

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

<img src=" https://www.zoland.org/images/logo.png" />

یک خصوصیت دیگه هم میشه به تگ <img> داد به نام خاصیت alt که این خاصیت یک متن رو بعنوان مقدار میگیره و کاربردش اینه اگر یه زمانی به هر دلیلی تصویر ما توی صفحه وب نمایش داده نشد یا خطایی رخ داد این متن بعنوان جایگزین نمایش داده بشه. به مثال زیر دقت کنید :  

<img src=" https://www.zoland.org/images/logo.png" alt=”Error” />

معمولا خاصیت alt رو اینطور استفاده میکنن که اگه عکس نمایش داده نشد یه اطلاعات مختصر در مورد عکس به کاربر داده بشه.

همچنین شما میتونید به عکس خودتون عرض و ارتفاع بدین که با استفاده از خصوصیات width و height و مقادیر پیکسلی امکان پذیره. به مثال زیر دقت کنید :

<img src=" https://www.zoland.org/images/logo.png" alt=”Error” width="304" height="228"/>

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

خب حالا اگر بخوایم یک تصویر رو بین متن ها قرار بدیم و متن رو نسبت به عکس تراز کنیم چندین روش وجود داره، به مثال های زیر دقت کنید:

 

<p> image

<img src=”https://www.zoland.org/images/logo.png" alt=”logo” align=”top” width=”32” height=”32” />

With align=”top” </p>

 

<p> image

<img src=”https://www.zoland.org/images/logo.png" alt=”logo” align=”bottom” width=”32” height=”32” />

With align=”bottom” </p>

 

<p> image

<img src=”https://www.zoland.org/images/logo.png" alt=”logo” align=”middle” width=”32” height=”32” />

With align=”middle” </p>

به مثال های بالا دقت کنید توی مثال اول متن پایین تر از عکس قرار میگیره و در مثال دوم متن بالاتر از عکس قرار میگیره و در مثال اخر متن در وسط قرار میگیره.

و همچنین اگر بخوایم عکس ما بعد و یا قبل از متن قرار بگیره باید خاصیت align رو برابر left و right قرار بدیم به این صورت :

<p>

<img src=”https://www.zoland.org/images/logo.png" alt=”logo” align=”left” width=”32” height=”32” />

Set in left </p>

 

<p>

<img src=”https://www.zoland.org/images/logo.png" alt=”logo” align=”right” width=”32” height=”32” />

Set in right </p>

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

 

ادامه آموزش هارو در قسمت ششم بخونید

 

 

 

 

 

 

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

In programmers world anything is possible !

5 امتیاز 10 نوشته

این نوشته را با دوستان خود به اشتراک بگذارید...

برای ارسال دیدگاه خود لطفا وارد سایت شوید و یا ثبت نام کنید.