www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده ></form در زیر لیستی از ویژگی های برچسب > <selectرا می بینید. ></body Description ></html Attribute name برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود. برای نمایش یک لیست باکس اسکرولینک استفاده می شودsize . multiple اگر روی multipleتنظیم شده باشد ،به کاربر اجازه می دهد تا چند آیتم را از منو انتخاب کند. Attribute در زیر لیستی از ویژگی های مهم برچسب > <optionارائه شده است. value Description selected label اگر در سلکت باکس یک گزینه انتخاب شده باشد ،این مقدار استفاده خواهد شد. مشخص می کند که این گزینه رد زمان بارگذاری صفحه ،باید گزینه ی انتخابی باشد. یک روش جایگزین برای برچسب دار کردن گزینه ها. 101 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده فایل آپلود باکس اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند ،به یک کنترل فایل آپلود احتیاج خواهید داشت ،که Select Boxنیز نامیده می شود .این ویژگی با استفاده از برچسب > <inputنیز ایجاد می شود ،اما نوع ویژگی با fileتنظیم می شود. مثال در اینجا مثالی را می بینید از کد HTMLبرای یک فرم با یک فایل آپلود باکس. ><!DOCTYPE html ><html ><head ><title>File Upload Box</title ></head ><body ><form ><input type=\"file\" name=\"fileupload\" accept=\"image/*\" / ></form ></body ></html ویژگی ها در زیر لیستی از ویژگی های فایل آپلود باکس را می بینید. Attribute Description name برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود. accept نوع فایل هایی را که سرور می پذیرد ،تعیین می کند. 102 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده کنترل های دکمه راه های مختلفی برای ایجاد دکمه های قابل کلیک شدن وجود دارد .شما با استفاده از برچسب > <inputو با تنظیم نوع ویژگی آن به buttonدکمه های قابل کلیک شدن ایجاد کنید .نوع ویژگی می تواند مقادیر زیر را بگیرد. Type Description submit دکمه ای را ایجاد می کند که به طور خودکار یک فرم را می پذیرد. reset دکمه ای را ایجاد می کند که به طور خودکار کنترل های فرم را به مقادیر اولیه ی خود بازمی گرداند. button دکمه ای را ایجاد می کند که برای اجرای اسکریپت کاربر ،زمانی که کاربر آن دکمه را کلیک می کند ،استفاده می شود. image یک دکمه ی قابل کلیک شدن ایجاد می گند ،اما ما می توانیم از یک تصویر به عنوان زمینه ی دکمه استفاده کنیم. مثال در اینجا مثالی از کد HTMLبرای یک فرم با سه نوع دکمه را می بینید. ><!DOCTYPE html ><html ><head ><title>File Upload Box</title ></head ><body ><form ><input type=\"submit\" name=\"submit\" value=\"Submit\" / ><input type=\"reset\" name=\"reset\" value=\"Reset\" / ><input type=\"button\" name=\"ok\" value=\"OK\" / 103 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده ><input type=\"image\" name=\"imagebutton\" src=\"/html/images/logo.png\" / ></form ></body ></html کنترل های مخفی شده ی فرم کنترل های مخفی شده فرم برای پنهان کردن داده در داخل صفحه ای استفاده می شوند که بعدا می توانند به سرور ارسال شوند .این کنترل در داخل کد مخفی شده و روی صفحه ی حقیقی ظاهر نمی شود .برای مثال فرم مخفی شده ی زیر برای حفظ شماره ی صفحه ی جاری استفاده می شود .وقتی که کاربر روی next pageکلیک کند ،مقدار کنترل مخفی شده به سرور وب ارسال شده و در آنجا تصمیم خواهد گرفت که بر اساس انتقال صفحه ی جاری ،کدام صفحه نمایش داده خواهد شد. مثال در اینجا مثالی از کد HTMLبرای نمایش کاربرد کنترل مخفی شده می بینید. ><!DOCTYPE html ><html ><head ><title>File Upload Box</title ></head ><body ><form ><p>This is page 10</p ><input type=\"hidden\" name=\"pagename\" value=\"10\" / ><input type=\"submit\" name=\"submit\" value=\"Submit\" / ><input type=\"reset\" name=\"reset\" value=\"Reset\" / ></form ></body ></html آموزش چند رسانه ای در HTML گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید .ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت ،وارد کردن برچسب خاص HTMLبه نام > <embedمی باشد .این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب > <embedو نوع مدیای ارائه شده را پشتیبانی می کند. 104 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده همچنین می توانید یک برچسب > <noembedبرای مرورگرهایی وارد کنید که برچسب > <embedرا نمی شناسند .به عنوان مثال می توانید از > <embedبرای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر > <embedرا پشتیبانی نمی کند ،از > ,<noembedبرای نمایش یک تصویر JPGمجزا استفاده کنید. مثال در اینجا مثال ساده ای می بینید از اجرای یک فایل جاسازی شده ی .midi ><!DOCTYPE html ><html ><head ><title>HTML embed Tag <title ><head ><body >\"<embed src=\"/html/yourfile.mid\"` width=\"100%\" height=\"60 ><noembed><img src=\"yourimage.gif\" alt=\"Alternative Media\"><noembed ><embed ><body ><html ویژگی های برچسب ><embed در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب > <embedاستفاده می شود. Attribute Description align تعیین می کند که چگونه یک آبجکت را تنظیم کرد ،که می تواند هم در مرکز ،هم در راست و یا چپ تنظیم شود. این ویژگی Booleanنشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کندautostart . شما می توانید آن را با trueیا falseتنظیم کنید. 105 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی trueتنظیم loop کنید) ،یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود).(false تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند .اگر در حال استفاده از playcount IE هستید ،این گزنیه جایگزینی برای loopمی باشد. hidden مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار trueیعنی بله. width عرض آبجکت به پیکسل. height عرض آبجکت به پیکسل. name نامی که برای اشاره به آبجکت استفاده می شود. URLمربوط به آبجکت که باید جاسازی شودsrc . volume میزان صدا را کنترل می کند که می تواند از ( 1صدا قطع شده) تا ( 111آخرین حد صدا) باشد. انواع ویدیوهای پشتیبانی شده می توانید از انواع مدیاهای مختلفی مانند فایل های AVi ،flash moviesو MOVدر داخل برچسب embed استفاده کنید. فایل های – swfفایل هایی هستند که با برنامه ی macromedia’s flashتولید می شوند. فایل های – wmvانواع فایل های تصویری ویندوز مایکروسافت می باشند. 106 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده فایل های - movفرمت Quick time movieدر اپل. فایل های – mpegفایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving ) Pictures Expert Groupایجاد می شوند. ><!DOCTYPE html ><html ><head ><title>HTML embed Tag<title ><head ><body >\"<embed src=\"/html/yourfile.swf\" width=\"200\" height=\"200 ><noembed><img src=\"yourimage.gif\" alt=\"Alternative Media\"><noembed ><embed ><body ><html صدای زمینه شما می توانید از برچسب > <bgsoundدر htmlبرای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید .این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود ،این برچسب یک فایل صدا را دانلود کرده و اجرا می کند .همچنین هروقت کاربر مرورگر را تازه سازی کند ،صدای زمینه نیز دوباره اجرا خواهد شد. این برچسب دارای فقط دو ویژگی می باشد loop ،و ،srcکه همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند. در اینجا مثال ساده ای از اجرای فایل کوچک midiرا می بینید. ><!DOCTYPE html ><html ><head ><title>HTML embed Tag<title ><head ><body >\"<bgsound src=\"/html/yourfile.mid ><noembed><img src=\"yourimage.gif\"><noembed ><bgsound ><body ><html 107 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده این مثال یک صفحه ی خالی تولید خواهد کرد .این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند. اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند wavفرمت داخلی کامپیوترها au ،فرمت داخلی برای کار ابزارهای Unixو MIDIیک کد برنامه گذاری جهانی برای موسیقی. برچسب آبجکت در HTML HTML 4عنصر> <objectرا معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد .عنصر> <objectبه نویسندگان HTMLاجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر ،تعیین کند. در اینجا چند مثال در این رابطه می بینید. مثال 1 شما می توانید یک سند HTMLرا در خود سند HTMLاجرا کنید. >\"<object data=\"data/test.htm\" type=\"text/html\" width=\"300\" height=\"200 >alt <a href=\"data/test.htm\">test.htm<a ></object در اینجا اگر مرورگر برچسب objectرا پشتیبانی نکند ،ویژگی altوارد تصویر می شود. مثال 2 شما می توانید یک سند PDFرا در یک سند HTMLاجرا کنید. >\"<object data=\"data/test.pdf\" type=\"application/pdf\" width=\"300\" height=\"200 >alt <a href=\"data/test.pdf\">test.htm<a ></object مثال 3 108 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده- ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا در اینجا.< برخی پارامترهای متناسب با سند را مشخص کنیدparam> شما می توانید با استفاده از برچسب . را می بینیدwav مثالی از اجرای فایل <object data=\"data/test.wav\" type=\"audio/x-wav\" width=\"200\" height=\"20\"> <param name=\"src\" value=\"data/test.wav\"> <param name=\"autoplay\" value=\"false\"> <param name=\"autoStart\" value=\"0\"> alt <a href=\"data/test.wav\">test.wav<a> </object> 0 مثال . مانند زیر اجرا کنیدflash شما می توانید یک سند <object classid=\"clsidD27CDB6E-AE6D-11cf-96B8-444553540000\" id=\"penguin\" codebase=\"someplace/swflash.cab\" width=\"200\" height=\"300\"> <param name=\"movie\" value=\"flash/penguin.swf\" /> <param name=\"quality\" value=\"high\" /> <img src=\"penguin.jpg\" width=\"200\" height=\"300\" alt=\"Penguin\" /> </object> 1 مثال . کنیدHTML وارد سندjava applet شما می توانید یک سند <object classid=\"clsid8ad9c840-044e-11d1-b3e9-00805f499d93\" width=\"200\" height=\"200\"> <param name=\"code\" value=\"applet.class\"> </object> شما می توانید از ویژگی. استفاده شودjava plug-in تعیین می کند که چه نسخه ای ازclassid ویژگی . استفاده کنیدJRE برای مشخص کردن چگونگی دانلودcodebase انتخابی HTML Marquee آموزش یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن ویا به صورتHTML درMarquee بستگی به تنظیمات دارد وتوسط برچسب،عمودی در پایین صفحه ی وب شما نمایش داده می شود . ایجاد می شودHTML < مربوط بهFmarquees> 109 7 واحد165 - پلاک- جنب بانک صادرات- بالا تر از خيابان ملک- خيابان شريعتی- تهران: آدرس آموزشگاه 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده توجه ممکن است برچسب > <marqueesدر HTMLتوسط مرورگرهای زیادی پشتیبانی نشود ،بنابراین توصیه می شود که به این برچسب تکیه نکنید ،در عوض می توانید از javascriptو CSSبرای ایجاد چنین تاثیراتی استفاده کنید. ترکیب ساده برای استفاده از برچسب> <marqueesدر HTMLمانند زیر می باشد ><marquee attribute_name=\"attribute_value\" ....more attributes One or more lines or text message or image ></marquee ویژگی های برچسب ><marquee در زیر لیست مهمی از ویژگی های برچسب > <marqueeرا می توانید مشاهده کنید. Attribute Description width این ویژگی عرض marqueeرا مشخص می کند .می تواند مقداری مانند 11یا 21 درصد باشد. height این ویژگی طول marqueeرا مشخص می کند .می تواند مقداری مانند 11یا 21 درصد باشد. direction این ویژگی مسیری را که marqueeباید در آن اسکرول شود ،تعیین می کند .می تواند مقداری مانند left ،down ،upو یا rightداشته باشد. behavior این ویژگی نوع اسکرول marqueeرا تعیین می کند .می تواند مقداری مانند ،scroll sideو alternateداشته باشد. scrolldelay این ویژگی میزان تاخیر بین دو پرش را تعیین می کند .می تواند مقداری مانند 11 داشته باشد. سرعت متن marqueeرا تععین می کند .می تواند مقداری مانند 11داشته باشدscrollamount . 110 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده loop تعداد دفعات loopرا تعیین می کند .مقدار پیش فرض INFINITEمی باشد که به bgcolor این معناست که در marqueeبه طور پایان ناپذیری loopانجام می شود. hspace vspace این ویژگی رنگ زمینه را به شکل نام رنگ یا مقدار شش تایی رنگ مشخص می کند. این ویژگی فضای افقی اطراف marqueرا تعیین می کند .می تواند مقداری مانند 11 یا 21درصد داشته باشد. این ویژگی فضای عمودی اطراف marqueeرا تعیین می کند .می تواند مقداری مانند 11یا 21درصد داشته باشد. در ادامه چند مثال از استفاده ی برچسب marqueeمی بینید. مثال 1 ><!DOCTYPE html ><html ><head ><title>HTML marquee Tag</title ></head ><body ><marquee>This is basic example of marquee</marquee ></body ></html مثال 2 ><!DOCTYPE html ><html ><head ><title>HTML marquee Tag</title ></head ><body ><marquee width=\"50%\">This example will take only 50% width</marquee ></body ></html مثال 3 111 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده- ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا <!DOCTYPE html> <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee direction=\"right\">This text will scroll from left to right</marquee> </body> </html> 0 مثال <!DOCTYPE html> <html> <head> <title>HTML marquee Tag</title> </head> <body> <marquee direction=\"up\">This text will scroll from bottom to up</marquee> </body> </html> HTML سربرگ . دارای ساختار زیر می باشدHTML یاد گرفتیم که یک نمونه داکیومنت Document declaration tag <html> <head> Document header related tags <head> <body> Document body related tags <body> <html> <head> ارائه می دهد که به وسیله ی برچسبHTML این فصل جزئیات بیشتری در مورد بخش سربرگ در <title>, <meta>, < حاوی برچسب های مهمی می باشد که عبارتند ازhead> برچسب.نمایش داده می شود <noscript> tags. < وlink>, <base>, <style>, <script>, HTML < درtitle> برچسب در زیر مثالی می بینید از ارائه ی تیتر به. استفاده می شودHTML این برچسب برای تعیین تیتر داکیومنت .HTML داکیومنت <!DOCTYPE html> <html> <head> 112 7 واحد165 - پلاک- جنب بانک صادرات- بالا تر از خيابان ملک- خيابان شريعتی- تهران: آدرس آموزشگاه 88146323 - 88446780 - 88146330
www.SourceSara.com آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده- ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا <title>HTML Title Tag Example<title> .این مثال نتیجه ی زیر را تولید خواهد کرد <head> <body> <p>Hello, World!<p> <body> <html> Hello, World! HTML < درmeta> برچسب ، استفاده می شود که اطلاعاتی از قبیل انقضا صفحهHTML این برچسب برای ارائه ی متادیتا در مورد داکیومنت . توصیف صفحه و غیره ارائه می دهد، لیست کلمات کلیدی،گردآورنده ی صفحه . ارائه شده اندHTML < در داکیومنتmeta> در ادامه استفاده های مهم برچسب <!DOCTYPE html> <html> <head> <title>HTML Meta Tag Example<title> <!-- Provide list of keywords --> <meta name=\"keywords\" content=\"C, C++, Java, PHP, Perl, Python\"> <!-- Provide description of the page --> <meta name=\"description\" content=\"Simply Easy Learning by Tutorials Point\"> <!-- Author information --> <meta name=\"author\" content=\"Tutorials Point\"> <!-- Page content type --> <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\"> <!-- Page refreshing delay --> <meta http-equiv=\"refresh\" content=\"30\"> <!-- Page expiry --> <meta http-equiv=\"expires\" content=\"Wed, 21 June 2006 142527 GMT\"> <!-- Tag to tell robots not to index the content of a page --> <meta name=\"robots\" content=\"noindex, nofollow\"> <head> <body> <p>Hello, World!<p> <body> <html> .این مثال نتیجه ی زیر را تولید می کند Hello, World! 113 7 واحد165 - پلاک- جنب بانک صادرات- بالا تر از خيابان ملک- خيابان شريعتی- تهران: آدرس آموزشگاه 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده برچسب > <baseدر HTML این برچسب برای تعیین URLپایه برای همه ی URLهای وابسته در صفحه استفاده می شود ،که به این معناست که همه ی URLهای دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند ،دیگر URLها به URL پایه زنجیر خواهند شد. به عنوان مثال تمام صفحات و تصاویر ارائه شده ،پس از پیشوند دار کردن URLهای ارائه شده با URLپایه مسیر prefixingجستجو خواهند شد. ><!DOCTYPE html ><html ><head ><title>HTML Base Tag Example<title ><base href=\"http://www.tahlildadeh.com/\" / ><head ><body ><img src=\"/images/logo.png\" alt=\"Logo Image\" / ><a href=\"/html/index.htm\" title=\"HTML Tutorial\" />HTML Tutorial<a ><body ><html این مثال نتیجه ی زیر را تولید خواهد کرد. برچسب> <linkدر HTML این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند .در ادامه مثالی را می بینید از لینک یک فایل style sheetخارجی موجود در مسیر cssبا یک .web root ><!DOCTYPE html 114 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده- ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا <html> .این مثال نتیجه ی زیر را تولید خواهد کرد <head> <title>HTML link Tag Example<title> <base href=\"http://www.tahlildadeh.com/\" /> <link rel=\"stylesheet\" type=\"text/css\" href=\"/css/style.css\"> <head> <body> <p>Hello, World!<p> <body> <html> Hello, World! HTML < درstyle> برچسب در ادامه مثالی را می. استفاده می شودHTML برای داکیومنت جاریstyle sheet این برچسب برای تعیین .<style> در داخل برچسبstyle sheet بینید از تعریف برخی قوانین <!DOCTYPE html> <html> <head> <title>HTML style Tag Example<title> <base href=\"http://www.tahlildadeh.com/\" /> <style type=\"text/css\"> .myclass { background-color: #aaa; padding :10px; } <style> <head> <body> <p class=\"myclass\">Hello, World!<p> <body> <html> .این مثال نتیجه ی زیر را تولید خواهد کرد Hello, World! . یک آموزش مجزای موجود در اینجا را کلیک کنیدCascading Style Sheet توجه برای فراگیری چگونگی کار 115 7 واحد165 - پلاک- جنب بانک صادرات- بالا تر از خيابان ملک- خيابان شريعتی- تهران: آدرس آموزشگاه 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده برچسب > <scriptدر HTML این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود .در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم. ><!DOCTYPE html ><html ><head ><title>HTML script Tag Example<title ><base href=\"http://www.tahlildadeh.com/\" / >\"<script type=\"text/javascript { )(function Hello ;)\"alert(\"Hello, World } ><script ><head ><body ><input type=\"button\" onclick=\"Hello();\" name=\"ok\" value=\"OK\" / ><body ><html آموزش Cascading style sheet (CSS) Cascading style sheetبیان می کند که داکیومنت ها روی صفحه و در چاپ چگونه نشان داده می شوند ،یا شاید چگونه بیان می شوند .از زمانی که کنسرسیوم در سال 1990تاسیس شد W3C ،به طور فعالانه ای در استفاده از Style sheetروی وب پیشرفت کرده است. CSSجایگزین های ساده و موثری را برای تعیین ویژگی های مختلف برچسب های HTMLارائه می دهد .با استفاده از CSSشما می توانید تعدادی از ویژگی های طراحی را برای یک HTMLارائه شده تعیین کنید .هر ویژگی دارای نام مقدار میباشد که به وسیله ی علامت () از هم جدا شده اند .اطلاعیه ی مربوط به هر ویژگی نیز توسط علامت نقطه ویرگول (;) از یکدیگر جدا شده اند. مثال ابتدا اجازه بدهید که مثالی از داکیومنت HTMLرا مورد بررسی قرار دهیم که برای تعیین رنگ و اندازه ی فونت از برچسب > <fontاستفاده می کند. ><!DOCTYPE html 116 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده ><html ><head ><title>HTML CSS</title ></head ><body ><p><font color=\"green\" size=\"5\">Hello, World!</font></p ></body ></html می توانیم با استفاده از style sheetمثال بالا را مانند زیر بازنویسی کنیم. ><!DOCTYPE html ><html ><head ><title>HTML CSS</title ></head ><body ><p style=\"color:green;font-size:24px;\">Hello, World!</p ></body ></html این مثال نتیجه ی زیر را تولید خواهد کرد. !Hello, World شما می توانید به سه روش از CSSدر داکیومنت HTMLخود استفاده کنید. Style sheetخارجی – قوانین style sheetرا در یک فایل cssمجزا تعریف می کند ،و سپس آن فایل را با استفاده از برچسب > <linkدر HTMLوارد داکیومنت HTMLشما می کند. Style sheetداخلی – قوانین style sheetرا در با استفاده از برچسب > <styleدر بخش سربرگ داکیومنت HTMLتعریف می کند. – Inline style sheetقوانین style sheetرا مستقیما و به همراه عناصر HTMLبا استفاده از ویژگی styleتعریف می کند. اجازه بدهید هر سه مورد را یکی یکی و با استفاده از مثال های مناسب بررسی کنیم. 117 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده Style sheetخارجی اگر می خواهید از style sheetخود در صفحات مختلف استفاده کنید ،توصیه می شود که یک style sheet متداول در یک فایل مجزا تعریف کنید .یک فایل cascading style sheetدارای ضمیمه هایی مانند cssمی باشد و با استفاده از برچسب > <linkوارد فایل های HTMLخواهد شد. مثال توجه داشته باشید که ما یک فایل style sheetبه نام style.cssکه دارای قوانین زیر می بشد ،تعریف می کنیم. {.red ;color :red } {.thick ;font-size:20px } {.green ;Color:green } در اینجا سه قانون CSSرا تعریف کردیم که برای سه گروه متفاوت تعریف شده در برچسب های HTMLمناسب می باشند .پیشنهاد می کنم در مورد چگونگی تعریف این قوانین خود را اذیت نکنید ،زیرا هنگام مطالعه ی CSS آنها را فرا خواهید گرفت .اکنون اجازه بدهید از فایل CSSخارجی بالا در داکیومنت HTMLزیر استفاده کنیم. ><!DOCTYPE html ><html ><head ><title>HTML External CSS</title >\"<link rel=\"stylesheet\" type=\"text/css\" href=\"/html/style.css ></head ><body ><p class=\"red\">This is red</p ><p class=\"thick\">This is thick</p ><p class=\"green\">This is green</p ><p class=\"thick green\">This is thick and green</p ></body ></html این مثال نتیجه ی زیر را تولید خواهد کرد. This is red This is thick 118 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده This is green This is thick and green Style sheetداخلی اگر می خواهید قوانین style sheetرا برای یک داکیومنت مجزا به کار ببرید ،فقط آن موقع است که می توانید این قوانین را با استفاده از برچسب > <styleوارد بخش سربرگ داکیومنت HTMLکنید. قوانین تعریف شده در style sheetداخلی ،قوانین تعریف شده در فایل CSSخارجی را نیز در بر می گیرد. مثال اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم ،اما در اینجا قوانین style sheetرا در همان داکیومنت HTMLو با استفاده از برچسب > <styleمی نویسیم. ><!DOCTYPE html ><html ><head ><title>HTML Internal CSS</title >\"<style type=\"text/css { .red ;Color: red } { .thick ;font-size :20px } { .green ;Color: green } ></style ></head ><body ><p class=\"red\">This is red</p ><p class=\"thick\">This is thick</p ><p class=\"green\">This is green</p ><p class=\"thick green\">This is thick and green</p ></body ></html این مثال نتیجه ی زیر را تولید خواهد کرد. This is red 119 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده This is thick This is green This is thick and green Inline Style Sheet شما می توانید با استفاده از ویژگی styleاز برچسب مربوطه ،قوانین style sheetرا مستقیما برای هر عنصر HTMLبه کار برید .این امر فقطزمانی می تواند انجام شود که شما علاقمند به ایجاد تغییرات خاص در هرکدام از عناصر HTMLمی باشید. قوانین تعریف شده با عنصر درون خطی ،قوانین تعریف شده در یک فایل CSSخارجی و نیز قوانین تعریف شده در یک عنصر > <styleرا در برمی گیرد. اجازه بدهید مثال بالا را یک بار دیگر بازنویسی کنیم ،اما این بار قوانین style sheetرا همراه با قوانین HTML و با استفاده از ویژگی styleدر عناصر خواهیم نوشت. ><!DOCTYPE html ><html ><head ><title>HTML Inline CSS</title ></head ><body ><p style=\"color:red;\">This is red</p ><p style=\"font-size:20px;\">This is thick</p ><p style=\"color:green;\">This is green</p ><p style=\"color:green;font-size:20px;\">This is thick and green</p ></body ></html این مثال نتیجه ی زیر را تولید خواهد کرد. This is red This is thick 120 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده This is green This is thick and green آموزش javascript یک اسکریپت قطعه ی کوچکی از برنامه است که می تواند به وب سایت شما تعامل اضافه کند .به عنوان مثال یک اسکریپت می تواند یک هشدار پاپ آپ مربوط به باکس پیغام تولید کند ،یا یک منوی رو به پایین ایجاد کند. این اسکریپت توسط javascriptیا VBScriptنوشته می شود. شما می توانید با استفاده از هر زبان اسکریپتی ،کارکردهای متنوع کوچکی به نام گردانندگان رویداد بنویسید و سپس می توانید آن عملکردها را با استفاده از ویژگی های HTMLاجرا کنید. این روزها فقط javascriptو چارچوب های متناظر با آن توسط بسیاری از توسعه دهندگان وب استفاده می شوند. VBScriptحتی توسط برخی مرورگرها پشتیبانی هم نمی شود. شما می توانید کد javascriptرا در یک فایل مجزا نگهداری کرده و سپس هرزمان که لازم بود آن را وارد کنید، یا می توانید قابلیت را در داخل خود داکیومنت HTMLتعریف کنید .اجازه بدهید هر دو مورد را یکی یکی با مثال های مناسب بررسی کنیم. جاوااسکریپت خارجی اگر قصد دارید قابلیتی را تعریف کنید که در انواع داکیومنت های HTMLاستفاده می شود ،بهتر است آن قابلیت را در یک فایل مجزای جاوااسکریپت حفظ کرده و آن فایل را وارد داکیومنت های HTMLخود کنید .یک فایل جاوااسکریپت دارای ضمیمه هایی مانند jsمی باشد که با استفاده از برچسب > <scriptوارد فایل های HTML می شود. مثال تصور کنید که با استفاده از جاوااسکریپت در script.jsیک عملکرد کوچک را تعریف می کنیم که دارای کد زیر می باشد. 121 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده )(function Hello { ;)\"alert(\"Hello, World } اکنون اجازه بدهید از فایل جاوااسکریپت خارجی بالا در داکیومنت HTMLخود استفاده کنیم ،مانند زیر ><!DOCTYPE html ><html ><head ><title>Javascript External Script<title ><script src=\"/html/script.js\" type=\"text/javascript\" /><script ><head ><body ><input type=\"button\" onclick=\"Hello();\" name=\"ok\" value=\"Click Me\" / ><body ><html این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید. جاوا اسکریپت درونی شما می توانید کد جاوااسکریپت را مستقیما روی داکیومنت HTMLخود بنویسید .معمولا کد اسکریپت را با استفاده از برچسب > <scriptدر سربرگ داکیومنت نگهداری می کنیم در غیر این صورت هیچ محدودیتی وجود نداشته و می توانید کد خود را در هر جایی در داکیومنت به جز داخل برچسب > <scriptنگه دارید. ><!DOCTYPE html ><html ><head ><title>Javascript Internal Script<title >\"<script type=\"text/javascript { )(function Hello ;)\"alert(\"Hello, World } ><script ><head ><body ><input type=\"button\" onclick=\"Hello();\" name=\"ok\" value=\"Click Me\" / ><body ><html 122 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده این مثال نتیجه ای را به دنبال خواهد داشت که می توانید با کلیک کردن برروی دکمه ی ارائه شده توسط این مثال آن را امتحان کنید. گردانندگان رویدادها))((EventHandler گردانندگان رویدادها عملکردهای تعریف شده ی ساده ای می باشند که می توانند برعلیه هر یک از عملکردهای ماوس یا صفحه کلید فراخوانده شوند .شما می توانید عملکرد خود را در یک گرداننده ی رویداد تعریف کنید که می تواند یک خط تا 1111خط کد باشد. در زیر مثالی را می بینید که چگونگی نگارش یک گرداننده ی رویداد را نشان می دهد .اجازه بدهید یک تیتر ساده ی )( EventHandlerرا در تیتر داکیومنت بنویسیم .هر زمان که کاربر ماوس را روی یک پاراگراف بیاورد، این عملکر را فرا خواهیم خواند. ><!DOCTYPE html ><html ><head ><title>Event Handlers Example<title >\"<script type=\"text/javascript { )(function EventHandler ;)\"!!alert(\"I'm event handler } ><script ><head ><body ><p onmouseover=\"EventHandler();\">Bring your mouse here to see an alert<p ><body ><html این مثال نتیجه ی زیر را تولید خواهد کرد ،ماوس خود را روی آن آورده تا نتیجه را ببینید. Bring your mouse here to see an alert مخفی کردن اسکریپت ها از مرورگرهای قدیمی گرچه بیشتر مرورگرها این روزها جاوا اسکریپت را پشتیبانی می کنند ،اما هنوز مرورگرهایی قدیمی تری هستند که این کار را نمی کنند .اگر مرورگری جاوااسکریپت را پشتیبانی نکند ،به جای اجرای اسکریپت کدی را به کاربر نمایش می دهد .برای جلوگیری از این مسئله می توانید کامنت های HTMLرا در اطراف جاوااسکریپت قرار دهید ،همانطور که در زیر می بینید. 123 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
www.SourceSara.com ﺳﺎﯾﺖ ﺳﻮرس ﺳﺮا -آﻣﻮزش ﺑﺮﻧﺎﻣﻪ ﻧﻮﯾﺴﯽ و ﺳﻮرس ﮐﺪﻫﺎي آﻣﺎده JavaScript Example >\"<script type=\"text/javascript <!-- ;)\"!document.write(\"Hello Javascript >//-- ><script VBScript Example >\"<script type=\"text/vbscript <!-- )\"!document.write(\"Hello VBScript >'-- ><script عنصر ><noscript می توانید یک سری اطلاعت جایگزین به کاربری ارائه دهید که مرورگر وی اسکریپت ها را پشتیبانی نمی کند، همچنین برای کاربرهایی که گزینه ی scriptمرورگر خود را غیرفعال کرده اند .شما می توانید اینکار را با استفاده از برچسب > <noscriptانجام دهید. JavaScript Example >\"<script type=\"text/javascript <!-- ;)\"!document.write(\"Hello Javascript >//-- ></script !<noscript>Your browser does not support Javascript ><noscript درپایانضمنتشکرازانتخابشما،امیدواریممطالباینکتاببرایشمامفیدبودهباشد. علاوهبراینمیتوانیدپیشنهاداتوانتقاداتخودراازطریقرایانامه [email protected]بامادرمیانبگذارید. 124 آدرس آموزشگاه :تهران -خيابان شريعتی -بالا تر از خيابان ملک -جنب بانک صادرات -پلاک 165 -واحد7 88146323 - 88446780 - 88146330
Search
Read the Text Version
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
