پاسخ : آموزش HTML [h=2]لينک های HTML[/h] تگ < a > : از لينک ها در HTML ، برای پيوند به يک صفحه ديگر در هر جای وب ، پيوند به نقطه يا مکانی در داخل همان صفحه يا صفحه ديگر و يا يک فايل خارجی مثل عکس ،موسيقی ، فيلم و ... به سند وب استفاده می شود . شکل کلی ايجاد يک پيوند در (HyperLink) در HTML به صورت زير است : < a href="URL" > متن عنوان پيوند < /a > خاصيت href که از نوع URL است برای تعيين مقصد پيوند به کار می رود .اين خاصيت شامل آدرس صفحه يا فايلی است که با کليک بر روی آن پيوند باز خواهد شد . متن عنوان ، متنی است رنگی و خط زير دار که نشان دهنده پيوند است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < a href="http://www.DeveloperStudio.ir/Default.aspx" > Click to visit HomePage < /a > [/TD] [TD="class: body"] Click to visit HomePage [/TD] [/TR] [/TABLE] ايجاد يک لنگر با استفاده از < a > : تعريف لنگر : لنگر نقطه ای از يک صفحه است که با تگ < a > مشخص می شود ، که می توان به وسيله کليک بر روی يک پيوند ، مستقيما به آن نقطه پرش کرد . با استفاده از تگ < a > می توان هر نقطه ای از صفحه را به صورت يک لنگر مشخص کرد و سپس با کليک برروی يک پيوند مستقيما به آن نقطه در صفحه پرش کرد. برای اين منظور در هر نقطه ای از صفحه که می خواهيم به صورت لنگر در بيايد ، يک تگ < a > قرار می دهيم . سپس به وسيله خاصيت Name ، يک نام به آن لنگر اختصاص داده که به اين کار در اصطلاح (Bookmark) می گويند .سپس در خاصيت Href يک پيوند ديگر آدرس لنگر مورد نظر را داده ، که از اين به بعد با کليک بروی آن پيوند ، مستقيما به مکان آن لنگر در صفحه پرش می کنيم . نحوه آدرس دهی درِيک لنگر به صورت زير است : href=" نام لنگر مورد نظر در صفحه # نام صفحه مورد نظر " مثال : < a href="http://www.DeveloperStudio.ir/HTML/Base_Tag1.aspx#ptag > [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] Charset[/TD] [TD="class: prbody"] Charset - encoding[/TD] [TD="class: prbody"] مشخص کننده نوع کدينگ کاراکترهای صفحه مقصد است . [/TD] [/TR] [TR] [TD="class: prbody"] Coords[/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] ابتدا به خاصيت shape توجه کنيد . مشخص کننده مختصات نقاط مختلف يک چند ضلعی (مربع ، مستطيل و ... ) برای تعيين قسمتی از يک عکس يا نقشه به عنوان ناحيه ای قابل کليک شدن برای ايجاد پيوند است که دارای حالت های زير است : rect : مربع . تعيين کننده مختصات چهار نقطه مختلف يک مربع يا مستطيل coords =left,top,right,bottom circ : دايره . مشخص کننده نقطه مرکز و شعاع يک دايره coords=center X, center Y ,radius poly : چند ضلعی مشخص کننده مختصات انواع نقاط مختلف يک چند ضلعی coords = X1 Y1, X2 Y2, ... , Xn Yn [/TD] [/TR] [TR] [TD="class: prbody"] href[/TD] [TD="class: prbody"] URL مسير و نام فايل [/TD] [TD="class: prbody"] برای تعيين آدرس کامل صفحه يا فایل مقصد پيوند به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] hreflang[/TD] [TD="class: prbody"] language نام زبان[/TD] [TD="class: prbody"] مشخص کننده زبان اصلی و پيش فرض صفحه مقصد پيوند است . [/TD] [/TR] [TR] [TD="class: prbody"] name[/TD] [TD="class: prbody"] text نام منحصر به فرد[/TD] [TD="class: prbody"] برای تعيين يک نام برای ايجاد لنگر به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] rel[/TD] [TD="class: prbody"] alternate designates stylesheet start next prev contents index glossary chapter section appendix help bookmark [/TD] [TD="class: prbody"] تعيين کننده نوع ارتباط بين صفحه جاری و صفحه مقصد پيوند است که می تواند يکی از حالت های زير باشد : alternate : يک در ميان designates : انتخاب شده stylesheet : صفحه قالب دهی (CSS) start : ابتدا next : بعدی pre : صفحه قبلی contents : صفحه محتویات index : صفحه آغازين chapter : بخش section : بخشی از برنامه appendix : ضميمه help : صفحه يا فايل راهنما bookmark : يک لنگر در همان صفحه يا صفحه ای ديگر [/TD] [/TR] [TR] [TD="class: prbody"] rev[/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] تعيين کننده نوع ارتباط بين صفحه مقصد پيوند و صفحه جاری است (بر عکس rel ) و دارای همان مقادير است. [/TD] [/TR] [TR] [TD="class: prbody"] shape[/TD] [TD="class: prbody"] rect rectangle circ circle poly polygon [/TD] [TD="class: prbody"] چنانچه پيوند ناحيه ای از يک عکس يا نقشه تصويری باشد که قابل کليک شدن است ، نوع شکل ناحيه قابل کليک شدن را مشخص می کند ، که مختصات آن توسط خاصيت coords در همين تگ مقدار دهی می شود . انواع اشکال ممکن عبارتند از : rect , rectangle : مربع يا مستطيل circ , circle : دایره يا بيضی poly , polygon : چند ضلعی [/TD] [/TR] [TR] [TD="class: prbody"] target[/TD] [TD="class: prbody"] _blank _parent _self _top [/TD] [TD="class: prbody"] نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است : - blank : لينک در يک پنجره جديد باز خواهد شد . - self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد . -parent : لينک در قاب اصلی يا مادر باز خواهد شد . -top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد . [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]لينک های HTML[/h] تگ < link > : تگ لينک برای برقراری ارتباط بين صفحه جاری و يک صفحه يا فايل خارجی مورد استفاده قرار می گيرد . تگ لينک تگ پايانی ندارد و با علامت / در همان تگ ابتدايی بسسته می شود .اين تگ می تواند به دفعات دلخواه و برای مقاصد مختلف ، در قسمت Head مورد استفاده قرار بگيرد . برای مثال از تگ link می توان برای اتصال صفحه به يک فايل قالب دهی ( Style Sheet CSS ) ، فايل حاوی دستورات اسکريپتی مثل js و ... استفاده کرد . مثال : استفاده از تگ لينک برای برقراری ارتباط بين صفحه جاری و يک فايل CSS : < head > < link rel ="Stylesheet" type ="text/css" href="../themes.css" / > < /head > [TABLE="class: pr"] [TR] [TD="class: prname"] نام خاصيت[/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] charset[/TD] [TD="class: prbody"] charset[/TD] [TD="class: prbody"] شيوه و متد کدينگ صفحه مقصد پيوند را مشخص می کند .[/TD] [/TR] [TR] [TD="class: prbody"] href[/TD] [TD="class: prbody"] URL[/TD] [TD="class: prbody"] آدرس کامل اينترنتی صفحه يا فايل مقصد پيوند را تعيين می کند .[/TD] [/TR] [TR] [TD="class: prbody"] hreflang[/TD] [TD="class: prbody"] نام زبان language[/TD] [TD="class: prbody"] زبان پيش فرض و پايه صفحه مقصد پيوند را مشخص می کند .[/TD] [/TR] [TR] [TD="class: prbody"] media[/TD] [TD="class: prbody"] screen tty ty projection handheld print braille auarl all[/TD] [TD="class: prbody"] مشخص کننده نوع وسيله ای است که قرار است صفحه مقصد پيوند را نمايش دهد که ذکر آن آن در اين قسمت برای کمک به مرورگر برای اعمال تنظيمات متناسب با نوع خروجی است ، که می تواند انواع حالات زير را داشته باشد : screen : صفحه نمايش کامپيوترهای معمولی . tty : ماشين تحرير راه دور ، تله تايپ ( برای ماشين هايی که دارای نحوه نمايش ثابت هستند ) . tv : وسايلی همچون تلويزيون با رزوليشن پايين . projection : برای نمايش در پروژکتورها . handheld : برای کامپيوتر های دستی و جيبی . barille : در اسناد مخصوص به افراد نابينا ( بريل ) . print : برای پرينت در دستگاه های چاپگر . auarl : برای سيستم های صوتی . all : برای همه نوع سيستم ها . [/TD] [/TR] [TR] [TD="class: prbody"] rel[/TD] [TD="class: prbody"] alternate designates stylesheet start next prev contents index glossary chapter section appendix help bookmark [/TD] [TD="class: prbody"] تعيين کننده نوع ارتباط بين صفحه جاری و صفحه مقصد پيوند است که می تواند يکی از حالت های زير باشد : alternate : يک در ميان designates : انتخاب شده stylesheet : صفحه قالب دهی (CSS) start : ابتدا next : بعدی pre : صفحه قبلی contents : صفحه محتویات index : صفحه آغازين chapter : بخش section : بخشی از برنامه appendix : ضميمه help : صفحه يا فايل راهنما bookmark : يک لنگر در همان صفحه يا صفحه ای ديگر [/TD] [/TR] [TR] [TD="class: prbody"] rev[/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] تعيين کننده نوع ارتباط بين صفحه مقصد پيوند و صفحه جاری است (بر عکس rel ) و دارای همان مقادير است. [/TD] [/TR] [TR] [TD="class: prbody"] target[/TD] [TD="class: prbody"] _blank _parent _self _top [/TD] [TD="class: prbody"] نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است: - blank : لينک در يک پنجره جديد باز خواهد شد . - self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد . -parent : لينک در قاب اصلی يا مادر باز خواهد شد . -top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد . [/TD] [/TR] [TR] [TD="class: prbody"] type[/TD] [TD="class: prbody"] MIME_Type text/css text/javascript text/vbscript text/asp text/xml images/gif [/TD] [TD="class: prbody"] نوع MIME صفحه يا فايل مقصد را مشخص می کند که چند حالت آن عبارتند از : text/css : از نوع متن و برای استفاده در صفحات قالب دهی به صفحات CSS . text/javascript : از نوع متن و حاوی دستورات اسکريپتی نوشته شده با زبان javascript . text/vbscript : از نوع متن و حاوی دستورات اسکريپتی نوشته شده با زبان vbscript . text/asp : از نوع متن و حاوی صفحه اينترنتی نوشته شده با زبان ASP . text/xml : از نوع متن و حاوی دستورات اسکريپتی نوشته شده با زبان XML . image/gif : از نوع تصوير و با پسوند gif . [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]جدول های HTML[/h] تگ جدول < table > : اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 2 منظور ايجاد می شوند : ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم . تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه . به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است . در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول ، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند . جدول ها برای هر منظوری به کار روند ، بايد با استفاده از تگ < table > ايجاد شوند . هر جدول مجموعه ای از سطرها و ستون هاست . برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود . [h=3]الگوريتم طراحی جدول :[/h] در طراحی جدول بايد به نکات زير دقت کرد : در هنگام ايجاد يک سطر یا استفاده از تگ < tr > ، قبل از ايجاد سطر جديد حتما بايد تگ < tr > قبلی بسته شود و در هر سطر نيز بايد در صورت ايجاد هر خانه با تگ < td > قبل از ايجاد يک خانه جديد بايد تگ < td > قبلی بسته شود . درون تگ < table > فقط می توان تگ < tr > و درون تگ < tr > نيز فقط می توان از تگ < td > استفاده کرد . خانه هاو سطرهای يک جدول منظم و مرتب هستند . به عبارت ديگر به طور مثال نمی توان در يک سطر جدول 3 خانه و در سطر پايينی آن 2 خانه با پهناهای متفاوت ايجاد کرد . در چنين مواردی بايد با استفاده از خاصيت colspan در تگ < td > سطر با خانه کمتر و استفاده از تکنيک جدول های تو در تو اين مسئله را بر طرف کرد . جدول های تو در تو : می توان در درون يک جدول ، جدول های ديگری نيز ايجاد کرد . در اين حالت جدول درونی همانند يک خانه جدول بيرونی خواهد بود . جدول درونی را بايد در يک تگ < td > جدول بيرونی ايجاد کرد . در اين حالت چيدمان خانه های جدول درونی به چيدمان خانه های جدول بيرونی ارتباطی ندارند . مثال : تمام موارد ذکر شده را در مثال زير بررسی می کنيم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] مثال [/TD] [/TR] [TR] [TD="class: body"] < table cellpadding ="5" cellspacing ="0" style ="border :solid 2px blue; width:100%" > < tr > < td class ="header" colspan ="2" > Header < /td > < /tr > < tr > < td class ="body" > Body 1 < /td > < td class="body" > Body 2 < /td > < /tr > < tr > < td class ="body" colspan ="2" style ="padding :0" > < table cellpadding ="5" cellspacing="0" style ="width :100% " > < tr > < td style ="border :solid 1px green " > C1 < /td > < td style ="border :solid 1px green " > C2 < /td > < td style ="border :solid 1px green " > C3 < /td > < /tr > < tr > < td style ="border :solid 1px green " > C4 < /td > < td style ="border :solid 1px green " > C5 < /td > < td style ="border :solid 1px green " > C6 < /td > < /tr > < /table > < /td > < /tr > < /table > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE="width: 100%"] [TR] [TD="class: header, colspan: 2"] Header [/TD] [/TR] [TR] [TD="class: body"] Body 1 [/TD] [TD="class: body"] Body 2 [/TD] [/TR] [TR] [TD="class: body, colspan: 2"] [TABLE="width: 100%"] [TR] [TD] C1 [/TD] [TD] C2 [/TD] [TD] C3 [/TD] [/TR] [TR] [TD] C4 [/TD] [TD] C5 [/TD] [TD] C6 [/TD] [/TR] [/TABLE] [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: body, align: right"] 1) سطر دوم جدول بيرونی دارای يک خانه و سطر دوم دارای دو خانه است . نتظيم خاصيت colspan = 2 در سطر اول باعث می شود تا بين سطر اول و دوم هماهنگی ايجاد شده و تک خانه سطر اول کش آمده و دو خانه سطر دوم را پوشش بدهد . 2) نوشتن متن فقط درون تگ باز و بسته td مجاز است . 3) سطر سوم ( سومين تگ tr ) محدوده جدول درونی را مشخص می کند ، که بخش کدهای سبز را شامل می شود . 4) به جدول هم می توان در بخش style و هم در داخل تگ table ، حاشيه border داد . حاشيه ای که در قسمت style تعيين شود فقط باعث نمايش خطوط دور جدول می شود و خطوط درونی را شامل نمی شود . اما حاشيه تعيين شده در تگ table باعث نمايش خطوط بيرونی و درونی جدول می شود . همچنين می توان به هر td به صورت مجزا حاشيه اختصاص داد . [/TD] [TD="class: header"] توضيحات [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خصوصيات تگ Table [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] align [/TD] [TD="class: prbody"] left right center [/TD] [TD="class: prbody"] نحوه ترازبندی و قرار گيری جدول را در صفحه مشخص می کند که 3 حالت دارد : 1) left : چپ 2) right : راست 3) center : وسط [/TD] [/TR] [TR] [TD="class: prbody"] bgcolor [/TD] [TD="class: prbody"] نام رنگ color name [/TD] [TD="class: prbody"] رنگ پس زمينه جدول را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] border [/TD] [TD="class: prbody"] pixel [/TD] [TD="class: prbody"] ضخامت و پهنای خطوط حاشيه دور جدول را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] cellpadding [/TD] [TD="class: prbody"] pixel [/TD] [TD="class: prbody"] ميزان فاصله بين خطوط حاشيه جدول و محتويات دورن خانه های درون آن را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] cellspacing [/TD] [TD="class: prbody"] pixel [/TD] [TD="class: prbody"] فاصله بين خانه های جدول را تعيين می کند . در صورتی که مقدار اين خاصيت صفر باشد ، خانه های جدول به هم می چسبند . [/TD] [/TR] [TR] [TD="class: prbody"] frame [/TD] [TD="class: prbody"] above below border box hsides lhs rhs vsides [/TD] [TD="class: prbody"] مشخص می کند که کدام قسمت از خطوط حاشيه های جدول بايد نمايش داده شوند که می تواند يکی از حالت های زير را داشته باشد : - above : خطوط بالايي جدول نمايش داده خواهند شد . - below : خطوط پايينی جدول نمايش داده خواهند شد . - border : کليه خطوط حاشيه های خانه های جدول نمايش داده خواهند شد . - box : کليه خطوط حاشيه خانه های جدول نمايش داده خواهند شد . - hsides : فقط خطوط افقی حاشيه خانه های جدول نمايش داده خواهند شد . - lhs : فقط خطوط افقی سمت چپ حاشيه خانه های جدول نمايش داده خواهند شد . - rhs : فقط خطوط افقی سمت راست حاشيه خانه های جدول نمايش داده خواهند شد . - vsides : فقط خطوط عمودی حاشيه خانه های جدول نمايش داده خواهند شد . - void : هيچ کدام از خطوط حاشيه های خانه های جدول نمايش داده خواهند شد . [/TD] [/TR] [TR] [TD="class: prbody"] rules [/TD] [TD="class: prbody"] cols rows group all [/TD] [TD="class: prbody"] مشخص کننده نوع و حالت خطوط تقسيم کننده خانه های جدول به خانه های کوچکتر است که انواع ممکن آن عبارتند از : - cols : خانه های جدول فقط بر حسب ستون ها با خطوط از هم جدا می شوند . - rows : خانه های جدول فقط بر حسب سطرها با خطوط از هم جدا می شوند . - group : خانه های جدول بر حسب گروه بندی داخلی در جدول با خطوط از هم جدا می شوند . - all : تمام خانه های جدول با خطوط عمودی و افقی از هم جدا می شوند . [/TD] [/TR] [TR] [TD="class: prbody"] summary [/TD] [TD="class: prbody"] text [/TD] [TD="class: prbody"] يک متن خلاصه در مورد جدول است که برای برخی مرورگرهای صوتی يا بدون تصوير استفاده می شود . [/TD] [/TR] [TR] [TD="class: prbody"] width [/TD] [TD="class: prbody"] pixel % درصد [/TD] [TD="class: prbody"] ميزان پهنا و عرض جدول را تعيين می کند . [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]ليست های HTML[/h] در صفحات Html ، می توان انواع ليست های ترتيبی و نشانه ای ( بدون ترتيب ) را ايجاد کرد . ليست های نشانه ای ( بدون ترتيب ) ، تگ < ul > : يک ليست نشانه ای ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک نشانه ( Bullet ) قرار می گيرد . برای ايجاد ليست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای ليست های بدون ترتيب استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < ul > List of Lessons < li > English < /li > < li > MathMatic < /li > < li > History < /li > < /ul > [/TD] [TD="class: body, align: left"] List of Lessons English MathMatic History [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خصوصيات تگ ul[/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"] disc square circle[/TD] [TD="class: prbody"] نوع نشانه ( شکل ) ليست را مشخص می کند ، که يکی از موارد زير می تواند باشد : 1) disc : دایره های توپر 2) circle : دايره های توخالی 3) square : مربع [/TD] [/TR] [/TABLE] [HR][/HR] ليست های ترتيبی ، تگ < ol > : يک ليست ترتيبی ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک شماره يا حرف ( نماد نشانه گذاری ) قرار گرفته ، که با معرفی هر آيتم جديد شمارنده يا حرف يک واحد افزايش می يابد . برای ايجاد ليست های ترتيبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای ليست های ترتيبي استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < ol > List of Lessons < li > English < /li > < li > MathMatic < /li > < li > History < /li > < /ol > [/TD] [TD="class: body, align: left"] List of Lessons English MathMatic History [/TD] [/TR] [/TABLE] نکته : همجنين می توان ليست ها را به صورت تو در تو نيز ايجاد کرد . در اين حالت انواع ليست های ترتيبی و نشانه ای را می توان در درون يکديگر استفاده کرد . به مثال زير دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < p > List of Programing Languges < /p > < ul > < li > Scripting Languages < ol > < li > Java Script < /li > < li > VB Script < /li > < /ol > < /li > < li > Non-Scripting Languages < ol > < li > Visual Basic < /li > < li > ASP.NET < /li > < li > Visual C# < /li > < /ol > < /li > < /ul > [/TD] [TD="class: body"] List of Programing Languges Scripting Language Java Script VB Script Non-Scripting Languages Visual Basic ASP.NET Visual C# [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خصوصيات تگ ol[/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت[/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] start[/TD] [TD="class: prbody"] number عدد [/TD] [TD="class: prbody"] عدد يا حرف شروع ليست را معين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] type[/TD] [TD="class: prbody"] A a I i 1 [/TD] [TD="class: prbody"] نوع نمايش عدد يا حرف نشانه گذاری ليست را مشخص می کند ، که يکی از حالت های زير می تواند باشد : 1) A : حروف بزرگ انگليسی 2) a : حروف کوچک انگليسی 3) I : حروف بزرگ يونانی 4) i : حروف کوچک يونانی 5) 1 : اعداد انگليسی [/TD] [/TR] [/TABLE] [HR][/HR] ليست های معنی ، تگ < dd > و < dt > و < dl > : ليست های معنی ، مجموعه ای از چندين آيتم متفاوت هستند که می توان همانند کتاب های معنی واژه ، برای هر يک از آنها يک توضيح ارائه داد . برای ايجاد ليست های معنی ، از تگ < dl > استفاده می شود . هر يک از آيتم های ليست که می خواهيم توضيحی راجع به آن ارائه دهيم در يک تگ < dt > و متن توضيح مربوطه در يک تگ < dd > بلافاصله بعد از آن می آيد . مثال : به مثال زير توجه کنيد . يک ليست را درباره 3 واژه نمايش می دهد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < dl > < dt > HTML < /dt > < dd > Client Side Language < /dd > < dt > ASP.NET < /dt > < dd > Server Side Language < /dd > < dt > Java Script < /dt > < dd > Client Side Scripting Language < /dd > < /dl > [/TD] [TD="class: body, align: left"] HTMLClient Sile LanguageASP.NETServer Side LanguageJava ScriptClient Side Scripting Language[/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]ليست های HTML[/h] در صفحات Html ، می توان انواع ليست های ترتيبی و نشانه ای ( بدون ترتيب ) را ايجاد کرد . ليست های نشانه ای ( بدون ترتيب ) ، تگ < ul > : يک ليست نشانه ای ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک نشانه ( Bullet ) قرار می گيرد . برای ايجاد ليست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای ليست های بدون ترتيب استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < ul > List of Lessons < li > English < /li > < li > MathMatic < /li > < li > History < /li > < /ul > [/TD] [TD="class: body, align: left"] List of Lessons English MathMatic History [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خصوصيات تگ ul[/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"] disc square circle[/TD] [TD="class: prbody"] نوع نشانه ( شکل ) ليست را مشخص می کند ، که يکی از موارد زير می تواند باشد : 1) disc : دایره های توپر 2) circle : دايره های توخالی 3) square : مربع [/TD] [/TR] [/TABLE] [HR][/HR] ليست های ترتيبی ، تگ < ol > : يک ليست ترتيبی ، مجموعه ای از موارد و آيتم های متفاوت در مورد يک موضوع خاص است که در ابتدای خط تعريف هر آيتم ، يک شماره يا حرف ( نماد نشانه گذاری ) قرار گرفته ، که با معرفی هر آيتم جديد شمارنده يا حرف يک واحد افزايش می يابد . برای ايجاد ليست های ترتيبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای ليست های ترتيبي استفاده می شود . هر يک از آيتم های ليست توسط يک تگ دروني < li > در تگ< ol > تعريف می شود . متن بين تگ باز و بسته < li > ، عنوان يا متن آن آيتم است . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < ol > List of Lessons < li > English < /li > < li > MathMatic < /li > < li > History < /li > < /ol > [/TD] [TD="class: body, align: left"] List of Lessons English MathMatic History [/TD] [/TR] [/TABLE] نکته : همجنين می توان ليست ها را به صورت تو در تو نيز ايجاد کرد . در اين حالت انواع ليست های ترتيبی و نشانه ای را می توان در درون يکديگر استفاده کرد . به مثال زير دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < p > List of Programing Languges < /p > < ul > < li > Scripting Languages < ol > < li > Java Script < /li > < li > VB Script < /li > < /ol > < /li > < li > Non-Scripting Languages < ol > < li > Visual Basic < /li > < li > ASP.NET < /li > < li > Visual C# < /li > < /ol > < /li > < /ul > [/TD] [TD="class: body"] List of Programing Languges Scripting Language Java Script VB Script Non-Scripting Languages Visual Basic ASP.NET Visual C# [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خصوصيات تگ ol[/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت[/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] start[/TD] [TD="class: prbody"] number عدد [/TD] [TD="class: prbody"] عدد يا حرف شروع ليست را معين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] type[/TD] [TD="class: prbody"] A a I i 1 [/TD] [TD="class: prbody"] نوع نمايش عدد يا حرف نشانه گذاری ليست را مشخص می کند ، که يکی از حالت های زير می تواند باشد : 1) A : حروف بزرگ انگليسی 2) a : حروف کوچک انگليسی 3) I : حروف بزرگ يونانی 4) i : حروف کوچک يونانی 5) 1 : اعداد انگليسی [/TD] [/TR] [/TABLE] [HR][/HR] ليست های معنی ، تگ < dd > و < dt > و < dl > : ليست های معنی ، مجموعه ای از چندين آيتم متفاوت هستند که می توان همانند کتاب های معنی واژه ، برای هر يک از آنها يک توضيح ارائه داد . برای ايجاد ليست های معنی ، از تگ < dl > استفاده می شود . هر يک از آيتم های ليست که می خواهيم توضيحی راجع به آن ارائه دهيم در يک تگ < dt > و متن توضيح مربوطه در يک تگ < dd > بلافاصله بعد از آن می آيد . مثال : به مثال زير توجه کنيد . يک ليست را درباره 3 واژه نمايش می دهد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < dl > < dt > HTML < /dt > < dd > Client Side Language < /dd > < dt > ASP.NET < /dt > < dd > Server Side Language < /dd > < dt > Java Script < /dt > < dd > Client Side Scripting Language < /dd > < /dl > [/TD] [TD="class: body, align: left"] HTMLClient Sile LanguageASP.NETServer Side LanguageJava ScriptClient Side Scripting Language [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]فرم های HTML[/h] تگ فرم < form > : يک فرم HTML ، فضايی است که می تواند کنترل های مختلف را در خود جای دهد . کنترل های HTML ، ابزارهايي هستند که کاربر را قادر می سازند تا داده های خود را از طريق کادرهای متنی ( TextBox ) ، ليست های بازشو ( Drop-Down Lists ) ، دکمه های گزينشی ( CheckBox ) و ... در فرم وارد کرده و سپس آنها را به مقصد ارسال کند . يک فرم با تگ < form > ايجاد شده و ساير کنترل های درون آن تعريف می شوند . برای ارسال اطلاعات يک فرم ، بايد دکمه فرمان Submit درون آن ايجاد کرد که با کليک بر روی آن ، اطلاعات فرم ارسال خواهد شد . نکته : کنترل های درون فرم های HTML ، توسط تگ < input > ايجاد می شوند . برای دريافت اطلاعات درباره نحوه استفاده از اين تگ ، به صفحه تگ < input > برويد . [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ form [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] action [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] آدرس مقصدی است که در هنگام کليک بر روی دکمه Submit فرم اطلاعات خود را به آنجا ارسال می کند. [/TD] [/TR] [TR] [TD="class: prbody"] accept [/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] يک ليست از مجموعه قابل قبول برای اين فرم است ، که سرور پردازش کننده فرم آنها را قبول می کند .هر يک از اين مقادير به وسيله يک کاما از هم جدا می شوند . [/TD] [/TR] [TR] [TD="class: prbody"] accept - charset [/TD] [TD="class: prbody"] char list ليست کاراکترها [/TD] [TD="class: prbody"] ليست مجموعه کاراکترهای مجاز برای اين فرم است که هر کدام توسط يک کاما از هم جدا می شوند . [/TD] [/TR] [TR] [TD="class: prbody"] enctype [/TD] [TD="class: prbody"] Mime Type نوع داده ای [/TD] [TD="class: prbody"] روش استاندارد کدينگ اطلاعات فرم را جهت ارسال تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] method [/TD] [TD="class: prbody"] post get [/TD] [TD="class: prbody"] متد Http مورد استفاده برای ارسال اطلاعات فرم به مقصد را مشخص می کند ، که می تواند 2 حالت زير را داشته باشد : get : اين متد محتويات کنترل های فرم را به صورت زير ارسال می کند . منظور از URL آدرس صفحه مقصد است : URL ? نام کنترل2 = مقدار 2 & نام کنترل 1 = مقدار 1 & ... . نکته : چنانچه مقادير کنترل های فرم شامل کاراکترهايی غير از کاراکترهای کد اسکی بوده يا طول آنها بيش از 100 کلمه باشد ، بايد از روش post برای ارسال اطلاعات فرم استفاده کرد . post : اين روش اطلاعات کنترل های فرم را به صورت پک کامل به آدرس مقصد ارسال می کند . [/TD] [/TR] [TR] [TD="class: prbody"] name [/TD] [TD="class: prbody"] name نام [/TD] [TD="class: prbody"] يک نام منحصر به فرد برای فرم در صفحه تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] target [/TD] [TD="class: prbody"] _blank _parent _self _top [/TD] [TD="class: prbody"] نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است: - blank : لينک در يک پنجره جديد باز خواهد شد . - self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد . -parent : لينک در قاب اصلی يا مادر باز خواهد شد . -top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد . [/TD] [/TR] [/TABLE] مثال : در مثال زير يک فرم حاوی 2 کادر متن و يک دکمه فرمان Submit طراحی شده است : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < form action="http://www.DeveloperStudio.ir/Default.aspx" > Name : < input type="text" name="txtname" /> < br / > Family : < input type="text" name="txtfamily" /> < br / > < input type="submit" name="cmdsubmit" value="Send Information" /> </form > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Name : Family : [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]تصاوير HTML[/h] تگ < img > : از تگ < img > برای قرار دادن عکس يا تصاوير بر روی صفحه استفاده می شود . تگ < img > فقط خصوصيات را نگهداری کرده و دارای تگ پايانی نيست ( در همان تگ ابتدايی بسته می شود ) . نکات مهم تگ < img > : در تگ < img > با خاصيت src به مکان فايل عکسی که قرار است نمايش داده شود اشاره می کنيم . تصاوير HTML در مکانی غير از صفحه اصلی ذخيره شده و در هنگام نمايش صفحه از مبدا ، فراخوانی می شوند . با استفاده از خاصيت alt تگ < img > می توان از قبل يک متن جايگزين تعيين کرد ، که چنانچه مرورگر به هر دليلي نتوانست عکس را نمايش دهد ، به جای آن متن جايگزين را نشان دهد . اين متن در هنگام قرار گيری موس بر روی عکس در يک کادر زرد رنگ نيز نمايش داده می شود . متن جايگزين می تواند شامل توضيحی راجع به عکس اصلی باشد . مثال : در مثال زير يک عکس به صفحه پيوند زده شده است ، برای مشاهده متن جايگزين موس را چند لحظه بر روی عکس نگه داريد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < img src ="http://www.DeveloperStudio.ir/Pic/imgexample.jpg" alt ="DeveloperStudio PICTURE" / > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE] [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ img [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] align [/TD] [TD="class: prbody"] top bottom middle left right [/TD] [TD="class: prbody"] نحوه ترازبندی عکس را نسبت به محتويات ديگر صفحه و متن دور آن را تعيين می کند ، که يکی از حالت های زير می تواند باشد : 1) top : عکس در بالای متن و محتويات ديگر قرار می گيرد . 2) bottom : عکس در پايين متن و محتويات ديگر قرار می گيرد . 3) middle : عکس در وسط متن و محتويات ديگر قرار می گيرد . 4) left : عکس در سمت چپ متن و محتويات ديگر قرار می گيرد . 5) right : عکس در سمت راست متن و محتويات ديگر قرار می گيرد . [/TD] [/TR] [TR] [TD="class: prbody"] border [/TD] [TD="class: prbody"] pixel [/TD] [TD="class: prbody"] تعيين کننده ضخامت خط حاشيه دور عکس است . [/TD] [/TR] [TR] [TD="class: prbody"] height [/TD] [TD="class: prbody"] pixel درصد % [/TD] [TD="class: prbody"] ميزان ارتفاع عکس را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] hspace [/TD] [TD="class: prbody"] pixel [/TD] [TD="class: prbody"] ميزان فضايی خالی در 2 طرف راست و چپ عکس را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] ismap [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت سرور استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد . [/TD] [/TR] [TR] [TD="class: prbody"] longdesc [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] مسير فايلی که اطلاعات کاملی راجع به عکس مورد نظر نگهداری می کند را مشخص می کند . [/TD] [/TR] [TR] [TD="class: prbody"] src [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] مسير کامل فايل نگهدارنده عکس را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] usemap [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] تعيين کننده اين است که عکس به عنوان يک نقشه تصويری سمت کلاينت استفاده می شود . برای اطلاعات بيشتر به قسمت تگ < map > برويد . [/TD] [/TR] [TR] [TD="class: prbody"] vspace [/TD] [TD="class: prbody"] pixel [/TD] [TD="class: prbody"] ميزان فضاي خالی به دور عکس در بالا و پايين را مشخص می کند . [/TD] [/TR] [TR] [TD="class: prbody"] width [/TD] [TD="class: prbody"] pixel درصد % [/TD] [TD="class: prbody"] میزان عرض عکس را تعيين می کند . [/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : آموزش HTML [h=2]تصاوير HTML[/h] تگ < area > , < map > : ايجاد يک نقشه تصويری ( يک عکس با نواحی مختلف قابل کليک شدن ) : از تگ < map > برای ايجاد يک نقشه تصويری استفاده می شود . يک نقشه تصويری , عکسی است که ناحيه های متفاوت آن قابل کليک کردن بوده که می توان با کليک بر روی هر قسمت به يک صفحه يا فايل ديگر پيوند بر قرار کرد . هر تگ < area > در درون تگ < map > ، می تواند تعيين کننده يک ناحيه مجزا قابل کليک شدن باشد که با تعيين مختصات آن بر روی عکس ، آن ناحيه مشخص می شود . نکته مهم : ما ابتدا به وسيله تگ < map > و تگ های درونی < area > يک نقشه تصويری با نواحی مختلف قابل کليک شدن ايجاد کرده ، سپس آن نقشه را به يک عکس بر روی صفحه پيوند می دهيم . برای اين کار خاصيت usemap را در تگ < img > عکس مورد نظر برابر نام Name يا id ، نقشه تصويری ايجاد شده قرار می دهيم . برای درک بهتر به مثال دقت کنيد : [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ map [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] name يا id [/TD] [TD="class: prbody"] name نام [/TD] [TD="class: prbody"] يک نام منحصر به فرد برای نقشه تصويری تعيين می کند . [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ area [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] Coords [/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] ابتدا به خاصيت shape توجه کنيد . مشخص کننده مختصات نقاط مختلف يک چند ضلعی (مربع ، مستطيل و ... ) برای تعيين ناحيه مورد نظر از عکس برای ايجاد پيوند است که دارای حالت های زير است : rect : مربع . تعيين کننده مختصات چهار نقطه مختلف يک مربع يا مستطيل coords =left,top,right,bottom circ : دايره . مشخص کننده نقطه مرکز و شعاع يک دايره coords=center X, center Y ,radius poly : چند ضلعی . مشخص کننده مختصات انواع نقاط مختلف يک چند ضلعی coords = X1 Y1, X2 Y2, ... , Xn Yn [/TD] [/TR] [TR] [TD="class: prbody"] href [/TD] [TD="class: prbody"] URL مسير و نام فايل [/TD] [TD="class: prbody"] برای تعيين آدرس کامل صفحه يا فایل مقصد پيوند به کار می رود . [/TD] [/TR] [TR] [TD="class: prbody"] nohref [/TD] [TD="class: prbody"] true false [/TD] [TD="class: prbody"] در صورتی که مقدار آن برابر true باشد ، آن ناحيه از عکس فعال و قابل کليک کردن بوده و در صورت false بودن غير فعال است . [/TD] [/TR] [TR] [TD="class: prbody"] shape [/TD] [TD="class: prbody"] rect rectangle circ circle poly polygon [/TD] [TD="class: prbody"] شکل ناحيه قابل کليک شدن از يک عکس يا نقشه تصويری را تعيين می کند ، که مختصات آن توسط خاصيت coords در همين تگ مقدار دهی می شود و. انواع اشکال ممکن عبارتند از : rect , rectangle : مربع يا مستطيل circ , circle : دایره يا بيضی poly , polygon : چند ضلعی [/TD] [/TR] [TR] [TD="class: prbody"] target [/TD] [TD="class: prbody"] _blank _parent _self _top [/TD] [TD="class: prbody"] نحوه باز شدن و نمايش پنجره صفحه مقصد را تعيين می کند که دارای حالت های زير است: - blank : لينک در يک پنجره جديد باز خواهد شد . - self : لينک در همان پنجره يا قابی که کليک شده است باز خواهد شد . -parent : لينک در قاب اصلی يا مادر باز خواهد شد . -top : لينک در همان پنجره ای که کليک شده است به طور کامل باز خواهد شد . [/TD] [/TR] [/TABLE] مثال : در تصوير زير برای رفتن به توضيح در مورد هر تگ ، بر روی قسمت مربوط به آن کليک کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < img src="../Pic/TagsList.jpg" alt="learner" usemap="#taglist" /> < map id="taglist" > < area id="table" alt="table tag" shape="rect" coords="1, 2, 194, 122" href="HtmlTable1.aspx" /> < area id="body" alt="body tag" shape="rect" coords="194, 0, 386, 119" href="basictags1.aspx" /> < area id="link" alt="link tag" shape="rect" coords="0, 121, 193, 242" href="HtmlLinks2.aspx" /> < area id="p" alt="p tag" shape="rect" coords="192, 119, 386, 242" href="textformat1.aspx" /> < /map > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: center"] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]فرم های HTML[/h] تگ < input > : تگ < input > برای ساختن انواع کنترل های HTML از قبيل کادر های متن ، ليست های بازشو ، دکمه های فرمان و انتخابی و ... درون فرم ها استفاده می شود . نوع کنترل توسط خاصيت Type در درون تگ input مشخص می شود . نکته : تگ < input > بايد در درون تگ < form > استفاده شود . شکل کلی تعريف يک کنترل به صورت زير است : < input type ="نوع کنترل" name="يک نام منحصر به فرد" > مثال : < input type =" text " name=" txtname " > [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ input [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] accept [/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] يک ليست از مجموعه قابل قبول برای اين کنترل است ، که سرور پردازش کننده فرم آنها را قبول می کند .هر يک از اين مقادير به وسيله يک کاما از هم جدا می شوند . [/TD] [/TR] [TR] [TD="class: prbody"] alt [/TD] [TD="class: prbody"] Text متن [/TD] [TD="class: prbody"] يک متن جايگزين را در صورت عدم نمايش کنترل توسط مرورگر ، نمايش می دهد . [/TD] [/TR] [TR] [TD="class: prbody"] checked [/TD] [TD="class: prbody"] checked [/TD] [TD="class: prbody"] مشخص می کند که اگر کنترل مورد نظر يک دکمه انتخابي ( radio button يا chechbox ) باشد ، به صورت پيش فرض انتخاب شده باشد يا خير . [/TD] [/TR] [TR] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] disabled [/TD] [TD="class: prbody"] چنانچه مقدار اين خاصيت بر روی disabled تنظيم شده باشد ، آن کنترل غير فعال بوده و کاربر عملا امکان استفاده از آن را نخواهد داشت . نکته : با کنترل از نوع hidden به کار نمی رود . [/TD] [/TR] [TR] [TD="class: prbody"] maxlength [/TD] [TD="class: prbody"] عدد number [/TD] [TD="class: prbody"] جنانچه کنترل مورد نظر يک کادر متن ( textbox ) باشد ، حداکثر تعداد کاراکترهايی که می توان در آن کنترل وارد کرد را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] name [/TD] [TD="class: prbody"] name نام [/TD] [TD="class: prbody"] يک نام منحصر به فرد برای کنترل در فرم در صفحه تعيين می کند . نکته : تعيين و مقدار دهی اين خاصيت برای کنترل های button , checkbox , file , hidden , image , password , text و radio ضرروی است . [/TD] [/TR] [TR] [TD="class: prbody"] readonly [/TD] [TD="class: prbody"] readonly [/TD] [TD="class: prbody"] در اين حالت کنترل به صورت فقط خواندنی در می آيد . در صورتی که مقدار اين خاصيت برابر readonly تنظيم شده باشد ، کاربر مجاز به تغيير متن درون کادرهای متني ( textbox ) و يا تغيير وضعيت دکمه های انتخابی ( checkbox يا radiobutton ) نخواهد بود . [/TD] [/TR] [TR] [TD="class: prbody"] size [/TD] [TD="class: prbody"] عدد تعداد کارکتر [/TD] [TD="class: prbody"] سايز و اندازه کاراکترهای کنترل را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] src [/TD] [TD="class: prbody"] URL مسير فايل [/TD] [TD="class: prbody"] اين خاصيت فقط در مورد کنتزل image به کار رفته و مسير عکس کنترل را مشخص می کند . [/TD] [/TR] [TR] [TD="class: prbody"] type [/TD] [TD="class: prbody"] button checkbox file hidden image password radio reset submit text [/TD] [TD="class: prbody"] اين خاصيت نوع کنترل را تعيين می کند که يکی از اين موارد زير می تواند باشد : button : دکمه فرمان . checkbox : کادر يا دکمه گزينشی . file : يک فايل خارجی مثل يک صفحه اينترنتی و ... . hidden : يک کنترل مخفی دلخواه را بر روی صفحه ايجاد می کند . image : يک کنترل برای نمايش عکس يا تصوير ايجاد می کند . password : يک کادر متن است که به جای نمايش اعداد يا حروف وارد شده ، ستاره يا دايره نمايش می دهد تا اطلاعات ورودی توسط کاربر مخفی بماند . radio : دکمه انتخابی . reset : يک دکمه فرمان است که با کليک بر روی آن ، محتويات درون کليه کنترل های فرم پاک می شود . submit : يک دکمه فرمان است که با کليک بر روی آن ، اطلاعات درون کنترل های فرم به مقصد ارسال می شود . text : يک کادر متن ايجاد می کند . [/TD] [/TR] [TR] [TD="class: prbody"] value [/TD] [TD="class: prbody"] مقدار [/TD] [TD="class: prbody"] اين خاصيت برای کنترل های مختلف ، حالت های زير را دارد : در دکمه فرمان ها ( button , reset buttons , submit buttons ) : متن روی دکمه فرمان را تعيين می کند . در تصاوير ( images ) : مقداری که در هنگام ارسال اطلاعات فرم به جای مقدار عکس می نشيند . در دکمه های انتخابی ( radio buttons , checkbox ) : مقداری است که در صورت انتخاب کردن ( تيک زدن ) دکمه انتخابی در هنگام ارسال اطلاعات فرم به عنوان مقدار آن کنترل ارسال می شود . در کادرهای متن يا کنترل های مخفی( textbox , password , hidden ) : مقدار پيش فرض کنترل را تعيين می کند . نکته : اين خاصيت با کنترل file به کار نمی رود . [/TD] [/TR] [/TABLE] مثال : در مثال زير يک فرم جامع برای ثبت نام فرضی در يک سايت ايجاد کرده ايم و برخی از کنترل های HTML را در اين قسمت به ترتيب مشاهده می کنيد : نکات مثال : نکات ذکر شده در مثال با عدد مشخص شده اند . TextBox ها ابزارهايی هستند برای دريافت اطلاعات از کاربران . از تمام کنترل های CheckBox موجود در يک فرم می توان هر تعداد دلخواه را انتخاب کرد ، ولي از ميان کنترل های Radio Buuton در هر لحظه می توان فقط يک دکمه را انتخاب کرد و با انتخاب يک دکمه بقيه دکمه ها از حالت انتخاب خارج می شوند . در اين حالت بايد Name کنترل هايي که می خواهيد در يک گروه باشند را يکسان تعيين کرده ولی Value آنها با هم متفاوت باشند . دکمه فرمان Submit برای ارسال اطلاعات به مقصد و دکمه فرمان Reset برای پاک کردن کليه کنترل های فرم به کار می رود . در کادر متنی که حالت Password دارد ، به جای نمايش کاراکترهای ورودی ، دايره يا ستاره نمايش داده می شود که معمولا برای مخفی ماندن رمزها از ديد به کار می رود . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < form action="http://www.DeveloperStudio.ir/Default.aspx" method="post" > [SUP]1[/SUP]Name : < input type="text" name="txtname" / > <br /> Family : < input type="text" name="txtfamily" /> <br /> [SUP]4[/SUP]Password : < input type="password" name="txtpass" / > <br /> [SUP]2[/SUP]Gender : <br /> Male < input type="radio" name="gender" value="male" / > Female < input type="radio" name="gender" value="female" / > <br /> [SUP]2[/SUP]List of Lessons : <br /> Visual Basic < input type="checkbox" name="VB" disabled="disabled" checked="checked" / > Visual C# < input type="checkbox" name="C#" / > ASP.NET < input type="checkbox" name="asp" / > SQL Server < input type="checkbox" name="sql" /><br / > [SUP]3[/SUP]< input type="reset" name="cmdreset" value="Reset the Form" / > <br /> < input type="submit" name="cmdsubmit" value="Send Information" / > <br /> </form> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] Name : Family : Password : Gender : Male Female List of Lessons : Visual Basic Visual C# ASP.NET SQL Server [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]قالب بندی صفحات HTML[/h] تگ < style > : تاکنون در تمامی تگ های معرفی شده HTML ، ما خواص مورد نظر هر تگ را در درون خود تگ تعیین و مقدار دهی کردیم. در روش های طراحی وب قدیمی تر، ما مجبور بوديم برای هرعنصری در صفحه به صورت مجزا خاصيت ها را تعيين می کنيم . این کار چند اشکال عمده داشت : باعث تکرار شدن خواص مشابه در تگ های عنصرها می شد . حجم کد نویسی بالا رفته و سرعت طراحی کاهش می يافت . احتمال بروز خطا و اشتباه را افزايش می داد . اعمال تغييرات به صفحات و عناصر وقت و کار زیادی را طلب می کرد . اما با معرفی روش قالب دهی صفحات ( Cascading Style Sheet ) یا CSS ، ما به وسـيله خاصيت تگ Style ، تمام خواص و تنظيمات مورد نياز را برای هر عنصر را در تگ Style تعيين می کنيم . خصوصيات موجود در تگ Style تقريبا تمامی نيازهای ويرايش ، تغيير شکل و افزودن جلوه های مختلف را به عناصر شامل می شود. همانطور که قبلا ذکر شد ، صفحات HTML از یک سری عناصر تشکيل شده اند،که هر کدام توسط یک تگ معرفی می شوند . 3 روش عمده برای اعمال خواص از طريق Style به يک عنصر وجود دارد : تعيين خواص مورد نظر در خاصيت Style در درون تگ عنصر . تعيين خواص عناصر در تگ style در بخش head هر صفحه برای عناصر آن صفحه . تعيين خواص از طريق یک تگ Style بيرونی و پيوند ان عنصر به تگ Style . در اين حالت ابتدا باید مجموعه خواص را در یک تگ Style بيرونی به یکی از روش ارائه شده در پائين صفحه ايجاد می کنيم . نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد . [TABLE="class: pr, width: 100%"] [TR] [TD="class: header, colspan: 3"] خواص مهم تگ style [/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/css [/TD] [TD="class: prbody"] نوع محتويات درون تگ style را تعيين می کند که برای استفاده از قالب CSS آن را برابر text/css تنظيم می کنيم . [/TD] [/TR] [TR] [TD="class: prbody"] media [/TD] [TD="class: prbody"] screen tty ty projection handheld print braille auarl all [/TD] [TD="class: prbody"] نوع رسانه نمايش دهنده صفحه اينترنتی را برای اعمال قالب های style به آنها را تعيين می کند . چنانچه فقط يک نوع رسانه خاص در اين قسمت عنوان شود ، خصوصيات style مورد نظر فقط در هنگام نمايش صفحه وب در آن رسانه اعمال خواهد شد و برای ساير رسانه ها به صورت ساده نمايش داده می شود . که می تواند يکی از موارد زير باشد : screen : صفحه نمايش کامپيوترهای معمولی . tty : ماشين تحرير راه دور ، تله تايپ ( برای ماشين هايی که دارای نحوه نمايش ثابت هستند ) . tv : وسايلی همچون تلويزيون با رزوليشن پايين . projection : برای نمايش در پروژکتورها . handheld : برای کامپيوتر های دستی و جيبی . barille : در اسناد مخصوص به افراد نابينا ( بريل ) . print : برای پرينت در دستگاه های چاپگر . auarl : برای سيستم های صوتی . all : برای همه نوع سيستم ها . [/TD] [/TR] [/TABLE] در زیر3 روش عمده برای تعيين خواص مورد نظر در تگ style را بيان می کنيم : 1 ) External Style Sheet : هنگامی که قرار است مقادیر style به اجزای چندین صفحه مختلف به طور یکسان اعمال می شود ، بهترین روش استفاده از یک صفحه Style sheet خارجی و پس لینک کردن آن به صفحه مورد نظر است. این کار دو مزیت عمده دارد: کدهای مربوط به style را فقط یکبار در sheet style نوشته و از آن می توان برای هزاران صفحه به صورت مشترک استفاده کرد. می توان ظاهر و مشخصات کليه صفحاتی که style به انها اعمال شده است را با یک تغيير کوچک در style sheet تغيير داد . برای لينک کردن یک صفحه style خارجی به یک صفحه ، از تگ < link > در قسمت < head > صفحه استفاده می شود ، توجه شود که پسوند فایل های css ، style sheet است . مثال : در مثال زير يک صفحه style sheet خارجی را به صفحه HTML پيوند زده ايم . توجه شود که اين کار بايد در قسمت head صفحه انجام شود : < head > < link rel = "stylesheet" type = "text/css" href = "mystyle.css" /> < /head > نکته مهم : خصوصيات مختلف style در صفحه style sheet بر مبنای پارامترهای دسته بندی مثل کلاس ، id یا نوع عنصر تعيين می شود . سپس در صفحه های وب باید بر اساس دسته بندی فوق ، اجزای مختلف را در class های مورد نظر قرار داده یا id آنها برابر مقدار در نظر گرقته شده ، قرار داد . در ادامه مطالب اين مسئله را بررسی می کنيم . دسته بندی و تعيين عناصر در Style Sheet ها : هر عنصر HTML دو خاصيت id و class دارد . خاصيت id تعيين کننده يک نام منحصر به فرد برای عنصر است و خاصيت class به کلاسی که عنصر در آن عضويت دارد ، اشاره می کند . يک class محجموعه ای از عناصر مختلف است که در يک گروه واحد قرار دارند . به روش های زير تعيين می کنيم که چه عناصری با چه id و class به style مورد نظر ارتباط دارند : برای تعیين عناصر بر پايه id آنها از روش زير استفاده می شود : #id عنصر مورد نظر مثال : عنصری که id آن برابر label است . مثال : #label برای تعیين عناصر بر پايه class آنها از روش زير استفاده می شود : . نام کلاس عنصر مورد نظر مثال : عنصری که class آن برابر header است . مثال : .header برای تعیين عناصر بر پايه نوع و کلاس آنها از روش زير استفاده می شود : نام کلاس عنصر مورد نظر . نوع عنصر مثال : تمام عناصری که از نوع td و عضو کلاس header هستند . مثال : td.header مثال : تمام عناصری که از نوع p و عضو کلاس matn هستند . مثال : p.matn برای تعیين عناصر بر پايه نوع و id آنها از روش زير استفاده می شود : عنصر مورد نظر # نوع عنصر id مثال : عنصری از نوع p ، که id آن برابر header است . مثال : p#header تعيين خواص مورد نظر برای هر گروه : پس از تعيين عناصر مورد نظر ، مجموعه خواص مورد نياز را در يک کروشه در مقابل نام آنها تعيين می کنيم . هر خاصيت به وسيله يک سمی کوولن ( ; ) از خاصيت ديگر جدا می شود و آخرين خاصيت نيازی به سمی کولون ندارد . به طور کلی از روش زير برای تعيين خاصيت ها استفاده می کنيم . { ... و مقدار 2 : خاصيت 2 ; مقدار 1 : خاصيت 1 } نام عنصر يا عناصر مورد نظر مثال : در مثال زير چندين ويژگی برای عناصر از نوع جدول که عضو کلاس ex هستند ، تعيين کرده ايم : table.ex { border : solid 2px blue ; width : 100px ; padding : 2px } 2 ) Internal Style Sheet : اين نوع قالب دهی توسط تگ < style > در قسمت < heade > صفحه تعيين می شود . مجوعه مقادير موجود در اين style فقط به عناصر صفحه جاری اعمال می شود . کليه مقادير مورد نظر برای اجزای مختلف را بايد در تگ باز و بسته < style > فرار داد : مثال : در مثال زير توسط تگ < style > در بخش head برای چند عنصر صفحه ويژگی هايي تعيين شده است . به توضيحات مثال دقت کنيد : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < head > < style type = "text/css" > 1 p#farsi { text-align : right ; direction : rtl } 2 table.ex { border : solid 2px blue } < /style > < /head > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body, align: right"] در مثال فوق دو نوع قالب دهی به 2 عناصر دسته از عناصر اعمال شده است : در خط 1 برای عنصر پاراگراف ( p ) که id آن برابر farsi است ، چيدمان نوشته ( text-align ) از سمت راست و جهت نوشته ( direction ) از راست به چپ تعيين شده است . در خط 2 برای کليه عناصری از نوع table که عضو کلاس ex هستند ، در خاصيت ترکيبی border حاشيه ای به رنگ آبی ، با اندازه 2 پیکسل تعيين شده است . نکته : برای يادگيری کليه خاصيت های style و مقادير آنها به بخش آموزش CSS برويد . [/TD] [TD="class: header"] توضيحات [/TD] [/TR] [/TABLE] 3 ) Inline Style : در اين نوع قالب دهی ، خصوصيات مورد نظر توسط خاصيت style در درون تگ عنصر مورد نظر تعيين می شود . اين خصوصيات فقط به عنصر مورد نظر اعمال می شوند . مثال : در مثال زير برای يک پاراگراف توسط خاصيت style چندين ويژگی را تعيين کرده ايم : [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: body"] < p style = "color : blue ; text-align : left ; direction : ltr > This is a paragraph which is formatted with CSS . < /p > [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] This is a paragraph which is formatted with CSS . [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
