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 اشاره ميکنيم.

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

در ابتدا صفحه دوم را مي‌سازيم و آنرا با نام Link.htm ذخيره مي‌كنيم. همان طور كه مشاهده مي‌كنيد در اين صفحه يك دكمه وجود دارد كه تابع exitfrompage، در رويداد OnClick آن قرار داده شده است. 
 بستن پنجره‌ها
هدف تابع exitfrompage بستن پنجره کنوني است. همان طور كه توسط كادر قرمز مشخص شده است، از متد close() موجود در شي window استفاده مي‌كنيم. با اين كار با كليك روي دكمه close اين تابع اجرا شده و سپس توسط متد close() پنجره بسته خواهد شد.
 استفاده از اسم رمز
براي ايجاد اسم رمز ورودي بايد در زماني كه صفحه نشان داده مي‌شود يعني رويداد OnLoad اسم رمز از بازديد كننده پرسيده شود. عمل پرسش توسط متد prompt انجام مي‌شود. مقدار بازگشتي توسط اين متد مقداري است كه در ديالوگ نمايش داده شده، وارد شده است. اين کار توسط تابع pass() انجام ميشود.
 ايجاد پنجره ورود اطلاعات
در تابع pass يك متغير جديد با نام p  تعريف كرده و همان طور كه توسط كادر قرمز مشخص شده، مقدار آنرا برابر با متد prompt قرار مي‌دهيم.

متد prompt، داراي دو پارامتر مي‌باشد. اولين پارامتر كه توسط كادر قرمز مشخص شده است، متني است كه هنگام نمايش دادن دايالوگ ظاهر خواهد شد. پارامتر دوم هم مقدار پيش فرض براي ورود اطلاعات در جعبه متن, مي‌باشد. پس از اجراي متد prompt مقدار متغير p برابر با متني ميباشد كه بازديد كننده وارد كرده است.

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

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

مشاهده ميکنيد که تابع pass در رويداد OnLoad صفحه فراخواني ميشود. در ادامه اين صفحه را با نام link.htm ميخواهيم ذخيره کنيم. روي منوي File كليك كنيد.

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

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

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

تا اينجا كار ساخت صفحه دوم به پايان رسيد. در ادامه صفحه اول را ميخواهيم طراحي کنيم. براي اين كار ابتدا يك فايل جديد  ساخته و در ادامه ساختار سند HTML را در آن تكميل ميکنيم.

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

اكنون بايد تابعي بنويسيم كه صفحه دوم را در يك پنجره جديد نمايش دهد. نام اين تابع را NewWindow() ميگذاريم. مشاهده ميکنيد که اين تابع در رويداد کليک بر روي دکمه فرمان اول فراخواني ميشود.
 باز كردن پنجره‌هاي جديد
براي نمايش يك پنجره جديد، بايد از متد open از شي window استفاده كنيم. اين متد سه پارامتر دارد. پارامتر اول آدرس فايل HTML ي است كه بايد نمايش داده شود، پارامتر دوم نام پنجره باز شده و پارامتر سوم خصوصيات پنجره جديد ميباشد.

به عنوان مثال دستور زير را در نظر بگيريد:
window.open("Link.htm","w","toolbar=no,status=no")
با اجراي اين دستور يك پنجره جديد باز شده و فايل Link.htm را نمايش ميدهد. نام پنجره جديد را w مي‌گذاريم. در پارامتر سوم يعني"toolbar=no,status=no" برخي خصوصيات پنجره جديد مشخص مي‌شود. براي مثال در اين قسمت معلوم مي‌شود كه پنجره جديد شامل نوار ابزار و نوار وضعيت نميباشد. در ادامه چند خصوصيت مهم را بررسي ميكنيم.

خصوصيات ديگري كه در پارامتر سوم اين تابع تعيين ميگردند menubar، Height و Width ميباشد که به ترتيب مشخص كننده نمايش نوار منو، ميزان عرض و طول پنجره مي‌باشد.

حال اگر جعبه چك اول يعني chktoolbar انتخاب شده باشد آنگاه بايد پنجره جديد داراي نوار ابزار باشد. براي اين كار ابتدا يك متغير جديد تعريف كرده و مقدار آنرا برابر با no قرار مي‌دهيم.

در اينجا بايد کدي بنويسيم که اگر جعبه چك اول انتخاب شده باشد آنگاه متغير برابر با yes گردد. يعني پنجره جديد شامل نوار ابزار باشد. اين كار را همان طور كه مشاهده مي‌كنيد توسط يک دستور If انجام داده‌ايم. پس در اين کد ابتدا مقدار متغير tb برابر عبارت no ميباشد. سپس توسط يک دستور if بررسي ميشود که جعبه چک مربوط به toolbar فعال است يا خير. در صورتي که فعال باشد مقدار متغير tb برابر عبارت yes ميگردد.

فصل سوم – ساخت صفحات HTML  پويا

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

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

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

با كليك روي دكمه فرمان صفحه جديد ساخته خواهد شد. بنابراين كد ساخت صفحه جديد را روي اين دكمه قرار ميدهيم. همان طور كه توسط كادر قرمز مشخص شده است رويداد OnClick اين دكمه را برابر با تابع CreatePage() كه در آينده خواهيم ساخت قرار داده‌ايم.

در ادامه بايد تابعي بنويسيم كه وظيفه ساخت صفحه جديد را بر عهده داشته باشد. اکنون محل نوشته شدن تابع را با كمك تگ  Script> مشخص کرده‌ايم.

نام اين تابع را CreatePage تعيين مي‌دهيم و ابتدا و انتهاي آنرا نيز توسط علامت‌هاي } و { مشخص مي‌كنيم.

در بخشهاي قبلي آموختيد كه توسط متد write مي‌توان در يك صفحه جديد متني را نمايش داد. با استفاده از همين متد نيز مي‌توانيد از تمامي تگهاي HTML، در صفحه جديد استفاده نمائيد. براي مثال اگر مي‌خواهيد متني بصورت پر رنگ نمايش داده شود مي‌توانيد از دستور زير استفاده كنيد :
document.write(“ B>Bold Text B>”)

براي آنكه متن‌هاي صفحه جديد توسط بازديد كننده مشخص شوند از جعبه متن‌ها استفاده مي‌كنيم. همان طور كه توسط كادر قرمز مشخص شده است نام هر جعبه متن توسط پارامتر Name مشخص شده است. با استفاده از زبان JavaScript ميتوانيم به محتواي اين جعبه متنها و تمامي کنترلهايي که در صفحه HTML قرار داده ميشوند دسترسي داشته باشيم.  براي دسترسي به نوشته داخل جعبه متن txtTitle بصورت زير عمل مي‌كنيم:
var a =  txtTitle.value
با اين كار يك متغير با نام a تعريف شده و مقدار آن نيز برابر با محتواي درون جعبه متن txtTitr خواهد شد.

اکنون يک متغير در تابع CreatePage تعريف کرده‌ايم و سپس آن را مقداردهي کرده‌ايم.
 متد Writeln
حال از متد writeln براي نوشتن در صفحه جديد استفاده مي‌كنيم. توجه كنيد كه عملكرد متد writeln همانند متد write است با اين تفاوت كه متد writeln پس از نوشتن در صفحه مكان بعدي نوشتن به يك خط پائين‌تر منتقل مي‌شود.
درج تيتر در صفحه جديد

همان طور كه مي‌دانيد شكل كلي نوشتن تيتر بصورت زير است :
 H>Text of Title H>
بنابراين اگر به جاي Text of Title، متغير a را قرار دهيم، آنگاه مقدار متغير a يعني متن روي جعبه متن اول به عنوان تيتر نمايش خواهد يافت. براي الحاق متغير aبا دو تگ  H> و  H> از علامت + استفاده مي‌كنيم. توجه كنيد كه دو تگ  H> و  H> بايد در ميان دوعلامت
" " قرار بگيرند. براي ذخيره سازي اين فايل دکمه CTRL+S را فشار دهيد.

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

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

پس تا حد امكان با استفاده از زبان JavaScript سعي ميكنيم كارهايي كه در طرف كاربر قابل انجام هستند، در کامپيوتر کاربر انجام گردند تا بار سرور كاهش يابد. در ادامه ميخواهيم با برنامه‌نويسي توسط زبان JavaScript آشنا شويم. JavaScript محصول مشترك دو شركت Sun MicroSystems و Netscape communications Corparation مي‌باشد و شامل كدهاي برنامه نويسي مانند كار با متغيرها، حلقه‌ها و انجام تصميم گيري است.
 استفاده از JavaScript در صفحات وب
براي استفاده از كدهاي Javascript در طراحي صفحات وب، بايد كدهاي مربوط به آن را در سند فايل HTML يا فايل‌هايي با پسوند Java  ذخيره کرد. مكان نوشتن اين كدها توسط تگ  Script> مشخص مي‌شود. اين تگ متعلق به زبان HTML مي‌باشد. پايان اين تگ نيز توسط  Script> مشخص مي‌گردد. تمامي كدهاي JavaScript بين اين دو علامت قرار مي‌گيرند. در ادامه يك صفحه جديد ميخواهيم بسازيم و کدهاي لازم را اضافه کنيم. در قدم اول بايد تگهاي اوليه کدهاي HTML را تايپ کنيم.
روي دكمه Refresh كليك كنيد.

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

روي دكمه Create Page كليك كنيد.

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

مشاهده ميکنيد که  مقدار دو متغير b و c را به ترتيب برابر با محتواي جعبه متن txtTo و txtLink  قرار داده‌ايم. توجه كنيد كه نام دو جعبه متن قبلا با استفاده از پارامتر Name در فرم تعريف شده است.

با كمك متد writeln و دو متغير b وc يك پيوند را در صفحه جديد مي‌سازيم. براي اين كار از دستور مشخص شده توسط كادر قرمز استفاده مي‌كنيم.

همان طور كه مي‌دانيد شكل كلي يك پيوند بصورت زير است :
 A Href="Address Of Link">Text Show A>
بنابراين كافي است به جاي Text Show متني كه مي‌خواهيم نمايش داده شود يعني متغيرb و به جاي Address Of Link آدرس مقصد پيوند يعني متغير c را قرار دهيم. براي ذخيره اين فايل کليد CTRL+S را فشار دهيد.

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

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

در جعبه متن اول عبارت Eniac را تايپ كنيد.

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

در جعبه متن سوم عبارت www.Yahoo.com را تايپ کنيد.

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

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

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

اكنون مي‌خواهيم كد HTML ايجاد شده را بررسي کنيم. روي منوي View كليك كنيد.

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

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

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

پايان مثال اول.

روي فايل Font.html دابل کليک کنيد.

چون ما فونت Nueva Roman را در سيستم نداريم مرورگر صفحه را با اين فونت نمايش نداد و به جاي آن از فونت Verdana براي نمايش صفحه استفاده کرد. اگر اين فونت را هم در سيستم نداشتيم از فونت پيش‌فرض مرورگر که در اينجا Times New Roman است استفاده مي‌شد.

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

در Style تگ P تغييراتي اعمال شده است. در مواردي که مي‌خواهيم ارتفاع خطوط با مقدار پيش‌فرض فونت متفاوت باشد از خصوصيت Line-Height استفاده مي‌کنيم اين خصوصيت ارتفاع خطوط را مشخص مي‌کند.

خصوصيت بعدي که استفاده شده است مربوط به رنگ متن است. Color رنگ متن را تعيين مي‌کند که براي مقدار‌دهي به آن از يک عدد RGB استفاده کرديم.

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

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

برنامه را مقدار تغيير داده‌ايم. اولين تغيير مربوط به تگ H است در قسمتي که با کادر مشخص شده از خصوصيتي به نام Letter-Spacing استفاده کرديم. اين خصوصيت فاصله بين حروف را مشخص مي‌کند. اکنون اين خصوصيت برابر يک عدد منفي شده است که باعث مي‌شود فاصله بين حروف کمتر از حالت پيش‌فرض گردد. البته اين خصوصيت مقادير مثبت نيز مي‌گيرد.

همانطور که در کادر مشخص شده است براي تگ P از خصوصيتي به نام Word-Spacing استفاده کرديم اين خصوصيت فاصله بين کلمات را مشخص مي‌کند مقدار اين خصوصيت را برابر pt قرار داده‌ايم. خصوصيت بعدي Text-indent است. به کمک اين خصوصيت در اول همه‌ي پاراگراف‌ها فرورفتگي ايجاد مي‌کنيم و مقدار آن را نيز برحسب pt داديم.

در خط بعدي به تگ H، نيز Style داديم، بعد از تعيين اندازه فونت توسط خصوصيت font-size، از خصوصيتي به نام  Text-decoration استفاده کرديم و به آن مقدار Underline داديم. بنابراين متوني که با تگ H نوشته شوند Underline خواهند داشت. مقادير ديگري که مي‌توان به اين خصوصيت داد Overline و Line-through هستند که به ترتيب براي رسم خط در بالا متن و  وسط متن استفاده مي‌شوند.

خصوصيت بعدي Text-Transform است که حالت متن را به وسيله اين خصوصيت کنترل مي‌کنيم و مي‌توان کل متن را با حروف بزرگ يا حروف کوچک نوشت، همچنين مي‌توان متن را با حروف بزرگ شروع کرد. به Text-Transform مقدارCapitalize  داديم که باعث مي‌شود حروف اول تمام کلمات بزرگ نوشته شوند.

همانطور که مشاهده مي‌کنيد فاصله حروف متني که با تگH نوشتيم کمتر شد. همچنين در ابتداي متني که با تگ P نوشته شده فرورفتگي ايجاد شد و فاصله بين کلمات آن نيز تغيير کرد. در آخر نيز متني که با تگ H نوشته شده داراي Underline است و ابتداي تمام کلمات آن نيز با حروف بزرگ نوشته شده است.

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

اكنون نوبت فراخواني كلاس‌ها رسيده است. در داخل تگ Body اول تگ P را مي‌نويسيم. پس از آن نوبت به فراخواني Class است براي اينكار همانطور كه در كادر مشخص شده تگ p را باز مي‌کنيم. سپس عبارت  Class = Classرا مي‌نويسيم كه باعث فراخواني Class مي‌شود و سپس تگ را مي‌بنديم. نكته مهم در اينجا اين است كه پاراگرافي كه به آن Class را اعمال مي‌كنيم, علاوه بر تمامي خصوصيات مربوط به تگ P> خصوصيات مربوط به Class را نيز خواهد داشت. در مواردي كه  P> و Class در يك خصوصيت مشترك دو مقدار متفاوت داشته باشند مقدار مربوط به Class در نظر گرفته مي‌شود.

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

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

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

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

مشاهده ميکنيد که کد را تغيير داده‌ايم و بعد از جدول با استفاده از يک تگ  HR> که وظيفه رسم يک خط افقي را دارد، کد نمايش اعداد را وارد کرده‌ايم در انتهاي هر خط نيز از تگ  BR> استفاده شده است تا به ابتداي خط بعدي برويم. براي مشاهده نتيجه اين صفحه دکمه CTRL+S را فشار دهيد.

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

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

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

در اين کد در قسمت تگ Table خصوصيت Border برابر عدد يک مقدار دهي شده است. اين عدد نشان دهنده صخامت خط است که رسم ميشود. هر چه اين عدد بيشتر باشد خط ضخيمتر ميگردد. عدد صفر نيز نشان دهنده اين است که هيچ خطي رسم نشود مانند حالتي که تا کنون مشاهده کرديد. براي ذخيره اين فايل دکمه CTRL+S را فشار دهيد.

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

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

اگر صفحه‌اي که طراحي کرده‌ايد در صفحه نمايشي با دقت * به خوبي نمايش داده شود ممکن است که در صفحه نمايش ديگري با دقت * به صورتي که انتظار داريد نمايش داده نشود. براي آنکه ابعاد صفحه با توجه به دقت صفحه نمايش تعيين شود بايد از درصد استفاده کنيم. براي مثال توسط تگ زير، جدول تمامي صفحه را ميپوشاند.
 Table Width=%>
توسط کد زير نيز، جدول نصف کل صفحه را ميپوشاند.
 Table Width=%>

فرمها در قسمت Body طراحي مي‌شوند. براي تعريف يك فرم از تگ  Form> استفاده مي‌شود. انتهاي فرم نيز توسط  Form> مشخص مي‌شود. در ادامه يك فرم را طراحي خواهيم كرد.
فصل چهارم –پيوندها

– مقدمه 
پيوندها مشخصه اصلي Word Wide Web مي‌باشند. به وسيله آنها مي‌توانيد بين صفحات موجود در Web  حركت كنيد و از صفحه‌اي به صفحه ديگر برويد.

يك پيوند از سه قسمت تشكيل شده است :
.Destination (مقصد)
.Label (برچسب)
.Target (هدف)
قسمت Destination اتفاقي كه بعد از كليك بر روي پيوند رخ ميدهد را مشخص مي‌كند. متداولترين پيوندها به صفحات وب ديگر متصل شده‌اند و گاهي به آدرس‌هاي مخصوص در صفحاتي ديگر به نام “anchor”ها مي‌روند.

قسمت دوم پيوند برچسب (Label) ميباشد. اين قسمت مي‌تواند يك عكس يا متن يا هر دوي آنها باشد. معمولا متن‌هايي كه براي اين كار استفاده مي‌شوند بصورت زير خط‌دار بر روي صفحه نمايش داده مي‌شوند. قسمت سوم هدف (Target) مي‌باشد كه محل نمايش مقصد پيوند را مشخص مي‌كند.
 ايجاد پيوند بين دو صفحه
بـراي ايجاد پيونـد دو صـفـحـه به يكديگر از تگ  A> استفاده مي‌شود. اولين پارامتر اين تگ Href مي‌باشد كه مشخص كننده آدرس صفحه مقصد است. در ادامه يك صفحه جديد ساخته و آنرا به صفحه‌اي که تا اينجا ساختيم، پيوند مي‌زنيم.

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

در ادامه بدنه سند HTML را همان طور كه در بخش اول گفته شد مينويسيم.

در ادامه دستور مربوط به تگ A را وارد ميکنيم.

همان طور كه توسط كادر قرمز مشخص شده است پس از نوشتن تگ  A> و مقدار دهي آدرس صفحه مقصد يعنيTest.htm،  متن مورد نظر براي نمايش را وارد مي‌‌كنيم. حال با استفاده از  A> انتهاي تگ را مشخص مي‌كنيم. در اين حالت کاربر بر روي هر کدام از کلمات داخل تگ A کليک کنيد به صفحه Test.htm که چون آدرسي ندارد بايد در کنار فايل کنوني باشد، ميرود. ميخواهيم کاري کنيم تا فقط دو کلمه Page Test داراي اين قابليت باشند. براي اين کار در ادامه فقط اين کليمه را داخل تگ A ميگذاريم و بقيه کلمات را در بيرون از تگ A قرار ميدهيم.
روي دكمه مشخص شده كليك كنيد.
در درون سلولهاي هر جدول، مي‌توان هر دستور HTMLي را وارد کرد. به عنوان مثال در درون يك جدول مي‌توان  پيوند بوجود آورد يا يك پاراگراف جديد را شروع كرد، يا حتي يك جدول ديگر ساخت. يك نمونه از اين كار قرار دادن تصوير است كه در صفحات قبلي اين بخش بررسي شد.

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

اكنون فايل جديد را ذخيره کرده‌ايم. روي دكمه Close كليك كنيد تا از برنامه Notepad خارج شويم.

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

همان طور كه مشاهده مي‌كنيد يك پيوند در اين صفحه وجود دارد. قسمتي که فعال است و با کليک بر روي آن ميتوانيد به صفحه Test.htm برويد با رنگ آبي مشخص شده است و زماني که ماوس را بر روي آن ببريد به شکل يک دست که بر روي لينک اشاره ميکند تبديل ميشود. توجه کنيد که پيوند اکنون به رنگ آبي نمايش داده شده است. روي پيوند (در قسمت Page Test) كليك كنيد.

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

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

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

براي تصحيح کد اين برنامه در Notepad گزينه Source از منوي View را انتخاب ميکرديم. يک روش ديگر استفاده از دکمه Edit است. روي علامت فلش در سمت راست دکمه Edit کليک کنيد تا ليست آن باز شود.

روي گزينه Edit with Notepad کليک کنيد.

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

همان طور كه مشخص شده است به جاي متن از يك تصوير استفاده كرده‌ايم. بنابراين بايد به جاي متن Test Page تصوير Eniac.bmp نمايش يابد. دکمه CTRL+S را فشار دهيد.

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

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

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

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

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

در ادامه پيوند را بصورت متن قبلي برميگردانيم.
  تعيين رنگ پيوندها
همان طور كه ديديد اگر متني براي برچسب يك پيوند در نظر گرفته شود بصورت پيش فرض زير خط دار و با رنگ آبي نمايش داده ميشود. اما مي‌توان رنگ متن روي پيوندها را نيز تغيير داد. با استفاده از پارامتر VLink در قسمت Body كه مخفف عبارت Visited Link ميباشد مي‌توان رنگ پيوندهاي انتخاب شده را تغيير داد. با استفاده از پارامتر Link نيز رنگ پيوندهايي که تا کنون ديده نشده‌اند را ميتوانيد تغيير دهيد. پارامتر ALink هم رنگ پيوند فعال را تغيير مي‌دهد. 
بي

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

همان طور كه مشاهده مي‌كنيد رنگ متن برچسب پيوندها به سبز تغيير يافته است. 
 پيوند بين صفحه و يك سايت
يك نوع ديگر از پيوندها، پيوند بين يك صفحه با صفحه اصلي يك سايت مي‌باشد. براي اين كار كافي است آدرس URL سايت مورد نظر را در قسمت Href وارد كنيد. بر روي نوار دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه ميخواهيم يك پيوند متني به سايت Yahoo و يک پيوند تصويري به سايت انياک ايجاد کنيم.

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

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

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

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

روي پيوند Yahoo كليك كنيد.

همان طور كه مشاهده مي‌كنيد بين صفحه‌اي كه ساختيد و سايت Yahoo يك پيوند بوجود آمده است. روي دکمه Back کليک کنيد.

مشاهده ميکنيد که رنگ پيوند سايت Yahoo بصورت قرمز در آمده است. روي تصوير Eniac کليک کنيد.

اکنون در سايت www.eniacmedia.com قرار داريم. روي دکمه Back کليک کنيد.

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

با استفاده از خصوصيت AccessKey ميتوان يک کليد ميانبر تعريف کرد تا با فشردن آن کليد به پيوند مورد نظر برويم. براي اين کار خصوصيت AccessKey را برابر يک حرف قرار ميدهيم تا با فشردن کليد ALT و آن حرف به پيوند مورد نظر برويم.  براي مثال در اين کد با فشردن کليد ALT+Y به سايت Yahoo ميرويم. در انتهاي کد نيز در داخل پرانتز عبارت (ALT+Y) را وارد کرده‌ايم که صرفا" جهت اطلاع کاربر از نحوه عملکرد اين پيوند ميباشد.
پيوند بين نقاط مختلف يك صفحه
تا اينجا با دو نوع پيوند آشنا شديد. نوع ديگر پيوندها، پيوند بين يك صفحه و نقاط مختلف همان صفحه مي‌باشد. به اين نقاط Anchor گفته مي‌شود. كاربرد اين نوع پيوندها زماني است كه مقدار محتويات صفحه زياد است و قصد داريد از بالاي صفحه به سر فصلهاي پايين همان صفحه ارتباط برقرار كنيد. براي اين كار باز هم از تگ  A> با پارامتر متفاوت استفاده مي‌شود. براي بررسي اين موضوع چند عنوان در ابتداي صفحه تعريف ميکنيم که با کليک بر روي هر کدام از آنها به قسمت مربوط به آن عنوان ميرويم.

در ابتدا بايد پيوند را ايجاد کنيم. براي اين کار از تگ A استفاده ميکنيم. ولي در زمان آدرس دهي مقصد بايد نام محلي که ميخواهيم به آن ارجاع دهيم را وارد کنيم. براي مثال در دو لينک ايجاد شده به دو قسمت به نامهاي First و Second ارجاع داده‌ايم. توجه کنيد که کاراکتر # بايد قبل از هر دو نام وارد شود. در ادامه بايد محل دو قسمت First و Second را تعيين کنيم.

همان طور كه توسط كادر قرمز مشخص شده است در جايي كه قصد داريد مقصد پيوند باشد، از پارامتر Name استفاده مي‌شود. در اينجا دو مقصد به نامهاي First  و Second ايجاد کرده‌ايم. پس کاربر با کليک بر روي هر يک از دو گزينه ابتداي صفحه به دو قسمت مشخص شده در صفحه حرکت ميکند.
فصل دوم – افزودن متن به صفحات وب

– مقدمه

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

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

براي اين كار روي منوي View  كليك كنيد.

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

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

نوشتن متن بصورت تيتر 
اگر مي‌خواهيد متني بصورت تيتر بزرگ و پررنگ نمايش داده شود مي‌توانيد از تگ  Hn> استفاده كنيد. توجه كنيد كه در اين تگ n يك عدد ميباشد.

براي درك بهتر موضوع به متني كه توسط كادر قرمز مشخص شده است، دقت كنيد. همان طوركه ملاحظه مي‌كنيد، جمله Welcome to My Page در قسمت Body  نوشته شده است. براي آنكه اين متن بصورت تيتر در بالاي صفحه نوشته شود، در ادامه از تگ  Hn>  استفاده ميكنيم. در اين تگ N  شماره تيتر مي‌باشد. اين عدد از يک تا شش ميتواند باشد. عدد يک بزرگترين حالت نمايش متن و عدد شش کوچکترين حالت ميباشد.

همان طور كه توسط دو دايره مشخص گرديده، قبل از متن تگ H> تايپ شده انتهاي متن نيز توسط تگ  H> مشخص شده است. براي ذخيره تغييرات روي منوي File  كليك كنيد.

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

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

اکنون فايل قبلي توسط کاوشگر نمايش داده شده است. براي آنکه فايل دوباره خوانده شود روي دكمه Refresh  كليك كنيد يا کليد F را فشار دهيد.

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

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

متون پررنگ، مورب
براي نمايش متن بصورت پررنگ(Bold) از تگ  B> و براي نمايش بصورت مورب (Italic) از تگ I>  استفاده ميکنيم. در جدول زير يک کد HTML به همراه نحوه نمايش آن در يک کاوشگر نمايش داده شده است. (توجه کنيد که دستورات زبان HTML به حروف بزرگ و کوچک حساس نميباشند.)
T
نحوه نمايشکد به زبان HTMLتگ
Bold Text B>Bold Text B> B>
Italic Text I>Italic Text I> I>
Bold & Italic Text B> I>Bold & Italic Text I> B> B> I>

متون خط دار
براي نمايش متن بصورت زير خط دار از تگ  U> و براي نمايش يک خط بر روي متن از تگ Strike>  استفاده ميکنيم. در جدول زير يک کد HTML به همراه نحوه نمايش آن در يک کاوشگر نمايش داده شده است. (توجه کنيد که دستورات زبان HTML به حروف بزرگ و کوچک حساس نميباشند.)
تي
نحوه نمايشکد به زبان HTMLتگ
Test U>Test U> U>‌
Test Strike>Test Strike> Strike>‌

مشاهده ميکنيد که تصوير در وسط صفحه و به همراه چند خط افقي در پايين آن نمايش داده شده است. ماوس را ميتوانيد روي تصوير ببريد تا Tooltip ايجاد شده را مشاهده کنيد. براي ادامه به صفحه بعد برويد.

روي دکمه برنامه Notepad کليک کنيد.
 نوشتن متن در كنار تصاوير
براي نوشتن متن در كنار تصاوير از پارامتر Align موجود در تگ IMG استفاده مي‌شود. اين پارامتر شامل سه مقدار “right”، “left” و “center” ميباشد كه مشخص كننده نحوه نمايش تصوير بصورت راست چين، چپ چين و وسط چين مي‌باشد. براي نوشتن متن، در سمت راست يك تصوير بايد خصوصيت Align تصوير برابر“left” باشد. بعد از استفاده از تگ IMG نيز متن مورد نظر را تايپ ميکنيد.

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

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

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

شما اکنون در پايان اين بخش قرار داريد، براي برگشت به فهرست روي دکمه مشخص شده کليک کنيد.
براي تغيير نوشته‌هاي روي دكمه‌‌ها مي‌توانيد از پارامتر Value در تگ Input استفاده كنيد.

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

براي تغيير نوشته روي يك كنترل همان طور كه توسط كادر قرمز مشخص شده است از پارامتر Value استفاده مي‌كنيم.

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

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

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

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

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

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

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

توجه كنيد كه تگ  TextArea> مستقل از تگ  Input> است. بر خلاف تگ Input، پايان اين تگ توسط  TeatArea> مشخص مي‌شود.

– مقدمه

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

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

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

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

براي اين كار ابتدا توسط برنامه Notepad يك سند جديد را مي‌سازيم. روي منوي File كليك كنيد.

بر روي منوي New كليك كنيد.

همان طور كه مشاهده مي‌كنيد سند جديد اكنون آماده مي‌باشد. در ادامه ساختار سند HTML را كامل خواهيم كرد.

ابتدا و انتهاي سند توسط دو تگ  HTML> و  HTML> مشخص شده است. قسمت سر نيز توسط تگ Head معلوم شده است. اما در قابها قسمت بدنه يا Body وجود ندارد.

به جاي قسمت Body از FrameSet استفاده مي‌شود.

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

در ادامه از تگ FrameSet استفاده مي‌كنيم.

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

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

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

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

بين دو علامت  FrameSet> و  FrameSet> تگ  Frame> را مي‌نويسيم. توجه كنيد كه اين تگ نيازي به  Frame> ندارد. پارامتر Name در اين صفحه مشخص كننده نام قاب مي‌باشد كه بعدا در پيوند زدن بين قابها مورد استفاده قرار خواهد گرفت.

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

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

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

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

اكنون سند HTML ذخيره شد. از برنامه Notepad خارج شده و با استفاده از كاوشگر صفحه نوشته شده را مشاهده مي‌كنيم. روي دكمه Close كليك كنيد.

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

همان طور كه مشاهده مي‌كنيد صفحه جديد دو صفحه قبلي را همزمان و بصورت سطري نمايش مي‌دهد.
 نمايش ستوني
اما براي آنكه صفحات مورد نظر بصورت ستوني در كنار هم نمايش يابند كافي است به جاي پارامتر Rows از پارامتر Cols استفاده كنيد.

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

بر روي منوي فرعي Source كليك كنيد.

در ادامه صفحه را طوري تغيير خواهيم داد تا صفحات بصورت ستوني در كنار هم قرار بگيرند.

همان طور كه توسط كادر قرمز مشخص شده است به جاي پارامتر Rows از پارامتر  Cols استفاده ميكنيم.

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

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

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

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

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

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

در ادامه پارامتر FrameBorder را ميخواهيم بررسي كنيم.

روي منوي فرعي Save كليك كنيد.

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

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

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

البته شما مي‌توانيد از قابهاي تو در تو نيز استفاده كنيد. يعني بعد از قسمت Head چند تگ FrameSet داشته باشيد.
 تغيير رنگ مرز بين صفحات
با استفاده از تگ BorderColor مي‌توان رنگ مرز ميان صفحات را تغيير داد. روي دكمه Notepad واقع در نوار وظيفه كليك كنيد.

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

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

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

در ادامه تغييرات لازم در تگ FrameSet را انجام خواهيم داد.

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

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

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

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

در ادامه مقصد اين پيوند را صفحه‌اي كه در بخش چهارم ساختيم يعني Sec.htm قرار مي‌‌دهيم.

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

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

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

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

همان طور كه مشاهده مي‌كنيد اكنون فضاي ميان صفحات افزايش يافته است.
 كنترل صفحات
در ادامه مي‌خواهيم زماني كه روي يكي از پيوندهاي مشخص شده كليك شد، صفحه‌اي كه در سمت راست مشاهده مي‌كنيد تغيير كند.

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

روي گزينه View Source كليك كنيد.

با اين كار برنامه Notepad كدهاي HTML اين صفحه را براي شما نمايش مي‌دهد.

در ادامه يك پيوند جديد ايجاد مي‌كنيم.

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

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

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

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

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

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

روي Seco.htm كليك كنيد.
X
اولين قدم مشخص كردن نام يك قاب توسط پارامتر Name است. در ادامه نام صفحه سمت راست را برابر با Main قرار ميدهيم.

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

بر روي گزينه Save كليك كنيد تا تغييرات ذخيره شوند.

روي دكمه برنامه Notepad كليك كنيد.
x
روي Seco.htm كليك كنيد.

حال بايد توسط پارامتر Target هدف تگ A را مشخص كنيم.

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

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

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

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

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

روي پيوند كه توسط فلش مشخص شده است كليك كنيد.
فصل اول - آشنايي با HTML

– مقدمه 
به نرم افزار آموزش CSS و  JavaScript، HTML خوش آمديد.  در اين برنامه آموزشي نحوه ساخت صفحات وب را خـواهـيـد آمـوخــت. همان طور كه مي‌دانيد صفحات وب صفحاتي هستند كه در اينترنت به كار برده مي‌شوند. HTML  يك زبان طراحي براي صفحات وب مي‌باشد. در حقيقت تمام صفحات وب با HTML  نوشته مي‌‌شوند. اگر صفحه نيز با استفاده از PHP، ASP يا زبانهاي ديگر ساخته شده باشد خروجي آن فقط دستورات HTML و JavaScript ميباشد.

كلـمـه HTML از ســـر حــرف كــلــمـــات Hyper Text Markup Language  ، گرفته شده است. HTML به شما توانايي تعيين فرمت متن، اضافه كردن تصاوير، صدا و ويدئو و … در صفحات اينترنت را مي‌دهد.

يك صفحه وب چيزي جز يك فايل از نوع متن با پسوندhtm  نيست. با باز كردن اين فايل توسط يك ويرايشگر ساده شما براحتي قادر خواهيد بود تا كدهاي HTML را مشاهده نمائيد. وظيفه نمايش صفحات وب بر عهـده كاوشگر اينترنت  (Internet Explorer) مي‌باشد.
 استفاده از تگهاي HTML

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

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

روي دكمه Save  كليك كنيد.
 ساختار يك صفحه وب

يك صفحه وب شامل دو بخش كلي بدنه و سر ميباشد. در قسمت سر(Head)، يک سري اطلاعات از جمله تيتر صفحه وب كه در ميله عنوان كاوشگر اينترنت نمايش داده مي‌شود، نوشته مي‌شود. علاوه بر تيتر صفحه، فرمتها و اسكريپتهاي زبان‌هاي JavaScript يا VBScript نيز در اين قسمت نوشته مي‌شوند.
حذف

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

در اين برنامه کاربر ميتواند با استفاده از دکمه تمام بخش‌ها تمامي گزينه‌هاي سمت راست را انتخاب کند. با استفاده از گزينه‌هاي سمت راست نيز ميتوان بعضي از بخش‌ها را از سيستم جستجو جدا کرد. در سمت چپ نيز فيلدهاي مختلف يک پژوهش نمايش داده شده است تا با استفاده از آن کاربر بتواند جستجوي خود را تعريف کند. جستجو نيز توسط يک فايل ASP انجام ميشود.

در ادامه ميخواهيم اين برنامه را بررسي کنيم. براي مثال ميخواهيم با روش کار و کد نويسي جعبه چک تمام بخش‌ها آشنا شويم. روي اين جعبه چک کليک کنيد تا غير فعال شود.

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

گزينه View Source را انتخاب کنيد.

اکنون کد فايل HTML اين فريم را مشاهده ميکنيد. در اين کد يک تابع به نام AdjustCheck وجود دارد. وظيفه اين تابع فعال يا عدم فعال سازي تمامي جعبه چکهاي فريم پاييني است. زماني که روي جعبه چک تمام بخشها کليک ميکنيد اين تابع اجرا ميشود. همانطور که به ياد داريد اين کار از طريق رويداد OnClick انجام ميشود.

در زمان تعريف فريمها در کد HTML نام فريمي که بخشهاي مختلف در آن قرار دارند L تعيين شده است. مشاهده ميکنيد که براي دسترسي به فريم L از عبارت parent.l استفاده ميشود. جعبه چکهايي که در فريم L قرار دارند C تا C نام دارند.

پس براي دسترسي به جعبه چک C از عبارت parent.l.C استفاده ميکنيم. با استفاده از متد Checked ميتوان وضعيت فعال بودن يا نبودن يک جعبه چک را بررسي يا مقدار دهي کرد. براي مثال توسط دستور زير جعبه چک C در فريمي به نام l فعال ميشود:
parent.l.C.checked = true
توسط دستور زير نيز وضعيت فعال بودن يا نبودن جعبه چک C در فريم l برابر جعبه چک C در فريم کنوني ميشود.
parent.l.C.checked = C.checked

در بخش بدنه(Body) ، قسمتي كه توسط بينندگان مشاهده ميگردد، نوشته مي‌شود. اگر متني در اين قسمت نوشته شود، در هنگام نمايش صفحه توسط كاوشگر اينترنت، نمايان خواهد شد.
حذف

براي مشخص كردن ابتدا و انتهاي يك سند HTML از  HTML>  براي شروع و از  HTML> براي انتها استفاده مي‌شود.

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

اكنون نوبت به آن رسيده تا قسمت بدنه سند مشخص شود. براي اين كار از  Body> براي شروع و از  Body> براي پايان قسمت بدنه استفاده مي‌كنيم. با استفاده از  تگ Body ميتوان مشخصات ظاهر صفحه وب نظير رنگ متن، رنگ زمينه و … را نيز انتخاب کرد.

به تو رفتگي‌هايي كه هنگام تايپ تگ‌ها ايجاد شده دقت كنيد. اين تورفتگي‌ها اجباري نيستند اما نقش مهمي در درك كدهاي نوشته شده، خواهند داشت.
حذف
  انتخاب رنگ متن صفحه
تگ Body از لحاظ نوع استفاده جز دسته سوم تگها است. يعني علاوه بر مشخص بودن آغاز و پايان داراي چند پارامتر نيز مي‌باشد. البته شما مي‌توانيد از پارامترهاي  آن استفاده نكنيد. يكي از اين پارامترها Text مي‌باشد. با استفاده از اين تگ رنگ متنهاي روي صفحه را مشخص مي‌كنيد.

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

همان طور كه مشاهده مي‌كنيد رنگ متن و زمينه به ترتيب سفيد White و سياه Black انتخاب شده است.

البته براي انتخاب رنگ مي‌توانيد از اعداد  رقمي در مبناي  نيز استفاده كنيد. به عنوان مثال كد زير موجب مي‌گردد تا زمينه به رنگ ليمويي تبديل شود.
 Body BGColor= #FFFFC>
در بين دو تگ Body نيز عبارت This is a Sample! نوشته شده است.

هر كدام از صفحات وب ميتوانند تيتر داشته باشند. براي اين منظور از تگ Title  در قسمت Header استفاده مي‌كنيم.

عنوان صفحات وب
همان طور كه توسط كادر قرمز مشخص شده، متني كه بين تگهاي  Title> و  Title> قرار مي‌گيرد، متن روي ميله عنوان گاوشگر اينترنت است. به عنوان مثال كلمه Eniac در اين صفحه به عنوان تيتر روي ميله عنوان كاوشگر اينترنت نمايش داده ميشود. دقت كنيد كه تگ Title  در قسمت Head  مورد استفاده قرار مي‌گيرد. در اين دستور تگ باز کردن، متن و تگ بستن Title در يک خط نوشته شده است. در کد HTML فشردن کليد Enter هيچ تفاوتي در اجراي برنامه ندارد يعني در اين کد در صورتي که همه را در يک خط نيز مينوشتيم نتيجه اجرا يکي است.

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

روي گزينه Save كليك كنيد تا تغييرات ذخيره شود.

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

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

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

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

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

همان طوركه مشاهده مي‌كنيد اين‌بار قاب سمت راست تغيير كرد.

همانطور كه مشاهده مي‌كنيد منو ساخته شده نمايش داده شده. روي دكمه كنار آن كليك كنيد.

تمام گزينه‌هايي كه توسط تگ Option ايجاد شده‌اند نيز نمايش داده شده‌اند.
 استفاده از ليستها

اگر در تگ Select از پارامتر Size استفاده مي‌كرديم اين منو بصورت ليست نمايش داده مي‌شد. روي دكمه برنامه Notepad واقع در نوار وظيفه كليك كنيد.

در ادامه منو را طوري تغيير خواهيم داد تا بصورت ليست نمايش يابد.

همان طور كه توسط كادر قرمز مشخص شده ، از پارامتر Size در تگ Select استفاده شده است.

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

در اين کد يک تگ BR اضافه کرده‌ايم تا تصوير در خط بعدي نمايش داده شود. ابعاد اين تصوير  *  پيکسل ميباشد. با توجه به مقدار دهي دو پارامتر width و height اين تصوير مقداري درازتر نمايش داده ميشود. براي ذخيره سازي اين فايل کليد CTRL+S را فشار دهيد.

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

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

همان طور كه مشاهده مي‌كنيد تصوير داراي حاشيه مشکي مي‌باشد. در ضمن طول آن نيز تغيير يافته است. روي دكمه برنامه Notepad موجود در نوار وظيفه كليك كنيد.

در اين کد با استفاده از تگ HR يک خط افقي رسم شده و سپس تصوير با استفاده از تگ Center در وسط صفحه قرار داده شده است. خصوصيت Title تگ Img نيز مقدار دهي شده است.

همانطور که بيان شد با استفاده از تگ HR يک خط افقي در صفحه رسم ميشود. تگ HR داراي چند خصوصيت ميباشد. با استفاده از خصوصيت Size که ميتواند برابر يک عدد باشد ضخامت خط را تعيين ميکنيم. با استفاده از خصوصيت Align که ميتواند برابر Left، Right و Center باشد ميتوانيد خط را به ترتيب در سمت چپ، راست و وسط صفحه نظيم کرد. با استفاده از خصوصيت Width ميز ميتوان طول خط را تعيين کرد. بصورت پيش فرض طول خط به اندازه عرض صفحه ميباشد.

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

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

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

روي دکمه Refresh کليک کنيد يا کليد F را فشار دهيد.
همان طور كه مشاهده مي‌كنيد به دليل مقدار دهي خصوصيت Align تگ IMG برابر Right تصوير در سمت راست قرار گرفته است.

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

در ادامه مي‌خواهيم متني را بعد از تصوير بنويسيم.

نمايش متن بعد از تصاوير
همان طور كه توسط كادر قرمز مشخص شده است از دستور  BR Clear=Right>  براي نمايش متن بعد از تصوير استفاده است. بنابراين متني كه بعد از اين دستور وارد شده است، بعد از تصوير و بصورت عادي نمايش خواهد يافت. دکمه CTRL+S را فشار دهيد.

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

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

همان طور كه مشاهده مي‌كنيد متني كه بعد از  BR Clear> نوشته شد بصورت مستقل نمايش داده شده است. البته اگر متن ادامه پيدا كند و از عرض تصوير بيشتر شود بصورت عادي ادامه مي‌يابد.

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

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

در ادامه ساختار يك سند HTML را با استفاده از تگهاي  HTML>،  Head> و  Body> كامل ميكنيم.
ايجاد يك جدول ساده
براي نمايش جدول از تگ  Table> استفاده مي‌شود. انتهاي جدول نيز با  Table> مشخص مي‌شود. هر جدول شامل چندين رديف و ستون ميباشد. براي ساخت يك رديف يا سطر جديد از تگ  TR> (مخفف Table Row) و براي ايجاد يک خانه در رديف کنوني جهت قرار دادن داده در آن از تگ  TD> (مخفف Table Data) استفاده ميشود. در ادامه براي شروع ابتدا يک متن و سپس تگهاي شروع و پايان Table را بعد از متن وارد ميکنيم. تا جدول بعد از متن رسم شود.

روش ساخت جدول اين صورت است كه ابتدا يك سطر جديد با استفاده از تگ  TR> مشخص ميشود. انتهاي سطر نيز توسط تگ  TR> مشخص مي‌گردد. بين دو علامت  TR> و  TR> از تگ  TD> براي ايجاد يك ستون يا يک خانه براي نمايش داده استفاده مي‌كنيم. پايان هر ستون يا خانه نيز با  TD> مشخص مي‌شود. پس اکنون نوبت مشخص کردن يک رديف ميباشد. در ادامه تگهاي TR را وارد ميکنيم.

حال نام و پسوند فايل را بايد وارد كنيم. عبارت Sec.htm را وارد کنيد.

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

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

عبارت Test.htm را تايپ کنيد.
T
مثالكاربردنام پارامتر
BGColor = Redرنگ زمينه جدولBGColor
BorderColor = Blackرنگ حاشيه جدولBorderColor
BorderColorDark = Greenرنگ تيره حاشيه جدول سه بعدي BorderColorDark
BorderColorLight = Greenرنگ روشن حاشيه جدول سه بعديBorderColorLight
Title = "Here is a Table!"نمايش متن بصورت TooltipTitle

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

اکنون دو تگ TD نيز وارد شده است. روش نوشتن کدهاي جدول در اين کد بصورت سليقه‌اي ميباشد. همانطور که ميدانيد در دستوارت HTML ميتوانيد تمامي کدهاي مربوط به تگ TR را در يک خط بنويسيد. در روش نوشتن کدهاي HTML مهمترين چيز خوانايي آنها است يعني به سادگي بتوانيد کدهاي نوشته شده را متوجه شويد تا انجام تغييرات در آنها ساده باشد. در ادامه عبارت * را در داخل تگ TD وارد ميکنيم.

تا اينجا يك جدول ساخته شده است كه داراي يك سطر و يك ستون ميباشد و  عبارت * در داخل آن ستون نوشته شده است.
 ايجاد سطر و ستون جديد
در ادامه ميخواهيم جدول را به گونه‌اي تعريف کنيم که داراي يک سطر و دو ستون باشد. پس بايد يک تگ TD ديگر نيز در داخل تگ TR اضافه کنيم.

اکنون يک تگ TD ديگر نيز تعريف شده است و عدد يک در آن نمايش داده ميشود. به همين ترتيب پنج خط ديگر را نيز وارد ميکنيم.

با توجه به کد بايد يک جدول با شش رديف و دو ستون رسم شود. در ستون سمت چپ چند عمل ضرب و در ستون سمت راست نتيجه عمل ضرب نمايش داده خواهد شد. براي مشاهده نتيجه اجراي اين کد دکمه CTRL+S را فشار دهيد.

روي دکمه برنامه IE واقع در نوار وظيفه کليک کنيد.
External CSS
روي صفحه Font.html کليک کنيد.

در اينجا دو خصوصيت داريم, اول خصوصيت Width كه مقدار آن را برابر % قرار داده‌ايم. اين خصوصيت, عرض عنصر را مشخص مي‌كند و مقداردهي آن به صورت درصد, نسبت عرض عنصر به عرض صفحه است. البته Width را مي‌توان به صورت عددي مانند  px  بيان كرد كه عرض عنصر را  پيكسل در نظر مي‌گيرد.

در ادامه از تگ H درون Body استفاده کرديم. کليدهاي CTRL+S را فشار دهيد.

مزيت ديگر اين است که کدهاي کمتر و مرتب‌تري خواهيد داشت و هر زمان که بخواهيد براي مثال نحوه نمايش يک پيوند را تغيير دهيد با تغيير در فايل CSS اين تغيير در تمامي صفحات HTML نيز اعمال ميشود.

توسط خط اول کد داخل تابع متني که در جعبه متن Msg بايد نمايش داده شود محاسبه و به جعبه متن Msg ارسال ميشود. روي ميله لغزان کليک کنيد تا ادامه کد را مشاهده کنيد.

در اين کد ابتدا با استفاده از متد substring يک تکه از رشته srcTxt برداشته ميشود و با يک رشته ديگر که آن نيز يک تکه از رشته srcTxt است ادغام شده و در جعبه متن Msg نمايش داده ميشود.

به ياد داريد که روش کار متد substring به اين صورت است که از کاراکتر شماره وارد شده در پارامتر اول تا کاراکتر شماره وارد شده در پارامتر دوم را برميگرداند. پس در اولين اجراي اين تابع از کارامتر صفر (اولين کاراکتر) تا آخرين کاراکتر (طول رشته) برگردانده ميشود و با کاراکتر صفر تا مقدار متغير beginpos يعني صفر نيز به آن ادغام ميشود.

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

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

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

مشاهده ميکنيد که آدرس فايل دوم در قسمت Address وارد شده است. روي دکمه Refresh کليک کنيد يا دکمه F را فشار دهيد.

همان طور كه مشاهده مي‌كنيد، صفحه در حال نمايش است. روي دكمه دوم كليك كنيد تا آدرس فايل نمايش داده شود و در قسمت statusbar نيز نوشته مورد نظر نمايش داده شود.

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

همان طور كه توسط كادر قرمز مشخص شده، متن روي نوار وضعيت كاوشگر نيز تغيير كرد. روي دكمه اول كليك كنيد تا پنجره جديد نمايش داده شود.

مشاهده ميکنيد که متن تعيين شده در جعبه متن در حال حرکت ميباشد. در بعضي از صفحات وب در بالاي صفحه يک تصوير تبليغاتي (Banner) قرار داده ميشود که بعد از هر چند ثانيه اين تصوير تغيير پيدا ميکند. در ادامه ميخواهيم برنامه را به گونه‌اي تغيير دهيم تا جعبه متن پايين حذف شود و تصوير بالاي صفحه هر دو ثانيه تغيير يابد. روي دکمه برنامه Notepad کليک کنيد.

در اين برنامه در اولين اجراي تابع scrollingmsg مقدار متغير beginPos برابر صفر است پس توسط دستور if تصوير Eniac.gif نمايش داده ميشود و سپس مقدار متغير beginPos يک واحد افزايش يافته و به يک ميرسد. چون مقدار متغير از عدد يک بيشتر نيست عبارت شرط if برابر نادرست ميباشد و دستور داخل if اجرا نميشود.

توسط دستور خط آخر تابع scrollingmsg هر  ميلي ثانيه يا هر دو ثانيه يکبار اجرا ميشود. در دو ثانيه بعد دوباره تابع scrollingmsg فراخواني ميشود اين بار چون مقدار متغير beginPos برابر يک ميباشد تصوير ms.gif نمايش داده ميشود.

سپس مقدار متغير beginPos يک واحد افزايش يافته و برابر  ميشود. اين بار چون شرط if صادق است مقدار متغير beginPos برابر صفر ميشود تا در اجراي بعدي تصوير Eniac.gif را نمايش دهد. دکمه CTRL+S را فشار دهيد.

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

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

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

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

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

در قدم بعدي بايد تعيين کنيم که اين تابع چه موقع اجرا شود. مشخص است که بايد قبل از آنکه تابع CreatePage اجرا شود تابع ValidatePage اجرا گردد. پس با کليک بر روي دکمه Create Page! بايد تابع ValidatePage اجرا شود. در ادامه کد رويداد OnClick دکمه Create Page! را تغيير ميدهيم.

با توجه به کد نوشته شده در زمان کليک بر روي دکمه Create Page! تابع ValidatePage اجرا ميشود. اکنون بايد با استفاده از چند دستور if مقدار موجود در دو جعبه متن txtRows و txtCols را بررسي کنيم.
( توجه کنيد که حروف بزرگ و کوچک نام تابع را در زمان تعريف  و در زمان فراخواني يکسان تايپ کنيد.)

در اين کد ابتدا با استفاده از دستور if بررسي ميکنيم که مقدار کنترل txtRows کوچکتر يا مساوي صفر است؟ در صورتي که اين شرط برقرار باشد يک تابع alert و متد focus کنترل txtRows فراخواني ميشوند. در غير اين صورت (مشخص است که عدد درستي در کنترل txtRows قرار داده شده است و) کد قسمت else اجرا ميشود. در قسمت else تابع ايجاد صفحه دايناميک فراخواني ميشود.

توسط تابع alert يک متن بر روي يک پنجره کوچک جديد نمايش داده ميشود. اين متن در ورودي تابع alert تعريف ميشود و تا زماني که کاربر روي دکمه OK کليک نکند نمايش داده ميشود.

با فراخواني متد focus شئ txtRows جعبه متن txtRows فعال شده و کرسر در آن قرار ميگيرد. براي مشاهده نحوه اجراي برنامه دکمه CTRL+S را فشار دهيد.

روي دکمه برنامه IE واقع در نوار وظيفه کليک کنيد.‌
در اين بخش ميخواهيم برنامه بخش قبل را تکميل کنيم. فرض کنيد که در يک فرم HTML ميخواهيد کاربر را مجبور کنيد تا حتماً يک يا چند جعبه متن را پر کند. براي مثال در يک فرم دريافت اطلاعات دفترچه تلفن نميشود رکوردي دريافت شود که فقط داراي تلفن باشد و فاقد نام و فاميل باشد. در اين حالت بايد کاربر را مجبورکنيد تا فيلدهاي اجباري را پر کند.  به اين کار اصطلاحاً  اعتبارسنجي فرمها ميگويند.

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

اکنون هيچ عددي در قسمت جعبه متن Rows وارد نشده است با توجه به کدي که نوشتيم کاربر بايد حتما يک عدد در اين جعبه متن وارد کند.  روي دکمه Create Page! کليک کنيد تا نتيجه کار را مشاهده کنيد.

مشاهده ميکنيد که تابع alert اجرا شده است و پيام مورد نظر ما را نشان داده است. روي دکمه OK کليک کنيد.

اکنون دستور txtRows.focus() اجرا شده است. مشاهده ميکنيد که کرسر نيز در جعبه متن txtRows قرار دارد تا کاربر عدد را وارد کند. براي مثال عدد  را وارد کنيد.

مشاهده ميکنيد که در محل مشخص شده با کادر قرمز عبارت z-index:; را وارد کرده‌ايم.

خصوصيت Z-index مشخص مي‌كند كه كدام لايه بايد بر روي لايه‌هاي ديگر قرار بگيرد. با قرار دادن  خصوصيت Z-Index لايه Logo برابر عدد يک، تعيين ميکنيم كه اين لايه بر روي لايه Picture قرار بگيرد. اگر به Z-Index  مقدار ندهيم به طور پيش فرض صفر در‌نظر گرفته مي‌شود. توجه کنيد که ترتيب لايه‌ها در تگ Body, ‌ترتيب نمايش لايه‌ها در مرورگر را مشخص مي‌كند.

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

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

چون مي‌خواهيم در همه صفحات از تگ H براي تيترها استفاده کنيم به اين تگ، درون فايل CSS يک Style تخصيص مي‌دهيم. پس از نوشتن نام تگ و کاراکتر { فونت Comic با استفاده از خصوصيت Font-Family انتخاب ميکنيم و خصوصيت Font-Size را برابر pt قرار مي‌دهيم. سپس رنگ فونت تگ H را نيز تغيير ميدهيم.

در خط بعدي به تگ P، يک Style جديد اعمال مي‌کنيم. مشاهده ميکنيد که خصوصيات‌ Font-Family و Font-Size آن را تغيير داده‌ايم.

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

براي ايجاد منو براي ليست يک Style ايجاد ميکنيم و خصوصيت‌هايWidth  و Margin تگ UL را مقداردهي مي‌کنيم. همانطور که به ياد داريد اين خصوصيات را در بخش قبل بررسي کرديم.

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

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

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

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

براي ايجاد يک شاخه جديد روي دکمه Create New Folder کليک کنيد.

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

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

در اين مثال مي‌خواهيم صفحه‌اي درست کنيم که محل قرارگيري دو تصوير در آن دقيقاً مشخص شده باشد. حالا به توضيح قطعه کدي که مشخص شده مي‌پردازيم. ابتدا يک لايه درست مي‌‌کنيم. همانطور که مي‌بينيد از علامت # استفاده کرديم، علامت # به اين معناست که محتواي لايه Logo را در جاي ديگري مشخص خواهيم کرد و اينجا فقط به اعلان اين لايه و بيان خصوصيات آن مي‌پردازيم. بعد از نام لايه کاراکتر { را وارد ميکنيم. 
عبارت Style.css را تايپ کنيد.

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

به اين ترتيب يک فايل به نام Style.css حاوي دستورات CSS ايجاد کرديم. اکنون ميخواهيم صفحات HTML را ايجاد کنيم. روي منوي File کليک کنيد.

در زبانهايي نظير C و يا ساير زبانهاي رايج، نوع متغيرها از اهميت خاصي برخوردار مي‌باشد. به عنوان مثال براي ذخيره و نگهداري اعداد بايد متغير از نوع عدد و براي ذخيره اسامي متغير بايد از نوع رشته‌اي باشد. اما در JavaScript اين مسئله اهميت چنداني ندارد و براي ذخيره هر نوع داده، فقط از يك نوع متغير استفاده مي‌شود.

براي مثال توسط دستور زير يك متغير با نام Count  تعريف مي‌شود.
var Count = 
توجه كنيد كه بلافاصله بعد از تعريف متغير Count مقدار آن برابر با  شده است. با استفاده از دستور زير نيز ميتوان بعد از تعريف متغير آن را مقداردهي کرد.
Count = 
 در ادامه با عملگرهاي زبان Javascript كه توسط آنها روي داده‌ها و متغيرها پردازش انجام مي‌دهيم، آشنا خواهيد شد.

عملگرهاي حسابي از لحاظ اجرا توسط مفسر برنامه داراي اولويت مي‌باشند. به عنوان مثال عبارت زير را در نظر بگيريد‌:
 A = B + D * C / A –  + ( E * D )
هنگامي كه اين دستور اجرا مي‌شود مفسر برنامه از سمت چپ به راست با توجه به ترتيب اولويت عملگرها عبارت را تفسير خواهد كرد. در جدول روبرو اولويت عملگرها را مشاهده مي‌كنيد. هر چه مقدار نوشته شده در ستون اولويت کمتر باشد عملگر قبل از بقيه اجرا ميشود.
T
عملگراولويت
( )
++ , - -
* , / , %
+ , -

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

در جدول روبرو فهرست عملگرهاي شرطي را مشاهده مي‌كنيد.

T
ارزش درستمثالنشانه
اگر a  برابر با b باشد( a == b )==
اگر a  برابر با b نباشد( a != b )!=
اگر a  بزرگتر از b باشد( a > b )>
اگر a  كوچكتر از b باشد( a   b ) 
اگر a  بزرگتر يا مساوي با b باشد( a >= b )>=
اگر a  كوچكتر يا مساوي با b باشد( a  = b ) =
اگر همa  برابر با b باشد و هم c  از d كوچكتر باشد(a  =  b) && (c   d)&&
اگر ياa  برابر با b باشد و يا c  از d كوچكتر باشد(a  =  b) || (c   d)||
 انجام تصميم گيري
با استفاده از عملگرهاي شرطي يك برنامه نويس مي‌تواند حالات و شرايط جريان برنامه را بررسي كند و با توجه به ارزش عبارت شرطي توسط دستور if  يا if … else … ، دستورات لازم براي هر حالت را اجرا نمايد.

مشخص كردن وظيفه فرمها
هر چيزي كه بين دو علامت مشخص شده قرار بگيرد، جزء فرم حساب مي‌شود. عملكرد فرم هم توسط پارامتر Method مشخص مي‌شود. به عنوان مثال اگر Method يك فرم برابر با Post باشد، وظيفه فرم ارسال اطلاعات به كامپيوتر Server است. همانطور كه در ابتداي بخش قبل بيان شد اين فرم در كامپيوتر Server توسط يك فايل ASP بررسي ميشود و كارهاي لازم اعمال ميگردد.

براي مشخص كردن مقصد اطلاعاتي كه بايد ارسال شوند از پارامتر Action استفاده مي‌كنيم. معمولا مقصد اطلاعات يك فايل ASP بر روي كامپيوتر Server ميباشد به عنوان مثال مقدار اين پارامتر مي‌تواند برابر با عبارت زير باشد : 
www.eniacmedia.com\cutomer\.asp
در نرم افزار آموزش ASP اين موضوع مفصلا شرح داده ميشود.

روي دكمه كاوشگر واقع در نوار وظيفه كليك كنيد.
 اما مي‌توان براي تك تك سلول‌هاي يك جدول نيز يك تصوير مجزا تعيين كرد. براي اين كار بايد از تگ IMG استفاده كنيد يعني بجاي آنکه يک متن در يک خانه بنويسيم با استفاده از تگ IMG يک تصوير را در يک خانه قرار ميدهيم. روي دكمه  برنامه Notepad واقع در نوار وظيفه كليك كنيد.
روي دكمه Refresh كليك كنيد.

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

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

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

تي
مثالكاربردنام پارامتر
BGColor = Redرنگ زمينه سلولBGColor
BorderColor = Blackرنگ حاشيه سلولBorderColor
BorderColorDark = Greenرنگ تيره حاشيه سلول سه بعديBorderColorDark
BorderColorDark = Greenرنگ روشن حاشيه سلول سه بعديBorderColorLight
Title="Here is a Tooltip!"نمايش متن بصورت TooltipTitle
Background=".bmp"تصوير پشت زمينه سلولBackground

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

مطابق روشهايي كه در بخشهاي قبل آموختيد يك سند HTML جديد را با كمك برنامه Notepad ميخواهيم بسازيم و آنرا با نام Sec.htm روي صفحه Desktop ذخيره كنيم.

در اين مرحله ساختار سند HTML را تكميل خواهيم كرد.

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

در ادامه با نحوه استفاده تگ Input آشنا ميشويد.

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

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

در اين نرم افزار بدليل اينكه هدف آموزش طراحي صفحات وب است، از دو پارامتر Method,Action استفاده نميكنيم.
ابزارهاي ورود اطلاعات
براي ايجاد ابزارهاي ورود اطلاعات از تگ  Input> استفاده مي‌كنيم. اين تگ نياري به  Input> ندارد.

با استفاده از پارامتر Type در تگ Input نوع ابزار ورود اطلاعات مشخص مي‌شود. در جدول روبرو مقادير ممكن براي اين پارامتر را مشاهده مي‌كنيد. نام ديگر ابزارهاي ورود اطلاعات كنترل مي‌باشد.
T
نوع ابزارمقدار
دكمه فرمانButton
جعبه چكChekBox
جعبه تصويرImage
جعبه متن ورود رمزPassword
دكمه راديوييRadio
دكمه فرمان براي خالي كردن فرمReset
دكمه فرمان براي ارسال اطلاعاتSubmit
جعبه متنText

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

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

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

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

در ادامه با استفاده از متد write آنرا بر روي سند HTML نمايش مي‌دهيم. دکمه CTRL+S را فشار دهيد.

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

در ادامه با استفاده از دستور var يک متغير جديد تعريف ميکنيم.

در اين کد يک متغير تعريف شده و سپس مقدار متغير جديد را برابر با عبارتtlocDate.substring(,) قرار مي‌دهيم. يعني مقدار متغير جديد برابر با  كاراكتر اول متغير tlocDate قرار مي‌دهيم. وروديهاي تابع substring به ترتيب شماره اولين و آخرين کاراکتر ميباشد. توجه کنيد که شماره اولين کاراکتر صفر ميباشد.

در مرحله بعد توسط متد write عبارت بدست آمده را نمايش مي‌دهيم. دکمه CTRL+S را فشار دهيد.

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

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

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

عملگرهاي حسابي
در جدول روبرو فهرست عملگرهاي حسابي را مشاهده مي‌كنيد. توجه كنيد كه A، B و C سه متغير ميباشند.
تي
مثالعملكردعلامت
A = A + مقدار دهي=
B =  + جمع+
A = B – تفريق-
B = A * ضرب*
C = A / Bتقسيم/
C = A % Bباقي مانده تقسيم%
++A  يا  A++افزايش يك واحدي++
 --B يا  B--كاهش يك واحدي--

كاركرد دو عملگر ++ و -- در هر دو طرف يك متغير امكان پذير است. براي مثال عبارت m = X ++ و عبارت m = ++ X هر دو درست ميباشند. اما نتيجه هر کدام از دو عبارت فوق متفاوت است. توسط دستور m = X ++ مقدار متغير X ابتدا در متغير m قرار گرفته و سپس يك واحد به X افزوده مي‌شود. اما در عبارت m = ++ X ابتدا يك واحد به متغير X افزوده شده و سپس مقدار جديد X در m قرار ميگيرد.

اکنون نتيجه فايل ايجاد شده نمايش داده شده است. در قسمت تيتر نيز عبارت Eniac را مشاهده ميکنيد. عبارتي که در تگ Body وارد کرديم بر روي صفحه نمايش داده شده است. يكبار ديگر مراحل ساخت يك صفحه جديد را مرور مي‌كنيم :
•ساختن يك سند جديد در برنامه Notepad
•ذخيره كردن سند جديد با پسوند htm
•باز كردن فايل جديد توسط كاوشگر اينترنت
روي گزينه Save كليك كنيد.

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

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

همان طور كه مشاهده مي‌كنيد اكنون اين منو بصورت ليست نمايش داده شده است.
 تنظيم حركت كليد TAB
تا اينجا با انواع كنترلها و كاربرد آنها آشنا شده‌ايد. همان طور كه مي‌دانيد توسط كليد TAB مي‌توان در كنترلهاي فرم حركت كرد. براي تنظيم حركت اين كليد از پارامتر TabIndex در تگهاي مورد نظر استفاده خواهيم كرد. عددي كه توسط اين پارامتر مشخص مي‌شود نوبت رسيدن كليد TAB را مشخص مي‌كند.

فصل سوم – استفاده از تصاوير

– مقدمه

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

فايلهايي با پسوند Gif براي نمايش در صفحات وب بسيار مناسب مي‌باشند. البته مي‌توانيد از فايلهاي Bitmap,JPEG,PNG نيز در صفحات خود استفاده كنيد. اما فايلهاي Gif به دليل حجم كم در صفحات اينترنتي بسيار استفاده ميشوند. در صورتي که با استفاده از نرم افزار Photoshop اين تصاوير را ايجاد ميکنيد حتما از رنگهاي Safe for WEB استفاده نمائيد. براي اطلاعات بيشتر در مورد اين نوع رنگها ميتوانيد به نرم افزار آموزش Photoshop CS شرکت انياک مراجعه کنيد.

همانطور که بيان شد در ابتدا ميخواهيم به بررسي پارامتر Background تگ Body بپردازيم. منوي View را باز کنيد.

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

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

اگر فايل تصوير در همان زيرشاخه‌اي كه سند HTML قرار دارد وجود داشته باشد ديگر لازم نيست آدرس فايل وارد شود. به عنوان مثال اگر يك سند HTML در شـاخـه C:\Documents\Page\.htm موجود بــاشـد، بـــراي اســتـــفــاده ازتــصــويـري با نام C:\Documents\Page\Wind.bmp كافي است فقط نام و پسوند فايل را وارد كنيد يعني Wind.bmp. البته نام و آدرس فايل بايد درون دو علامت گيومه قرار داشته باشند. البته در بعضي شرايط ميتوان آنها را داخل گيومه قرار ندارد ولي بهتر است که هميشه نام و آدرس فايل را در داخل گيومه وارد کنيد.

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

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

براي مثال با استفاده از کد زير متن تيتر پنجره برابر عبارت Here is the Title و متن نوشته شده در پايين صفحه در قسمت Status برابر عبارت Here is the StatusBar ميشود. همانطور که به ياد دارد در بخشهاي قبلي متن متحرک ايجاد کرديم. به همان صورت ميتوانيد در قسمت Status يا تيتر متنهاي متحرک ايجاد کنيد.
document.title="Here is the Title"
window.status="Here is the StatusBar"

همان طور كه مشاهده مي‌كنيد صفحه جديد در حال نمايش است. اما اين پنجره شامل نوار ابزار، نوار وضعيت و نوار منو نيست. روي دكمه Close كليك كنيد تا پنجره بسته شود.

براي آنکه پنجره جديد داراي نوار ابزار باشد، روي جعبه چك Include Toolbar كليك كنيد تا فعال شود.

روي جعبه چك Include Statusbar كليك كنيد.

روي جعبه چك Include Menubar كليك كنيد. تا پنجره ايجاد شده داراي نوار منو نيز باشد.

روي دکمه Open In New Window کليک کنيد.

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

در جدول روبرو چند خصوصيت شي window را مشاهده مي‌كنيد.
T
توضيحنام خصوصيت
فاصله سمت چپdialogLeft
فاصله بالاdialogTop
مقدار ارتفاعdialogHeight
مقدار طولdialogWidth
نوشته روي نوار وضعيتstatus
آدرس فايل صفحه در حال نمايشlocation

در جدول روبرو فهرست برخي از متدهاي شي window  را مشاهده مي‌كنيد.
T
توضيحنام متد
نمايش پيامalert
بستن پنجرهclose
حركت دادن پنجرهmoveTo
باز كردن يك پنجره جديدopen
نمايش ورود اطلاعاتprompt

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