HTML JavaScript CSS

این متن تدریس شده در آموزش  HTML JavaScript CSS است 
صاحبین این سایت چون مایل به قرار دادن متن بصورت کامل نیستند متن بصورت بهم ریخته است
در آموزش  HTML JavaScript CSS به خوبی میتوانید این درسها را مشاهده کنید.

با استفاده از خصوصيت Title تگ IMG ميتوانيد يک Tooltip براي تصوير ايجاد کنيد. با اين کار زماني که ماوس را روي تصوير ميبريد، مقداري که به خصوصيت Title تخصيص داده شده است، نمايش داده ميشود. يک خصوصيت ديگر نيز به نام Alt وجود دارد. اين خصوصيت برابر يک متن ميشود و در صورتي که کاربر در تنظيمات کاوشگر خود تعيين کرده باشد که هيچ تصويري نمايش داده نشود اين متن در محل تصوير نمايش داده ميشود. در صورتي که با استفاده از خصوصيت Title نيز Tooltip تعيين نکرده باشيد اين متن بصورت Tooltip نيز نمايش داده ميشود.
روي دكمه برنامه IE واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد، يا کليد F را فشار دهيد.
 قرار دادن تصوير در صفحات وب
همان طور كه مشاهده مي‌كنيد تصوير مورد نظر در زمينه صفحه نمايش داده شده است. پس با استفاده از پارامتر Background يک تصوير در پشت زمينه صفحه قرار داديم. براي نمايش يک تصوير در يک مکان از صفحه وب از تگ IMG استفاده ميکنيم. براي بازگشت به برنامه Noetpad، روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

با استفاده از تگ IMG قادر خواهيد بود تا هر كجاي صفحه تصوير مورد نظرتان را نمايش دهيد. براي اين كار كافي است تا هر كجا كه لازم است از اين تگ استفاده كنيد.

تگ IMG داراي چندين پارامتر است. با استفاده از پارامتر Src آدرس فايل تصوير را وارد ميکنيم، به اين صورت که پارامتر Src را برابر نام و آدرس فايل قرار ميدهيم. تگ IMG  بر خلاف بسياري از تگهاي HTML پايان ندارد. يعني داراي  IMG> نميباشد. براي نمايش يک تصوير كافي است تا آد‌رس فايل مورد نظر را در پارامتر Src قرار داد.

همان طور كه در اينجا مشاهده مي‌كنيد با استفاده از تگ IMG يك تصوير را با نام Coffe.bmp به صفحه اضافه كرده‌ايم. براي ذخيره اين فايل کليد CTRL+S را فشار دهيد.

روي دكمه كاوشگر اينترنت واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد.
 دادن حاشيه به تصوير
همان طور كه مشاهده مي‌كنيد تصوير مورد نظر در مكاني كه انتخاب شده بود، نمايش داده شده است. تگ IMG  داراي پارامترهاي ديگري نيز مي‌باشد. پارامتر Border مشخص كننده حاشيه دور تصوير مي‌باشد. روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه پارامتر Border مربوط به تصوير را مقدار دهي ميکنيم.

مقدار دريافتي توسط اين پارامتر عدد مي‌باشد. يعني ضخامت حاشيه تصوير توسط يك عدد مشخص مي‌گردد. همان طور كه توسط كادر قرمز مشخص شده است در اينجا پارامتر Border  برابر با عدد  شده است.
 تعيين طول و عرض تصوير
با استفاده از پارامترهاي Width و Height مي‌توان طول و عرض تصوير را مشخص كرد. اگر طول و عرض تصوير مشخص نگردد كاوشگر از طول و عرض واقعي تصوير براي نمايش آن استفاده ميکند. در ادامه طول و عرض تصوير را تغيير ميدهيم.

سپس تگ  BR> را وارد مي‌كنيم.

روي منوي File كليك كنيد.

روي گزينه Save كليك كنيد.

روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.

بر روي دكمه Refresh كليك كنيد.

همان طور كه مشاهده مي‌كنيد، قبل از جعبه متن اول اكنون متن مورد نظر نمايش يافته است و بقيه ابزارهاي ورود اطلاعات نيز يك خط به پائين رفته است.
 تنظيم خصوصيات كنترلها

روي دکمه Desktop کليک کنيد.

در اينجا بزرگترين متني که نوشتيم Contact us است که با توجه به سايز فونت آن در قسمت تعريف لينکها اين متن در اندازه pt نوشته ميشود تا دچار مشکلي نشويم.

در انتها تگ Li  را مي‌بنديم و بقيه گزينه‌هاي منو را مي‌نويسيم. هنگامي که همه‌ي عناصر ليست را نوشتيم، تگ UL را نيز مي‌بنديم. در انتهاي نيز کار را با نوشتن يک پاراگراف متن و بستن تگهاي HTML  و  Body  به پايان مي‌رسانيم.

براي ذخيره اين فايل کليد CTRL+S را فشار دهيد.

براي فراخواني كلاس, درون  Body> و درون تگي كه مي‌خواهيم به آن Style دهيم, عبارت  Class = Classname را مي‌نويسيم كه Classname نام كلاس مورد نظر است.

روي برنامه Notepad کليک کنيد.

در اين قسمت مقداري کد را تغيير داده‌ايم. اندازه فونت تگ H تغيير داده شده و در خصوصيت Font به آن مقدار Italic را تخصيص داديم.

روي دکمه‌Desktop  کليک کنيد.

در بخش‌هاي گذشته به بررسي دو روش از روشهاي استفاده از CSS در صفحات HTML يعني Local Style Sheet و Inline Style Sheet پرداختيم. در اين بخش آخرين روش و پر استفاده‌ترين روش را مورد بررسي قرار مي‌دهيم. اين روش را External Style Sheet يا CSS خارجي مي‌نامند. در اين روش تمام Styleها را در يک فايل مستقل با فرمت .CSS قرار مي‌دهيم و سپس از طريق صفحات HTML با آن فايل يا فايلها ارتباط برقرار مي‌کنيم. به اين ترتيب فايل HTML تمامي Styleها را از فايل CSS خارجي دريافت مي‌کند.

روي  شاخهCSS  دابل کليک کنيد.

براي مشاهده صفحه ايجاد شده روي دکمه Desktop کليک کنيد.

روي شاخه CSS دابل کليک کنيد.

روي فايل Menu.HTML دابل کليک کنيد.

همانطور که مشاهده ميکنيد منويي با رنگ زمينه‌ مشکي و رنگ فونت آبي درست کرديم که زماني که ماوس روي منوها قرار مي‌گيرد رنگ فونت آن به مشکي تغيير مي‌کند و همچنين Bold مي‌شود و رنگ پس‌زمينه نيز به آبي تغيير مي‌کند و هنگامي هم که روي آن کليک مي‌کنيم وارد آدرسهايي که به آنها داديم مي‌شويم. ماوس را بر روي هر يک از گزينه‌هاي منو ببريد تا تغييرات را مشاهده کنيد. براي ادامه به صفحه بعد برويد. ( روي دکمه صفحه بعد کليک کنيد.)

روي برنامه Notepad کليک کنيد.

مي‌دانيد که منوي ايجاد شده يک لينک است که به آن Styleهاي خاصي اضافه کرديم، اما چرا براي اضافه کردن Styleها از کلاس استفاده کرديم؟ پاسخ آن همان چيزي است که در ابتداي فصل براي تعريف کلاس‌ها بيان کرديم: در مواقعي که مي‌خواهيم در يك صفحه از يك تگ با چندين Style مختلف استفاده كنيم و از هر Style  نيز چندين بار استفاده نماييم مشخص كردن Style براي كلاس‌ها بهترين راه است.

در يک صفحه‌ي وب علاوه بر منو، لينک‌هاي ديگري نيز با Styleهاي مختلف وجود دارند. بنابراين اگر براي درست کردن منو، Styleها را به تگ A اختصاص مي‌داديم، در هر جاي صفحه که مي‌خواستيم لينکي قرار دهيم يک منو با همان Styleها قرار مي‌گرفت، به اين دليل براي منوها کلاس Menu  تعريف کرديم.

در قطعه کدي که با کادر قرمز مشخص شده است به تگ A يک Style تخصيص داديم که تمام لينک‌ها داراي رنگ RGB(,,) ميگردند. با اين کار منوها تغيير نميکنند زيرا خصوصيت Color براي کلاس Menu بصورت جداگانه تعريف شده است.

مشاهده ميکنيد که در قسمت Body از تگهاي H و P استفاده شده و سپس چند لينک در پايين صفحه تعريف گرديده است. اين لينکها از Style تگ A استفاده مي‌کنند.

کليد CTRL+S را فشار دهيد.

روي آيکون برنامه Menu.html کليک کنيد.

دکمه F صفحه کليد را فشار دهيد.

همانطور که مشاهده ميکنيد در پايين صفحه چند لينک ايجاد شده که به رنگ خاکستري هستند و در بالاي صفحه هم لينکهاي ديگري که نقش منو را بازي مي‌‌کنند با Style کاملاً متفاوت وجود دارند.

- استفاده از يک فايل جداگانه که Style مورد نظرمان را در آن مي‌نويسيم و اين فايل به فرمت .CSS است. سپس از فايل HTML يک لينک به فايل CSS مي‌د‌هيم به اين روشExternal Style Sheet مي‌گويند. از اين روش زماني که Style چند فايل HTML را تعيين مي‌کنيم استفاده مي‌شود.

شروع کار را با يک Inline Style Sheet آغاز مي‌کنيم. روي دکمهStart  کليک کنيد.

منوي All Programs را باز کنيد.

براي ايجاد يک منوي قوي ميتوانيد از JavaScript يا Flash استفاده کنيد ولي اين روش ساده‌تر است و براي تعداد گزينه کم در يک منو مناسب ميباشد.

شما اكنون درپايان اين بخش قرار داريد. براي بازگشت به منوي اصلي اين بخش روي دكمه مشخص شده كليك كنيد.

منوي فرعي Accessories را بازکنيد.
دکمه Tab صفحه کليد را فشار دهيد يا روي جعبه متن Columns کليک کنيد. 
فصل اول - آشنايي با JavaScript

– مقدمه

در صورتي كه بخواهيد صفحات پويا با قابليتهاي بسيار بيشتر بسازيد مثلا گزارش گيري، ذخيره اطلاعات در يك فايل پايگاه داده‌اي يا ساخت صفحات مختلف HTML با توجه به شرايط مختلف ميتوانيم از يكي از زبانهاي ASP ،CGI ، PHP و … استفاده كنيم. توجه داشته باشيد كه پردازش فايلهاي اين زبانها در طرف سرور انجام ميشود. در بين اين زبانها زبان ASP كه تحت حمايت شركت مايكرو سافت ميباشد از اهميت ويژه‌اي برخوردار است. زبان PHP نيز داراي طرفداراني ميباشد. براي آشنايي به با دو زبان PHP و ASP ميتوانيد به نرم افزارهاي آموزشي آنها که از توليدات اين شرکت ميباشد مراجعه کنيد.

همان طور كه گفته شد، براي مشخص كردن محل كدهاي Javascript از تگ  Script> استفاده مي‌شود. اين تگ در هر دو قسمت سر و بدنه فايل HTML مي‌تواند مورد استفاده قرار بگيرد. در اين مثال در قسمت سر سند (Header)  از تگ Script استفاده شده است.
 قواعد زبان جاوا
اما همان طور كه گفته شد زبان Javascript هم مانند ساير زبان‌هاي برنامه نويسي نظير C++ ، PHP، VisualBasic و ... داراي دستوراتي براي كنترل جريان برنامه است. در ادامه شما را با برخي از اين دستورات آشنا ميكنيم.
 تعريف متغيرها
ابتدايي‌ترين دستوري كه يك برنامه نويس به آن نياز دارد، تعريف متغير است. همان طور كه مي‌دانيد متغيرها مكانهايي از حافظه هستند كه در آنها داده‌ها ذخيره مي‌شوند. در زبان JavaScript توسط دستور var مي‌توانيد يك متغير تعريف نمائيد. توجه کنيد که در زبان JavaScript برخلاف زبان HTML حروف کوچک و بزرگ مهم هستند براي مثال دستور var را اگر بصورت Var بنويسيد اشتباه است يا متغير به نام test با متغير Test متفاوت ميباشد.

شما اکنون در پايان اين بخش قرار داريد، براي برگشت به فهرست اين بخش روي دکمه مشخص شده کليک کنيد.
 
در بخش گذشته با قواعد زبان JavaScript آشنا شديد. حال مي‌توانيد با استفاده از مطالب بيان شده صفحات HTML پويا بسازيد. يكي از موضوعات در برنامه نويسي تشخيص تاريخ و ساعت زمان كنوني مي‌باشد. در اين بخش با نحوه دريافت تاريخ و ساعت کامپيوتر کاربر آشنا خواهيد شد. همانطور كه در ابتداي بخش اول آموزش JavaScript بيان شد اين زبان در كامپيوتر كاربر اجرا ميشود پس تاريخ و ساعتي كه توسط اين زبان خوانده ميشود مربوط به كامپيوتر كاربر ميباشد. براي دسترسي به تاريخ و ساعت كامپيوتر سرويس دهنده نياز به زبانهايي مانند ASP و  PHPداريم كه کد آنها در سرويس دهنده اجرا ميشود.

فرم كلي دستور if بصورت زير ميباشد :
if (Condition Expression) {
قسمت اول بدنه
}
else {
قسمت دوم بدنه
}
Condition Expression يک عبارت شرطي است.  در صورت درست بودن اين عبارت شرطي دستوراتي كه در" قسمت اول بدنه" دستور if نوشته شده‌اند اجرا مي‌شوند. در صورتي كه مقدار عبارت شرطي نادرست باشد دستوراتي كه در "قسمت دوم بدنه" نوشته شده‌اند اجرا مي‌شوند.

توجه كنيد كه يك دستور if مي‌تواند شامل بخش else نباشد يعني بصورت زير : 
if (Condition Expression) {
قسمت بدنه
}
اگر مقدار عبارت شرطي برابر با درست باشد دستورات نوشته شده در قسمت  بدنه اجرا خواهند شد. توجه كنيد كه آغاز و پايان دستور if و if … else توسط { و } مشخص مي‌گردند.
 ساخت حلقه‌ها
بصورت كلي دو کاراکتر } و { در زبان جاوا معرف آغاز و پايان دستورات چند خطي نظير if ميباشند. دستور while براي ايحاد حلقه بکار ميرود. اين دستور نيز به اين دو علامت نياز دارد.

زماني که ميخواهيد يک سري دستور به تعداد نامعين و تا زماني که يک شرط برقرار شود اجرا شوند از دستور while استفاده ميکنيم. فرم كلي اين دستور بصورت زير است : 
while (Condition Expression) {
قسمت بدنه
}
در اين دستور ابتدا مقدار عبارت Condition Expression بررسي ميشود در صورتي که درست باشد دستورات قسمت بدنه اجرا ميشوند. سپس دوباره عبارت Condition Expression بررسي ميشود و در صورت درست بودن دستورات "قسمت بدنه" اجرا ميشوند. اين روند تا زماني که عبارت برابر نادرست باشد ادامه ميابد. زماني که عبارت برابر نادرست شد کنترل برنامه به خط بعد از بلوک while انتقال ميابد.

به عنوان مثال دستور زير را در نظر بگيريد: 
for (i=,i ,i++) {
قسمت بدنه
}
در اين دستور i متغير شمارنده حلقه مي‌باشد. در ابتدا مقدار اين متغير برابر با صفر ميگردد. کد"قسمت بدنه" تا زماني كهi  از ده كوچكتر باشد اجرا ميشود. پس از هر بار اجراي حلقه با اجراي دستور i++ يك واحد به متغير i افزوده ميشود. بنابراين دستورات موجود در بدنه اين حلقه، ده بار اجرا خواهند شد.
 توابع
براي استفاده از دستوراتي كه تا اينجا آموخته‌ايد بايد آنها را در توابع (Functions) بنويسيد. توابع زير برنامه‌هايي هستند كه در مواقع نياز توسط برنامه‌نويس و يا طراح صفحه وب مورد استفاده قرار مي‌گيرند. توابع متشكل از چندين خط دستور هستند و مي‌توانند چندين بار مورد استفاده قرار بگيرند.

فرم كلي يك تابع بصورت زير است :
function function_Name() {
قسمت بدنه تابع
}
function_Name نام تابع است. توجه كنيد كه شروع و پايان يك تابع نيز توسط دو علامت } و { مشخص مي‌گردد.

يك تگ  Script> مي‌تواند شامل چندين تابع باشد. فرم ديگر يك تابع بصورت زير است :
function fnction_Name(Parameters) {
قسمت بدنه تابع
}
يك تابع مي‌تواند پارامترهايي (Parameters) را نيز قبول كند. اين پارامترها همانند متغير عمل مي‌كنند و مقدار آنها بايد هنگام استفاده از تابع به درون آن ارسال گردد. تعداد پارامترهاي يك تابع بعد از نام تابع در داخل پرانتز معرفي ميشوند.
 اشياء
يكي از تفاوتهاي برنامه نويسي صفحات وب وجود اشياء  است. حتما" تا كنون با برنامه‌نويسي شي‌گرا آشنا شده‌ايد. اشياء داراي خصوصيات ، متدها و رويدادها مي‌باشند. براي مثال همان طور كه در بخش اول اين نرم افزار آموختيد يك صفحه وب داراي خصوصيتي بنام bgColor ميباشد، كه مشخص كننده رنگ زمينه صفحه است. صفحه، يك شي ميباشد كه داراي خصوصيات، متدها و رويدادهاي زيادي است.

تمامي چيزهايي كه روي صفحه توسط طراح صفحه قرار مي‌گيرند، شي مي‌باشند. مهمترين خصوصيت هر شي نام آن است كه از طريق آن مي‌توان به آن دسترسي داشت. اين نام توسط پارامتر Name در تگ مربوط به آن مشخص مي‌شود.

براي دسترسي به يك شي از طريق كدنويسي ابتدا نام شي و پس از قرار دادن يك نقطه خصوصيت مورد نظر را تايپ مي‌كنيم. براي مثال شي document را در نظر بگيريد. با استفاده از دستور زير مي‌توان رنگ زمينه آنرا تغيير داد :
document.bgColor  = 'Red'
براي دسترسي به متدهاي يك شي نيز به همين روش عمل مي‌كنيم. به عنوان مثال :
document.write(“ B>Dynamic write B>”)
پس از اجراي دستور فوق متن Dynamic write بصورت پر رنگ روي صفحه نمايش مي‌يابد.
 دستور WITH
با كمك دستور with نيز مي‌توان به خصوصيات يك شي دسترسي داشت. به عنوان مثال دستور زير را در نظر بگيريد:
document.bgColor  = 'Red'
اين دستور با كد زير هم‌ارز است : 
with(document) {
 bgColor  = 'Red'
}
از دستور with معمولا براي خلاصه نويسي در نوشتن كدها استفاده مي‌شود.

رويدادها
رويدادها سه نوع هستند. نوع اول رويدادهايي كه توسط بازديدكنندگان صفحه وب بوجود مي‌آيند. به عنوان مثال زماني كه يك بازديد‌كننده روي دكمه كليك كند رويداد كليك بر روي دكمه رخ مي‌دهد. نوع دوم رويدادها، توسط برنامه‌هاي ديگر در حال اجرا و يا سيستم عامل بوجود مي‌آيند. براي مثال خروج از صفحه وب بدليل قطع ارتباط. نوع سوم رويدادهايي هستند كه توسط برنامه نويس درخواست مي‌شوند. براي مثال رويداد مربوط به تايمر يا يك شمارنده از اين نوع ميباشد.

در جدول روبرو فهرست مهمترين رويدادهايي كه توسط كاربران بوجود مي‌آيند را مشاهده مي‌كنيد.
T
زمان وقوعنام رويداد
زمان بارگيري و شروع صفحهOnLoad
زمان كليك روي شيOnClick
زمان كليك روي دكمه SubmitOnSubmit
زمان حركت ماوس روي شي OnMouseover
زمان خارج شدن ماوس از روي شيOnMouseout
زمان فشردن يك كليد از صفحه كليدOnKeypress
زماني كليك روي دكمه Reset OnReset
 يك مثال 
در ادامه ميخواهيم يك صفحه وب طراحي کنيم كه شامل يك دكمه ميباشد. با كليك روي اين دكمه رنگ زمينه صفحه تغيير ميكند. براي اين كار ابتدا لازم است تا نوع زبان مورد استفاده را مشخص كنيم. که از پارامتر Language در تگ Script استفاده مي‌كنيم. بايد مقدار اين پارامتر را برابر عبارت JavaScript قرار دهيم.

اکنون مطابق با روش تعريف تابع يک تابع به نام ChangeColor تعريف کرده‌ايم. دقت كنيد كه در نامگذاري توابع مانند نامگذاري متغيرها مجاز به استفاده از برخي كاراكترها مانند !,*,& يا فاصله نيستيد. در ادامه كد تابع را وارد مي‌كنيم.

دستوري كه توسط كادر قرمز مشخص شده است، رنگ زمينه را تغيير مي‌دهد. توجه کنيد که تمامي دستورات با حروف کوچک ميباشد و نام متد bgColor بايد حتما" با حرف C بزرگ نوشته شود. در غير اين صورت هيچ عملي انجام نميشود!

ميخواهيم زماني كه کاربر روي دكمه كليك کرد تابع ايجاد شده فراخواني شود، تا رنگ زمينه تغيير يابد. زماني که کاربر روي دکمه کليک کند رويداد كليك روي دكمه رخ ميدهد. براي شناسايي اين رويداد، نام رويداد را همانند يك پارامتر در تگ input مينويسيم. سپس عبارت OnClick را برابر نام تابع قرار ميدهيم. دقت كنيد كه اگر تابع داراي پارامتر باشد، بايد مقادير مورد نياز تابع بين دو علامت پرانتز قرار گيرند. در غير اينصورت درون پرانتزها چيزي نوشته نمي‌شود. با اين كار زماني كه کاربر روي دكمه كليك كند، تابع ChangeColor اجرا مي‌گردد.

توجه کنيد که نام تابع را به درستي بنويسيد و حروف کوچک و بزرگ را نيز رعايت کنيد. دکمه CTRL+S را فشار دهيد تا اين کد ذخيره شود.

عبارت Test.htm را تايپ کنيد.

همان طور كه توسط كادر قرمز مشخص شده است، مقدار اين پارامتر را برابر با JavaScript قرار داده‌ايم. در ادامه دكمه مورد نظر را اضافه ميکنيم.

مشاهده ميکنيد که اين دكمه توسط تگ Input ايجاد شده است. متن روي آن نيز برابر با Click Here! است. اكنون نوبت به نوشتن تابعي است كه رنگ صفحه را تغيير دهد. براي اين كار به قسمت Script مي‌رويم.

روي دکمه Save کليک کنيد.

روي دکمه Minimize کليک کنيد.

اکنون صفحه ساخته شده توسط كاوشگر نمايش داده شده است. روي دكمه Click Here! كليك كنيد تا نحوه اجراي تابع و دستورات نوشته شده را ببينيد.

همان طور كه مشاهده مي‌كنيد، رنگ زمينه صفحه تغيير يافته است. اكنون مي‌خواهيم تابع نوشته شده را طوري تغيير دهيم با کليک دوباره بر روي دکمه صفحه به رنگ سفيد تبديل شود. براي اين کار بايد با استفاده از يک دستور if بررسي کنيم تا فقط زماني که صفحه به رنگ سفيد است به رنگ قرمز و در غير اين صورت به رنگ سفيد تبديل شود. 
روي فايل Test.htm دابل کليک کنيد.

روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه کد دستور if را وارد ميکنيم.

در داخل پرانتز بعد از دستور if بايد شرطي را وارد کنيم که در صورت درستي آن دستور قرمز شدن صفحه اجرا شود. ميخواهيم زماني صفحه قرمز شود که صفحه برابر سفيد است پس  بايد عبارت document.bgColor=='#ffffff' را بايد وارد کنيم. توجه کنيد که در اينجا هدف بررسي مساوي بودن يا نبودن دو طرف است به اين علت از دو علامت = استفاده شده است. عبارت '#ffffff' برابر رنگ سفيد ميباشد که در ادامه اين موضوع را بررسي ميکنيم.

با اين کار در صورتي که شرط دستور if (يعني سفيد بودن صفحه) درست باشد کد دستور if (يعني قرمز شدن صفحه) اجرا ميشود. در صورتي که شرط if درست نباشد يعني صفحه سفيد نباشد کد قسمت else اجرا ميگردد. در اين قسمت بايد کد سفيد شدن صفحه را وارد کنيم.

با اين کار در صورتي که صفحه قرمز باشد عبارت داخل دستور if برابر نادرست ميشود و دستور قسمت else اجرا ميگردد.

بجاي عبارت White ميتوانيد از عبارت '#ffffff' استفاده کنيد. اين عبارت کد رنگ سفيد ميباشد. اين عبارت شامل شش عدد کاراکتر هگزادسيمال ميباشد ( از  تا f) دو حرف اول از سمت چپ مربوط به شدت رنگ قرمز(R)، دو حرف وسط شدت رنگ سبز(G)  و دو حرف آخر شدت رنگ آبي (B) را تعيين ميکنند. (RGB) در عبارت '#ffffff' (رنگ سفيد) شدت تمامي رنگها حداکثر ميباشد و در عبارت '#' (رنگ مشکي) شدت تمامي رنگها حداقل ميباشد. به اين ترتيب عبارت '#ff' برابر رنگ سبز خالص است. با زياد کردن بقيه رنگها ميتوان به رنگ سبز تيره يا روشن و ... دسترسي پيدا کرد.

براي ذخيره اين کد دکمه CTRL+S را فشار دهيد.

روي دكمه برنامه IE واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد يا کد F صفحه کليد را فشار دهيد. تا کد نوشته شده باز خواني و اجرا گردد.

روي دكمه Click Here! كليك كنيد.

مشاهده ميکنيد که يک آيکون در کنار نوشته Done ظاهر شده است. اين آيکون نشان دهنده اين است که در اين کد خطا وجود دارد. بر روي اين آيکون دابل کليک کنيد.

در اين صفحه دليل خطا نوشته شده است. متاسفانه اکثرا خطاي برنامه در اينجا به درستي نمايش داده نميشود. در اين کد نوشته شده است که خطا در اولين کاراکتر خط  قرار دارد. روي دکمه OK کليک کنيد.

روي دکمه برنامه Notepad کليک کنيد تا خطاي برنامه را پيدا کنيم.

حال بايد دوباره تمامي کد نوشته شده را بررسي کنيم. با کمي دقت مشاهده ميکنيد که بعد از دستور if يک علامت { قرار دارد که شروع دستور را اعلام ميکند. در اين کد علامت } که قبل از قسمت else بايد گذاشته شود فراموش شده است. در ادامه اين کاراکتر را قرار ميدهيم.

دکمه CTRL+S را فشار دهيد تا کد اصلاح شده ذخيره گردد.

روي دکمه برنامه IE کليک کنيد.

روي دکمه Refresh کليک کنيد يا دکمه F صفحه کليد را فشار دهيد.

مشاهده ميکنيد که علامت خطا از کنار عبارت Done حذف شده است. روي دکمه Click Here! کليک کنيد.

طبق برنامه نوشته شده اگر دوباره روي دكمه كليك كنيد بايد رنگ زمينه سفيد شود. روي دكمه Click Here! كليك كنيد.

همان طور كه مشاهده مي‌كنيد، رنگ زمينه صفحه به سفيد تغيير يافته است. در اين بخش با اصول كلي اكثر دستورات زبان JavaSript آشنا شديد در بخشهاي بعدي اين دستورات را بيشتر بررسي مي‌كنيم.

شما اکنون در پايان اين بخش قرار داريد، براي برگشت به فهرست اين بخش روي دکمه مشخص شده کليک کنيد.

عدد  را تايپ کنيد.

روي دکمه Create Page! کليک کنيد.

مشاهده ميکنيد که برنامه به درستي تا اينجا کار کرده است و کاربر را مجاب کرده تا حتماً عددي در جعيه متن txtRows تايپ کند. روي دکمه Back کليک کنيد.

مشکلي که اکنون وجود دارد اين است که بايد کاربر را وادار به تايپ عدد کنيم. ممکن است که کاربر يک حرف را بجاي عدد وارد کند. براي بررسي اين حالت روي جعبه متن Rows دابل کليک کنيد.

حرف a را تايپ کنيد.

روي دکمه Create Page! کليک کنيد.

مشاهده ميکنيد که برنامه به کاربر خطايي نداد و هيچ جدولي نيز رسم نشده است. در ادامه ميخواهيم کاري کنيم تا کاربر نتواند کاراکتر نيز وارد کند. روي دکمه Back کليک کنيد.

روي دکمه برنامه Notepad واقع در نوار وظيفه کليک کنيد.

در ادامه با استفاده از تابع isNaN شناسايي ميکنيم که محتواي جعبه متن عدد ميباشد يا خير.

مشاهده ميکنيد که شرط دستور if تغيير پيدا کرده است.تابع isNaN که مخفف عبارت is Not a Number ميباشد، داراي يک ورودي است که در اينجا محتواي جعبه متن txtRows بعنوان ورودي اين تابع تعيين شده است. خروجي اين تابع فقط زماني برابر درست ميباشد که ورودي تابع عدد نباشد.

شرط دستور if زماني برابر درست ميباشد که محتواي جعبه متن صفر يا منفي باشد يا خروجي تابع isNaN برابر درست باشد. چون ميخواهيم در صورتي که يکي از دو شرط برابر درست بود خطا نمايش داده شده از اپراتور يا منطقي ( || ) استفاده کرده‌ايم.

ميخواهيم کاربر حتماً  در جعبه متن txtCols نيز يک عدد وارد کند و از ورود حرف نيز در اين جعبه متن جلوگيري کنيم. براي اين کار لازم است که اول جعبه متن txtRows چک شود و در صورتي که درست باشد جعبه متن txtCols چک گردد و در صورت درست بودن هر دو، تابع ايجاد صفحه اجرا گردد.  زماني که محتواي جعبه متن txtRows معتبر باشد قسمت else دستور if اجرا ميشود پس کد بررسي متن txtCols بايد در قسمت else اضافه شود.

مشاهده ميکنيد يک دستور if ديگر در قسمت else دستور قبلي وارد شده است تا جعبه متن txtCols نيز اعتبار سنجي شود. با اين کد فقط زماني تابع CreatePage فراخواني ميشود که محتواي هر دو جعبه متن معتبر باشد. براي مشاهده نحوه اجراي اين برنامه دکمه CTRL+S را فشار دهيد.

روي دکمه برنامه IE  کليک کنيد.

روي دکمه Refresh کليک کنيد.

براي مشاهده نحوه نمايش خطا روي دکمه Create Page! کليک کنيد.

مشاهده ميکنيد که اکنون جعبه متن تعداد رديفها بررسي شده است و خطاي آن نمايش داده شده است. روي دکمه OK کليک کنيد.

كليدهاي مربوط به برنامه نويسي توسط HTML، تگ گفته مي‌شود كه داخل دو علامت كوچكتر “ ”و بزرگتر “>” قرار مي‌گيرند.

تگهاي HTML با توجه به نوع آنها به سه صورت مختلف استفاده مي‌شوند. دسته اول تگهايي هستند كه به سادگي در هر جايي نوشته مي‌شوند. به عنوان مثال تگ  HR> كه پس از نوشته شدن در هر جاي کد HTML باعث رسم يک خط افقي ميشود.

دسته دوم تگهايي هستند كه بايد ابتدا و انتهاي مشخصي داشته باشند. مثلا اگر تگ  B> در قسمتي از كد HTML استفاده شد بايد انتهاي اين تگ توسط  B> مشخص گردد. در اين مثال متني كه بين دو تگ فوق قرار بگيرد بصورت درشت نمايش داده ميشود.

دسته سوم تگهايي هستند كه ضمن آنكه بايد ابتدا و انتهاي مشخصي داشته باشند، شامل چند پارامتر نيز مي‌باشند. به عنوان مثال تگ Font داراي چندين پارامتر است. به كد زير توجه كنيد : 
 Font Face="Arial"> Font>
توجه كنيد كه نام تگ، Font ميباشد و Face از پارامترهاي اين تگ است. “Arial” هم مقدار انتخاب شده براي پارامتر Face است . اگر يك تگ شامل چند پارامتر بود، براي تمايز بين پارامترها از فاصله استفاده ميكنيم مانند مثال زير :
 Font Face="Arial" Size=> Font>

يكي از مشكلات زبانHTML ، ايستا بودن آن است. به اين ترتيب كه شما نمي‌توانيد براي صفحات وب برنامه بنويسيد. براي حل اين مشكل از زبانهاي JavaScript,VBScript,ASP  در كنارHTML استفاده مي‌شود. در اين قسمت ميخواهيم به بررسي زبانHTML  بپردازيم. در بخشهاي بعدي همين نرم افزار زبان JavaScript را نيز بررسي ميكنيم. براي يادگيري زبان ASP نيز ميتوانيد به نرم افزار آموزشيASP شرکت انياک مراجعه كنيد.

مشاهده كدهاي HTML درون يك صفحه وب
براي درك بهتر ساختار صفحات HTML  از برنامه Notepad  در ويندوز استفاده ميکنيم. براي شروع يك صفحه وب را با استفاده از اين برنامه باز مي‌كنيم تا با فايلهايHTML  بيشتر آشنا شويد. روي منوي Start  كليك كنيد.

منوي فرعي All Programs  را باز كنيد.

در آينده با انواع تگها آشنا خواهيد شد و معني تمام مثالهاي صفحات قبل را بخوبي متوجه ميشويد. تا اينجا فقط يك بررسي كلي روي انواع تگها انجام داده‌ايم.

منوي فرعي Accessories  را باز كنيد.

روي گزينه Notepad  كليك كنيد.

اكنون نرم افزارNotepad  را اجرا كرده‌ايم و ميخواهيم محتويات يك فايل صفحه وب را بخوانيم. منوي File را باز کنيد.

روي گزينه Open  كليك كنيد.

نرم افزارNotepad  بصورت پيش فرض فايلهايي با پسوند TXT را نمايش ميدهد. براي آنكه بتوانيد تمامي فايلها، از جمله فايلهاي htm  را مشاهده كنيد، روي ليست باز شونده File of types كليك كنيد.

گزينهAll Files  را انتخاب كنيد، تا تمام فايلهاي موجود را مشاهده كنيد.

با استفاده از دکمه Tab ميتوانيد بين پيوندها حرکت کنيد و پيوند فعال را تغيير دهيد. براي آنکه بتوانيد ترتيب حرکت کليد Tab را تعيين کنيد از خصوصيت Tabindex استفاده ميکنيم. اين خصوصيت بايد برابر يک عدد باشد. ترتيب حرکت بين پيوندها نيز از کوچکترين عدد به بزرگترين عدد ميباشد.

همان طور كه توسط كادر قرمز مشخص شده است رنگ پيوندها در اين صفحه سبز و رنگ پيوندهاي استفاده شده هم قرمز انتخاب شده است. دکمه CTRL+S را فشار دهيد.

بر روي نوار وظيفه برنامه IE كليك كنيد.

روي فايل Eniac.htm  دابل كليك كنيد.

حال  مي‌توانيد كدهاي HTML را مشاهده كنيد. همان طوركه در ابتداي اين فصل گفته شد تگهايHTML  درون علامتهاي   و >  قرار مي‌گيرند.

نمايش صفحات وب توسط كاوشگر اينترنت

براي نمايش فايلهايHTML  يا به عبارتي صفحات وب از كاوشگر اينترنت استفاده مي‌شود. توجه كنيد كه نمايش فايل و بازكردن آن دو مفهوم كاملا" متفاوت هستند. روي دكمه Minimize كليك كنيد.

روي فايل Eniac.htm  دابل كليك كنيد، تا كاوشگر اينترنت آنرا نمايش دهد.

همان طور كه مشاهده مي‌كنيد كاوشگر اينترنت نتيجه اجراي فايلي که مشاهده کرديد را نمايش داده است. يعني كاوشگر اينترنت در حال نمايش يك صفحه وب مي‌باشد.
 حذف
 ساخت يك صفحه جديد
در ادامه يك صفحه وب را از ابتدا ميخواهيم بسازيم. براي اين كار روي آيکون Notepad واقع در نوار وظيفه (TaskBar) كليك كنيد.

روي دكمه  برنامه Notepad واقع در نوار وظيفه كليك كنيد.
درج جدول در صفحه جديد
حال مي‌خواهيم در صفحه جديد يك جدول با تعداد سطر و ستون و حاشيه مشخص شده توسط بازديد كننده، طراحي کنيم. سطر و ستون و حاشيه جدول به ترتيب توسط جعبه متن‌هاي txtRows، txtCols و txtBorder مشخص مي‌شوند.

ابتدا متغيرهاي لازم براي هر جعبه متن را مقدار دهي مي‌كنيم. متغير d براي تعداد سطرها، متغير e براي تعداد ستون‌ها و متغير f براي حاشيه جدول استفاده مي‌شوند.

براي ساخت يك جدول بايد ابتدا و انتهاي آن توسط دو تگ  Table> و  Table> مشخص باشند، براي اين كار از دو دستور مشخص شده استفاده مي‌كنيم.

با استفاده از متغير f مي‌توانيم مقدار حاشيه جدول را مشخص نمائيم. براي اين كار پارامتر Border تگ  Table> را برابر با اين متغير قرار خواهيم داد. توجه كنيد كه مقدار متغير f همان متن روي جعبه متن آخر است.

اكنون نوبت به ساخت سطرهاي جدول رسيده است. همان طور كه مي‌دانيد به ازاي هر سطر در يك جدول بايد يكبار از تگ  TR> استفاده شود. بنابراين چون در اينجا تعداد سطرها توسط بازديدكننده مشخص مي‌شود، از حلقه For براي ساخت سطرهاي اين جدول استفاده مي‌كنيم.

در اين برنامه تعداد سطرهاي جدول جديد توسط متغير d مشخص مي‌شود. مقدار اين متغير از جعبه متن تعداد سطرهاي جدول خوانده ميشود. بنابراين با كمك حلقه for، تگ  TR> را در صفحه جديد مي‌نويسيم.

با اين كار به ازاي هر بار اجراي حلقه يك سطر جديد در جدول درج مي‌شود. توجه كنيد كه حلقه for بايد بين دو دستور مشخص شده يعني ابتدا و انتهاي جدول قرار بگيرد.

حال بايد ستون‌هاي جدول جديد را ايجاد كنيم. در اين برنامه تعداد ستون‌هاي جدول توسط متغير e مشخص مي‌شود.

براي ايجاد ستون‌هاي جدول باز هم از حلقه for  استفاده مي‌كنيم. همان طور كه مي‌دانيد براي درج يك ستون در يك جدول از تگ  TD> استفاده مي‌كنيم.

توجه كنيد كه به ازاي هر بار اجراي حلقه يكبار هم در صفحه جديد متد writeln اجرا مي‌شود. با كمك اين متد يك ستون جديد ساخته مي‌شود.

متن نوشته شده روي هر ستون، همان طور كه توسط كادر قرمز مشخص شده مانند جدول ضرب برابر با حاصل ضرب سطر در ستون مكان آن مي‌باشد.

حلقه for جديد بايد درون حلقه for قبلي قرار بگيرد تا پس از ايجاد هر سطر، ستون‌هاي آن سطر نيز ساخته شوند. بنابراين حلقه for جديد بايد بين دو دستور مشخص شده قرار داشته باشد.

در نهايت با كمك دستوراتي كه توسط كادر قرمز مشخص شده يك جدول در صفحه جديد ساخته خواهد شد. تعداد سطر و ستونهاي اين جدول توسط دو جعبه متن txtRows و txtCols كه در دو متغير d و e قرار داده شده‌اند، مشخص مي‌شوند. دکمه CTRL+S را فشار دهيد.

روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

براي آنكه بازديد كننده صفحه بتواند مفهوم يك كنترل را درك كند بهتر است متني را قبل از كنترل نمايش بدهيد تا درك آن راحت تر باشد. براي مثال اگر از يك جعبه متن براي ورود نام استفاده مي‌كنيد بهتر است قبل از متن Name نمايش داده شود تا بازديد كننده متوجه شود كه در اين جعبه متن بايد نام را وارد كند.

در ادامه خصوصيت BorderColor را وارد ميکنيم.

همان طور كه توسط كادر قرمز مشخص شده است در اينجا از رنگ قرمز براي مشخص كردن مرز بين صفحات استفاده كرده‌ايم. البته توجه كنيد كه ديگر پارامتر FrameBorder نبايد برابر با صفر باشد.

روي منوي File كليك كنيد.

روي گزينه Save كليك كنيد.

براي اين كار كافي است قبل از كنترل مورد نظر متن مربوطه را تايپ كنيد. بنابراين همان طور كه در شكل مشاهده مي‌كنيد ابتدا نشانه‌گر را قبل از كنترل مورد نظر مي‌بريم.

سپس همان طور كه توسط كادر قرمز مشخص شده، متن مورد نظر را وارد مي‌كنيم.

اما براي آنكه ابزار‌هاي بعدي زير ابزار اول نمايش يابند از تگ  BR> استفاده مي‌كنيم. براي اين كار ابتدا نشانه‌گر ماوس را بعد از ابزار مورد نظر مي‌بريم.
با استفاده از خصوصيت Height در تگ TD ميتوان پهناي جدول را تعيين کرد. بعد از استفاده از اين خصوصيت پهناي کل رديفي که اين خصوصيت در آن تعيين شده است تغيير ميابد. در اين مثال مقدار خصوصيت Height نيز برابر عدد  شده است. همانند پارامتر Width استفاده از اين پارامتر در تگ Table باعث تغيير پهناي كل جدول ميشود.

براي ذخيره کد نوشته شده دکمه CTRL+S را فشار دهيد.

براي بازگشت به كاوشگر روي دكمه برنامه IE واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد.

مشاهده ميکنيد که پهناي تمام رديف اول و درازاي خانه اول از رديف اول برابر  شده است. متن موجود در رديف اول نيز در وسط خانه جدول نمايش داده شده است.
 نحوه قرار گرفتن جدول در صفحه
با استفاده از خصوصيت Align  تگ TD ميتوان محل نمايش متن داخل يک ستون را تعيين کرد. اين خصوصيت برابر يکي از سه مقدار Left، Center و Right ميتواند باشد که به ترتيب باعث ميشوند تا متن در سمت چپ، وسط و سمت راست خانه سلول نمايش داده شود.

با استفاده از خصوصيت Align  تگ Table ميتوان محل نمايش يک جدول را تعيين کرد اين خصوصيت برابر يکي از سه مقدار Left، Center و Right ميتواند باشد که به ترتيب باعث ميشوند تا جدول در سمت چپ، وسط و سمت راست صفحه نمايش داده شود. روي دکمه برنامه Notepad کليک کنيد.

در اين کد در دو مکان از خصوصيت Align استفاده کرده‌ايم. با استفاده از مقداردهي خصوصيت Align برابر Center در تگ Table جدول در وسط صفحه نمايش داده ميشود. در تگ TD نيز خصوصيت Align برابر Center شده است که باعث ميشود متن داخل اين تگ TD در وسط نمايش داده شود. دکمه CTRL+S را فشار دهيد.

براي بازگشت به كاوشگر روي دكمه برنامه IE واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد.

همان طور كه مشاهده مي‌كنيد، اكنون دور سلولهاي جدول، حاشيه وجود دارد. روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.
 تنظيم طول و پهناي جدول
با استفاده از خصوصيت Width در تگ TD مي‌توان طول ستون جدول را مشخص كرد. همان طور كه توسط كادر قرمز مشخص شده است طول اين ستون اكنون برابر با  است. اگر از خصوصيت Width در تگ Table استفاده شود طول کل جدول تغيير خواهد يافت.

پس توسط کد جديد جدول در وسط صفحه و متن موجود در خانه اول از ستون اول در وسط سلول قرار گرفته‌ است. پس با استفاده از خصوصيت Align توانستيم متن را بصورت افقي در چپ، وسط و راست مرتب کنيم. براي تنظيم محل متن بصورت عمودي از خصوصيت VAlign استفاده ميکنيم. اين خصوصيت ميتواند برابر Top، Middle و Bottom باشد که به ترتيب باعث ميشود تا متن در بالا، وسط و پايين سلول قرار بگيرد. تگ Table نيز خصوصيت VAlign را دارا ميباشد.

روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.
 استفاده از تصاوير در جداول
با استفاده از خصوصيت Background مي‌توان يك تصوير را در زمينه جدول قرار داد. در اين کد خصوصيت Background برابر عبارت .BMP شده است. کليد CTRL+S را فشار دهيد.

روي دكمه برنامه IE واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد.

همان طور كه مشاهده مي‌كنيد تصوير مورد نظر در زمينه جدول نمايش يافته است.

مشاهده ميکنيد که در اين کد خصوصيت Height و Widthرا حذف کرده‌ايم و در خانه اول رديف دوم بجاي عبارت * با استفاده از تگ IMG يک تصوير نمايش ميدهيم. در بخشهاي قبلي با نحوه استفاده از تگ IMG آشنا شديد. دکمه CTRL+S را فشار دهيد.

متني كه توسط كادر قرمز مشخص شده است، هنگام نمايش اين كنترل بر روي آن نشان داده مي‌شود. در TextArea از Value استفاده نمي‌شود. ظرفيت اين كنترل برابر با  كاراكتر است.

روي منوي File كليك كنيد.

بر روي گزينه Save كليك كنيد.

روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.

بر روي دكمه Refresh كليك كنيد.

همان طور كه مشاهده مي‌كنيد با استفاده از تگ TextArea يك جعبه متن چند خطي بوجود آورده‌ايم.

روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.
 ايجاد منوها
يكي ديگر از ابزارهاي ورود اطلاعات منوها هستند. با استفاده از منوها بازديد كنندگان مي‌توانند از ميان گزينه‌هاي موجود يك گزينه را انتخاب كنند.

براي ايجاد منوها از تگ  Select> استفاده مي‌كنيم. پايان آن نيز توسط  Select> مشخص مي‌شود.

در ادامه از اين تگ استفاده خواهيم كرد.

همان طور كه مشاهده مي‌كنيد، ابتدا و انتهاي اين تگ توسط  Select> و  Select> مشخص مي‌شود.

براي ايجاد گزينه‌هاي يك منو از تگ Option استفاده مي‌كنيم. اين تگ نيازي به  Option> ندارد. در ادامه يك نمونه از استفاده آنرا مشاهده خواهيد كرد.

همان طور كه مشاهده مي‌كنيد از تگ Option  براي ايجاد يك گزينه استفاده مي‌شود. پارامتر Value مشخص كننده ارزش گزينه است.

همان طور كه توسط كادر قرمز مشخص شده است، متني كه بر روي گزينه نمايش داده مي‌شود را درست بعد از علامت>  وارد مي‌كنيم. در اينجا عدد  متن روي اين گزينه خواهيد بود. در ادامه چند گزينه ديگر به اين منو اضافه مي‌كنيم.

همان طور كه مشاهده مي‌كنيد به اين منو چند گزينه ديگر نيز اضافه شده است.

روي منوي File كليك كنيد.

بر روي گزينه Save كليك كنيد.

روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.

بر روي دكمه Refresh كليك كنيد.
فصل ششم –  قـابــها

مي‌خواهيم اگر ساعت قبل از  ظهر بود روي صفحه پيغام “Good Morning” و (در غير اين صورت) اگر بعد يا مساوي  بود پيام “Good Afternoon” نمايش داده شود. بنابراين نياز به تصميم‌گيري با استفاده از دستور if ميباشد. در ادامه اين کد را وارد ميکنيم.
 نوشتن روي صفحات بصورت پويا
اگر متد getHours از شئ today (يعني ساعت کامپيوتر کاربر) كمتر از  باشد آنگاه خطي كه توسط كادر قرمز مشخص شده اجرا مي‌شود. در غير اين صورت نيز کد مشخص شده توسط کادر آبي اجرا ميشود. توسط متد write از شئ document متني که به صورت پارامتر به اين متد داده ميشود، نمايش مي‌يابد. توجه كنيد كه عمل نوشتن بر روي يك صفحه جديد انجام مي‌شود.

اكنون کد تابع به اتمام رسيده است. براي آنكه بمحض باز شدن صفحه اين تابع اجرا شود بايد از رويداد OnLoad استفاده كنيم.

همان طور كه مشاهده مي‌كنيد رويداد OnLoad واقع در قسمت Body را برابر نام تابع ايجاد شده قرار داده‌ايم. به اين صورت تابع GetUserTime در زمان Load شدن صفحه اجرا ميشود. دکمه CTRL+S را فشار دهيد.

روي دکمه برنامه Internet Explorer واقع در نوار وظيفه کليک کنيد.

روي دکمه Refresh كليك كنيد.

همان طور كه مشاهده مي‌كنيد پيام متناسب با ساعت اين کامپيوتر روي صفحه نمايش داده شده است. همانطور که بيان شد با استفاده از متد write شئ document متن Good Afternoon! در يک  صفحه جديد نوشته شده است. براي مشاهده متن ايجاد شده منوي View را باز کنيد.

روي گزينه Source کليک کنيد.

از کد نشان داده شده مشخص است که در يک فايل جديد متن مورد نظر نشان داده شده است. براي آنکه در اين فايل بخواهيد از دستورات HTML استفاده کنيد کافيست دستورات مورد نظر را در داخل پارامتر ورودي تابع write وارد کنيد. روي دکمه Close کليک کنيد.

تشخيص دقيقه و ثانيه
پس با استفاده از تابع getHours فقط ساعت مشخص شد. براي پيدا كردن دقيقه و ثانيه يك ساعت مي‌توانيد به ترتيب از دو تابع getMinutes و getSeconds استفاده نمائيد. در ادامه برنامه را طوري تغيير خواهيم داد كه ساعت، دقيقه و ثانيه روي صفحه نمايش داده شود. روي دكمه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه بعد از دستور if کد نمايش ساعت دقيقه و ثانيه را وارد ميکنيم.

اکنون  يك خط جديد به تابع افزوده شده است. در اين قسمت با كمك سه تابع getHours، getMinutes و getSeconds ساعت، دقيقه و ثانيه بر روي صفحه نمايش داده ميشود. روي ميله لغزان کليک کنيد تا ادامه کد را مشاهده کنيد.

دکمه CTRL+S را فشار دهيد.

در قسمت اول اين نرم افزار آموزشي با نحوه طراحي و ساخت صفحات وب با استفاده از زبان HTML آشنا شديد. اما همان طور كه گفته شد توسط زبان HTML نمي‌توان براي صفحات وب هيچ گونه برنامه‌نويسي انجام داد. براي رفع اين مشكل مي‌توان از زبانهاي JavaScript,VBScript و ASP استفاده كرد. با توجه به مورد استفاده ميتوانيم يكي از زبانهاي JavaScript,VBScript يا ASP را انتخاب كنيم. در صورتي كه بخواهيم برنامه در طرف كاربر اجرا گردد يعني از كامپيوتر سرور هيچ استفاده‌اي نشود از دو زبان JavaScript يا VBScript ميتوانيم استفاده كنيم.

بين دو زبان JavaScript و VBScript زبان JavaScript بسيار متداول‌تر ميباشد زيرا با تمامي كاوشگرهاي اينترنت سازگار است.  بدين علت در اين نرم افزار آموزشي طريقه كار با زبان JavaScript را بررسي ميكنيم. همانطور كه تا اينجا بيان شد اين زبان در طرف كاربر اجرا ميشود و هيچ پردازشي در طرف كامپيوتر سرور انجام نميشود. اين كار باعث ميشود كه طرف سرور كار كمتري انجام دهد و جهت ارايه خدمات به كاربران ديگر آزاد باشد.

روي دكمه برنامه Internet Explorer واقع در نوار وظيفه كليك كنيد.

همان طور كه گفته شد متد write از شي document روي يك صفحه جديد ايجاد خواهد شد. بنابراين صفحه‌اي كه هم ‌اكنون مشاهده مي‌كنيد صفحه نوشته توسط ما نيست. براي مشاهده صفحه قبل روي دكمه Back كليك كنيد تا به عقب باز گرديم.

همان طور كه مشاهده مي‌كنيد با برگشت به صفحه قبلي صفحه جديد ايجاد شده است و ساعت روي صفحه نمايش داده شده است. در اين متن ساعت بلافاصله بعد از پيام اول نمايش داده شده است. براي رفع اين مشكل مي‌توان از تگ  BR> استفاده كرد تا ساعت در خط بعدي نوشته شود. روي دكمه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه تگ  BR> را به ابتداي کد ساعت اضافه ميکنيم.

همان طور كه توسط كادر قرمز مشخص شده است تگ  BR> را نيز در متد write نوشته‌ايم. کليدCTRL+S را فشار دهيد.

روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.

روي دكمه Back كليك كنيد.

پس عبارت زير به دکمه‌اي به نام sbutton موجود در فرم ProgramForm واقع در فريم main اشاره ميکند.
parent.main.ProgramForm.sbutton
اين دکمه داراي متدي به نام disabled ميباشد که باعث فعال سازي و عدم فعال سازي اين دکمه ميشود. در اين کد مقدار اين عبارت برابر با نقيض حالت فعال بودن جعبه چک C ميباشد.

در اين سي دي يک نرم افزار راهنماي HTML نيز موجود ميباشد که در آن ميتوانيد متدها و رويدادهاي هر کنترل را مشاهده کنيد.

يكي ديگر از روشهاي ايجاد حقله استفاده از دستور for مي‌باشد. فرم كلي اين دستور بصورت زير است : 
for (Counter,Condition Expression,Step) {
قسمت بدنه
}
در بخش Counter، متغير شمارنده مقدار دهي اوليه مي‌شود. اين متغير نياز به تعريف توسط دستور var ندارد. دستورات "قسمت بدنه" يعني دستورات داخل حلقه for تا زماني كه عبارت شرطي Condition Expression درست باشد، اجرا خواهد شد. با هر بار اجراي حلقه در بخش Step هم يک عبارت جهت مقدار دهي مجدد متغير حلقه نوشته ميشود. براي مثال ممکن است بخواهيد يک واحد به مقدار آن اضافه شود.

همان طور كه مشاهده مي‌كنيد ساعت سيستم بعد از پيام اول نمايش داده شده است.
 تمامي اطلاعات درباره تاريخ و ساعت
با استفاده از توابع شئ Date ميتوانيد به تاريخ سيستم دسترسي داشته باشيد. با استفاده از متد toLocaleString شئ Date تاريخ و ساعت سيستم را در يک رشته قرار ميدهد. روي دكمه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه کد اين تابع را تغيير ميدهيم.

مشاهده ميکنيد که در ابتدا يک متغير جديد تعريف کرده‌ايم و مقدار آنرا برابر با مقدار تابع toLocaleString از شي today قرار مي‌دهيم.
روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.

روي دكمه Back كليك كنيد.

در ادامه با استفاده از يک مثال استفاده از فايلهاي خارجي CSS را بيشتر بررسي ميکنيم. ابتدا ميخواهيم يک فايل CSS خارجي درست کنيم تا در ادامه با استفاده از يک فايل HTML از آن استفاده کنيم.

روي دکمه Start کليک کنيد. 
براي ايجاد يک صفحه جديد در Notepad روي گزينه New کليک کنيد. (به جاي اين کار ميتوانستيد کليدهاي  CTRL+N  را نيز فشار دهيد.)

اين صفحه Home page سايت است.  در ابتدا  تگهاي HTML و Head و Title را وارد کرده‌ايم. سپس از تگي به نام  Link> استفاده کرديم. تگ Link، صفحه HTML را قادر مي‌‌‌سازد که از فايل حاوي Style استفاده ‌کند.

دو خصوصيت مهم در تگ  Link>  وجود دارد. با استفاده از خصوصيتrel  نوع فايل خارجي را تعيين ميکنيم. مقداردهي خصوصيت rel برابر با عبارت StyleSheet باعث مي‌شود که صفحه HTML فايل را به عنوان Stylesheet درنظر بگيرد. خصوصيت Href  آدرس فايلي که بايد به عنوان CSS صفحه مورد استفاده قرار گيرد را تعيين مي‌کند. خصوصيت Href ميتواند برابر يک آدرس در صفحات اينترنت يا يک آدرس در اين سايت باشد. با نوشتن عبارت Styel.css فايل CSSاي که استفاده ميشود در کنار فايل HTML قرار دارد.

مرورگر زماني که به تگ Link مي‌رسد متوجه ميشود که ميخواهيد فايل خارجي را به اين فايل HTML ادغام نمائيد و هنگامي که به عبارت rel=stylesheet مي‌رسد متوجه ميشود که ميخواهيد يک فايل CSS به اين فايل HTML اضافه کنيد. خصوصيت href="style.css"  نيز محل آدرس فايل CSS را تعيين ميکند.

همانطور که مشاهده ميکنيد ديگر نيازي به نوشتن تگ Style و خصوصيت‌ها نيست. در صورتي که بخواهيد در اين صفحه HTML از Styleهاي ديگري نيز استفاده کنيد مطابق روش قبلي ميتوانيد در اين صفحه بصورت جداگانه Style تعريف کنيد.

بعد از تگ Head وارد تگ Body ميشويم. در داخل تگ Body يک جدول تعريف ميکنيم و خصوصيات‌ آن را مقداردهي مي‌کنيم. علت اينکه خصوصيت Align تگ Table را برابر مقدار Center قرار مي‌دهيم اين است که عناصر موجود در صفحه در هر دقت نمايشي (Resolution) که قرار گرفتند موقعيتشان در وسط صفحه حفظ شود. شايد اين نکته ساده به نظر ‌برسد اما استفاده نکردن از آن سبب مي‌شود که کاربران با دقت نمايش مختلف بصورتهاي مختلفي صفحه را مشاهده کنند. اگر کمي در اينترنت بگرديد متوجه مي‌شويد که سايتهايي که کاربران بسيار زيادي دارند مانند Yahoo، Google و MSN همگي با طراحي مناسب و ساده در دقتهاي مختلف صفحه نمايش به خوبي نمايش داده ميشوند. به اين ترتيب تمامي عناصر يک صفحه HTML درون اينTable  قرار مي‌گيرد.

در قسمتي که کادر قرمز مشخص شده است، منوي سايت قرار دارد. کلاس a.menu که در فايل Style.css  آن را اعلان کرديم در اينجا قابل فراخواني است. پس در فايل Style.Css  Styleهاي لازم را تعريف کرديم و در اين صفحه‌ از آنها استفاده مي‌کنيم.

همانطور که توسط کادر قرمز مشخص شده است از تگ  H> براي نمايش عبارت Welcome to my Site استفاده شده است. اين تگ Styleهاي تعريف شده در فايل CSS را نيز دارد.

براي ذخيره فايل کليد CTRL+S را فشار دهيد.

روي دکمه Desktop کليک کنيد.

بر روي شاخه External  دابل کليک کنيد.
روي دکمه Desktop کليک کنيد.

روي شاخه External دابل کليک کنيد.

روي فايل Home.HTML  دابل کليک کنيد.

همانطور که مشاهده  ميکنيد به همان صورت که انتظار داشتيم صفحه ايجاد شده است. به فونت به کار رفته در متن welcome to my site توجه کنيد اين متن توسط تگ H نمايش داده شده است. به ياد داريد که فونت تگ H را در فايل CSS ايجاد شده Comic تعيين کرديم.

روي دکمه Close کليک کنيد.

روي آيکون برنامه Notepad در نوار وظيفه کليک کنيد.

اکنون قصد داريم صفحه Pictures.HTML را بسازيم کليد  CTRL+N  را فشار دهيد.

اکنون کدهاي صفحه Pictures وارد شده است. دقيقاً مانند صفحه Home، با ايجاد يک تگ Link از فايل CSS خارجي استفاده ميکنيم.  اين صفحه مانند صفحه قبلي است با اين تفاوت که دو تصوير در آن نمايش داده شده است.

براي ذخيره کد اين صفحه کليد CTRL+S را فشار دهيد.

روي دکمه Desktop کليک کنيد.

روي شاخه External  دابل کليک کنيد.

عبارت Pictures.HTML را تايپ کنيد.

روي دکمه Save کليک کنيد.

روي آيکون شاخه External در نوار ابزار کليک کنيد.

روي فايل Pictures.HTML دابل کليک کنيد.

همانطور که مشاهده ميکنيد در اين صفحه هم از فايل CSS  خارجي استفاده شده است.

شما اكنون در پايان اين بخش قرار داريد. براي بازگشت به منوي اين بخش روي دكمه مشخص شده كليك كنيد.

يكي از مهم‌ترين و پركاربردترين موارد استفاده CSS درمورد انتساب Style به يك تگ خاص است. اهميت اين امر زماني بهتر مشخص مي‌شود كه مي‌خواهيم مثلاً در تمام سرتيترها از يك فونت استفاده كنيم يا تمام پاراگرافها داراي Align يكسان باشند. براي انجام اين كار CSS امكانات خوبي در اختيار ما قرار مي‌دهد. در ادامه طي يک مثال اين موارد را بيان ميکنيم. روي دکمه Start کليک کنيد.

روي دکمه Start کليک کنيد.

روي گزينه برنامه Notpad کليک کنيد.

ابتدا تگ HTML را ‌نوشته‌ايم. براي انتساب يك Style به يك تگ، درون  Style> نام تگي كه مي‌خواهيم Style را به آن اعمال كنيم را مي‌نويسيم. سپس علامت { را قرار داده و نام خصوصيت را تايپ مي‌کنيم و بعد از علامت : مقدار خصوصيت مورد نظرمان را مي‌نويسيم.

در اينجا تگهاي مورد نظرمان، Body و  H  هستند.‌ همانطور كه توسط کادر مشخص شده ابتدا تگ Body را درونStyle  مي‌نويسيم و سپس خصوصيت Background-Color آن را برابر Green قرار مي‌دهيم. در خط بعدي Background تگ H را برابر #FFFFFF  قرار مي‌دهيم.

اين روش داراي مزيت‌هاي زير است.
مزيت اول اين روش اين است که در صفحات مختلف ميتوانيد از فايل CSS ايجاد شده استفاده کنيد. چون همه Styleها در يک فايل قرار مي‌گيرند، پس تعداد زيادي صفحه HTML ميتوانند از اين فايل استفاده کنند. به اين ترتيب تمامي صفحات، Styleهاي مشترکي خواهند داشت. مشترک بودن Style کلي صفحه‌هاي سايت باعث ميشود تا صفحات سايت همه داراي يک ظاهر يکسان باشند.

در ادامه با يك مثال كار را ادامه مي‌دهيم. مي‌خواهيم چند كلاس براي تگ  P> تعريف كنيم و چندين بار نيز از آنها استفاده كنيم.

دکمه F را فشار دهيد.

همانطور که مشاهده ميکنيد اندازه فونت در تيتر تغيير کرده است. خصوصيت Line-Height نيز باعث شد که ارتفاع خطهاي پاراگراف کمتر شود. با استفاده از خصوصيت color نيز رنگ متون درون پاراگراف نيز آبي شده است.
 روي دكمه برنامه IE واقع در نوار وظيفه كليك كنيد.

براي مثال به متني كه توسط كادر قرمز مشخص شده است توجه كنيد. خط اول بصورت درشت، خط دوم بصورت مورب و خط سوم بصورت درشت، مورب و زير خط دار بايد نمايش داده شود. توجه کنيد که در خط سوم به همان ترتيبي که وارد تگها شده‌ايم به همان ترتيب نيز خارج ميشويم. HTML يک زبان قابل انعطاف است و در صورتي که ترتيب بستن تگها را به درستي وارد نکنيد خطايي نشان نميدهد ولي ممکن است نتيجه مورد نظر شما درست نمايش داده نشود. براي مشاهده نتيجه اجراي اين کد در برنامه IE ابتدا بايد اين فايل زا ذخيره کنيم. جهت ذخيره اين فايل دکمه CTRL+S را فشار دهيد.
(براي فشردن دکمه CTRL+S دکمه CTRL صفحه کليد را فشرده نگه داشته و سپس کليد S را فشار دهيد.)

روي دكمه برنامه كاوشگر كليك كنيد.

روي دكمه Refresh  كليك كنيد يا کليد F را فشار دهيد.

همان طور كه مشاهده مي‌كنيد، متن‌هايي كه بين تگ  B> و  B> قرار گرفته‌اند بصورت پررنگ و متنهايي هم كه بين تگ  I> و  I> نوشته شده‌اند بصورت مورب نمايش داده شده‌اند.

براي بازگشت به برنامه Notepad روي دكمه اين برنامه واقع در نوار وظيفه كليك كنيد.

انتخاب فونت
براي آنكه بتوان فونت يا قلم يك متن را مشخص كرد از تگ Font استفاده ميكنيم. در حالت عادي كاوشگر اينترنت از فونت پيش فرض براي نمايش متون استفاده مي‌كند. اما اگر فونتي که انتخاب ميکنيد در کامپيوتر کاربر وجود نداشته باشد بصورت خودکار فونت پيش فرض نمايش داده ميشود.

در قسمتي كه توسط كادر قرمز مشخص شده، جمله Sample Text Font، بين دو تگ  Font> و  Font> قرار گرفته است.

در تگ Font از پارامتر Face جهت تعيين نام فونت استفاده ميشود. در اين مثال تعيين شده است که براي نمايش متن داخل تگ Font از فونت Courier استفاده گردد. مقدار پارامتر Face ميتواند برابر نام چند فونت مختلف نيز باشد تا در صورتي که يکي از آن فونتها موجود نبود از فونت ديگر استفاده شود. در کدي که در زير مشاهده ميکنيد ابتدا از فونت Arial و سپس از فونت Courier استفاده ميشود.
 Font Face="Arial, Courier"> …  Font>
 تغيير اندازه متن
يكي ديگر از پارامترهاي تگ Font، اندازه فونت است که با استفاده از پارامتر Size تعيين ميگردد. همان طور كه مشاهده مي‌كنيد در اين مثال اندازه متن داخل تگ Font با سايز  نمايش داده ميشود.
 تغيير رنگ متن
در صفحات قبل آموختيد كه چگونه رنگ متن تمام صفحه را تغيير دهيد اما براي تغيير رنگ متن قسمتي از صفحه مي‌توانيد از پارامتر Color در تگ Font استفاده كنيد. توجه كنيد كه براي مشخص كردن رنگ بايد از يك عدد  رقمي در مبناي  استفاده كنيد. در اينجا رنگ قرمز را براي متن مورد نظر انتخاب كرده‌ايم.

پس تا اينجا متن  بايد با فونت Courier، اندازه  و رنگ قرمز نمايش يابد. روي منوي File كليك كنيد.

روي گزينه Save كليك كنيد.

براي بازگشت به كاوشگر روي دكمه اين برنامه واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh  كليك كنيد يا کليد F را فشار دهيد.

همان طوركه مشاهده مي‌كنيد متن با مشخصات فونت انتخاب شده نمايش داده شده است.

تگ  BR> موجب مي‌شود تا ادامه متن به خط بعدي منتقل شوند. اين تگ نيازي به مشخص شدن انتها ندارد. براي مثال اگر قصد داريد تا كلمه Test در خط بعدي نمايش داده شود بايد قبل از اين كلمه از تگ  BR>  استفاده كنيد. براي بررسي اين موضوع به برنامه Notepad  باز مي‌گرديم. روي دكمه برنامه Notepad  واقع در نوار وظيفه كليك كنيد.

در ادامه در داخل کد از تگ  BR> استفاده مي‌كنيم. تا هر متن در يک خط نمايش داده شود.

اکنون تگهاي  BR> را در انتهاي هر خط مشاهده ميکنيد. براي آنکه اين فايل ذخيره شود دکمه CTRL+S را فشار دهيد.
(براي فشردن دکمه CTRL+S دکمه CTRL صفحه کليد را فشرده نگه داشته و سپس کليد S را فشار دهيد.)

براي بازگشت به كاوشگر روي دكمه اين برنامه واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh  كليك كنيد يا کليد F را فشار دهيد.

همان طور كه مشاهده مي‌كنيد در محلهايي که تگ  BR> وارد شده است بقيه متنها در خط پايين قرار گرفته است. روي دکمه برنامه Notepad کليک کنيد.

تگ  Center> يكي ديگر از تگهايي است كه در قالب بندي متن مورد استفاده قرار مي‌گيرد. انتهاي اين تگ توسط  Center> مشخص مي‌شود. نتيجه استفاده از اين تگ اين است كه تمامي متوني كه داخل اين تگ نوشته مي‌شوند بصورت وسط چين نمايش داده مي‌شوند.

در کدي که توسط كادر قرمز مشخص شده است، قبل از جمله  Welcome to my Page، تگ Center وارد شده است انتهاي تگ  نيز توسط  Center> مشخص گرديده. اين عمل باعث مي‌شود تا اين جمله بصورت وسط چين نمايش داده شود.

براي ذخيره تغييرات دکمه CTRL+S را فشار دهيد.

روي دكمه برنامه كاوشگر واقع بر نوار وظيفه كليك كنيد.

روي دكمه Refresh  كليك كنيد يا کليد F را فشار دهيد.

همان طور كه مشاهده مي‌كنيد اكنون متن بصورت وسط چين نمايش داده شده است. اعداد يا حروفي که اندکي بالا يا پايين متن اصلي قرار بگيرند را به ترتيب Superscript و Subscript ميناميم در HTML نيز به ترتيب با استفاده از دو تگ  Sup> و  Sub> تعيين ميکنيم که قطعه متن انتخاب شده کمي بالاتر يا کمي پايين‌تر نمايش داده شود. براي مثال دستور زير باعث ميشود تا عدد  در متن A مقداري پايين‌تر نمايش داده ميشود.
A sub> sub>

شما اکنون در پايان اين بخش قرار داريد براي برگشت به فهرست اين بخش روي دکمه مشخص شده کليک کنيد.

در اين کد در بالاي صفحه يک قسمت به نام Top تعريف شده است. در پايان هر دو قسمت يک پيوند به قسمت Top ايجاد کرده‌ايم تا زماني که کاربر به هر کدام از اين دو قسمت رفت با استفاده از گزينه Top بتواند به ابتداي صفحه برود.

براي مشاهده نتيجه اجراي اين صفحه کليد CTRL+S را فشار دهيد.

روي دكمه برنامه كاوشگر واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد.

همان طور كه مشاهده مي‌كنيد پيوند ساخته شده است. روي پيوند Link to st Itemكليك كنيد.

مشاهده ميکنيد که با کليک بر روي اين پيوند به قسمت مورد نظر رفته‌ايم. روي  پيوند Back to top of the Page کليک کنيد.

مشاهده ميکنيد که دوباره به قسمت بالاي صفحه برگشته‌ايم. روي دكمه برنامه  Notepad واقع در نوار وظيفه كليك كنيد.
 ايجاد منوهاي نشانه دار
يكي ديگر از تگهاي موجود در زبان HTML تگ LI است. اگر اين تگ قبل از يك متن يا پيوند قرار بگيرد آنرا بصورت منوي نشانه‌دار نمايش ميدهد به اين صورت که يک دايره کوچک توپر در کنار گزينه منو نمايش داده ميشود. توجه كنيد كه اين تگ نيازي به  LI> ندارد. در ادامه طي يك مثال اين موضوع را بيشتر بررسي ميكنيم.

همان طور كه توسط كادر قرمز مشخص شده پيوند مورد نظر اكنون بايد بصورت منوي نشانه‌دار ظاهر شود. دکمه CTRL+S را فشار دهيد.

روي آيكون برنامه كاوشگر واقع در نوار وظيفه كليك كنيد.

روي دكمه  Refresh كليك كنيد  يا دکمه F صفحه کليد را فشار دهيد.

در ادامه عبارتهايي که در دفعه قبل وارد کرديم را وارد ميکنيم.

حال بايد تعداد سطرهاي جدول را مشخص كنيم. در جعبه متن رديف عدد  را وارد كنيد.

براي تعيين تعداد ستونهاي جدول دکمه Tab صفحه کليد را فشار دهيد يا روي جعبه متن ستونها کليک کنيد.

عدد  را وارد كنيد.

براي تعيين مقدار حاشيه جدول دکمه Tab صفحه کليد را فشار دهيد يا روي جعبه متن حاشيه کليک کنيد.

عدد  را تايپ کنيد.

روي دكمه Create Page! كليك كنيد تا صفحه جديد ساخته شود.

همان طور كه مشاهده مي‌كنيد جدول ساخته شده است. تعداد سطرها و ستون‌هاي اين جدول برابر با مقدار جعبه متن‌هاي چهارم و پنجم مي‌باشد. توجه كنيد كه اين جدول همانند يك جدول ضرب مي‌باشد.

در اين بخش شما آموختيد که به چه صورت ميتوانيد يک صفحه دايناميک بسازيد. شما اکنون در پايان اين بخش قرار داريد براي برگشت به فهرست اين بخش روي دکمه مشخص شده کليک کنيد.

حال نوبت به استفاده از متد open شئ window رسيده است. همان طور كه توسط كادر قرمز مشخص شده است، فايل صفحه دوم توسط اين پنجره نمايش داده خواهد شد. توسط پارامتر اول آدرس و نام فايل جديد تعيين ميگردد. توسط پارامتر دوم نيز نام پنجره تعيين شده است.

عبارت Search را تايپ کنيد.

در پارامتر سوم براي مشخص شدن خصوصيت نمايش يا عدم نمايش toolbar از متغير tb استفاده مي‌كنيم. همان طور كه توسط كادر قرمز مشخص شده است، مقدار خصوصيت toolbar برابر با متغير tb شده است. مقدار اين متغير هم توسط جعبه چك اول مشخص مي‌شود. بنابراين با ادغام عبارت "toolbar" و مقدار متغير tb خصوصيت نوار ابزار پنجره جديد مشخص ميشود.

در ادامه تمامي اين مراحل را براي دو خصوصيت status و menubar توسط دو متغير sb و mb انجام ميدهيم. مقدار اين دو متغير توسط دو جعبه چك chkstatus و chkmenubar مشخص مي‌شوند.

تا اينجا کد برنامه نوشته شده است و برنامه کامل گرديده. اكنون با كليك روي اين دكمه Open in new Window تابع NewWindow() اجرا شده و با توجه به مقدار جعبه چك‌ها پنجره جديد نمايش خواهد يافت.

حال ميخواهيم تابعي بنويسيم تا با کليک بر روي دکمه دوم، آدرس و نام فايلي كه اكنون در حال نمايش آن هستيم نمايش داده شود. براي اين كار يك تابع جديد به نام GetInfo() تعريف ميکنيم.
 شناسايي آدرس فايل در حال نمايش
همان طور كه گفته شد خصوصيت location از شئ window مشخص كننده آدرس فايلي است که در حال نمايش آن ميباشيم. 
 نمايش پيام‌ها
متد alert از شئ window متني را كه بعنوان ورودي اين متد مشخص شده است بصورت يك جعبه پيام نمايش مي‌دهد.
 تغيير متن روي نوار وضعيت كاوشگر
خصوصيات status از شئ window مشخص كننده متن روي نوار وضعيت كاوشگر اينترنت در هنگام نمايش صفحه مي‌باشد. توسط دستور مشخص شده مقدار جديدي را به اين خصوصيت تخصيص ميدهيم.

مشاهده ميکنيد که در رويداد کليک بر روي دکمه دوم تابع GetInfo فراخواني ميشود. اكنون صفحه اول نيز آماده مي‌باشد. براي ذخيره سازي اين فايل روي منوي File کليک کنيد.

بر روي گزينه Save As…  كليك كنيد.
فصل پنجم – آرايه‌ها و منوها  
به اين بخش يک سري اضافه شده  که باعث ميشه منو و کويز عوض بشه
 – مقدمه

در اين بخش با نحوه تعريف آرايه‌ها و استفاده از منوها آشنا خواهيد شد. همچنين خواهيد آموخت كه چگونه مي‌توان تصوير روي يك صفحه را كه توسط تگ  IMG> ساخته شده است، تغيير داد.

در ادامه صفحه را طوري طراحي ميكنيم كه شامل يك تصوير و يك كنترل منو (ليست باز شونده) با دو گزينه باشد. تصوير را با استفاده از تگ IMG و کنترل منو را با استفاده از تگ Select ايجاد ميکنيم.

اكنون صفحه آماده است. در ادامه براي مشخص شدن تصوير و منو براي آنها توسط پارامتر Name نام تعيين مي‌كنيم.

همان طور كه توسط كادر قرمز مشخص شده است نام تصوير برابر با pic و نام منو برابر با menu تعريف شده است. براي آنکه در برنامه نويسي مشکلي پيش نيايد دراين برنامه همه نامها را به حروف کوچک مينويسيم. براي مشاهده نحوه اجراي اين برنامه دکمه CTRL+S را فشار دهيد.

روي دكمه برنامه IE واقع در نوار وظيفه کليک کنيد.

روي دکمه Refresh کليک کنيد.

همان طور كه مشاهده مي‌كنيد اكنون اين صفحه داراي يك منو و يك تصوير است. روي منو کليک کنيد تا گزينه‌هاي آن را مشاهده کنيد.

مشاهده ميکنيد که دو گزينه تعريف شده در اين منو وجود دارند. مي‌خواهيم صفحه را طوري برنامه ريزي كنيم كه با كليك روي هر يك از گزينه‌هاي منو تصوير Pic تغيير كند.در هر نقطه خارج از منو کليک کنيد. تا منو بسته شود.

روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

حال نوبت به كد‌نويسي رسيده است. همان طور كه مي‌دانيد براي مشخص كردن محل كدها از تگ  Script> استفاده مي‌كنيم. در ادامه اين تگ را وارد ميکنيم و تابعي به نام changepic() را تعريف ميکنيم.

اکنون تابع changepic تعريف شده است. چون قرار است با تغيير گزينه انتخاب شده روي منوي menu تصوير pic تغيير كند بنابراين اين تابع را در رويداد OnChange()  کنترل menu نيز قرار داده‌ايم. در ادامه کد مربوط به تابع تغيير تصوير را وارد ميکنيم.

تغيير تصاوير
براي تغيير تصوير به روش زير عمل ميكنيم :
pic.src = FileName
با اين دستور فايلي كه توسط FileName مشخص مي‌شود روي تصوير نمايش داده مي‌شود. همانطور که به ياد داريد pic نام تصوير تعريف شده در تگ IMG ميباشد. خصوصيت src نيز نام و آدرس فايلي است که قرار است نمايش داده شود.

فايلي كه بايد نمايش داده شود توسط گزينه‌هاي منو مشخص مي‌شود. براي مثال اگر گزينه اول انتخاب شده باشد فايل Eniac.gif و در غير اينصورت فايل ms.gif نمايش داده خواهد شد.
 آرايه‌ها
آرايه‌ها فضاهايي از حافظه هستند كه عملكرد هر يك از اين فضاها همانند متغيرها است. يك آرايه مجموعه‌اي از چند متغير است. آرايه‌ها همانند متغيرها داراي نام هستند. هر يك از عناصر يك آرايه داراي يك شماره انديس مي‌باشند.
 تعريف آرايه‌ها
براي تعريف يك آرايه بصورت زير عمل مي‌كنيم.
var pics = new Array()
با اين كار يك آرايه با نام pics تعريف شده است. تعداد عناصر يك آرايه نا محدود است و به هر ميزان مي‌توان از عناصر آن استفاده كرد.
 دسترسي به عناصر آرايه‌ها

براي مقدار دهي و دسترسي به عناصر يك آرايه ابتدا نام آرايه را نوشته و پس از علامت [ شماره انديس عنصر را نوشته و سپس کاراکتر ] را وارد ميکنيم. براي مثال توسط دو دستور زير دو عنصر از آرايه مقدار دهي شده‌اند.
pics[] = "Eniac.gif"
pics[] = "ms.gif"
يك راه ديگر براي مقدار دهي عناصر آرايه، در زمان تعريف آرايه بصورت زير ميباشد:
var pics = new Array( ".gif" , ",gif" )
با اين كار آرايه pics داراي دو عنصر ميشود. توجه كنيد كه شماره انديس اولين عنصر يعني ".gif"، برابر با صفر است.

در اين برنامه ميتوانيم از آرايه‌ها استفاده نکنيم. ولي براي آشنايي بيشتر با آرايه‌ها در ادامه يک آرايه تعريف ميکنيم.

همان طور كه مشاهده مي‌كنيد آرايه pictures با دو عنصر تعريف شده است. توجه كنيد كه محتواي اين عناصر برابر با آدرس فايلهاي تصاويري است كه قرار است بر روي صفحه نمايش داده شوند.

به كمك دستوري كه توسط كادر قرمز مشخص شده است تصوير تغيير خواهد كرد. به اين صورت كه آدرس فايل تصوير برابر با عنصري از آرايه pictures خواهد شد كه در كنترل منو انتخاب شده است. عبارت menu.value برابر مقدار گزينه انتخاب شده منو مي‌باشد. اين مقدار در هنگام تعريف هر گزينه توسط پارامتر value مشخص مي‌شود. دکمه CTRL+S را فشار دهيد.
 گزينه انتخاب شده يك منو
روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.

روي دكمه Refresh كليك كنيد.

روي كنترل منو كليك كنيد.

روي گزينه Microsoft كليك كنيد.

همان طور كه مشاهده مي‌كنيد با استفاده از گزينه‌هاي منو ميتوانيم تصوير را تغيير دهيم.

در ادامه اين بخش ميخواهيم يک کنترل textbox (جعبه متن) در پايين صفحه قرار دهيم و يک متن که در حال حرکت است را نمايش دهيم. براي اين کار ابتدا بايد يک کنترل از نوع text در انتهاي کد اضافه کنيم. روي دکمه برنامه Notepad کليک کنيد تا اين کنترل را در پايين برنامه تعريف کنيم.

مشاهده ميکنيد که دو خط به اين برنامه اضافه شده است. در خط اول از دو خط انتهايي با استفاده از تگ  HR> چند خط افقي رسم شده است. توسط خط آخر داخل تگ Body نيز يک کنترل از نوع text و به نام msg تعريف شده است. در ادامه کد نوشتن متن حرکت کننده در جاوا اسکريپت را وارد ميکنيم.

در اين کد يک تابع به نام scrollingmsg تعريف شده است. وظيفه اين تابع مقدار دهي به جعبه متن Msg ميباشد. در بالاي اين تابع دو متغير به نامهاي beginpos و scrTxtتعريف و مقدار دهي شده است. متغير اول محل شروع نمايش متن را تعيين ميکند و متغير دوم متني که قرار است نمايش داده شود را مشخص ميکند. در ادامه با نحوه کارکرد اين دو متغير بيشتر آشنا ميشويد.
توسط خط بعد مقدار متغير beginPos يک واحد افزايش ميابد. اين مورد باعث ميشود تا در هر بار مقدار دهي به جعبه متن يک کاراکتر از اول رشته نمايش داده نشود.

سپس با استفاده از يک دستور if بررسي ميشود که مقدار متغير beginPos از طول رشته بيشتر نشود اگر مقدار اين متغير از طول رشته بيشتر شد آنگاه مقدار متغير برابر صفر ميشود تا دوباره متن scrTxt  را از ابتدا نمايش دهد. چون در اين دستور if فقط يک دستور اجرا ميشود ميتوانيم از کاراکترهاي { و } استفاده نکنيم.

توسط دستور مشخص شده تابع scrollingMsg هر  ميلي ثانيه يکبار اجرا ميشود. در دفعات بعدي اجراي اين تابع، مقدار متغير beginPos يک واحد افزايش يافته و باعث ميشود که کاراکترهاي بعدي متن scrTxt نمايش يابد.

توجه کنيد که متغير beginPos در بيرون تابع تعريف شده است. اين متغير چون در بيرون تابع تعريف شده توسط همه توابع قابل دسترس ميباشد. اگر اين متغير را در تابع scrollingMsg تعريف کرده بوديم در هر بار اجراي اين تابع متغير دوباره تعريف شده و برابر صفر مقدار دهي ميگرديد ولي اکنون متغير در هر بار اجراي تابع يک واحد افزايش ميابد.

در صورتي که در اين تابع بجاي Msg.value از document.title استفاده ميکرديم تيتر پنجره IE تغيير پيدا ميکرد و يک نوشته متحرک در آن نمايش داده ميشد. حال بايد کاري کنيم تا در زمان اولين اجراي اين کد تابع scrollingmsg اجرا شود. روي ميله لغزان کليک کنيد تا در رويداد onload تگ body اين تابع را فراخواني کنيم.

در ادامه کد فراخواني تابع scrollingmsg را وارد ميکنيم.

دکمه CTRL+S را فشار دهيد تا برنامه ذخيره شود.

اکنون صفحه دوم در يك پنجره جديد نمايش داده شده است. براي ورود به اين صفحه بايد اسم رمز را وارد کنيم. متني كه در جعبه متن نوشته شده است همان متني است كه در متد prompt استفاده كرديم. عبارت Eniac را تايپ کنيد.

روي دكمه OK كليك كنيد.

همان طور كه مشاهده مي‌كنيد اكنون اين پنجره داراي نوار ابزار، نوار وضعيت و نوار منو مي‌باشد.

تعيين محل نوشتن كدهاي JavaScript
در اين مثال همان طور كه مشاهده مي‌كنيد ساختار يك سند HTML كامل شده است. با استفاده از تگ  Script> محل نوشتن كدهاي JavaScript را مشخص کرده‌ايم. اكنون ميخواهيم يك تابع معرفي كنيم تا از آن در زمان نمايش صفحه استفاده كنيم. در ادامه تابعي به نام GetUserTime() تعريف ميکنيم.

همان طور كه مشاهده مي‌كنيد تابع GetUserTime بدون پارامتر تعريف شده است. توجه كنيد كه آغاز و پايان تابع توسط دو علامت { و } مشخص ميشوند. در ادامه براي ذخيره سازي ساعت و تاريخ سيستم  بازديد كننده صفحه، يك متغير از نوع Date تعريف ميكنيم.
 ساخت شي تاريخ
اکنون متغير تعريف شده است. به ياد داريد که در زبان JavaScript نوع متغيرها معني ندارد. مي‌توان با استفاده از دستور new اين متغير را به شئ مورد نظر اشاره داد. همان طور كه توسط كادر قرمز مشخص شده در اينجا اين متغير به شي Date اشاره داده شده است.

با اين تعريف  متغير today داراي تمام خصوصيات، متدها و توابع، تاريخ و ساعت است. بنابراين اين متغير از اين به بعد يك شي محسوب مي‌شود. يكي از توابع شئ Date ، تابع getHours مي‌باشد كه ساعت جاري را برميگرداند.

عبارت Home.HTML را تايپ کنيد.

روي دکمه Save کليک کنيد.

نام  Menu.htmlرا تايپ کنيد.

روي دکمه Save کليک کنيد.

در ادامه عکس Logo.jpg و Tulips.jpg را در شاخه External کپي مي‌کنيم.

روي دکمهDesktop  کليک کنيد.

اکنون درون تگ  Body> از تگ H استفاده مي‌كنيم و متني را با اين فرمت مي‌نويسيم. در ادامه همين اعمال را براي تگ  P>  نيز انجام مي‌دهيم.

براي ذخيره اين کد کليدهاي CTRL+S را فشار دهيد.

روي شاخهCSS  دابل کليک کنيد.

نام CSStag.html را تايپ کنيد.

روي دکمه Save کليک کنيد.

روي دکمه‌ Desktop کليک کنيد.

اکنون مي‌خواهيم به بررسي چگونگي اعمال Styleها به متن بپردازيم. CSS امکانات زيادتري نسبت به Html براي تغييرات در فرمت متون دارد. کار را با يک مثال ادامه مي‌دهيم.

روي دکمه Start کليک کنيد.

روي  Notepad کليک کنيد.

همانطور که مشاهده مي‌کنيد تگهاي Html و Title و Style را نوشته‌ايم. در خط بعدي از تگ H استفاده کرديم. قراردادن H درون Style سبب مي‌شود در هر جاي صفحه که از اين تگ استفاده کنيم تيترهايي با همين Style نوشته شوند.

پس از علامت { از خصوصيتي به نام Font-Family استفاده کرده‌ايم، اين خصوصيت نام فونتي که مي‌خواهيم تگهاي H داشته باشند را مشخص مي‌کند. که ما به آن مقدار Nueva Roman را تخصيص داديم. نکته مهم در اينجا اين است که کاربر بايد فونتي که براي عناصر صفحه سايت انتخاب شده است را داشته باشد در غير اين صورت مرورگر فونت پيش فرض خودش را جايگزين مي‌کند و کاربر آن چيزي که شما مي‌خواستيد را نمي‌بيند. بنابراين سعي کنيد از فونت‌هاي خاص استفاده نکنيد.

اما برخي مواقع ميخواهيم که از فونت خاصي استفاده کنيم در اين موارد CSS به ما کمک مي‌کند که از چند فونت استفاده کنيم و براي آنها اولويت قرار دهيم که مثلاً اگر کاربر اولين فونت را نداشت فونت دوم جايگزين شود.

در اين خط ابتدا از فونت Nueva Roman استفاده مي‌کنيم و پس از قرار دادن علامت  ,نام فونتVerdana  را مي‌نويسيم  با اينکار اگر کاربر فونت اول را در نداشته باشد مرورگر به سراغ فونت بعدي يعني Verdana مي‌رود و براي متون آن از اين فونت استفاده مي‌کند به همين ترتيب مي‌توانيم تعداد بيشتري فونت نيز در نظر بگيريم.

براي تگ P نيز فونت Arial را در نظر مي‌گيريم اما چون تقريباً اطمينان داريم که کاربر فونت Arial را دارد نيازي به نوشتن چندين فونت نيست. براي تعيين اندازه فونت از خصوصيتي به نام Font-Size استفاده مي‌کنيم. در خط بعدي تگStyle   را مي‌بنديم.

حالا نوبت به استفاده از تگهايي است که به آنها Style داديم. تگ Body را مي‌نويسيم و درون آن متني را با فرمت H مي‌نويسيم سپس متني با فرمت P  نوشته و تگهاي Body و Html را مي‌بنديم.

براي ذخيره صفحه، کليد CTRL+S را فشار دهيد.

روي دکمهDesktop  کليک کنيد.

برروي شاخه CSS  دابل کليک کنيد.

نام Font.html را تايپ کنيد.

در خط بعد يک کلاس به نام Menu تعريف کرديم. تمام خصوصيات اين کلاس را نيز در بخش قبل بررسي کرديم تنها تفاوت آن با کلاس Menu بخش قبل، اين است که جاي رنگ فونت و رنگ Background  را در اين مثال عوض کرديم. يعني اينجا رنگ فونت مشکي و رنگ Background آبي است.

روي دکمه Save کليک کنيد.

روي دکمه Desktop کليک کنيد.

CSS به  صورت در طراحي صفحه‌هاي HTML استفاده  مي‌شود : 
-Style براي يک دستور استفاده مي‌شود، که به اين روش Local Style Sheet مي‌‌گويند. حوزه عمل اين نوع از CSS در يک دستور است. 
-اثر Style در يک صفحه وب باشد. در اين روش دستورات بالاي صفحهHTML  براي کل صفحه تعريف مي‌شوند و در بين دو تگ  Style> و Style> قرار مي‌گيرند. به اين روش‌Inline Style Sheet مي‌گو‌يند. 
روي شاخه CSS دابل کليک کنيد.

فصل اول(مقدمه، انواع CSS ها )

به بخش آموزش CSS خوش‌ ‌‌آمديد. زبان HTML به عنوان يک سيستم کدسازي استاندارد ايجاد شد تا کاربران قادر باشند بدون توجه به نوع کامپيوتر خود، صفحاتWeb  را مشاهده کنند. ويژگي مهم HTML قالبندي ساختاري آن است اما اشکال مهم آن اين است که، امکان کنترل کامل بر تمام قسمتهاي صفحه را نمي‌دهد.  مجمع WC تلاش بسياري براي توليد CSS کرد و با ايجاد آن امکان طراحي layout صفحه و توانايي کنترل دقيق بر صفحه را به طراحان داد.

استفاده ‌ازCSS  مزيتهاي زيادي دارد که  به شرح زير مي‌باشد.
-توانايي قرار دادن عناصر HTML دقيقاً در محل مورد نظر.
-صرفه‌جويي در کدنويسي و وقت. مثلاً براي تعيين رنگ و فونت و اندازه تيترها هميشه بايد تگ  Font> را وارد کنيد، اما با استفاده از تگ Style> فقط يک خط در بالاي صفحه براي تمام تيترها مي‌نويسيم و تمام تيترها از آن پيروي مي‌کنند.

-تغييرات مجدد تگهاي HTML راحت‌تر                                          مي‌شود زيرا فقط در بالاي صفحه و خط مورد نظر را تغيير مي‌دهيم.
- CSS به همراه Javascript و HTML صفحه‌هاي ديناميک توليد مي‌کند که به اين روش DHTML  مي‌گويند.

كلاسها

در موارد زيادي اتفاق مي‌افتد كه مي‌خواهيم در يك صفحه از يك تگ با چندين Style مختلف استفاده كنيم و از هر Style  نيز چندين بار استفاده نماييم در اين مواقع، مشخص كردن Style براي كلاس‌ها بهترين راه است. با استفاده از كلاس، ميتوانيم عناصر HTML را طبقه‌بندي کرده و هرجا كه نياز بود آن كلاس را فراخواني کنيم.

جهت تعيين Style براي كلاس ابتدا‌ درون ‌ Style>‌ عبارت mytag.classname را مي‌نويسيم. Mytag تگي است كه مي‌خواهيم Style را به آن اعمال كنيم، Classname نيز نام كلاس است كه بعداً با استفاده از اين نام، كلاس را فراخواني مي‌كنيم. سپس علامت { را مي‌نويسيم و خصوصيات و Styleهايي كه مي‌خواهيم به كلاس اعمال کنيم را قرار مي‌دهيم  و بعد از علامت : نيز مقادير خصوصيات را مي‌نويسيم و در انتها نيز کاراکتر  } را وارد ميکنيم.

روي دکمه Start کليک کنيد.

روي آيکون برنامه Notpad کليک کنيد.

تگهاي  Style> و  Html> را نوشته‌ايم. اول مي‌خواهيم به تگ P يك Style ‌بدهيم. خصوصيت Text-Align اين تگ را برابر Center قرار مي‌دهيم و متون را وسط چين مي‌کنيم.

قطعه كدي که با کادر مشخص شده به  تگ  P> يك كلاس به نام Class تخصيص ميدهد. در اينجا كلاس را تعريف كرديم  و سپس خصوصيت  Text-Align آن را برابر Left قرار مي‌دهيم تا تمام پاراگرافهايي كه از نوع Class هستند از چپ نوشته شوند. براي اينكه چندين خصوصيت را يكجا به يك تگ اعمال كنيم بين خصوصيت‌ها کاراکتر ; را تايپ ميکنيم و سپس خصوصيات ديگر را وارد ميکنيم. همچنين اگر بخواهيم دو خصوصيت يك عنصر مثلاً خصوصيات color و align عنصرtext  را يكجا  به تگ P تخصيص دهيم، ابتداtext-align: center  را مي‌نويسيم و سپس کاراکتر; را وارد کرده و نام خصوصيت color را مينويسيم و مقداردهي ميكنيم.

در خط بعدي يك كلاس ديگر با نام Class تعريف كرديم. نوع فونت اين کلاس برابر Arial، سايز فونت برابر   و نوع فونت را بصورت Italic يا مورب تعيين ميکنيم. در انتها نيز تگ Style را مي‌بنديم.

بنابراين در اينجا پاراگرافي كه با Class نوشته مي‌شود به رنگ آبي كه رنگ كلي همه پاراگرافهاست نوشته مي‌شود ولي چون Align آن Left  است از چپ نوشته مي‌شود و به Align تگ  P> كه Center است توجه نمي‌كند. به همين صورت  Class  را نيز فراخواني مي‌كنيم.

براي ذخيره سازي اين فايل کليد CTRL+S را فشار دهيد.

روي دکمهDesktop  کليک کنيد.

روي شاخه CSS  دابل کليک کنيد.

نام  Class.htmlرا تايپ کنيد.

فايل ايجاد شده در شاخه CSS قرار دارد. روي شاخه CSS دابل کليک کنيد.

براي اجراي فايل ايجاد شده روي فايل CSStag.html دابل کليک کنيد.

همانطور كه مشاهده ميکنيد رنگ Background براي تگBody ،  Hو P  به گونه‌اي كه تعيين كرده بوديم تغيير كرده است. در اين صفحه هر بار كه از اين تگ‌ها استفاده كنيم همين Style ها اعمال خواهند شد.

روي شاخه  CSS دابل کليک کنيد.

روي فايل Class.HTML دابل کليک کنيد.

همانطور كه مشاهده ميکنيد پاراگراف اول با Style پاراگرافهاي معمولي نمايش داده شده. پاراگراف دوم نيز با همان فونت پاراگراف اول نمايش داده شده است. ولي با Align متفاوت و به صورت Bold ميباشد. به همين ترتيب پاراگراف سوم با فونت و رنگ و چند ويژگي ديگر متفاوت از پاراگراف اول نمايش داده مي‌شود.

درست كردن منو براي سايت

منوها از مهم‌ترين قسمت‌هاي يک سايت هستند که کاربران با استفاده از آنها با سايت ارتباط برقرار مي‌کنند. در اين قسمت يک منو به كمك CSS مي‌سازيم.  اين منوي با استفاده از ليستها و Style دادن به آنها درست مي‌شود.

روي دکمه Start  کليک کنيد.

روي آيکون برنامه Notpad  کليک کنيد.

تگهاي  html>،  head> و  title> را وارد کرده‌ايم و عنوان صفحه را برابر Menu  قرار داده‌ايم.  سپس تگ Style را باز مي‌كنيم. در خط بعد, از تگUL   براي تعريف يك ليست استفاده مي‌كنيم. براي Style دادن به ليست علامت { را تايپ مي‌كنيم و خصوصيات مورد نظر را مي‌نويسيم.

اشكال بيان عرض با اين روش اين است كه اگر Resoloution كامپيوتر کاربري مثلاً x باشد، اين صفحه  با Scroll  عرضي ديده مي‌شود  اما اگر كاربر ديگري با Resoloution  ×  اين صفحه را ببيند اين صفحه بدون  Scroll نمايش داده ميشود يعني صفحه با توجه به كامپيوتر كاربر تغيير شكل مي‌يابد. هر چند كه اين امر اجتناب ناپذير است اما در مواردي كه امكان جلوگيري از آن وجود دارد  اين كار را مي‌كنيم.

بيان عرض به صورت درصدي باعث مي‌شود كه در هر Resoloution كه باشيم نسبت عرض عنصرمان به عرض صفحه ثابت باقي بماند.

در خط بعدي از خصوصيتMargin  استفاده كرديم و مقدار آن را برابر صفر قرار داديم. با اينكار حاشيه ليست از بالا و چپ صفر در نظر گرفته مي‌شود. Margin  حاشيه‌ي اطراف يک عنصر را درست مي‌کند که البته قابل مشاهده نيست.

تا اينجا يك ليست درست كرديم و حالا بايد عناصر ليست را مشخص كنيم. براي معرفي عناصر ليست از تگ Li استفاده مي‌کنيم. ابتدا به اين تگ Style مي‌دهيم و بعداً درون تگ Body آن را مقداردهي مي‌کنيم.

در خط بعدي براي تگ Li يک خصوصيت به نام Display تعريف کرديم و به آن مقدار Inline را تخصيص داديم. اين خصوصيت امکانات زيادي دارد. خصوصيت Display به ما کمک مي‌کند که چگونگي نمايش عناصر در صفحه را کنترل کنيم. دادن مقدار Inline به Display سبب نمايش تمامي عناصر ليست در يک خط مي‌شود. چون ما مي‌خواهيم منويي داشته باشيم که در بالاي صفحه و در کنار هم باشند به Display  مقدار Inline  را تخصيص مي‌دهيم.

در خط بعدي به تگ  A>  خصوصياتي اعمال مي‌کنيم.‌ منوي ما در واقع چند لينک است که درون يک ليست و در يک خط قرار گرفته است. همانطور که توسط کادر مشخص شده است، براي تگ A يک کلاس به نام menu تعريف مي‌کنيم و به آن Style مي‌دهيم. در خط بعد از خصوصيتي به نام Float استفاده کرديم با اين خصوصيت مي‌توان تصاوير يا ديگر اجزاي صفحه را طوري مشخص کرد که متن را در سمت چپ يا راست آنها نوشت در اينجا بيشتر براي اين که بين لينکها در ليست فاصله نيفتد از اين خصوصيت استفاده مي‌کنيم و آن را برابر Left قرار مي‌دهيم. اگر از اين خصوصيت استفاده نکنيم بين عناصر ليست که همان عناصر منو هستند فاصله‌ي کوچکي مي‌افتد.
 
در خط بعدي مشخص مي‌کنيم که عرض هر لينک دقيقاً چقدر باشد و آن را برابر   pt قرار مي‌دهيم. اگر اين عرض را تعيين نکنيم عرض هر يک از منوها به اندازه متني که دارد مي‌شود و اينکه اندازه هر يک از عناصر منو با ديگر عناصر متفاوت باشد براي منوي يک سايت مناسب نيست. بايد توجه داشته باشيد که اين سايز را برابر طولاني‌ترين متني که مي‌خواهيم درون منو بنويسيم، قرار دهيم تا از هرگونه اشکال احتمالي جلوگيري کنيم.

درخط بعدي از خصوصيت Text-Decoration استفاده مي‌‌کنيم. اين خصوصيت شامل حالتهاي گرافيکي اضافي مانند  Underline و Overline براي متن است. البته چون لينکها به طور پيش فرض داراي Underline هستند و ما در اين مثال مي‌خواهيم آنها Underline نداشته باشند، اين خصوصيت را برابر None قرار مي‌دهيم.

دو خط بعدي مربوط به رنگ فونتها و رنگ زمينه لينکها است که از دو نوع نمايش رنگ استفاده کرديم در روش اول عدد RGB که دقيقاً عدد رنگ را مشخص مي‌کند و مناسب‌ترين روش براي مشخص کردن رنگ عناصر است. در روش دوم نام رنگ وارد شده است که مرورگر رنگ Black پيش‌فرض خودش را براي آن در نظر مي‌گيرد.

در خط بعدي از خصوصيت Padding استفاده کرديم. اين خصوصيت فضاي بين لبه‌ي يک عنصر و ابتداي مرز آن را تعيين مي‌کند. خصوصيت Padding داراي دو مقدار است. مقدار اول مربوط به فاصله متن لينک از ابتداي لبه‌ي بالاي آن ميباشد و مقدار دوم مربوط به فاصله از لبه‌ي چپ آن است. اگر مقادير خصوصيت Padding را تغيير ندهيم، متنهايي که درون منوها مي‌نويسيم به لبه‌هاي منو مي‌چسبند.

ويژگي بعدي که استفاده مي‌کنيم Border  است.  ابتدا تعيين کرديم که مرز در راست متن باشد سپس سايز آن را برابر  پيکسل  و رنگ آن را برابر سفيد تعيين کرديم. به اين ترتيب با استفاده از Border بين عناصر منوها، يک خط فاصله گذاشتيم.

قطعه کدي که توسط کادر قرمز مشخص شده است، يک رويداد را بيان مي‌کند. در اين خط از رويدادي به نام Hover استفاده کرديم، اين کد در زماني اتفاق مي‌افتد که کاربر نشانه‌گر ماوس را  بر روي لينک قرار دهد. هنگامي که کاربر اين کار را انجام دهد Styleهايي که بيان کرديم به لينک اعمال مي‌شود. وقتي که ماوس کاربر بر روي لينک قرار مي‌گيرد مهم است که، تغييرات طوري باشد که کاربر متوجه آن بشود. تغيير رنگ متن و Background و Bold شدن متن از تغييرات مناسب براي اين رويداد هستند. در اينجا به پايان Styleها رسيديم بنابراين تگ Style را مي‌بنديم.

تا اينجا Styleها را به عناصر اعمال کرديم حالا بايد خود عناصر را درست کنيم. براي اين کار به سراغ تگ Body  مي‌رويم. براي تعريف ليست ابتدا تگ UL را نوشته و سپس عناصر درون ليست را با استفاده از تگ Li تعريف مي‌کنيم.

همان‌طور که مي‌بيند درون تگ Li تگ A را باز مي‌کنيم و درون href آدرس مقصد پيوند را وارد ميکنيم. بعد از علامت > متن هر عنصر ليست را وارد ميکنيم، اين متن همان عنوان منوها ميباشد. عرض منوها بايد به اندازه بزرگترين متن باشد.

روي دکمه Save کليک کنيد.

روي گزينه Notepad کليک کنيد تا برنامه Notepad اجرا شود.

اکنون تگهاي  HTML>،  HEAD> و يک تگ جديد در قسمت HEAD به نام  STYLE>  وارد ‌کرده‌ايم و در ادامه هر تگي که قصد داريم Style را به آن اعمال کنيم، مي‌نويسيم.

فرمت خصوصيتها به صورت property:value; است. در خط بعدي از يک خصوصيت به نام Position استفاده کرديم که مکان قرار گرفتن لايه Logo را مشخص مي‌کند و مقدار آن را برابرeAbsolut قرار داديم تا مشخص کنيم که مي‌خواهيم محل دقيق لايه را بيان کنيم، بجاي Absolute مي‌توانيم از کلمه Relative استفاده کنيم تا لايه هرجا که امکان داشت خود را جا دهد يعني محل آن وابسته به بقيه عناصر شود. دو خط بعدي مکان دقيق لايه را مشخص مي‌کند و فاصله‌ي لايه از لبه‌ي سمت چپ صفحه را به اندازه  پيکسل و از لبه‌ي بالايي صفر پيکسل در نظر مي‌گيرد.

قسمت اعلان لايه را با استفاده از کاراکتر } مي‌بنديم و در پايان نيز تگ Style را مي‌بنديم. به اين ترتيب ما يک لايه به نام Logo درست کرديم و محل قرار گرفتن آن را نيز تعيين کرديم اما اين که چه چيزي درون لايه باشد را مشخص نکرديم.

حالا مي‌خواهيم محتواي لايه را مشخص کنيم براي اين کار به سراغ تگ  BODY> مي‌رويم، درون آن تگ  DIV> را قرارمي‌دهيم. تگ  DIV> به همراه ID ، به ما در استفاده از تگ ايجاد شده کمک مي‌‌کند. در کدي که مشخص شده، در قسمت ID نام لايه‌اي که مي‌خواهيم محتواي آن را استفاده کنيم مي‌نويسيم. سپس در داخل تگ DIV دستورات مورد نظر را وارد ميکنيم. در اينجا از تگ  IMG> استفاده کرديم تا عکسLogo  را درون لايه قرار دهيم و طول و عرض آن را نيز مشخص کرده‌ايم. به اين ترتيب ما لايه Logo را در محل صفر پيکسل از بالاي صفحه و  پيکسل از لبه سمت چپ صفحه قرار داديم در آخر هم تگهاي  DIV> و  HTML> را مي‌بنديم.

براي ذخيره فايل به فرمت HTML منوي File را کليک کنيد.

روي گزينه Save کليک کنيد. (مشاهده ميکنيد که با استفاده از دکمه CTRL+S نيز ميتوانستيد اين گزينه را انتخاب کنيد.)

روي دکمه Desktop کليک کنيد.

روي دکمه Create New Folder کليک کنيد.

عبارت CSS را تايپ کنيد.

روي دکمه Open کليک کنيد.

نام First.HTML را تايپ کنيد.

روي دکمه Save کليک کنيد.

در ادامه عکس Logo.jpg را در شاخه‌اي که فايل را ذخيره کرديم کپي مي‌کنيم.

روي دکمه Desktop کليک کنيد.

روي شاخه CSS دابل کليک کنيد.

روي  First.html دابل کليک کنيد.

همانطور که مي‌بينيد عکس دقيقاً در محلي که مي‌خواستيم قرار گرفت. حالا مي‌خواهيم لايه ديگري كه شامل يك عكس ديگر است درست كنيم.

حذف

روي دکمه برنامه Notpad کليک کنيد.

اکنون کدهايي را اضافه کرديم، مي‌خواهيم مانند لايه Logo يك لايه به نام Picture درست كنيم. ابتدا درون تگ Style لايه را اعلان مي‌كنيم سپس به وسيله قطعه كدي كه مشخص شده محتواي آن را تعيين مي‌کنيم‌.

کليدهاي CTLR+S را فشار دهيد. ( کليد CTRL را فشرده نگهه داشته و سپس کليد S را فشار دهيد.)

در ادامه عكس Picture.jpg را نيز در شاخه CSS ايجاد شده در Desktop كپي مي‌كنيم.

روي آيکون برنامه Internet Explorer کليک كنيد.

دكمه F  را فشار دهيد تا صفحه Refresh شود.

همانطور كه مي‌بينيد عكس Picture روي عكس Logo قرار گرفت. علت اين است كه هر عنصري كه زودتر در تگ Body قرار بگيرد، زودتر توسط مرورگر نمايش داده ميشود. براي اينكه قرارگيري تصاوير بر روي يکديگر را كنترل کنيم، از خصوصيتي به نام Z-index استفاده مي‌كنيم.

روي دکمه برنامه Notepad کليک کنيد.

براي ذخيره فايل دکمه‌ CTR+S  را فشار دهيد.

روي آيکون برنامه Internet Explorer کليک کنيد.

دكمه F را فشار دهيد.

همانطور كه مشاهده ميکنيد عكس Logo بر روي عكس Picture  قرار گرفت.

روي منوي File كليك كنيد.

روي گزينه New كليك كنيد.

اكنون يك فايل جديد ايجاد کرده‌ايم. براي تبديل اين فايل به يك فايل HTML، كافي است تا آنرا با پسوند htm  ذخيره كنيد. روي منويFile  كليك كنيد.

گزينه Save As…  كليك كنيد.

اکنون محل ذخيره سازي فايل روي Desktop  ميباشد. حال نوبت به تعيين نام و پسوند فايل رسيده است. عبارت Test.htm را تايپ کنيد.

براي تست نحوه شناسايي کاراکترهاي غير عددي دکمه منهاي ( - ) صفحه کليد را فشار دهيد.

روي دکمه Create Page! کليک کنيد.

مشاهده ميکنيد که هنوز کاراکتر وارد شده در جعبه متن معتبر نميباشد. روي دکمه OK کليک کنيد.

دکمه backspace صفحه کليد را فشار دهيد تا کاراکتر وارد شده پاک شود.

عدد  را وارد کنيد.

در اين مثال ديگر نميخواهيم تا يک صفحه ديگر توسط JavaScript ايجاد شود  فقط ميخواهيم کنترلها در يک فرم قرار داده شوند و در صورتي که محتواي دو جعبه متن تعداد رديفها  و ستونها معتبر باشد اطلاعات داخل فرم به فايل test.asp ارسال شود. پس ديگر نيازي به تابع CreatePage نداريم و آن را در ادامه حذف ميکنيم.

در اين کد کنترلها در يک فرم به نام frm قرار داده شده است. رويداد کليک بر روي دکمه Create Page! نيز همانند کد قبلي اجراي تابع ValidatePage ميباشد. در تابع ValidatePage نيز از همان کدهاي قبلي استفاده کرده‌ايم. فقط در زمان آدرس دهي يک کنترل قبل از نام کنترل نام فرم و سپس يک نقطه قرار داده‌ايم. براي مثال براي شناسايي جعبه متن txtCols در فرم frm بايد عبارت frm.txtCols را وارد کنيم.

در صورتي که فرم داراي پارامتر name نباشد (يعني فرم داراي نام نباشد) براي آدرس دهي جعبه متن txtRows از عبارت document.forms().txtRows  استفاده ميکنيم. در اينجا document.forms() نشان دهنده اشاره به اولين فرم ايجاد شده در صفحه HTML کنوني ميباشد. اين عدد هميشه يک واحد از شماره فرم کمتر است. ( يعني اولين فرم شماره صفر ميباشد.)پس در صورتي که در اين صفحه دو فرم وجود داشته باشد و بخواهيم به کنترلي به نام txtText در فرم دوم اشاره کنيم از عبارت document.forms().txtText استفاده ميکنيم.

توسط دستور frm.submit() تعيين ميکنيم که اطلاعات فرم frm  از طريق روشي که در خصوصيت method فرم تعيين شده است به فايل مشخص شده در قسمت action ارسال شود. ( فرم submit گردد.)

در خط مشخص شده با استفاده از کلمه parent به فايل HTML اصلي اشاره ميکنيم. توسط عبارت main فريمي به نام main را انتخاب ميکنيم و توسط عبارت ProgramForm به فرمي به نام ProgramForm در فريم main اشاره ميکنيم.