پاسخ : آموزش HTML [h=2]اسکريپت های HTML[/h] تگ < script > : از تگ < script > برای قرار دادن يک اسکريپت ( برنامه های نوشته شده توسط زبان های برنامه نويسی اسکريپتی مثل Java Script , VB Script ) درون صفحات HTML استفاده می شود . مجموعه دستورات برنامه مورد نظر بين تگ باز و بسته < script > قرار بگيرند . برای دريافت اطلاعات بيشتر و آموزش برنامه نويسی به زبان های اسکريپتی به بخش آموزش VB Script و Java Script برويد . در اين قسمت ما به بررسی قرار دادن اسکريپت ها در صفحات HTML و خصوصيات تگ Script می پردازيم و به آموزش اسکريپت نويسی کاری نداريم . محل قرار دادن تگ < script > : تگ های اسکريپت را می توان در درون بخش < body > صفحه HTML و يا در قسمت < head > قرار داد . تگ هايی که در قسمت < body > قرار بگيرند ، به محض اجرای صفحات اجرا شده و اثر خود را نمايش می دهند . ولی اسکريپت هايی که در بخش < head > قرار بگيرند ، تا زمانی که توسط کاربر فراخوانی نشده و يا رويداد در نظر گرفته شده برای اجرای آنها اتفاق نيفتد ، اجرا نخواهند شد . مثال : اسکريپت زير به محض اجرای صفحه اجرا شده و پيغام زير را نمايش می دهد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] < html > < head > < /head > < body > < script type = "text/javascript" > document.write ( " This is an Script ... ! " ) < /script > < /body > < /html > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] This is an Script ... ! [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] مثال : می توان يک اسکريپت را در يک فايل خارجی ( برای مثال يک فايل با پسوند js برای Java Script ) ايجاد کرده و سپس توسط يک تگ < script > و خاصيت src در بخش head يا body به آن اسکريپت پيوند ايجاد کرد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] < html > < head > < script type = "text/javascript" src = "http://www.DeveloperStudio.ir/Scripts/javasample.js" > < /head > < body > < script type = "text/javascript" src = "http://www.DeveloperStudio.ir/Scripts/javasample.js" > < /body > < /html > [/TD] [TD="class: header"] کد[/TD] [/TR] [/TABLE] * نحوه مديريت مرورگرهای قديمی در برخورد با تگ های < script > : برخی از مرورگرهای قديمی تگ < script > را نمي شناسند و باعث می شوند تا متن دستورات اسکريپت ها را ، همانند متن ساده بر روی صفحه نمايش دهند . برای جلوگيری از اين مسئله و مخفی کردن تگ های اسکريپت از ديد مرورگرهای قديمی ، تگ < script > را در درون يک comment ( توضيح ) به صورت زير قرار می دهيم . مرورگرهای جديد به صورت هوشمند ، متن درون commnet ها را بررسی کرده و چنانجه حاوی دستورات اسکريپتی باشند ، آنها را اجرا می کنند . مثال : Script زير را با قرار دادن بين علامت های توضيح comment ، از ديد مرورگرهای قديمی مخفی کرده ايم . چنانچه در بخش خروجی ، خروجی درستی نداريد ، ورژن مرورگر خود را عوض کنيد چون خيلی قديمی است !!! . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] For Java Script < script type="text/javascript" > <!-- document.write (" This is not suitable for old browsers ") //--> < /script > [HR][/HR] For VB Script < script type="text/vbscript" > <!-- document.write (" This is not suitable for old browsers ") '--> < /script > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] This is not suitable for old browsers [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ script [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] type[/TD] [TD="class: prbody"] text/javascript text/ecmascript text/vbscript applicattion/javascript applicattion/ecmascript applicattion/vbscript text/VB text/C# text/J# [/TD] [TD="class: prbody"] نوع و زبان برنامه نويسی اسکريپت را مشخص می کند که می تواند يکی از حالت های زير باشد : texxt/javascript : از نوع متن و زبان برنامه نويسی javascript . text/ecmascript : از نوع متن و زبان برنامه نويسی ecmascript . text/vbscript : از نوع متن و زبان برنامه نويسی vbscript . applicattion/javascript : از نوع برنامه کاربردی و زبان برنامه نويسی javascript . applicattion/ecmascript : از نوع برنامه کاربردی و زبان برنامه نويسی ecmascript . applicattion/vbscript : از نوع برنامه کاربردی و زبان برنامه نويسی vbscript . حالت های زير فقط برای صفحات سرور سايدی ( مثل ASP و PHP ) است : text/VB : از نوع برنامه متن و زبان برنامه نويسي Visual Basic . text/C# : از نوع برنامه متن و زبان برنامه نويسي Visual C# . text/J# : از نوع برنامه متن و زبان برنامه نويسی Visual J# . [/TD] [/TR] [TR] [TD="class: prbody"] charset[/TD] [TD="class: prbody"] charset [/TD] [TD="class: prbody"] نحوه کد گذاري و ترجمه کاراکترها را در اسکريپت مشخص می کند . [/TD] [/TR] [TR] [TD="class: prbody"] defer[/TD] [TD="class: prbody"] defer [/TD] [TD="class: prbody"] مشخص می کند که اسکريپت هيچ محتوای جديدی را در صفحه ايجاد نخواهد کرد و مرورگر بايد صفحه را با همان فرمت و کد اصلی اجرا کند . [/TD] [/TR] [TR] [TD="class: prbody"] language [/TD] [TD="class: prbody"] javascript vbscript ecmascript live script [/TD] [TD="class: prbody"] زبان برنامه نويسی اسکريپت را تعيين می کند ، که می تواند يکی از زبان های زير باشد : javascript vbscript ecmascript live script [/TD] [/TR] [TR] [TD="class: prbody"] src[/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] مسير کامل فايلی که دستورات اسکريپت در آن قرار دارد را مشخص می کند . اين خاصيت در هنگام استفاده از يک فايل خارجی و پيوند آن به صفحه استفاده می شود . [/TD] [/TR] [/TABLE] [HR][/HR] تگ < noscript > : اين تگ برای نمايش يک متن هشدار يا جايگزين ، در صورتی که اسکريپت قبل از آن اجرا نشده باشد ، به کار می رود . اين حالت در مورد مرورگرهايی که تگ < script > را می شناسند ، ولی قادر به اجرای دستورات موجود در آن نيستند به کار می رود ، که در اين صورت متن درون تگ < noscript > را نمايش خواهد داد . چنانچه مرورگر موفق به اجرای اسکريپت شود ، از تگ < noscript > به طور کامل چشم پوشی می کند . نکته : تگ < script > بايد بلافاصله بعد از تگ < script > به کار رود . مثال : در مثال زير يک اسکريپت ارائه شده که يک تگ < noscript > بلافاصله بعد ازآن قرار داده شده است . خروجی مثال زير بستگی به ورژن مرورگر شما دارد ... ! : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] < script type="text/javascript" > document.write (" Hi every body . Welcome ! ") < /script > < noscript > Your browser doesn`t support javascript < /noscript > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body, align: center"] Hi every body . Welcome ! Your browser doesn`t support javascript [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]تگ های تقسيم بندی صفحه و متن[/h] تگ < span > : از تگ < span > برای تقسيم بندی متن يک پاراگراف به قطعات مجزا استفاده می شود ، که می توان به هر قسمت ويژگی ها و style متفاوتی را اعمال کرد . متن مورد نظر برای هر قسمت در بين تگ باز و بسته < span > قرار می گيرد . برای مثال می خواهيد بخشی از يک پاراگراف به رنگ سبز باشد . در اين حالت بخش مورد نظر را در يک < span > قرار داده و خاصيت color آن را در قسمت style به رنگ سبز تعيين می کنيم . مثال : پارگراف زير دارای چندين قسمت مختلف با خصوصيات متفاوت است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] < p > This is a paragraph that < br / > < span style ="color : green " > This part is green < /span > AND < span style = "color : blue " > This part is blue . < /span > < /p > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] This is a paragraph that This part is green AND This part is blue . [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR] تگ < div > : اين تگ يک قسمت و ناحيه مجزا را بر روی صفحه تعيين می کند . از اين تگ معمولا برای تقسيم بندی فضای صفحه به نواحی مجزا استفاده می شود و بيشتر تگ های HTML را می توان درون تگ < div > به کار برد . نکته : معمولا مرورگرها يک خط در ابتدا و انتهای div با ساير متون و عناصر ديگر صفحه ايجاد می کنند و نوشته به ابتدای سطر بعدی انتقال می يابد . مثال : در مثال زير بخشی از صفحه توسط يک تگ < div > از ساير صفحه جدا شده است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] < p style = "color: Maroon" > This is paragraph one < p > < div style = "color: Green" > This part is a div . It can contain almost every things ! < /div > < p style = "color: blue" > This is another paragraph < /p > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD] This is paragraph one This part is a div . It can contain almost every things ! This is another paragraph [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : آموزش HTML [h=2]رويدادهای HTML[/h] رويدادها مجموعه عمل هايی هستند که در صورت بروز يک اتفاق در صفحه ( مثل کليک کردن بر روی يک عنصر ، دابل کليک ، فشردن دکمه خاص و ... ) تحريک شده و باعث اجرای دستور يا دستورات تعيين شده برای آن اتفاق خاص می شوند . هر عنصر مجموعه از رويدادهای مختص به خود دارد که هر کدام از آنها را می توان در درون تگ عنصر تعيين و مقدار دهی کرد . معمولا يک رويداد ، تابع يا اسکريپتی را اجرا يا فراخوانی می کند . انواع مختلف رويدادها به شرح زير هستند : رويدادهای پنجره ( فايل ) نکته : اين رويدادها فقط در عنصرهای body و frameset معتبر هستند . [TABLE="class: ex"] [TR] [TD="class: header"] شرح [/TD] [TD="class: header"] نام رويداد [/TD] [/TR] [TR] [TD="class: prbody"] رويدادی است که در هنگام لود شدن ( بار گذاری ) صفحه تحريک می شود . [/TD] [TD="class: prbody"] onload [/TD] [/TR] [TR] [TD="class: prbody"] رويدادی است که در هنگام خارج شدن صفحه از حافظه ( بستن ) تحريک می شود . [/TD] [TD="class: prbody"] onunload [/TD] [/TR] [/TABLE] رويدادهای عناصر فرم نکته : اين رويدادها فقط در عنصرهای کنترلی فرمها کاربرد دارند . [TABLE="class: ex"] [TR] [TD="class: header"] شرح [/TD] [TD="class: header"] نام رويداد [/TD] [/TR] [TR] [TD="class: prbody"] در هنگام تغيير وضعيت يک کنترل تحريک می شود . برای مثال در کنترل textbox در هنگام تغيير متن درون آن تحريک می شود . [/TD] [TD="class: prbody"] onchange [/TD] [/TR] [TR] [TD="class: prbody"] در هنگام فشردن دکمه submit فرم و ارسال اطلاعات کنترل های فرم تحريک می شود . [/TD] [TD="class: prbody"] onsubmit [/TD] [/TR] [TR] [TD="class: prbody"] در هنگام فشردن دکمه فرمان reset و پاک شدن اطلاعات کليه کنترل های فرم تحريک می شود . [/TD] [TD="class: prbody"] onreset [/TD] [/TR] [TR] [TD="class: prbody"] در هنگام انتخاب کردن عنصر مورد نظر در فرم تحريک می شود . [/TD] [TD="class: prbody"] onselect [/TD] [/TR] [TR] [TD="class: prbody"] در هنگام از دست دادن فوکوس * کنترل تحريک می شود . [/TD] [TD="class: prbody"] onblur [/TD] [/TR] [TR] [TD="class: prbody"] در هنگامي که کنترل فوکوس را به دست می آورد ، تحريک می شود . [/TD] [TD="class: prbody"] onfocus [/TD] [/TR] [/TABLE] * توضيح فوکوس ( focus ) : در هر لحظه کنترلی که در يک صفحه يا فرم ، انتخاب شده است و به دور آن کادر قرار گرفته به اصطلاح فوکوس برنامه را در اختيار دارد . کنترلی که انتخاب شود ، فوکوس را به دست آورده و کنترلی که از انتخاب خارج شود ، فوکوس را از دست می دهد . رويدادهای موس نکته : رويدادهای موس در کنترل های base , br , frame , frameset , head , html , iframe , meta , param , script و title کاربرد ندارد . [TABLE="class: ex"] [TR] [TD="class: header"] شرح [/TD] [TD="class: header"] نام رويداد [/TD] [/TR] [TR] [TD="class: prbody"] اين رويداد در هنگام کليک کردن بر روی عنصر مورد نظر تحريک می شود . [/TD] [TD="class: prbody"] onclick [/TD] [/TR] [TR] [TD="class: prbody"] اين رويداد در هنگام دابل کليک کردن بر روی عنصر مورد نظر تحريک می شود . [/TD] [TD="class: prbody"] ondblclick [/TD] [/TR] [TR] [TD="class: prbody"] اين رويداد در هنگام فشردن دکمه موس بر روی عنصر مورد نظر تحريک می شود . [/TD] [TD="class: prbody"] onmousedown [/TD] [/TR] [TR] [TD="class: prbody"] اين رويداد در هنگام قرار گرفتن اشاره گر موس بر روی سطح عنصر مورد نظر تحريک می شود . [/TD] [TD="class: prbody"] onmoouseover [/TD] [/TR] [TR] [TD="class: prbody"] اين رويداد در هنگام خارج شدن اشاره گر موس از روی سطح عنصر مورد نظر تحريک می شود . [/TD] [TD="class: prbody"] onmouseout [/TD] [/TR] [TR] [TD="class: prbody"] اين رويداد در هنگام رها کردن دکمه موس بر روی عنصر مورد نظر تحريک می شود . [/TD] [TD="class: prbody"] onmouseup [/TD] [/TR] [/TABLE] رويدادهای صفحه کليد نکته : رويدادهای صفحه کليد در کنترل های base , br , frame , frameset , head , html , iframe , meta , param , script , style و title کاربرد ندارد . [TABLE="class: ex"] [TR] [TD="class: header"] شرح [/TD] [TD="class: header"] نام رويداد [/TD] [/TR] [TR] [TD="class: prbody"] رويدادی که در هنگام فشردن يک کليد بر روی عنصر مورد نظر فعال می شود . [/TD] [TD="class: prbody"] onkeydown [/TD] [/TR] [TR] [TD="class: prbody"] رويدادی که در هنگام فشردن و رها کردن يک کليد بر روی عنصر مورد نظر فعال می شود . [/TD] [TD="class: prbody"] onkeypress [/TD] [/TR] [TR] [TD="class: prbody"] رويدادی که در هنگام رها کردن يک کليد فشرده شده بر روی عنصر مورد نظر فعال می شود . [/TD] [TD="class: prbody"] onkeyup [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]کنترل های ذاتی HTML[/h] کتنرل < fieldset > : اين کنترل توسط تگ < fieldset > ايجاد شده و به دور محتويات درونی خود يک کادر ايجاد می کند . تگ ها و عناصری که بين تگ باز و بسته < fieldset > قرار بگيرند ، عناصر درونی آن را تشکيل می دهند . از اين کنترل برای دسته بندی عناصر و گروه های مختلف استفاده می شود . * تگ < legend > : از اين تگ برای ايجاد عنوان برای کادر fieldset استفاده می شود . متنی که بين تگ باز و بسته < legend > قرار بگيرد ، تعيين کننده عنوان کادر است . در مثال زير نحوه استفاده از اين تگ نشان داده شده است مثال : در مثال زير 2 کادر متن را در درون يک fieldset قرار داده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: body"] < fieldset > < legend > Select the size of your item < /legend > Hieght : < input type="text" size="3" / > Width : < input type="text" size="3" / > < /fieldset > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] Select the size of your itemHieght : Width : [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE] [HR][/HR] کنترل < label > : اين تگ برای ايجاد يک عنوان برای يک کنترل ديگر HTML استفاده می شود . برای ايجاد ارتباط بين تگ < label > و کنترل مورد نظر ، خاصيت for تگ label را برابر id کنترل مورد نظر قرار می دهيم . برای مثال ، اگر يک دکمه راديويي با id = Male داشته باشيم و بخواهيم يک label برای آن طراحی کنيم ، برای ايجاد ارتباط بين label و دکمه راديويي ، خاصيت for تگ label را برابر id دکمه راديويي يعنی Male قرار می دهيم . در اين صورت کليک کردن بر روی نوشته label همانند کليک کردن بر روی خود کنترل مورد نظر است . [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ label [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] for[/TD] [TD="class: prbody"] id يک کنترل ديگر [/TD] [TD="class: prbody"] تعيين کننده id کنترلی است که label به آن تعلق دارد . [/TD] [/TR] [/TABLE] مثال : در مثال زير برای 2 دکمه راديويي زير ، 2 label جدا طراحی کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < fieldset style="width: 200px" > < legend > Select Male or Female < /legend > < input type="radio" id="Male" name ="Male" value="Male" / > < label for="Male" > Male < /label > < input type="radio" id="Female" name ="Male" value="Female" / > < label for="Female" > Female < /label > < /fieldset > [/TD] [TD="class: header"] کد[/TD] [/TR] [TR] [TD="class: body"] Select Male or Female Male Female [/TD] [TD="class: header"] خروجی[/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]کنترل های ذاتی HTML[/h] کنترل < select > : از کنترل select برای ايجاد يک ليست باز شو استفاده می شود . اين ليست می تواند دارای گزينه های مختلفی باشد که هر کدام توسط يک تگ < option > تعيين می شود : [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ select [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] در صورتی که مقدار اين خاصيت برابر disabled تنظيم شود ، ليست غير فعال خواهد بود . [/TD] [/TR] [TR] [TD="class: prbody"] multiple [/TD] [TD="class: prbody"] multiple [/TD] [TD="class: prbody"] در صورتی که مقدار اين خاصيت برابر multiple تنظيم شود ، می توان در هر لحظه بيش از يک مورد را از ليست انتخاب کرد . در حالت پيش فرض ، در هر لحظه حداکثر می توان يک مورد را از ليست انتخاب کرد . [/TD] [/TR] [TR] [TD="class: prbody"] name [/TD] [TD="class: prbody"] نام [/TD] [TD="class: prbody"] تعيين کننده يک نام منحصر به فرد برای ليست باز شو است . [/TD] [/TR] [TR] [TD="class: prbody"] size [/TD] [TD="class: prbody"] عدد number [/TD] [TD="class: prbody"] توسط اين خاصيت می توان تعداد آيتم های قابل مشاهده در ليست را در حال عادی ( بسته بودن ليست ) تعيين کرد . به طور پيش فرض فقط يک آيتم از ليست قابل مشاهده است . [/TD] [/TR] [/TABLE] * تگ < option > : از اين تگ برای تعيين يک مورد در داخل يک ليست استفاده می شود . متنی که بين تگ باز و بسته < option > قرار بگيرد ، تعيين کننده نام گزينه در ليست است . تکته : اين تگ بايستی در درون تگ < select > به کار رود در غير اين صورت معنا و کاربردی ندارد . [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ option [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] در صورتی که مقدار اين خاصيت برابر disabled تنظيم شود ، آن گزينه ليست غير فعال خواهد بود . [/TD] [/TR] [TR] [TD="class: prbody"] selected [/TD] [TD="class: prbody"] selected [/TD] [TD="class: prbody"] در صورتی که مقدار اين خاصيت برای گزينه ای در ليست برابر selected تنظيم شود ، آن گزينه به صورت پيش فرض در ليست انتخاب شده است و اول نمايش داده می شود . در هر ليستي در هر لحظه حداکثر يک گزينه می تواند selected باشد . [/TD] [/TR] [TR] [TD="class: prbody"] value [/TD] [TD="class: prbody"] مقدار [/TD] [TD="class: prbody"] مقدار و ارزش گزينه را تعيين می کند ، که در هنگام ارسال اطلاعات فرم به سرور استفاده می شود . [/TD] [/TR] [/TABLE] مثال : در مثال زير يک ليست بازشو با چندين مقدار ايجاد شده است . همچنين در موارد بعدی انواع خصوصيات تگ select را به صورت عملی بررسی کرده ايم . برای مشاهده گزينه های ديگر ليست ، بر روی آن کليک کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] <select> < option value="VB" > Visual Basic < /option > < option value="C#" > Visual C# < /option > < option value="Asp" selected="selected" > ASP.NET < /option > < option value="Sql" > SQL Server < /option > < /select > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Visual Basic Visual C# ASP.NET SQL Server [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] در حالت زير ليست غير فعال است . [/TD] [/TR] [TR] [TD="class: body"] < select disabled ="disabled"> < option value="VB" > Visual Basic < /option > < option value="C#" > Visual C# < /option > < option value="Asp" selected="selected" > ASP.NET < /option > < option value="Sql" > SQL Server < /option > < /select > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Visual Basic Visual C# ASP.NET SQL Server [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] در حالت زير می توان از ليست بيش از يک گزينه انتخاب کرد . [/TD] [/TR] [TR] [TD="class: body"] < select multiple ="multiple"> < option value="VB" > Visual Basic < /option > < option value="C#" > Visual C# < /option > < option value="Asp" selected="selected" > ASP.NET < /option > < option value="Sql" > SQL Server < /option > < /select > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Visual Basic Visual C# ASP.NET SQL Server [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] در حالت زير بيش از يک گزينه از ليست در حالت عادی نمايش داده می شود . [/TD] [/TR] [TR] [TD="class: body"] < select size ="3"> < option value="VB" > Visual Basic < /option > < option value="C#" > Visual C# < /option > < option value="Asp" selected="selected" > ASP.NET < /option > < option value="Sql" > SQL Server < /option > < /select > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Visual Basic Visual C# ASP.NET SQL Server [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] * تگ < optgroup > : از اين تگ برای دسته بندی گزينه های يک ليست در گروه های جدا از هم استفاده می شود . در هنگام زياد بودن موارد ليست ، از اين تگ می توان برای دسته بندی موارد مشابه در گروه های جدا ، جهت سهولت در انتخاب استفاده شود . عنوانی که برای گروه توسط خاصيت label اين تگ تعيين می شود ، به صورت سر گروه و بزرگتر از موارد ديگر ، در ليست نمايش داده می شود ولی عملا قابل انتخاب نيست . نکته : اين تگ بايد در درون تگ select به کار رود . [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ optgroup [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] در صورتی که مقدار اين خاصيت برابر disabled تنظيم شود ، آن دسته گزينه ليست غير فعال خواهد بود . [/TD] [/TR] [TR] [TD="class: prbody"] label [/TD] [TD="class: prbody"] متن text [/TD] [TD="class: prbody"] عنوان گروه را در ليست تعيين می کند . [/TD] [/TR] [/TABLE] مثال : در ليست زير 2 گروه از زبان های برنامه نويسی وب معرفی شده اند : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < select > < optgroup label="Server Side Languages" > < option value="VB" > Visual Basic < /option > < option value="C#" > Visual C# < /option > < option value="Asp" selected="selected" > ASP.NET < /option > < option value="Sql" > SQL Server < /option > < /optgroup > < optgroup label="Client Side Languages" > < option value="vbscript" > VB Script < /option > < option value="javascript" selected="selected" > Java Script < /option > < option value="html" > HTML < /option > < /optgroup > < /select > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Visual Basic Visual C# ASP.NET SQL Server VB Script Java Script HTML [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]ليست کامل تگ های HTML[/h] لسيت کامل تگ های HTML به ترتيب حروف الفبا : در اين قسمت ليست کامل تگ های HTML که در بخش آموزش HTML ، توضيحات مربوط به آنها ارائه شده است قرار داد . برای دريافت اطلاعات درباره هر کدام بر روی نام آن کليک کنيد : [TABLE="class: pr"] [TR] [TD="class: header"] رديف [/TD] [TD="class: header"] نام تگ [/TD] [TD="class: header"] توضيح مختصر [/TD] [/TR] [TR] [TD="class: prbody"] 1 [/TD] [TD="class: prbody, align: center"] < a > [/TD] [TD="class: prbody"] برای ايجاد يک لنگر به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 2 [/TD] [TD="class: prbody, align: center"] < abbr > [/TD] [TD="class: prbody"] برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 3 [/TD] [TD="class: prbody, align: center"] < acronym > [/TD] [TD="class: prbody"] برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 4 [/TD] [TD="class: prbody, align: center"] < address > [/TD] [TD="class: prbody"] برای نوشتن يک آدرس در متن به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 5 [/TD] [TD="class: prbody, align: center"] < area > [/TD] [TD="class: prbody"] مشخص کننده يک ناحيه در نقشه های تصويری است . [/TD] [/TR] [TR] [TD="class: prbody"] 6 [/TD] [TD="class: prbody, align: center"] < b > [/TD] [TD="class: prbody"] برای توپر کردن نوشته ( Bold ) به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 7 [/TD] [TD="class: prbody, align: center"] < base > [/TD] [TD="class: prbody"] برای تعيين خواص پايه در يک صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 8 [/TD] [TD="class: prbody, align: center"] < bdo > [/TD] [TD="class: prbody"] قلم نوشته را به صورت نوشته های محيط های کدنويسی کامپيوتر در می آورد . [/TD] [/TR] [TR] [TD="class: prbody"] 9 [/TD] [TD="class: prbody, align: center"] < big > [/TD] [TD="class: prbody"] باعث بزرگتر نمايش داده شدن نوشته در يک متن می شود . [/TD] [/TR] [TR] [TD="class: prbody"] 10 [/TD] [TD="class: prbody, align: center"] < blockquote> [/TD] [TD="class: prbody"] برای ايجاد يک نقل قول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 11 [/TD] [TD="class: prbody, align: center"] < body > [/TD] [TD="class: prbody"] بدنه اصلی محتويات صفحه وب را تشکيل می دهد . [/TD] [/TR] [TR] [TD="class: prbody"] 12 [/TD] [TD="class: prbody, align: center"] < br > [/TD] [TD="class: prbody"] برای ايجاد يک خط جديد به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 13 [/TD] [TD="class: prbody, align: center"] < button > [/TD] [TD="class: prbody"] برای ايجاد دکمه های وب به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 14 [/TD] [TD="class: prbody, align: center"] < caption > [/TD] [TD="class: prbody"] برای تعيين عنوان يک جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 15 [/TD] [TD="class: prbody, align: center"] < cite > [/TD] [TD="class: prbody"] باعث نمايش کج نوشته به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 16 [/TD] [TD="class: prbody, align: center"] < code > [/TD] [TD="class: prbody"] برای نمايش متن همانند محيط های برنامه نويسی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 17 [/TD] [TD="class: prbody, align: center"] < col > [/TD] [TD="class: prbody"] برای دسته بندی گروهی از ستون های يک جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 18 [/TD] [TD="class: prbody, align: center"] < colgroup > [/TD] [TD="class: prbody"] برای دسته بندی گروهی از ستون های يک جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 19 [/TD] [TD="class: prbody, align: center"] < dd > [/TD] [TD="class: prbody"] برای ايجاد ليست های معنی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 20 [/TD] [TD="class: prbody, align: center"] < del > [/TD] [TD="class: prbody"] برای نمايش متن حذف شده درصفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 21 [/TD] [TD="class: prbody, align: center"] < div > [/TD] [TD="class: prbody"] برای تقسيم فضا در صفحات وب به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 22 [/TD] [TD="class: prbody, align: center"] < dl > [/TD] [TD="class: prbody"] برای ايجاد ليست های معنی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 23 [/TD] [TD="class: prbody, align: center"] < dt > [/TD] [TD="class: prbody"] برای ايجاد ليست های معنی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 24 [/TD] [TD="class: prbody, align: center"] < em > [/TD] [TD="class: prbody"] برای نمايش نوشته به صورت کج به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 25 [/TD] [TD="class: prbody, align: center"] < fieldset > [/TD] [TD="class: prbody"] برای ايجاد يک کادر به دور محتويات خود به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 26 [/TD] [TD="class: prbody, align: center"] < form > [/TD] [TD="class: prbody"] برای ايجاد يک فرم در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 27 [/TD] [TD="class: prbody, align: center"] < h1 > تا < h6 > [/TD] [TD="class: prbody"] برای ايجاد انواع تيترها در نوشته به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 28 [/TD] [TD="class: prbody, align: center"] < head > [/TD] [TD="class: prbody"] در برگيرنه اطلاعات کلی درباره سند وب است . [/TD] [/TR] [TR] [TD="class: prbody"] 29 [/TD] [TD="class: prbody, align: center"] < hr > [/TD] [TD="class: prbody"] برای ايجاد يک خط در عرض صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 30 [/TD] [TD="class: prbody, align: center"] < html > [/TD] [TD="class: prbody"] محدوده اصلی کد HTML يک صفحه را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] 31 [/TD] [TD="class: prbody, align: center"] < i > [/TD] [TD="class: prbody"] برای نمايش نوشته به صورت کج به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 32 [/TD] [TD="class: prbody, align: center"] < img > [/TD] [TD="class: prbody"] برای قرار دادن تصوير در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 33 [/TD] [TD="class: prbody, align: center"] < input > [/TD] [TD="class: prbody"] برای ساختن انواع کتنرل های HTML به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 34 [/TD] [TD="class: prbody, align: center"] < ins > [/TD] [TD="class: prbody"] برای مشخص کردن متن های جديد وارد شده در يک صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 35 [/TD] [TD="class: prbody, align: center"] < kbd > [/TD] [TD="class: prbody"] برای نمايش متن همانند محيط های برنامه نويسی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 36 [/TD] [TD="class: prbody, align: center"] < label > [/TD] [TD="class: prbody"] برای ايجاد يک عنوان ( نماد متنی ) در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 37 [/TD] [TD="class: prbody, align: center"] < legend > [/TD] [TD="class: prbody"] برای ايجاد عنوان يک کادر fieldset به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 38 [/TD] [TD="class: prbody, align: center"] < li > [/TD] [TD="class: prbody"] برای تعريف يک آيتم در ليست به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 39 [/TD] [TD="class: prbody, align: center"] < link > [/TD] [TD="class: prbody"] برای برقراری ارتباط بين صفحه با يک فايل خارجي به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 40 [/TD] [TD="class: prbody, align: center"] < map > [/TD] [TD="class: prbody"] برای ايجاد يک نقشه تصويری به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 41 [/TD] [TD="class: prbody, align: center"] < meta > [/TD] [TD="class: prbody"] در بر گيرنده اطلاعات کلی درباره محتويات يک صفحه جهت استفاده موتورهای جستجو است . [/TD] [/TR] [TR] [TD="class: prbody"] 42 [/TD] [TD="class: prbody, align: center"] < noscript > [/TD] [TD="class: prbody"] برای تعيين جايگزين يک اسکريپت در يک صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 43 [/TD] [TD="class: prbody, align: center"] < object > [/TD] [TD="class: prbody"] برای پيوند يک شی خارجی با صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 44 [/TD] [TD="class: prbody, align: center"] < ol > [/TD] [TD="class: prbody"] برای ايجاد ليست های ترتيبی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 45 [/TD] [TD="class: prbody, align: center"] < optgroup > [/TD] [TD="class: prbody"] برای دسته بندی گزينه های يک ليست به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 46 [/TD] [TD="class: prbody, align: center"] < option > [/TD] [TD="class: prbody"] برای ايجاد يک ليست در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 47 [/TD] [TD="class: prbody, align: center"] < p > [/TD] [TD="class: prbody"] برای ايجاد يک پاراگراف در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 48 [/TD] [TD="class: prbody, align: center"] < param > [/TD] [TD="class: prbody"] برای تعيين تنظيمات زمان اجرای يک شی خارجی در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 49 [/TD] [TD="class: prbody, align: center"] < pre > [/TD] [TD="class: prbody"] برای نمايش متن به همان صورت اوليه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 50 [/TD] [TD="class: prbody, align: center"] < q > [/TD] [TD="class: prbody"] برای ايجاد يک نقل قول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 51 [/TD] [TD="class: prbody, align: center"] < samp > [/TD] [TD="class: prbody"] برای نمايش متن همانند محيط های برنامه نويسی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 52 [/TD] [TD="class: prbody, align: center"] < script > [/TD] [TD="class: prbody"] برای تعيين يک اسکريپت در صفحه به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 53 [/TD] [TD="class: prbody, align: center"] < select > [/TD] [TD="class: prbody"] برای ايجاد يک ليست باز شو به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 54 [/TD] [TD="class: prbody, align: center"] < small > [/TD] [TD="class: prbody"] برای نمايش متن به صورت کوچکتر به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 55 [/TD] [TD="class: prbody, align: center"] < span > [/TD] [TD="class: prbody"] برای تقسيم متن به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 56 [/TD] [TD="class: prbody, align: center"] < strong > [/TD] [TD="class: prbody"] برای نمايش درشتر متن به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 57 [/TD] [TD="class: prbody, align: center"] < style > [/TD] [TD="class: prbody"] برای قالب بندی تگ های HTML و صفحات به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 58 [/TD] [TD="class: prbody, align: center"] < sub > [/TD] [TD="class: prbody"] برای ايجاد يک زير نويس به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 59 [/TD] [TD="class: prbody, align: center"] < sup > [/TD] [TD="class: prbody"] برای ايجاد يک انديس به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 60 [/TD] [TD="class: prbody, align: center"] < table > [/TD] [TD="class: prbody"] برای ايجاد جداول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 61 [/TD] [TD="class: prbody, align: center"] < tbody > [/TD] [TD="class: prbody"] شامل محتويات و بدنه اصلی يک جدول می شود . [/TD] [/TR] [TR] [TD="class: prbody"] 62 [/TD] [TD="class: prbody, align: center"] < td > [/TD] [TD="class: prbody"] برای ايجاد يک خانه جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 63 [/TD] [TD="class: prbody, align: center"] < textarea > [/TD] [TD="class: prbody"] برای ايجاد يک کادر متن به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 64 [/TD] [TD="class: prbody, align: center"] < tfoot > [/TD] [TD="class: prbody"] برای تعيين عنوان انتهای يک جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 65 [/TD] [TD="class: prbody, align: center"] < th > [/TD] [TD="class: prbody"] برای ايجاد يک سر عنوان برای جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 66 [/TD] [TD="class: prbody, align: center"] < thead > [/TD] [TD="class: prbody"] برای ايجاد يک سر عنوان برای جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 67 [/TD] [TD="class: prbody, align: center"] < title > [/TD] [TD="class: prbody"] برای ايجاد متن tooltip درباره عناصر به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 68 [/TD] [TD="class: prbody, align: center"] < tr > [/TD] [TD="class: prbody"] برای ايجاد يک سطر جدول به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 69 [/TD] [TD="class: prbody, align: center"] < tt > [/TD] [TD="class: prbody"] باعث نمايش متن به صورت نوشته های تلگراف به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 70 [/TD] [TD="class: prbody, align: center"] < u > [/TD] [TD="class: prbody"] برای خط زيردار کردن نوشته به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 71 [/TD] [TD="class: prbody, align: center"] < ul > [/TD] [TD="class: prbody"] برای ايجاد ليست های نشانه ای به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 72 [/TD] [TD="class: prbody, align: center"] < var > [/TD] [TD="class: prbody"] برای نمايش متن همانند محيط های برنامه نويسی به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 73 [/TD] [TD="class: prbody, align: center"] < !-- ... -- > [/TD] [TD="class: prbody"] برای ارائه توضيحات دلخواه در صفحه HTML به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] 74 [/TD] [TD="class: prbody, align: center"] < !DOCTYPE > [/TD] [TD="class: prbody"] نوع و نسخه زبان برنامه نويسی مورد استفاده در صفحه وب را مشخص می کند . [/TD] [/TR] [/TABLE]