آموزش پایتون بخش چهارم (Time library)

در بیشتر المپیادهای برنامه نویسی زمان اجرای برنامه عنصر بسیار مهمی است و بیشتر توسعه دهنده ها زمان اجرای برنامه هایشان را مهم می دانند، از این رو Time Library می تواند بسیار مفید باشد، این کتابخانه از قبل روی پایتون نصب شده و نیازی به نصب آن نیست. به ادامه ی مطلب بروید تا آموزش مختصری از این کتابخانه را ببینید.

آموزش پایتون بخش سوم (loops)

استفاده از حلقه ی شرطی در پایتون...

آموزش پایتون بخش اول (print و متغیر)

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

آموزش پایتون بخش سوم(while و time)

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

البته راه های ساده تری هم برای حل این سوال بود ولی این راه حل شاید راحتتر به ذهنتان می رسید.

b1=float(input())
b2=float(input())
b3=float(input())
if(b1>b2 and b1>b3):
    r1=b1
    if(b2>b3):
        r2=b2
        r3=b3
    if(b2<b3):
        r2=b3
        r3=b2
if(b2>b1 and b2>b3):
    r1=b2
    if(b1>b3):
        r2=b1
        r3=b3
    if(b1<b3):
        r2=b3
        r3=b1
if(b3>b1 and b3>b2):
    r1=b3
    if(b2>b1):
        r2=b2
        r3=b1
    if(b2<b1):
        r2=b1
        r3=b2
print(r1,'>',r2,'>'r3)

 

آموزش HTML (جلسه پنجم)

نمایش یک تصویر در صفحات سایت ها، وبلاگ ها و در کل امکان نمایش تصویر در وب را میسر می کند، در کنار تگ img به عنوان تگی کلیدی، می توان از عناصر دیگری از جمله alt، title، map، area، border و... استفاده کرد که قابلیت های بیشتری در نحوه نمایش و کنترل رفتارهای رویدادی (مانند تعیین محل کلیک کاربر) در اختیارمان قرار می دهند، از این رو در ادامه آموزش های مقدماتی HTML، این مطلب را اختصاص داده ایم به نحوه کاربرد تگ img و نمایش تصاویر در HTML.

 

 

 

تگ img در HTML

از تگ img برای نمایش یک تصویر در وب استفاده می شود، این تگ معمولا به همراه src می آید و src در واقع مخفف source یا منبع تصویر است که در اینجا معمولا آدرس کامل تصویر یا آدرس آن به صورت دایرکتوری مد نظر است، مثال زیر نحوه نمایش یک تصویر ساده را در وب نشان می دهد.

 

 

 

 

<img src="example-image.jpg" />

ویژگی alt در تگ img

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

 

<img src="example-image.jpg" alt="example-image" />

ویژگی title در تگ img

علاوه بر alt که متن جایگزین تصویر است، از عنصر title می توان برای هنگامی که کاربر ماوس را روی تصویر می برد، جهت نمایش یک پیام به صورت توصیف (tooltip) استفاده کرد، درون این ویژگی از متنی برای توضیح ماهیت تصویر استفاده کنید

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" />

ویژگی height و width در تگ img

برای اینکه ارتفاع و عرض تصویر خود را تعریف کنید، از دو ویژگی width و height در کنار سایر ویژگی های تگ img استفاده کنید، این کار مخصوصا از نظر سئو و موتورهای جستجو اهمیت زیادی دارد.

 

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" />

ویژگی border در تگ img

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

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" />

ویژگی usemap در تگ img

ویژگی هایی که پیش تر گفتیم، معمولا برای تصاویر معمولی در صفحات وب کفایت می کنند، اما برای مواردی پیشرفته تر می توان از خاصیت usemap و area برای تعریف نقاط قابل کلیک در یک تصویر استفاده کرد، گاهی نیاز به این داریم که بیش از چند لینک را در یک تصویر قرار دهیم یا بخش خاصی از آن را قابل کلیک شدن کنیم، این دسته از تنظیمات با ویژگی usemap و area در تگ img بر روی تصاویر قابل اعمال هستند.

 

<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="100" width="200" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="circle" coords="100,20,0" alt="تصویر دایره ای" href="image-html.html" />
<area shape="poly" coords="130,20,4,8,0,3" alt="تصویر چند ضلعی" href="image-html.html" />
<area shape="rect" coords="130,20,4,0" alt="تصویر مستطیل مربع" href="image-html.html" />
</map>

نکته مهم در این حالت، استفاده درست از شکل اشیائی است که می خواهیم قابل کلیک شدن باشند، سه مقدار circle ،poly و rect برای قسمت shape در area کاربرد دارند.
- rect به معنی rectangle یا مربع مستطیل است.
- poly یک شیء چند ضلعی است.
- circle برای ترسیم محیط قابل کلیک شدن به شکل دایره کاربرد دارد.

 

نحوه تنظیم مقادیر area در map

برای اینکه نقاط قابل کلیک شدن را به درستی برای تصاویر تعریف کنید، باید با نحوه مقدار دهی صحیح برای شکل های متفاوت، آشنا باشید.
- برای اشیاء rect یا مربع مستطیلی شکل، از چهار عدد به عنوان گوشه چپ - بالا و راست - پائین استفاده می شود، در واقع شما میزان فاصله سمت چپ و بالای تصویر و همچنین سمت راست و پائین تصویر را برای قابل کلیک بودن تعریف می کنید.

 

<area shape="rect" coords="0,0,13,16" href="http://www.geeklearnimg.ir">

- برای اشیاء چندگانه یا poly باید از 6 مقدار استفاده کنید، این مقادیر موقعیت محل قابل کلیک شدن را نشان می دهند.

 

<area shape="poly" coords="13,0,11,3,7,12" href="http://wwwgeeklearning.ir">

- نهایتا برای اشیاء دایره ای شکل یا circle کافی است دو مقدار را تعیین کنید، البته برای تعیین انحراف از مرکز دایره، مقدار سومی نیز می توان تنظیم کرد که به فرض دایره را به شکل بیضی تبدیل می کند.

 

<area shape="circle" coords="30,14,3" href="http://www.geeklearning.ir">

برای دیدن تمام ویژگی هایی که در این آموزش مرور کردیم به صورت آنلاین، می توانید از کد و پیش نمایش زیر استفاده کنید.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>گروه گیک لرنینگ | نمایش یک تصویر در وب</title>
<!-- http://www.geeklearning.ir -->
<style type="text/css">
body{
 font-family:Tahoma, Geneva, sans-serif;
 font-size:12px;
 direction:rtl;
}
</style>
</head>
<body>
<img src="example-image.jpg" alt="example-image" title="نمایش تصویر در html" height="194" width="259" border="0" usemap="#img-map" />
<map name="img-map" id="img-map">
<area shape="rect" coords="0,0,100,100" alt="تصویر مستطیل مربع" href="http://www.geeklearning.ir" />
</map>
<hr />
برای دیدن ویژگی map و area کافی است ماوس خود را بر روی گوشه بالای سمت چپ تصویر ببرید.
</body>
</html>