در صفحه ی فوق به راحتی می تونید با انتخاب گزینه های مختلف نوع و شکل دلخواه دکمه گوگل پلاس خودتون رو انتخاب کنید و کدش رو از باکس موجود بردارید و در قالب وبلاگ یا سایت خود قرار بدید . به طور مثال در عکس زیر من زبان فارسی و نوع دکمه بلند و حبابی (با نمایش تعداد کلیک ها) رو انتخاب کردم :
:: در قسمتی که می خواید کد رو بردارید دو تیکه وجود داره که در عکس زیر نمایش داده شده . برای قرار دادن کد دکمه گوگل پلاس در قالب وبلاگ یا سایت خود به عکس زیر دقت کنید و توضیحات درون عکس و محل قرار دادن کد رو بخونید :
ایشالله که با قرار دادن مطالب مفید در وبلاگ و یا وبسایتتون بتونید بازدید کنندگان رو قانع کنید که به شما یک ۱+ هدیه بدند . اگه مطالب ما رو هم مفید می بینید همین الان از باکس پایین سمت چپ صفحه یه ۱+ به ما بدید و ما رو حمایت کنید تا ازین پس مطالب پربارتر و به روز تر باشند . موفق باشید …

.: مطالب مرتبط با این پست :.

• ثبت رایگان لینک شما در بیش از 500 سایت و افزایش رتبه و pagerank گوگل!
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• توليد اعداد random و تصادفي در جاوااسکريپت
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• استفاده از سرویس Feedburner بدون فیلتر و انتقال به وبسایت شخصی
• تصاویر بزرگترین سایت های دنیا در هنگام آغاز به کار !
• پاسخ به سوالات (4)

:: در ابتدا جدول پرکاربردترین واحدهای استفاده شونده در CSS رو براتون قرار میدیم که می تونید در زیر ببینید :

در استفاده از واحدهای مختلف طولی هیچ اجباری نیست و شما می تونید از هر کدوم که می خواید استفاده کنید . ولی سه واحد px , em و % در صفحات وب کاربرد بیشتری دارند .

:: ضمنا واحدهایی که برای استفاده در صفحات وب برای نمایش روی صفحه مانیتور بکار میره با وحدهایی که در صفحات مخصوص پرینت شدن روی کاغذ استفاده میشه معمولا متفاوته و بهتره برای هر کدوم از مجموعه ای که در جدول زیر براتون آوردم استفاده بشه :

:: رابطه ی بین واحدهای معروف استفاده شده به شکل زیره :

اگر خط کش دارید میتونید ارتفاع ناحیه ی سبز رنگ فوق رو اندازه بگیرید که برابر با ۱ اینچ (۲٫۵۴ سانتیمتر) هست !
واحدهایی که در باکس سبز رنگ فوق آورده شده اصطلاحا absolute units گفته می شن . یعنی اینکه اندازه ی اون ها همواره ثابت هست . چه روی کاغذ باشه ، چه روی مانیتورهایی با رزولوشن متفاوت . از این جهت که سایز صفحه نمایش مانیتورها متفاوته پیشنهاد می شه از این واحدها در صفحات وب مخصوص نمایش روی مانیتور ها استفاده نکنید. صفحه نمایش های کوچکی مثل موبایل ها ممکنه تا ۸ سانتیمتر کوچیک و صفحه نمایش بعضی مانیتور ها تا ۸۰cm هم ممکنه باشه و نمایش طول ثابت ۱ سانتیمتر در این دو ثابته ، ولی نسبت به اندازه ی اونها خیلی فرق میکنه !
:: پس بهتره از واحدهایی مثل px ، em و درصد % استفاده کنید که وابسته به اندازه ی صفحه نمایش هستند!
در زیر جدولی رو براتون آوردم که مقایسه ی بین اندازه ی ۴ واحد معروف px , pt , em و % هست و مقادیر معادل هر کدوم رو به سه واحد حساب کرده :

نتیجه ای که از این بحث گرفتیم اینه که در صفحاتی که مخصوص پرینت شدن طراحی میشن از واحد های absolute استفاده بشه تا نمایش اونها در صفحه وب و صفحه مانیتور کاملا یکسان و به یک سایز باشه . در صورتی که در صفحات وب که نمی خواید مخصوص پرینت شدن باشه از واحد های px ، % و em استفاده کنید.

.: مطالب مرتبط با این پست :.

• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• توليد اعداد random و تصادفي در جاوااسکريپت
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• خونه تکونی بعد از 4 سال …
• Syntax و قواعد نوشتاری زبان CSS
• معرفی CSS و مزیت های آن
• آموزش کامل قرار دادن عکس در پس زمینه ی صفحه
• معرفی زبان Html
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی

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

<a href = 'ymsgr:sendim?YahooID'>ارسال پیام به مدیر</a>

در کد فوق که یک لینک ساده ی html هست و آنلاین یا آفلاین بودن صاحب آیدی در اون مشخص نیست ، ویژگی href دارای مقدار ymsgr:sendim?YahooID هست . ymsgr مشخص میکنه که این لینک توسط برنامه ی یاهومسنجر که در کامپیوتر کاربر نصب هست باز میشه و یک پنجره ی چت رو باز میکنه . و YahooID هم آیدی یاهویی هست که شما باید اونو عوض کنید و آیدی خودتون رو بزارید .

اگر بخواید یک پیام رو به صورت پیش فرض در کد قرار بدید باید از ویژگی m استفاده کنید . به شکل زیر :

<a href = 'ymsgr:sendim?YahooID&m=salam+az+7Learn+Omadam'>ارسال پیام به مدیر</a>

در کد فوق هر بار که کاربر روی لینک ارسال پیام به مدیر کلیک میکنه یه پیام پیشفرض “salam az 7Learn Omadam” برای شما ارسال میشه و شما متوجه میشید که کسی که براتون pm داده از سایتتون اومده ! یک نکته مهم اینکه اگر پیامی که می خواید به صورت پیشفرض بذارید شامل space و فضای خالی هست باید به جای space ها از علامت + استفاده کنید و پیام نباید شامل space باشه .

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

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

.: مطالب مرتبط با این پست :.

• توليد اعداد random و تصادفي در جاوااسکريپت
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• استفاده از سرویس Feedburner بدون فیلتر و انتقال به وبسایت شخصی
• تصاویر بزرگترین سایت های دنیا در هنگام آغاز به کار !
• آموزش جاوا اسکریپت (3) : متغیرها و ذخیره سازی داده ها
• تفاوت اندک بین ورژنهای نسخه های نرم افزاری به چه معناست؟

در آموزش ویدیویی قسمت دوم جاوااسکریپت در مورد مباحث زیر بحث میشه :

• متغیر چیست ؟
• دلایل استفاده از متغیرها
• شیوه ی تعریف متغیر در زبان جاوااسکریپت و تفاوت اون با دیگر زبان ها
• قوانین نامگذاری متغیرها در جاوااسکریپت
• چگونگی مقداردهی به متغیرها
• کلمات reserve و ذخیره شده در جاوااسکریپت
• چند مثال مفید از جمله ساختن یک لینک با استفاده از مقادیر متغیرها

پیشنهاد میشه برای داشتن کیفیت کامل ، این ویدیو رو به صورت تمام صفحه (Full Screen) ببینید :

.: مطالب مرتبط با این پست :.

• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• توليد اعداد random و تصادفي در جاوااسکريپت
• مقايسه واحدهاي سايز در CSS‏ ( px , pt , em , % , in , cm , mm)
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• یک ادیتور برای همه ی زبان های برنامه نویسی !!!
• معرفی زبان Html
• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• خونه تکونی بعد از 4 سال …

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

:: تولید اعداد اعشاری تصادفی بین صفر و یک :

:: خوب ، بریم سر اصل مطلب . در javascript برای تولید اعداد random از متد ()Math.random استفاده میشه . متد ()Math.random یک عدد اعشاری بین ۰ و ۱ رو تولید میکنه . به طور مثال اگر شما کد زیر رو درون تگ body در صفحه ی وب قرار بدید یک عدد اعشاری بین ۰ و ۱ ، با بیش از ده رقم اعشار براتون چاپ میشه .

<script type="text/javascript">
    randomNumber = Math.random();
    document.write(randomNumber);
</script>

:: خروجی این کد (یک عدد تصادفی اعشاری بین ۰ و ۱) :  (با رفرش صفحه عددی جدید می بینید)

در کد فوق عدد تصادفی توسط متد ()Math.random تولید شده و در متغیر randomNumber قرار میگیره و مقدار این متغیر توسط متد  ()document.write در صفحه ی وب چاپ میشه .

:: تولید اعداد اعشاری تصادفی بین صفر و عددی دلخواه :

حالا اگربخواید اعداد بزرگتری رو به صورت رندم تولید کنید کافیه عدد تولید شده توسط متد رندم رو در حداکثر عدد دلخواهتون ضرب کنید . مثلا اگر میخواید یک عدد رندم بین ۰ تا ۱۰۰ تولید کنید ، همون کد بالا رو به شکل زیر داریم :

<script type="text/javascript">
    randomNumber = Math.random() * 100;
    document.write(randomNumber);
</script>

:: خروجی این کد (یک عدد تصادفی اعشاری بین ۰ و ۱۰۰) :  (با رفرش صفحه عددی جدید می بینید)

:: تولید اعداد صحیح تصادفی بین صفر و عددی دلخواه :

برای اینکه اعداد تصادفی تولید شده رو از حالت اعشاری دربیارید و اعداد رو به صورت صحیح و بدون قسمت اعشاری داشته باشید باید از متد ()Math.floor استفاده کنید . این تابع یک عدد اعشاری رو به عنوان ورودی میگیره و خروجیش جزء صحیح اون عدد هست . جزء صحیح همون بزرگترین عدد صحیح کوچکتر از یک عدد اعشاریه . پس برای تولید اعداد صحیح بین ۰ تا یک عدد دلخواه مثل ۱۰۰ ، کد رو به شکل زیر داریم :

<script type="text/javascript">
    randomNumber = Math.floor(Math.random() * 100);
    document.write(randomNumber);
</script>

در این کد ابتدا یک عدد اعشاری بین ۰ و ۱ توسط تابع random تولید میشه ، بعد ضرب در ۱۰۰ میشه و سپس عدد حاصل ،که یک عدد اعشاری بین ۰ تا ۱۰۰ هست ، جزء صحیحش توسط متد floor گرفته میشه و در متغیر randomNumber قرار میگیره .
:: خروجی این کد (یک عدد تصادفی صحیح بین ۰ و ۱۰۰) :  (با رفرش صفحه عددی جدید می بینید)

:: تولید اعداد صحیح تصادفی بین دو عدد دلخواه :

شاید دوست نداشته باشید عدد تصادفی از ۰ تا یه عدد دلخواه باشه . و بخواید مثلا عدد تولید شده بین ۸۰ تا ۱۰۰ باشه . انجام اینکار هم سادست . فرض کنید که می خواید اعداد تصادفی تولید شده بین دو عدد x و y باشه . کافیه عدد باند پایین یعنی x رو به عدد رندم تولید شده اضافه کنید و تابع رندم رو به جای اینکه در y ضرب کنید در y-x ضرب کنید . مثلا اگر بخواید اعداد تصادفی تولید شده بین ۸۰ و ۹۲ باشند ، کد رو باید به صورت زیر بنویسید :

<script type="text/javascript">
    randomNumber = 80 + Math.floor(Math.random() * 12);
    document.write(randomNumber);
</script>

12 همون اختلاف بین ۹۲ و ۸۰ هست ، و ۸۰ رو هم که با عدد تصادفی تولید شده جمع کردیم . در واقع حداقل می خواید ۸۰ رو داشته باشید به اضافه ی یک عدد تصادفی بین ۰ تا ۱۲ !
:: خروجی این کد (یک عدد تصادفی صحیح بین ۸۰ و ۹۲) :  (با رفرش صفحه عددی جدید می بینید)

:: تابع تولید اعداد صحیح تصادفی بین دو عدد دلخواه :

:: در آخر هم یک تابع ساده براتون نوشتم که دیگه نخواید کد اضافه بزنید ! به راحتی می تونید کد زیر رو درون تگ head اضافه کنید :

<script type="text/javascript">
    function myRandom(start,end){
         randomNumber = start + Math.floor(Math.random() * (end-start));
         return randomNumber;
    }
</script>

و درون تگ body به همین راحتی از اون استفاده کنید(که در مثال زیر چهار بار برای دامنه های مختلف عددی استفاده شده) :

<script type="text/javascript">
    document.write(myRandom(0,3)+'<br>');
    document.write(myRandom(10,20)+'<br>');
    document.write(myRandom(100,1000)+'<br>');
    document.write(myRandom(1000,2000)+'<br>');
</script>

تگ br هم که استفاده شده برای نمایش هر عدد در یک خط جدید است .
:: خروجی کد (چهار عدد تصادفی در دامنه های ذکر شده در کد) :  (با رفرش صفحه اعداد نو میبینید)

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

.: مطالب مرتبط با این پست :.

• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• مقايسه واحدهاي سايز در CSS‏ ( px , pt , em , % , in , cm , mm)
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• استفاده از سرویس Feedburner بدون فیلتر و انتقال به وبسایت شخصی
• خونه تکونی بعد از 4 سال …
• کد جاوا اسکریپت نمایش متن و جمله ی اتفاقی و تصادفی

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

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

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

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

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

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

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

<center>
    welcome to 7learn.com web design tutorials ...
    <img src="image_url" />
</center>

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

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

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

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

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

<p>چپ چین و مناسب برای نوشته های چپ به راست</p>
<p dir="rtl">چپچین و مناسب زبان فارسی</p>
<p align="right">راست چپن و مناسب زبان انگلیسی</p>
<p dir="rtl" align="right">راستچین و مناسب فارسی</p>

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

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

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

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

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

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

<p>چپ چین و مناسب برای نوشته های چپ به راست</p>
<p style="direction:rtl">چپچین و مناسب زبان فارسی</p>
<p style="text-align:right">راست چپن و مناسب زبان انگلیسی</p>
<p style="direction:rtl;text-align:right;">راستچین و مناسب فارسی</p>

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

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

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

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

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

<table style="width: 200px;float: right;">
    <tr>
        <td>7Learn.com Web Tutorials</td>
    </tr>
</table>

<div style="width: 200px;float: left;">7Learn.com Web Tutorials</div>

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

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

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

<p style="width: 200px;margin: 10px 7px 5px 3px">7Learn.com</p>

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

<p style="width: 200px;margin: 10px 50% 5px 50%">7Learn.com</p>

<p style="width: 200px;margin: 0 auto">7Learn.com</p>

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

<table style="width: 200px;margin: 10px 50% 5px 50%;">
    <tr>
        <td>7Learn.com Web Tutorials</td>
    </tr>
</table>

<div style="width: 200px;margin: 5px auto">7Learn.com Web Tutorials</div>

:: ضمنا بر اساس طراحی تون می تونید به جای ۵۰ درصد از دو طرف ، از یک طرف مثلا ۳۰ درصد و از طرف دیگه ۷۰ درصد فاصله بدید . در این حالت شئ مورد نظر به سمتی که %۳۰ فاصله دادید مایل میشه !
امیدوارم که این مقاله هم بدردتون خورده باشه . برای دریافت مطالب دیگه یادتون نره مشترک فید ما بشید ، یا اینکه از باکس نارنجی رنگ زیر اشتراک ایمیلی بگیرید .

.: مطالب مرتبط با این پست :.

• توليد اعداد random و تصادفي در جاوااسکريپت
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• مقايسه واحدهاي سايز در CSS‏ ( px , pt , em , % , in , cm , mm)
• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• خونه تکونی بعد از 4 سال …
• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• شیوه های مختلف استفاده از CSS در صفحات html
• Syntax و قواعد نوشتاری زبان CSS

:: ولی از زمانی که CSS3 رسما پا به دنیای وب گذاشت ، با قابلیت های جدید و کاربردی ای که از خودش نشون داد ، تقریبا همه ی کمبودهای ورژن های قبلی CSS رو جبران کرد . هر چند که هنوز هم جا برای اضافه کردن امکانات جدید هست .

:: امروز می خوایم در مورد گرد و خمیده کردن حاشیه ی تمامی اشیاء Html از جمله عکس ها (<img>)، تقسیم بندی ها (<div>) و … صحبت کنیم .

:: شما باید به هر تگی از صفحه ی Html که می خواید حاشیه ی دایره ای و خمیده داشته باشه ، یک ویژگی class اضافه کنید و نام سلکتور CSS مورد نظر رو که در اینجا rounded هست اضافه کنید . برای آگاهی بیشتر در مورد سلکتورهای CSS و چگونگی استفاده از اونها حتما مطلب “Syntax و قواعد نوشتاری زبان CSS” رو بخونید .

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

<img src="http://7learn.com/imgs/roundedborders/flower0.jpg" />

:: که نمایش این تگ که یک عکس هستش به شکل زیره :

:: می خوایم بدون استفاده از نرم افزار های ویرایش تصویر مثل فتوشاپ و فقط با استفاده از ویژگی های جدید CSS3 حاشیه ها رو شبیه زیر گرد و خمیده کنیم :

:: خوب حتما منتظرید ببینید چطور می شه این کار رو انجام داد ؟ حاشیه های خمیده می تونه کمک بسیار زیادی به زیبایی صفحات وب کنه . و صفحات رو از اون حالت مرسوم مستطیلی قدیمی دربیاره . واقعا چنین خصوصیتی در CSS لازم بود . خوب برای اینکه برای شِئ خاصی حاشیه ی خمیده بزاریم اول باید کلاس CSS اونو در تگش مشخص کنیم . به طور خاص در این مطلب نام کلاسی که برای تگمون مشخص کردیم رو rounded می زاریم و اونو به تگ img که در بالا گفتیم می خوایم حاشیش رو گرد کنیم به صورت زیر اضافه می کنیم :

<img class="rounded" src="http://7learn.com/imgs/roundedborders/flower0.jpg" />

حالا باید سلکتور CSS خودمون (rounded.) رو بنویسیم و از اون استفاده کنیم :

.: مطالب مرتبط با این پست :.

• توليد اعداد random و تصادفي در جاوااسکريپت
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• مقايسه واحدهاي سايز در CSS‏ ( px , pt , em , % , in , cm , mm)
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• خونه تکونی بعد از 4 سال …
• تصاویر بزرگترین سایت های دنیا در هنگام آغاز به کار !
• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• استفاده از سرویس Feedburner بدون فیلتر و انتقال به وبسایت شخصی

:: در اولین آموزش ویدیویی که براتون گذاشتیم به معرفی قابلیت ها و برخی از ویژگی های زبان جاوااسکریپت پرداختیم و در نهایت یک برنامه ی ساده رو که همون برنامه ی معروف Hello World هست ، براتون نوشتیم !

:: در اولین قسمت از مجموعه آموزش های ویدیویی طراحی وب در زمینه ی زبان Javascript ، به طرح و بحث در رابطه با موارد زیر پرداختیم :

• جاوا اسکریپت چیست ؟
• منظور از Client-Side بودن جاوااسکریپت چیست ؟
• زبان های Server-Side چه تفاوتی با زبان های Client-Side دارند ؟
• پیشنیاز های یادگیری زبان جاوااسکریپت چیست ؟
• جاوااسکریپت چه ویژگی ها و قابلیت هایی رو به صفحات HTML اضافه می کنه ؟
• نوشتن اولین برنامه ی جاوااسکریپت .
• روشهای مختلف استفاده از کدهای جاوااسکریپت در بین کدهای HTML
• استفاده از کدهای جاوااسکریپت به صورت مستقیم در کد Html
• نوشتن کدهای جاوا اسکریپت در فایل جداگانه و لود کردن اون در صفحه Html
• محل های قرارگیری کدهای جاوااسکریپت در میان کدهای Html

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

:: دوستان عزیز ، حتما نظرتون رو در مورد این شیوه ی جدید قرار دادن آموزش ها بیان کنید . در امتیاز دهی به این مطلب هم شرکت کنید. منتظر بازخوردهای شما در مورد این روش جدید هستم .

موفق باشید …

.: مطالب مرتبط با این پست :.

• آموزش جاوااسکریپت (قسمت 2) متغیرها و فضای ذخیره سازی موقتی داده ها
• توليد اعداد random و تصادفي در جاوااسکريپت
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• راستچین ، چپ چین و وسط چین کردن اشیاء و متن ها در صفحات Html
• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• مقايسه واحدهاي سايز در CSS‏ ( px , pt , em , % , in , cm , mm)
• استفاده از سرویس Feedburner بدون فیلتر و انتقال به وبسایت شخصی
• خونه تکونی بعد از 4 سال …
• یک ادیتور برای همه ی زبان های برنامه نویسی !!!

:: در این مطلب می خوایم آموزش کامل انتقال خوراک فیدبرنر به وبسایت شخصی خودتون رو قرار بدیم . با دسترسی بدون فیلتر به تمامی امکاناتی که feedburner در اختیار شما قرار میده !

:: به طور مثال آدرس فید ۷Learn توی فیدبرنر به صورت زیره :

http://feeds.feedburner.com/7learn/main 

که اگه روش کلیک کنید می بینید که فیلتره . در صورتی که من اونو به وبسایت شخصیم انتقال دادم و الان آدرسش به صورت زیره ، و فیلتر نیست ! (حالا اگه کلیک کردید یادتون نره مشترک شیدا… مطالب جدید در راهه (-_-))

http://feeds.7Learn.com/7learn/main 

ضمنا با وارد کردن این آدرس به جای آدرس اصلی که فیدبرنر به ما میده در تمامی اسکریپت های خود feedburner ، بدون فیلتر بودن ، میتونید از همه ی اون امکانات استفاده کنید . مثلا در اسکریپت FeedCount (که نمونه اش رو در منوی سمت چپ سایت و در زیر فرم اشتراک ایمیلی می بینید) آدرس جدید رو وارد کنید تا تعداد کسایی که مشترک فید شما شدند به راحتی نشون داده بشه . (اگر از آدرس خود فیدبرنر در این اسکریپت استفاده کنید ، بدلیل فیلتر بودن اون آدرس تصویر نشون داده نمیشه) .

:: خوب اگه شما هم دوست دارید از feedburner بدون فیلتربودن استفاده کنید و خوراکتون از طریق domain خودتون قابل دسترسی باشه مراحل زیر رو به ترتیب طی کنید :

.: مطالب مرتبط با این پست :.

• آموزش افزودن دکمه گوگل پلاس به سایت یا وبلاگ شما
• ">قراردادن انواع آیکون چت آنلاین یاهو در وب سایت شما
• توليد اعداد random و تصادفي در جاوااسکريپت
• انواع مختلف گرد و خمیده کردن حاشیه ها در CSS 3
• آموزش جاوااسکریپت (قسمت 1) معرفی جاوااسکریپت و شروع کدنویسی
• تصاویر بزرگترین سایت های دنیا در هنگام آغاز به کار !
• پاسخ به سوالات (4)
• آموزش جاوا اسکریپت (3) : متغیرها و ذخیره سازی داده ها
• تفاوت اندک بین ورژنهای نسخه های نرم افزاری به چه معناست؟
• کد جاوا اسکریپت پخش موزیک اتفاقی

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

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

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

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

موفق باشید .

.: مطالب مرتبط با این پست :.

• بازگشت دوباره و طراحی یک سیستم پاسخگویی به سوالات
• قالب 7Silver برای کاربران میهن بلاگ
• ثبت رایگان وبسایت شما در بیش از 130 موتور جستجو
• کد انتقال از یک صفحه به صفحه دیگر
• آموزش ایجاد صفحات اضافی در وبلاگ