گفتم یه سری آموزش های دیگه ام بذارم...

این اولین آموزش Kool Moves هست که آموزش بسیار ساده و گویایی هم هست !

فعلا" آموزشش رو رو راپید اپلود کردم تا پرشین گیگ درست شه

http://rapidshare.com/files/117457553/Quick-Button.rar.html

شرمنده دیر به دیر به روز میکنم

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

لیست های نا مرتب :

لیست ها با تگ رو برو شروع و ختم میشن :<ul> </ul>

ولی نوشته ها و متن ما باید بین دو تگ روبرو قرار بگیره :<li></li>

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

• متن۱
• متن۲
• متن۳

کد لیست بالا به صورت زیر است :

<ul> <li>متن1</li> <li>متن2</li> <li>متن3</li> </ul>

توجه کنید که میتونید تگ پایانی il رو هم به کار نبرید.

و فاصله ی لیست با خط رو هم میشه با استفاده از تگ UL افزایش داد

خوب حالا میرسیم به استفاده از شناسه ی type . با استفاده از شناسه ی type میتونید شکل علامت مشخص کننده ی هر بخش رو تغییر بدید .

شناسه ی تایپ به صورت روبرو نوشته میشود :<li type="***">

به جای *** باید یکی از کارکترهای زیر رو قرار بدید:

1:circle با قرار دادن کلمه ی circle مشخصه به شکل یک دایره ی تو خالی تبدیل میشود.

2:disc مشخصه را به شکل دایره ی تو پر در میاورد.

3:square مشخصه را به صورت یک مربع تو پر در می آورد.

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

1. 4 تا متن قرار میدهیم ( متن1-متن2-متن3-متن4)

2. متن 1و4 دایره ی تو پر

3. متن 3 مربع

4. متن 2 دایره ی تو خالی

کد به صورت زیر خواهد  شد :

 <ul> <li type="disk">متن1</li> <li type="circle">متن2</li> <li type="square">متن3</li> <li type="disk">متن4</li> </ul>

حالا اگه تو جلسات قبل با من همگام بودین میدونین که برای راست چین - وسط چین - چپ چین کردن لیست چه چیزایی لازمه !

در جلسه ی بعد به لیست های مرتب در HTML میپردازیم

شرمنده ی همه ی دوستان هستم تو این چند وقت مشکل داشتم نتونستم آپ کنم ...

معذرت !

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

در جلسه ی قبل با هم چند تا تگ از تگ های ویژه رو مرور کردیم تو این جلسه بقیشون رو آموزش میدیم و خلاص !!!!

بعد از تگ SUP به تگ PRE میرسیم . نوشته های مورد نظر رو بین دو تگ زیر قرار میدیم :

<PRE></PRE>

حالا کاراییش چیه ؟

بیشتر تو کارای برنامه نویسی به کار میره مثلا" کد زیر رو در یک صفحه ی html کپی کنید که طرز کارش رو ببینید :

<PRE> x=4; z=3; if (x==4) { z=3; . . </PRE>

کد بالا در صفحه ای html به صورت زیر نمایش داده میشه

x=4;
z=3;
if (x==4)
     {
     z=3;
      .
      .

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

حالا به آخرین تگمون میرسیم یعنی تگ مقابل :<NOBR><NOBR/>

حالا تگ بالا چیکار میکنه فرض کنید ما میخواهیم یه نوشته ی بلند رو بنویسیم که فقط تو 1 خط باشه اگه نوشته رو بین دو تگ بالا قرار بدید نوشته به صورت کامل و در یک خط نوشته.

فکر میکنم برای امروز کافی باشه چون امروز من حال ندارم !

عیدتون مبارک

اینم آموزش تصویری ساخت منوی حبابی خیلی بدردتون میخوره از آموزش های بعد هم عکس میذارم دیگه تصویری درست نمیکنم

لینک دانلود با حجم 400 کیلوبایت

خوب میریم سر درس امروز . امروز میخوایم کامنت های ویژه رو معرفی کنیم :

<SUB> , <SUP> , <PRE> , <NOBR , <WBR> , <BLINK>

اول به بررسی  تگ مقابل میپردازیم : <SUB></SUB>

تگ ساب برای گذاشتن آندیس بکار میره ( ریاضی ) مثلا" میخواهیم به کلمه ی test آندیس 3 بدیم خوب برای این کار کلمه ی test رو مینویسم و 3 رو بین دو تگ بالا مینویسیم به صورت زیر :

test<SUB>3</SUB>

حالا ببینیم وقتی کد رو وارد یک صفحه ی html میکنیم به چه شکلی در میاد :

test₃

خوب حالا برای گذاشتن توان کافیست از تگ روبرو استفاده کنید : <SUP></SUP>

خوب مثل شکل قبل به test توان 3 میدیم حالا کدمون به شکل زیر میشه:

test<SUP>3</SUP>

حالا آزمایش اون در یک صفحه به صورت روبرو خواهد شد : test³

به بقیه ی کد ها در آموزش بعدی اشاره خواهیم کرد .

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

<!-- -->

درآموزش بعد قسمت دوم تگ های ویژه رو توضیح میدم

اول لينک به صفحات ديگر رو با هم بررسي ميکنيم.

به کد زير دقت کنيد :

<a href="testURL">test</a>

به جاي کلمه ي test عنوان لينک و به جاي testURL آدرس لينک رو مينويسيم حالا به صورت مثال عنوان رو test page و آدرس را به صورت http://test.com مينويسيم نتيجه به صورت زير در خواهد آمد :

test page

توجه کنيد که  تگ روبرو نشانه ي لينک است :     <a></a>

حالا اگر بخواهيم مثلا" به صفحه ي h...p://test.com/download/dl.html در سايت لينک دهيم ميتونيم اون رو به صورت بالا يعني با http:// بنويسيم يا به جاي http:// کد رو به صورت زير تعريف کنيم :

href="../download/dl.html"  درست حدس زديد .. کار http://.com رو انجام ميده .

حالا اگه بخوايم براي لينک يک تيتر هم تعيين کنيم بايد از کد زير استفاده کنيم :

title="test page 2008 "

این کد عنوان و تیتر رو test oage 2008 قرار میده.

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

<img src="image.gif">

با گذاشتن این کد در صفحه image.gif در صفحه به نمایش در میاد.

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

یعنی با گذاشتن کد بالا در تگ right عکس در سمت راست صفحه قرار خواهد گرفت.

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

در درس بعد به نحوه ی وارد کردن کامنت و همین طور تگ های ویژه اشاره میکنیم

ان شا الله از چند روز دیگه میریم سراغ طراحی آرم و لوگو و دکمه های وب

تصویر قبل از افکت :

تصویر بعد از افکت :

سطح : مبتدی

لینک دانلود با حجم 420 کیلوبایت

سطح : مبتدی

لینک دانلود با حجم 540 کیلوبایت

فرض کنید میخواید بین test و page فاصله ایجاد کنیم .

اگه با Space بخواهید این کارو انجام بدید خواهید دید که موفق نخواهید بود

پس از کد زیر استفاده کنید :

;nbsp&

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

میشه گفت این بخش آموزشمون کوتاه و ساده خواهد بود :

در جدول زیر به برخی از کد ها اشاره شده است ( جدول در ادامه ی مطلب موجود است )

اینم از آموزش پنجم .

البته کوتاه بود ولی در کل باید ذکر میشد .

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