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

عمل كرد كد در مرورگرها (نرم افزار های تماشای سایت)

نگارش	مرورگر	عمل می كند/نمی كند
7.0	Internet Explorer	عمل میکند
3.0	Mozilla Firefox (beta)	عمل میکند
9.0	Netscape	عمل میکند

نظر یادتون نره

 

خوب. حالا با همدیگه قدم به قدم می ریم جلو تا با جزئیات این كد بیشتر آشنا بشیم. كد اصلی این شكلیه:

 

 

TEXT

 

شما باید توی كد بالا به جای عبارت "TEXT" متنی كه می خواهید حركت كند را وارد نمایید. خروجی كد بالا به شكل زیر است.

TEXT

  حالا امكان داره كه شما بخواهید سرعتی رو برای این متن در نظر بگیرید. پس كد به شكل زیر تغییر می كنه:

 

در كد بالا در عبارت scrollamount="1" به جای عدد 1 سرعت حركت را مشخص می كنید. هرجه این عدد بزرگتر باشد سرعت حركت بیشتر است. همچنین در عبارت  scrolldelay="20" به جای عدد 20 تاخیر لازم برای طی شدن مسیر توسط متن را وارد كنید. در كل باید روی این مقادیر كمی كار كرده و آن را تست كنید تا حركت مورد علاقه را بدست آورید. خروجی كد بالا با مقادیر scrollamount="1" scrolldelay="20" به شكل زیره:

TEXT

حال شاید بخواهید برای متن متحرك خود اندازه، رنگ و قلم در نظر بگیرید. حالا كد این شكلی میشه:

 

خوب… شاید كمی پیچیده به نظر برسه. اما اصلا اینطوری نیست. به جای عبارت های Tahoma و 10pt و red به ترتیب فونت نوشته، سایز نوشته و رنگ نوشته را مشخص نمایید. خروجی كد بالا به شكل زیره:

TEXT

ممكنه نوشته ی شما فارسی باشه. در این صورت بهتره كه از راست به چپ حركت كنه. یا این كه شاید شما مایل باشید نوشتتونه از بالا به پایین یا از پایین به بالا حركت كنه. پس یك تغییر دیگه توی كد به وجود میاد:

 

در كد بالا در عبارت direction="right" به جای كلمه ی right جهت حركت را مشخص فرمایید. (up: پایین به بالا، down: بالا به پایین، left: راست به چپ، right: چپ به راست) خروجی كد بالا به شكل زیره:

TEXT

شاید شما بخواهید دور Marquee مورد نظر خود، به اصطلاح Border بكشید. یعنی خطی دور تا دورش كشیده شود. حالا باز هم یك بخش دیگه به كدتون اضافه میشه:

 

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right"> TEXT

در كد بالا به جای عبارات 1px و #FF0000 به ترتیب سایز خط و رنگ خط را مشخص كنید. خروجی كد بالا به شكل زیر است:

TEXT

حالا شاید مایل باشید كه سایز Marquee خود را با توجه به نیازتان تغییر دهید. مثلا برای لینكدونی و اعلان بالای سایت یا وبلاگ، می بایست سایز های مختلفی در نظر گرفته شود. پس یك بخش دیگه هم اضافه می كنیم:

 

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100"> TEXT

در كد بالا به جای عدد 170طول Marquee خود را مشخص كنید و به جای عدد 100 عرض Marquee خود را مشخص كنید. (با گذاشتن یكای % در كنار عدد مورد نظر، می توانید كاری كنید كه طول/عرض Marquee دقیقا N در صد از صفحه را در بر گیرد و همواره با تغییر اندازه ی صفحه به وسیله ی مرورگر، اندازه ی آن نیز تغییر كند.) خروجی كد بالا به شكل زیر است:

TEXT

 و حالا اگر می خواهید با بردن نشانه گر موس روی متن متحرك، Marquee متوقف شود، یك كد به آن اضافه می گردد: (با تشكر از آقا محسن عزیز)

 

scrollamount="1" scrolldelay="20" style="border:1px solid #FF0000; font-family: Tahoma; font-size: 10pt; color: #FF0000" direction="right" width="170" height="100" onmouseover="this.stop()" onmouseout="this.start()"> TEXT

خروجی كد بالا به شكل زیر است:

TEXT

حال اگر می خواهید Marquee شما در وسط صفحه قرار گیرد، باید دو تگ به اول و آخر كد خود اضافه كنید.

منبع    http://eskerep.mihanblog.com/

برای دانلود یاهو مسنجراینجا  را کلیک کنید

 

 

 

^{عشق یعنی}

 

^{با جهان بیگانگی}

^{عشق یعنی}

 

^{شب نخفتن تا سحر}

^{عشق یعنی}

 

^{سجده با چشمان تر}

^{عشق یعنی سر}

 

^{به دار آویختن}

^{عشق یعنی}

 

^{اشک حسرت ریختن}

^{عشق یعنی در}

 

^{جهان رسوا شدن}

^{عشق یعنی} 

 

 

^{سست و بی پروا شدن}

^{عشق یعنی}

 

^{سوختن با ساختن}

^{عشق یعنی} 

 

^{زندگی را باختن}

^{**************}

^{عشق یعنی...}

^!

 

^{عشق یعنی}

 

^{انتظار و انتظار}

^{عشق یعنی} 

 

^{هرچه بینی عکس یار}

^{عشق یعنی} 

 

^{دیده بر در دوختن}

^{عشق یعنی}

 

^{در فراغش سوختن}

^{عشق یعنی}

 

^{لحظه های التهاب}

^{عشق یعنی}

 

^{لحظه های ناب ناب}

^{عشق یعنی} 

 

^{با پرستو پر زدن}

^{عشق یعنی} 

 

^{آب بر آذر زدن}

 

جوی شیر

تا نفس دارم به حرفم پافشاری می کنم
آب را در جویبار عشق جاری می کنم

با سرودِ رود می ریزم به دشتِ عاشقی
ریشه های آرزو را آبیاری می کنم

از صدای نارسای بی خودی هایم مرنج
شعرهایم را به یادت دستکاری می کنم

رونویسی می کنم آنچه که دارم در بساط
سینه را ویرایش دیدار داری می کنم

تا سری دارم، به سودای تو و سودای دل
با زبان شعر حافظ وار زاری می کنم
٭٭٭
عاشقی امشب هوای یار می بارد سرم
با تو امشب ای دل عیار! یاری می کنم

کوه را با پنجه های شعر از جا می کنم
پیش پای دوست جوی شیر جاری می کنم

اگُست ۲۰۱۱

راحله یار

عاقبت وسوسه بوسه مرا خواهد کشت

متهم کسیت منم؟

شعر!  دردا که سفر نامه ی من غمگین است

ورنه سر تــا به قـــــدم بال و پرت رنگین است

 

گفته بودم غزلم! درد و بلایت به سرم

تـــــا ابد ورد لبم زمزمه ی آمین است

 

خــون رگ های من از گرمی تو می جوشد

بی سبب نیست لبت روی لبم آذین است

 

چهــــــره افروخته ای، مثل دلـم سوخته ای

 واژه ات پنجه ی باران زده ی شاهین است

 

 دیشب از کـــــــوره بدر گشته به دل خندیدم

که چرا لحن غزل های خوشم غمگین است؟

 

عشق خندید به من، گفت که شاعر نشوی

ورنه پرونده ی عاشق شدنت سنگین است

٭٭٭٭٭

گرچه از تلخی پرونده به جانـــــم به سرت

حسرتی نیست رواداری دل شیرین است

 

فرصتی ده که شبی طعم لبت را بچشم

بین ما فاصلــــه مانند مه و پروین  است

 

عاقبت وسوسه ی بوسه مرا خواهد کشت

متهم کسیت منم؟ یا دل بی تمکین است؟

اپریل      راحله یار

۲۰۱۱

حادثه

بازاي حادثه ِي عشق دراين خانه ببار

همچو بيت غزل ِ داغ صميمانه ببار

به صداي ضربان ِ دل ِمن خورده نگير

بي دريغ از همه سو بر دل ِ ديوانه ببار

چهره بنما وبه يک جلوه تماشايم کن

آفتابي شو و بي پرده به ويرانه ببار

شعله مستانه به اين بيشه بزن مستي کن

در دلم جا کن و چون زلف سرِشانه ببار

درگذار ِ نفسم عطر صنوبر جاري ست

برسرِ سفره ي  ِپاييز بهارانه ببار

نفس ِ روشن ِ يک لحظه ي باراني باش

بازاي حادثه ي عشق دراين خانه ببار

 

راحله یار

دل من قطره اي است از دل دريايي تو

وسکوتم شبحي از غم تنهايي  تو

 

من دخيل حرم سبز نگاه تو شدم

بلکه فيضي برم از چشم اهورايي تو

 

بسته ي مهر توام گر تو شوي صيادم

دام بگشا که منم آهوي صحرايي تو

 

چهار فصل غزلم نشوه ي بوي تو شده است

همه مست تو وآن حسن تماشايي تو

 

گر همه جمع شوند لفظ وقلم  شعر وغزل

عاجز از يافتن رمز شکوفايي تو

 

هر مژه نقش دوچشمم تويي اي سرو رسا

سر پناه من ودل سايه ي رويايي تو

ح.م

 

 

 

مرا ببخش

یارب مرا به سلسله انبیا ببخش        بر شاه اولیا، علی مرتضی ببخش

یارب گناه من بود از كوهها فزون     جرم مرا به فاطمه، خیرالنسا ببخش

هركار كرده‌ام، همه بد بوده و غلط      یارب مرا تو بر حسن مجتبی ببخش

یارب اگر كه جود وسخائی نكرده‌ام     ما را تو بر سخاوت اهل سخا ببخش

یارب مرا به رحمت بی‌منتها ببخش       یعنی به ساحت حرم كبریا ببخش

یارب گناهكار و ذلیل و محقرم         عصیان من به شوكت عزّوجلا ببخش

یاب تو را به جاه و جلالت دهم قسم      جرم گذشته عفوكن و ماجرا ببخش

یارب مرا ببخش به اهل صلات و صوم * یعنی به نور صفوت اهل صفا ببخش

یارب تو را به نور جمالت دهم قسم      كز ظلمتم رهان و به نور هدا ببخش

یارب به نور ظلمت خاصان درگهت       این بنده را به ختم همه انبیا ببخش

یارب از این معاصی بسیار بی‌شمار

مستوجب عقوبتم؛ امّا مرا ببخش

 

نگاهت می کنم اما نمی فهمی نگاهم را

به آتش می کشی قلب پراز درد و گناهم را

اگر عشقم به فردا وا گذاری هیچ می دانی

همین امشب به پایان می برم آغاز راهم را

نمی دانم که بعد از مردنم دیگر چه خواهد شد

و فرصت پیش می آید ببخشی اشتباهم را

 

راستچین  و چپ جین و وسط چین کردن اشیا و متن ها  در صفحات


 خیلی از دوستان در سوال های مطرح

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

:: اول از همه بزارید در یک دسته بندی کلی تگ ها . المان های html رو به دوبخش تقسیم کنیم :

    متن ها و المان های شبه متن مثل لینک ها و عکس ها
    تگ ها و المان های بلاکی مثل جدول ها و تقسیم بندی ها (تگ div)

:: تگ ها و المان های بلاکی فرقشون با بقیه اینه که به صورت ضمنی قبل و بعدشون یک خط جدید ایجاد میشه . در واقع یعنی یک خط کامل رو در بر میگرین و پهناشون 100 درصد هست . المان های بلاکی شامل پاراگراف ها ، لیست ها ، جدول ها ، فرم ها و هدینگها هستند .

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

:: روش اول : وسطچین کردن اشیاء ( کهنه و منسوخ شده ) :

در این روش از تگ center که در ورژن های قدیمی html وجود داشت استفاده میشه . بعد از ورود CSS دیگه از این تگ استفاده نمیشه . البته هنوز مرورگرها اونو support می کنن ولی به احتمال زیاد در نسخه های آینده برای استاندارد سازی صفحات وب این سری از تگ های html که منسوخ شدند (تگ هایی مثل center و font ) دیگه توسط مرورگرها پشتیبانی نمیشه تا طراحان رو به استفاده از CSS برای این کار ملزم کنند .

شما هر کدوم از تگهای html ، متن ها ، عکسها و ... رو که درون تگ center قرار بدید ، اون شئ به صورت وسط چین در صفحه ی وب نماییش داده می شه . به طور مثال در کد زیر متن و عکس درون تگ center به وسط خط (از لحاظ افقی) منتقل میشن :

welcome to 7learn.com web design tutorials ...

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

:: روش دوم : تعیین موقعیت افقی محتوای پاراگراف در html با استفاده از ویژگی align در تگ

:

در صفحات وب معمولا متن ها درون تگ

که همون تگ پاراگراف هست قرار می گیرند . برای اینکه چینش افقی متن یک پاراگراف تعیین بشه ، برای این تگ یک attribute به نام align تعریف شده که می تونه مقادیر center ، left و right رو دریافت کنه که به ترتیب متن درون پاراگراف رو چپ چین ، وسطچین و راست چین میکنه . البته ویژگی align مقدار justify رو هم میتونه بپذیره که باعث میشه اندازه ی تمام خط های متن درون پاراگراف یکسان بشه و متن از دو طرف صاف بشه و حالت منظم به خودش بگیره . در صورتی که برای ویژگی align مقداری تعیین نکنید به صورت پیشفرض براش مقدار left در نظر گرفته میشه .

تگ پاراگراف یک ویژگی دیگه به نام dir داره که مخفف direction (جهت) هست که برای پاراگراف هایی که متن درونشون از زبانهای راست به چپ نویس ، مثل فارسی هست باید مقدار rtl یعنی (right to left) و برای زبان هایی که نوشتن اونها از چپ به راست هست مثل انگلیسی باید مقدار ltr یعنی (left to right) رو بگیره . مقدار پیشفرض ویژگی dir هم که ltr هست ، یعنی مخصوص زبان هایی مثل انگلیسی .

:: چهار تا پاراگرافی که در زیر آوردم رو به صورت مثال می تونید ببینید . متن درون هر پاراگراف توضیح چینش همون پاراگراف هست :

چپ چین و مناسب برای نوشته های چپ به راست

چپچین و مناسب زبان فارسی

راست چپن و مناسب زبان انگلیسی

راستچین و مناسب فارسی

در تگ p اگر ویژگی align و dir آورده نشه ، مقدار پیشفرضی که گفتیم (left و ltr) براش در نظر گرفته میشه !

:: روش سوم : استفاده از CSS برای تعیین موقعیت افقی محتوای تگ ها

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

:: ویژگی text-align در CSS دقیقا همون کار ویژگی align در پاراگراف ها رو انجام میده . همون مقادیر رو هم میتونه بپذیره . به جای ویژگی dir در تگ p هم یک ویژگی به نام direction در CSS وجود داره که این ویژگی هم مثل dir می تونه دو مقدار ltr و rtl رو بپذیره.

خوبی استفاده از ویژگی های CSS اینه که دیگه فقط مختص تگ p نیست و شما در هر تگی که این ویژگی ها رو به صورت CSS بکار ببرید ، میشه چینش محتوای درون اون تگ رو تعیین کرد .

همون چهار تا پاراگراف بالایی رو که با استفاده از ویژگی های html خود تگ p براتون آوردیم ، در زیر با استفاده از ویژگی های معادل در CSS نوشتم که از لحاظ شیوه ی نمایش و چینش هیچ فرقی با هم نمی کنند ولی استفاده از این روش استاندارد تر هست :

چپ چین و مناسب برای نوشته های چپ به راست

چپچین و مناسب زبان فارسی

راست چپن و مناسب زبان انگلیسی

راستچین و مناسب فارسی

:: یه نکته اینکه برای استفاده از ویژگی های CSS درون تگ های html ، باید از ویژگی style درون اون تگ استفاده کرد که ویژگی های CSS مختلف رو که با علامت semi-colon (;) از هم جدا شدند به عنوان مقدار می پذیره . (برای آشنایی کامل با چگونگی استفاده از ویژگی های CSS پیشنهاد می کنم حتما مطلب شیوه های مختلف استفاده از CSS در صفحات html و Syntax و قواعد نوشتاری زبان CSS رو بخونید) .
:: برای تعیین چپنش افقی عکس ها ، می تونید اون رو درون یک تگ پاراگراف که چینش رو براش تعیین کردید استفاده کنید .

:: روش چهارم : استفاده از CSS برای تعیین موقعیت افقی المان های بلاکی مثل جدول ها و تقسیم بندی های صفحه (تگ div)

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

روش غیراستاندارد و غیر معمولی که بکار میره اینه که جدول ها و المان های بلاکی رو درون یک تگ دیگه قرار میدند و چینش تگ پدر رو تعیین می کنند تا محتوای درون اون رو به راست ، چپ یا وسط ببرند . این روش نادرسته و در بعضی از مرورگر ها پشتیبانی نمیشه .

:: برای این منظور باید از ویژگی های CSS برای همون تگی که می خوایم چینشش رو تعیین کنیم ، استفاده کنیم . برای راست چین و چپ چین کردن یک المان بلاکی باید از ویژگی float در CSS که به معنی شناور بودن هست در خود تگ استفاده کنیم . ویژگی float دو مقدار left و right رو می پذیره که باعث شناور شدن المان بلاکی در چپ یا راست میشه . به طور مثال در کدهای زیر جدول آورده شده به سمت راست صفحه منتقل میشه (محتواش راست چین نمیشه ، خودش به راست میره) و تگ div آورده شده در سمت چپ شناور میشه .

7Learn.com Web Tutorials


7Learn.com Web Tutorials

در المان های بلاکی به صورت پیش فرض پهنای المان 100 درصد هست . برای همین من با استفاده از ویژگی width مقدار 200 پیکسل رو برای پهنای تگ جدول و div فوق تعیین کردم تا به چپ و راست رفتنشون مشخص باشه .

:: روش مرسوم و صحیح وسط چین کردن المان های بلاکی استفاده از ویژگی margin در CSS هست . ویژگی margin فاصله ی حاشیه ی یک تگ تا تگ پدرش (تگی که اون رو در بر داره) رو مشخص میکنه . شاید تعجب کرده باشید که چطور و چرا از این تگ برای وسط چین کردن المان بلاکی استفاده میشه ! خوب وقتی شما این فاصله رو از چپ و راست مقدار 50 درصد قرار بدید ، در واقع یعنی اونو در وسط قرار دادید !

:: چون قصد دارم در آینده در مورد ویژگی margin و دو ویژگی padding و border در CSS یک مطلب مفصل بنویسم و تفاوت و کاربردهاشون رو بگم در اینجا مختصرا در مورد margin توضیح میدم . تگ margin چهار مقدار رو که با یک space از هم جدا میشن ، می پذیره که به ترتیب فاصله از بالا ، راست ، پایین و چپ تگ رو مشخص می کنه . به طور مثال در پاراگراف زیر فاصله از بالای پاراگراف 10 پیکسل ، از راست 7 پیکسل از پایین 5 پیکسل و از چپ 3 پیکسل هستش :

7Learn.com

همونطور که گفتم شما میتونید به جای واحد pixel از درصد استفاده کنید . با قرار دادن مقدار 50 درصد برای فاصله از چپ و راست ، المان رو به وسط میارید . همچنین برای انتقال یک المان بلاکی به وسط ، مرسوم هست که در تگ margin برای فاصله از بالا یک مقدار رو تعیین می کنند و به جای سه مقدار دیگه از کلمه ی auto استفاده می کنند . که اینکار به صورت پیشفرض فاصله از سه سمت دیگه رو 50% در نظر میگیره .
همون تگ پاراگراف فوق رو با یکی از دو شیوه ی زیر با استفاده از تگ margin میشه به وسط منتقل کرد :

7Learn.com

7Learn.com

:: برای به وسط آوردن جدول و تگ div ی که در بالا به چپ و راست شناورش کرده بودیم هم میشه به این شکل عمل کرد :

7Learn.com Web Tutorials


7Learn.com Web Tutorials

:: ضمنا بر اساس طراحی تون می تونید به جای 50 درصد از دو طرف ، از یک طرف مثلا 30 درصد و از طرف دیگه 70 درصد فاصله بدید . در این حالت شئ مورد نظر به سمتی که %30 فاصله دادید مایل میشه !

رونوشت از      http://www.7learn.com