آموزش HTML مقدمه ای بر وب و HTML تمام صفحات وب با نوعی از HTMLساخته می شوند. همه صفحات وب شامل دستورالعمل هايی برای نمايش توسط مرورگر ها هستند ،و مرورگر ها با خواندن اين دستورالعمل ها صفحات را نشان می دهند .دستورالعمل های نمايش صفحات وب ،برچسبهای HTML ) (Markup Language Text Hyperناميده می شوند. يک فايل HTMLچيست ؟ يک فايل HTMLفايل متنی ساده ای شامل برچسب ها ( )Tagمی باشد؛ که بهتر است پسوند htmlيا htmداشته باشد و می تواند توسط يک ويرايشگر ساده متن مانند Notepadساخته شود .برای بهتر روشن شدن مطلب بهتر است يک فايل HTMLبسازيم. در Windowsبرنامه Notepadرا اجرا کنيد و متن زير را بنويسيد ><html ><head ><title>title of page </title ></head ><body >This is my first home page.<b> This text is bold </b ></body ></html اين فايل را با نام " "Test.htmذخيره کنيد .حال مرورگر اينترنت خود را باز کرده و گزينه Openيا Open Pageرا از منوی Fileمرورگر انتخاب کنيد؛ يک جعبه محاوره ای باز خواهد شد Browse ،يا Choose Fileرا انتخاب کنيد و فايل" "Test.htmکه هم اکنون ساخته ايد را بيابيد، انتخابش کنيد و روی Openکليک کنيد .حال شما يک آدرس مانند: "D:\My Documents\Test.htm " را در جعبه محاوره ای خواهيد ديد .روی OKکليک کنيد ،مرورگر صفحه ساخته شده توسط شما را نشان می دهد. نکته ای درباره ويرايشگرهای : HTML شما می توانيد صفحات HTMLرا با ويرايشگرهای WYSIWYG ) (What You See Is What You Getمانند FrontPage :و Claris Home Pageو Adobe PageMillبه جای نوشتن برچسبهای مورد نياز در يک فايل متنی ساده؛ ويرايش نماييد .اما اگر می خواهيد يک طراح حرفه ای صفحات وب شويد بهتر است از يک ويرايشگر ساده متن استفاده کنيد تا HTMLرا به خوبی درک کنيد و در مباحث پيشرفته به درستی و با تسلط از آن استفاده کنيد. هنگامی که شما یک فایل HTMLرا ذخیره می کنید شما می توانید هرکدام از پسوندهای .htmیا .htmlرا انتخاب کنید.ما در مثال هایمان از پسوند .htmاستفاده می کنیم .این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند .htmlاستفاده کنیم بسیار ایمن تر خواهیم بود. برچسبهای HTML برچسبها برای مشخص کردن عناصر فايل HTMLاستفاده می شوند و توسط دو حرف < و > احاطه می شوند. برچسبها معموال به صورت جفت استفاده می شوند مانند < >bو < >b/؛ برچسب اول ،برچسب ابتدايی و برچسب دوم ،برچسب انتهايی ناميده می شود و متن بين آنها مندرجات عنصر می باشد .برچسبها به بزرگی يا کوچکی حروف حساس نيستند مثال < >bهمانند < >Bمی باشد اما ما در اين کتاب از حروف کوچک استفاده می کنيم .اگر می خواهيد خود را برای استفاده از نسل جديد HTMLآماده کنيد شما نيز بهتر است از حروف کوچک استفاده کنيد. ضمنا اين پيشنهادی است که W3C (World Wide Web ) Consortiumبرای استفاده از XHTMLمی کند. عناصر HTML برای روشن شدن مفهوم عنصر به دو مثال زير بسنده می کنيم: خط زير يک عنصر است: ><b>This text is bold</b اين عنصر با برچسب ابتدايی < >bشروع شده و با برچسب انتهايی < >b/پايان می پذيرد و This text is boldنيز مندرجات عنصر است. خطوط زير نيز مجموعا يک عنصر می باشد که شروع آن با برچسب ابتدايی < >bodyو پايان آن با برچسب انتهايی < >body/می باشد. <body>This is my first homepage. <b>This text is >bold</b></body مشخصه برچسبها برچسبها می توانند دارای مشخصه ( )Attributeباشند .مشخصه ها می توانند اطالعات بيشتری در باره عناصر HTMLصفحه شما تدارک ببينند. برچسب < >bodyعنصر بدنه صفحه شما را تعريف می کند .با اضافه کردن مشخصه bgcolorشما می توانيد به مرورگر بگوييد که رنگ پس زمينه شما مثال قرمز باشد؛ مانند: >"<body bgcolor="red برچسب < >tableيک جدول ايجاد می کند .با اضافه کردن مشخصه borderمی توانيد به مرورگر بگوييد که مثال جدول شما حاشيه ندارد؛ مانند: >"<table border="0 مشخصه ها همواره به شکل جفت نام و مقدار به کار می روند: "name="value؛ و همواره به برچسب ابتدايی اضافه می شوند .در ضمن بهتر است که مقدار مشخصه ها بين عالمتهای نقل قول قرار گيرند. برچسبهای اساسی HTML سربرگ HTML >HTML< يعني آغاز سند htmlو < >HTML/يعني پايان سند .دستورات رابين اينها قرار مي دهيم .اينها تگهاي آغازين وپاياني هستند .براي ایجاد تگ پاياني كافيست يك /به تگ آغازين اضافه كنيم .ولي همه تگها داراي تگ پاياني نیستند . برچسب <>head اين برچسب شامل اطالعاتی عمومی درباره فايل HTMLمی باشد .عناصر داخل برچسب < > headتوسط مرورگر نشان داده نمی شوند .بر اساس استانداردهای HTMLفقط تعداد کمی از برچسبها مجاز به قرار گرفتن در برچسب <>headمی باشند و آنها عبارتند از >title<:و < >baseو < >linkو < >metaو < >styleو < .>script برچسب <>title توسط اين برچسب می توانيم عنوانی در نوار عنوان مرورگر بنويسيم .همانطور که در مثال زير می بينيد عبارت The titleدر نوار عنوان به نمايش در خواهد آمد .در ضمن اين عبارت در متن مرورگر ديده نمی شود و فقط محتويات داخل برچسب پاراگراف ديده خواهد شد. <html> <head> <title>The title</title> </head> <body> <p>This text is displayed </p> </body> </html> عنوانها عنوانها توسط برچسب < >h1تا < >h6ايجاد می شوند که <>h1 بزرگترين عنوان و < >h6کوچکترين عنوان را ايجاد می کند HTML .به طور خودکار يک خط خالی قبل و بعد از عنوان اضافه می کند .به مثال زير توجه کنيد. ><H1> This is a heading </H1 ><H2> This is a heading </H2 ><H3> This is a heading </H3 ><H4> This is a heading </H4 ><H5> This is a heading </H5 ><H6> This is a heading </H6 پاراگراف پاراگرافها توسط برچسب < >pايجاد می شوند؛ و همانند عنوانهای HTMLبه طور خودکار يک خط خالی قبل و بعد از عنوان اضافه می کند. ><html ><body ><p>This is a paragraph</p ><p>This is another paragraph</p ></body ></html شکست خطوط برچسب < >brهنگامی استفاده می شود که شما می خواهيد يک خط را پايان دهيد و ادامه متن به خط بعدی برود ولی پاراگراف جديدی را شروع نکنيد .برچسب <>br يک برچسب خالی می باشد و بر چسب انتهايی ندارد. ><html ><body ><p>This <br> is a para<br>graph with line breaks</p ></body ></html توضيحات در HTML برچسب توضيحات برای قرار دادن توضيحاتی در فايل HTMLاستفاده می شود؛ و مرورگر آنها را ناديده می گيرد <!( ) >-- This is a comment --و در خروجی نمايش نمی دهد .شما توسط اين برچسب می توانيد فايل HTMLخود را تشريح کنيد و هنگامی که می خواهيد آن را ويرايش نماييد به شما کمک خواهد کرد تا سردرگم نشويد ،اين بزرگ صادق است. مسئله خصوصا در فايلهای HTML ><html ><body ><p>This is a paragraph</p ><!-- This is a comment -- ><p>This is another paragraph</p ></html ></body برچسب خط افقی برای جدا کردن قسمتهايی از متن می توانيد از بر چسب < >hrاستفاده کنيد .برای درک مطلب ،بهتر است مثال زير را ببينيد. ><html ><body ><p The hr tag defines a horizontal rule: ><hr >This is a paragraph</p ></body ></html چند نکته مفيد : * هنگامی که متنی را در HTMLمی نويسيد هرگز نمی توانيد مطمئن باشيد که متن شما در مرورگرهای ديگر چگونه ديده خواهد شد .چون بعضی از صفحه نمايشها کوچک و بعضی بزرگ هستند .ضمنا متن شما هرگاه که کاربر اندازه پنجره خود را تغيير می دهد ،شکل جديدی به خود می گيرد .پس هرگز سعی نکنيد که متن خود را با اضافه کردن خط خالی و يا فاصله بين حروف مرتب کنيد. * در HTMLهر تعداد فاصله که درکنار هم استفاده کرده ايد به عنوان يکی حساب می شود .پس از استفاده کردن فاصله های اضافی در کنار هم خودداری کنيد ،چون فقط اندازه فايل HTMLخود را زياد می کنيد. * هرگز از پاراگراف(< )>pخالی برای قرار دادن فاصله بين خطوط استفاده نکيد و به جای آن از < >brاستفاده کنيد ،در ضمن از <>br برای ساختن فهرست استفاده نکنيد؛ کمی صبر کنيد تا طرز ساختن فهرست ها را در HTMLفرا بگيريد. جدول برچسبهای اساسی و کاربرد آنها قالببندی متن در HTML HTML برچسبهای متعددی برای قالببندی متن در نظر گرفته است که در جداول زير کاربرد هر يک ذکر شده است و برای درک بهتر کاربرد هر يک از برچسب ها ،مثالهای متعددی آورده شده است. . قالببندی کنيدHTML ال زير به شما نشان می دهد که چگونه می توانيد يک متن را در يک فايل <html> <body> <b>This text is bold</b> <br> <strong>This text is strong</strong> <br> <big>This text is big</big> <br> <em>This text is emphasized</em> <br> <i>This text is italic</i> <br> <small>This text is small</small> <br> This text contains<sub>subscript</sub> <br> This text contains<sup>superscript</sup> </body> </html> * مثال زير به شما نشان می دهد که چگونه می توانيد يک متن خط خورده و يک متن زير خط دار را در يک فايل HTMLقالببندی کنيد. ><html ><body ><del>This text is deleted.</del ><br ><ins>This text is inserted.</ins ></body ></html > می توان فاصله ها و شکست خطوط را از قبلpre < با برچسب .تنظيم کرد <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. for i = 1 to 10 print i next i </pre> </body> </html> چگونهHTML * مثال زير نشان می دهد که آدرس را در يک فايل .بنويسيم <html> <body> <address> M Nikfazan<br> BOX 16455-53367 -53367 53367<br> Tehran<br> Iran </address> </body> </html> * مثال زير طريقه استفاده از برچسب < >bdoرا نشان می دهد. همان گونه که مشاهده می کنيد اين برچسب می تواند جهت نمايش متن را تغيير دهد مثال حروف از راست به چپ نوشته شوند يا بر عکس. ><html ><body >"<bdo dir="rtl Here is some Hebrew text ></bdo ></body ></html > مرورگر يک خط خالی قبل و بعد ازblockquote < * توسط برچسب .نقل قول قرار می دهد وهمچنين حاشيه ای برای آن در نظر می گيرد > کار خاصی روی متن انجام نمی دهد و فقط برای شما بهq< اما مشخص می کند که عبارت داخل آن يکHTML عنوان سازنده فايل .نقل قول است <html> <body> Here comes a long quotation: <blockquote> This is a long quotation. This is a long quotation. This is a long quotation.This is a long quotation. </blockquote> Here comes a short quotation: <q> This is a short quotation </q> </body> </html> همانطور که در مثالهای فوق می بينيد خروجی بعضی از بر چسبها کامال مثل هم است و بعضی کار خاصی را انجام نمی دهند .در اين موارد گاهی هدف از استفاده اين برچسبها تنها مشخص کردن نوع متن برای نويسنده فايل HTMLمی باشد. به هر حال استفاده از قالبندی های فوق به سليقه نويسنده فايل HTMLاست و ضرورتی ندارد که حتما از موارد فوق دقيقا بر اساس کاربرد استفاده شود. رنگ ها در HTML از رنگها توسط سه شيوه RGBو HEXو Nameمی توان استفاده کرد .مثال هر سه دستور زير رنگ پس زمينه را به سياه تغيير خواهند داد. <body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body >"bgcolor="black در استفاده از رنگها بهتر است از شيوه Nameاستفاده نکنيد و دو شيوه ديگر را به کار ببريد چون نام رنگها برای همه مرورگرها قابل استفاده نمی باشد .توسط دستور rgbمی توانيد تا 16ميليون رنگ بسازيد يعنی . 256×256×256نمونه ای از نام رنگها و شماره های آنها را در جدول زير می بينيد. در جدول زير نمونه ای از رنگها و شيوه استفاده از اعداد برای ساخت رنگهای مختلف را می بينيد. . برای آشنايی با طريقه ايجاد رنگهای مورد نظر به دو مثال زير توجه کنيد <html> <body bgcolor="#FFFF00"> <p>This is a paragraph</p> <p>This is another paragraph</p> </body> </html> <html> <body bgcolor="rgb(0,255,0)"> <p>This is a paragraph</p> <p>This is another paragraph</p> </body> </html> فونتها در HTML برای تعيين نوع فونت ورنگ ويا اندازه آن در يک فايل HTMLمی توان از برچسب < >fontاستفاده کرد .اگر چه هنوز عده زيادی از اين شيوه استفاده می کنند و حتی نرم افزار FrontPageنيز از اين شيوه استفاده می کند؛ استفاده از اين برچسب توصيه نمی شود .و بهتر است از شيوه های نگارش ( )CSSاستفاده کنيد .در اينجا فقط برای آشنايی با برچسب <>font به توضيح آن می پردازيم اما شما سعی کنيد از اين برچسب استفاده نکنيد. برچسب < >fontدارای سه مشخصه size، faceو colorمی باشد که در جدول زير شرح داده شده اند. . مثال زير طريقه استفاده از مشخصه های ذکر شده را نشان می دهد <html> <body> <p> <font size="2" face="Verdana" color="#ff00ff"> This is a paragraph. </font> </p> <p> <font size="5" face="Times" color="blue"> This is another paragraph. </font> </p> </body> </html> لينک ها در HTML برچسب < >aو مشخصه href HTML از برچسب < >aکه aحرف اول کلمه anchorبه معنی لنگر می باشد ،برای ساختن پيوند با ديگر فايلها استفاده می کند (به جای استفاده از کلمه پيوند از کلمه آشنای لينک استفاده خواهيم کرد) .يک لينک می تواند به هر منبعی در وب اشاره داشته باشد :يک صفحه HTMLديگر ،يک تصوير، يک موزيک ،يک فيلم يا هر چيز ديگری .قاعده ساخت يک لينک به صورت زير می باشد. ><a href="url">Text to be displayed</a مشخصه hrefبرای مشخص کردن آدرس فايلی که می خواهيم به آن لينک ايجاد کنيم ،به کار می رود؛ و کلمات بين برچسب ابتدايی و انتهايی به شکل فراپيوند ( )hyperlinkنشان داده خواهد شد .به عنوان مثال خط زير يک لينک به سايت Yahooايجاد می کند. ><a href="http://www.yahoo.com/">Visit YAHOO!</a دستور فوق در يک مرورگر به شکل روبرو ديده می شود Visit YAHOO! : مشخصه target توسط مشخصه targetشما می توانيد مشخص کنيد که فايل پيوند داده شده به آن کجا باز شود .به عنوان مثال دستور زير سايت Yahooرا در پنجره جديدی نشان می دهد. ><a href="http://www.yahoo.com/" target="_blank">Visit YAHOO!</a مشخصه name مشخصه nameبرای ساختن يک لينک دارای نام استفاده می شود .توسط لينک دارای نام شما می توانيد لينکی بسازيد که به قسمت خاصی از صفحه مستقيما جهش داشته باشد به جای اين که کار بر را مجبور به پيمودن صفحه کنيد تا به قسمت مورد نظر برسد .قاعده ساخت يک لينک دارای نام به صورت زير است : >a name="label">Text to be displayed</a< هنگامی که می خواهيد به يک لينک دارای نام متصل شويد بايد به انتهای نام فايل عالمت #را اضافه کرده سپس نام لينک مورد نظر را بنويسيد .مثال اگر دستورات زير را در فايلی به نام test1.htmذخيره کنيد > <p>This is a text. This is a text. This is a text.</p > <p>This is a text. This is a text. This is a text.</p > <a name="tips">Read the Useful Tips section</a > <p>This is a text. This is a text. This is a text.</p > <p>This is a text. This is a text. This is a text.</p و دستورات زير را در فايلی به نام test2.htmذخيره کنيد > <a href="test1.htm#tips">Read the Useful Tips section</a و فايل test2.htmرا باز کنيد و روی لينک موجود کليک کنيد ،فايل test1.htmباز خواهد شد و به بخش tipsخواهد رفت .همچنين شما می توانيد از طريق پيوند دارای نام به بخشی از صفحه فعلی که توسط مرورگر در حال نمايش است برويد .مثال اگر دستورات زير را در فايل test.htmنوشته و آن را ذخيره و توسط مرورگر باز کنيد، سپس روی Useful Tipsکليک کنيد صفحه به سوی بخش tipsجهش می کند. <a href="#tips">Useful Tips</a> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <a name="tips">Read the Useful Tips section</a> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> لينک به يک آدرس E-Mail چند نکته مفيد : * هرگاه که می خواهيد لينکی به يک شاخه ايجاد کنيد در انتهای نام شاخه يک / اضافه کنيد چون اگر بخواهيد مثال لينکی به شاخه htmlدر سايت yourname.comايجاد کنيد و از ساختار "href="http://www.yourname.com/htmlاستفاده کنيد يک تقاضای اضافه به سرور وب خود تحميل خواهيد کرد چون سرور ابتدا به انتهای آدرس فوق يک / اضافه می کند سپس به آدرس جديد که آدرس زير است پاسخ می دهد و صفحه الزم را برای کاربر می فرستد "/href="http://www.yourname.com/html : * لينک های دارای نام غالب برای ساخت فهرست مندرجات فايل های طوالنی در ابتدای صفحه استفاده می شوند .به اين صورت که هر فصل يک لينک دارای نام دارد و لينکی به هر يک از آنها در ابتدای صفحه داده می شود. *توجه داشته باشيد هنگامی که در مشخصه hrefمی خواهيد از فاصله استفاده کنيد بايد فاصله را با 20%جايگزين کنيد تا مطمئن باشيد که فاصله ها به درستی توسط مرورگر تشخيص داده خواهند شد. تصاوير در HTML برچسب < >imgو مشخصه src تصاوير در فايلهای HTMLتوسط برچسب < >imgقرار داده می شوند. اين برچسب ،يک برچسب خالی می باشد يعنی نيازی به برچسب انتهايی ندارد و فقط شامل مشخصه های مربوط به خود می باشد .برای مشخص کردن تصويری که بايد در صفحه قرار بگيرد نياز به استفاده از مشخصه src ) (sourceداريم که به وسيله آن آدرس و نام فايل معرفی می شود. >"<img src="http://www.you.com/product.gif اگر فايل HTMLو تصوير در کنار هم قرار داشته باشند می توانيم از < >"img src="product.gifاستفاده کنيم و نيازی به ذکر کامل آدرس نيست. مرورگر تصوير را در هرجايی که از برچسب imgاستفاده کرده ايد قرار خواهد داد .مثال اگر از اين برچسب بين دو پاراگراف استفاده کرده ايد مرورگر ابتدا پاراگراف اول را نمايش می دهد سپس تصوير و در نهايت پاراگراف ديگر را نشان خواهد داد .به عنوان مثال ديگر اگر عبارت < >td><img src="product.gif"></tdرا در جدول به کار ببريد يکی از خانه های جدول شامل تصوير product.gifخواهد بود( .در مورد جداول در مبحث بعدی صحبت خواهيم کرد) مشخصه alt اين مشخصه برای ايجاد يک متن توصيفی بر روی تصوير به کار می رود؛ و وقتی کاربر ماوس را روی تصوير می برد و برای چند لحظه نگاه می دارد، اين متن در يک کادر کوچک ديده خواهد شد مانند : >"<img src="boat.gif" alt="Big Boat که باعث ديده شدن عبارت Big Boatدر يک کادر کوچک می شود وکاربرد اين مشخصه بيشتر وقتی است که اگر تصوير به دليل هر مشکلی در صفحه ديده نشد کاربر بداند که چه تصويری را نديده است که در اين صورت عبارت مشخصه altبه جای تصوير ديده خواهد شد. نکته سعی کنيد در صفحات وبی که می سازد فقط در صورت نياز از تصوير وعکس استفاده کنيد و از زياد کردن حجم صفحه خود بپرهيزيد چون هنگامی که کاربر در اينترنت صفحه شما را می بيند بايد مدت زيادتری برای تکميل شدن نمايش صفحه شما صبر کند و ممکن است اين موضوع کاربر را از ديدن صفحه پشيمان کند ! تصوير پس زمينه برای اضافه کردن تصويری به پس زمينه صفحه می توانيد از ساختار : >"<body background="background.jpg استفاده کنيد که به جای background.jpgمی توانيد نام هر فايل تصويری ديگری را قرار دهيد .اگر ابعاد تصوير شما از صفحه کوچکتر باشد تصوير تا پر کردن کل صفحه تکرار خواهد شد .پس اگر تصميم داريد که تصويری به پس زمينه خود اضافه کنيد توصيه می شود که از فايلهای کوچکی که می توانند مانند موزائيک در کنار هم قرار گيرند ،استفاده کنيد .ضمنا در انتخاب تصوير و انتخاب رنگ متن دقت کنيد تا متن شما خوانايی خود را از دست ندهد .مثال زير در همين رابطه است. ><html >"<body background="background.jpg <p>this is a test. this is a test. this is a test. >this is a test.</p ></body ></html در تصاويرalign مشخصه مثال زير در. اين مشخصه طريقه تراز شدن تصاوير و متن را تعيين می کند .همين رابطه است <html> <body> <p> An image <img src ="test.bmp" align="middle"> in the text </p> <p> An image <img src ="test.bmp" align="top"> in the text </p> <p> An image <img src ="test.bmp" align="bottom"> in the text </p> </body> </html> توجه داشته باشيد که تصاوير به طور پيش فرض به صورت ." قرار خواهند گرفتalign="bottom می تواند طرز قرار گرفتن يک تصوير در کنار يکalign همچنين مشخصه پاراگراف را تعيين کند که مثال تصوير در سمت راست پاراگراف قرار گيرد . به مثال زير توجه کنيد.يا در سمت چپ <html> <body> <p> <img src ="test.bmp" align ="left" > A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src ="test.bmp" align ="right"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> </body> </html> تغيير ابعاد تصاوير توسط مشخصه widthو heightمی توانيد ابعاد تصوير را تغيير داده و آن را بزرگتر و يا کوچکتر کنيد .فقط دقت کنيد که ابعاد را متناسب تغيير دهيد چون در غير اين صورت تصوير وضوح و زيبايی خود را از دست خواهد داد. ><html ><body >"<img src="hackman.gif" width="20" height="20 >"<img src="hackman.gif >"<img src="hackman.gif" width="70" height="70 ></body ></html ساخت لينک بر روی قسمتی از تصوير برای اين کار بايد از دو برچسب < >mapو < >areaاستفاده کنيد .روش کار بدين صورت است که ناحيه هايی را می خواهيد کاربر با کليک بر روی آن به صفحه ديگری متصل شود را توسط اشکالی مشخص می کنيد .اين اشکال دايره ،مستطيل و چند ضلعی خواهند بود که توسط مشخصه shapeتعيين می شوند. * دايره به صورت "shape="circleمعرفی می شود و مختصات آن توسط مشخصه coordsتعيين می شود .مثال در "coords="39, 41, 32دو عدد اول مختصات مرکز دايره و عدد سمت راست اندازه شعاع دايره می باشد .مشخصه آشنای hrefکه در برچسب < >aاز آن استفاده کرديم ،صفحه ای را که کابر با کليک بر ناحيه مشخص شده توسط شکل به آن منتقل خواهد شد را تعيين می کند. * مستطيل توسط "shape="rectو مختصات قطر آن مثال توسط "coords="77, 12, 112, 72 تعيين می شود که دو عدد سمت چپ مختصات گوشه باالی سمت چپ و دو عدد سمت راست مختصات گوشه پايين سمت راست می باشند. * برای استفاده از چند ضلعی بايد از "shape="polygonاستفاده کنيد و اعداد دوبه دو مختصات گوشه های آن را تعيين می کند ."coords="146, 7, 124, 68, 193, 64, 183, 53, 184, 20 : همانطور که در مثال زير می بينيد برچسب < >mapمشخصه ای به نام nameدارد که توسط آن برچسب < >imgبا برچسب < >mapارتباط برقرار می کند برای ايجاد اين ارتباط بايد در برچسب < >imgاز مشخصه usemapاستفاده کنيم که مقدار اين مشخصه نام برچسب < >mapمی باشد. ضمنا نام برچسب < >mapبايد همراه با عالمت #به کار برده شود .مانند: " usemap="#picture ساخت لينک برای تصوير شما می توانيد با کليک بر روی هر جای تصوير به آدرس مورد نظر متصل شويد برای اينکار بايد از روش زير استفاده کنيد ،که در اينجا مثال با کليک بر روی تصوير buttonnext.gifبه صفحه nextpage.htmخواهيد رفت. <a href="nextpage.htm"><img >src="buttonnext.gif" ></a <html> <body> <map name="picture"> <area href="circle.htm" shape="circle" coords="30, 33, 27" alt="circle"> <area href="rectangle.htm" shape="rect" coords="64, 6, 95, 60" alt="rectangle"> <area href="polygon.htm" shape="polygon" coords="126,1, 106, 56, 166, 53, 158, 46,158,15" alt="polygon"> </map> <img border="0" src="picture.gif" usemap="#picture"> <body> <html> جدول ها در HTML جدول ها در HTMLتوسط برچسب < >tableايجاد می شوند .يک جدول توسط برچسب < >trبه سطرها تقسيم می شود و هر سطر توسط برچسب < >tdبه خانه های اطالعاتی تقسيم می شود .يک خانه اطالعاتی متواند شامل متن ،تصوير ،فهرست ،پاراگراف ،فرم ،جدول و يا هر چيز ديگری باشد .دو مثال زير طريقه استفاده از برچسبهای گفته شده را نشان می دهد. ><html مثال زيريک جدول حاشيه دارمی باشد که ضخامت><body حاشيه توسط مشخصه >"<table border="1 "border="1تعيين شده است. ><tr ><td>row 1, cell 1</td ><td>row 1, cell 2</td ></tr ><tr ><td>row 2, cell 1</td ><td>row 2, cell 2</td ></tr ></table ></body ></html عنوانها در جدول به.> مشخص می شوندth < عناوين ستونها در يک جدول توسط بر چسب .مثال زير توجه کنيد <html> <body> <table border="1"> <tr> <th>Heading</th> <th>Another Heading</th> </tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> > می توانيد عنوانی برای جدول خود در نظرcaption < توسط برچسب . به مثال زير توجه کنيد.بگيريد <html> <body> <table border="1"> <caption>Caption</caption> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> </body> </html> توسط مشخصه bgcolorمی توانيد رنگ زمينه جدول يا خانه های آن را تعيين کنيد. * مشخصه widthعرض جدول يا يک خانه را تعيين می کند و مشخصه > <htmlاين دو مشخصه heightارتفاع جدول يا يک خانه را تعيين می کند .و مقدار معموال بر حسب pixelمی باشد. ><body >"<table border="1" bgcolor="red ><tr ><td bgcolor="#00ff00">First</td ><td>Row</td ></tr ><tr ><td>Second</td ><td>Row</td></tr ></table ></body ></html می توانيد تصويری در پس زمينه جدول ياbackground توسط مشخصه .خانه ها قرار دهيد <html> <body> <table border="1" height="200" width="200" background="background.jpg"> <tr> <td background="test.bmp">First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html> خانه های خالی در جدول گاهی اوقات ما نياز پيدا می کنيم که بعضی از خانه های جدول خالی باشند .اگر جدول ما دارای حاشيه باشد و در خانه مورد نظر چيزی ننويسيم (< )>td></tdدر اين صورت جدول ما به صورت زير ديده می شود. برای جلوگيری از بهم خوردن حاشيه بايد حرف نهادی & ;nbspرا بکار ببريم يعنی از < >td> </tdبه جای < >td></tdاستفاده کنيم در اين صورت جدول به صورت زير خواهد بود. bgcolor مشخصه می توانيدbackground توسط توسط مشخصه می.تصويری در پس زمينه جدول يا خانه ها قرار دهيد .توانيد رنگ زمينه جدول يا خانه های آن را تعيين کنيد <html> <body> <table border="1" bgcolor="red"> <tr> <td bgcolor="#00ff00">First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html> *مشخصه widthعرض جدول يا يک خانه را تعيين می کند و مشخصه heightارتفاع جدول يا يک خانه را تعيين می کند .و مقدار اين دو مشخصه معموال بر حسب pixel می باشد. background مشخصه می توانيدbackground توسط توسط مشخصه می.تصويری در پس زمينه جدول يا خانه ها قرار دهيد .<ها قرار دهيدhtml> توانيد تصويری در پس زمينه جدول يا خانه <body> <table border="1" height="200" width="200" background="background.jpg"> <tr> <td background="test.bmp">First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html> * از مشخصه alignبرای مرتب کردن محتويات خانه های يک جدول در جهت افقی استفاده می شود که مثال در سمت راست يا وسط ويا سمت چپ خانه قرار بگيرند ويا اينکه اگر محتويات خانه متن است ،متن به صورت justifyمرتب شود؛ و از مشخصه valignبرای مرتب کردن محتويات ><html خانه های يک جدول در جهت عمودی استفاده می شود. ><body "<table border="1" height="200" width="300 ><tr ><td align="left" >First</td ><td align="center" >Second</td ><td align="right" >Third</td ></tr ><tr ><td valign="top" >First</td ><td valign="middle" >Second</td ><td valign="bottom" >Third</td ></table ></body ></html <td align="left/center/right/justify">Make-Up</td> <td valign="top/middle/bottom">Make-Up</td> <h4>With frame="border":</h4> <table frame="border"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> frame مشخصه مشخصه ديگری که در جدولها کاربرد دارد مشخصه border ، box ، void ، است که دارای انواعframe میabove ، below ، hsides ، vsides ، lhs، rhs . سه مثال زير کاربرد اين مشخصه را نشان می دهد.باشد <h4>With frame="box":</h4> <table frame="box"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> <h4>With frame="void":</h4> <table frame="void"> <tr> <h4>With frame="vsides":</h4> <table frame="vsides"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> <h4>With frame="lhs":</h4> <table frame="lhs"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> <h4>With frame="rhs":</h4> <table frame="rhs"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> فهرستها در HTML HTMLفهرستهای شماره دار ،بدون شماره و فهرستهای دارای توضيح را پشتيبانی می کند. فهرستهای بدون شماره اينگونه فهرستها توسط يک شکل کوچک مشخص می شوند؛ و توسط برچسب < >ulشروع شده و هر مورد آن با بر چسب < >liمشخص می شود .مثال زير طريقه ساخت يک فهرست بدون شماره را نشان می دهد. ><html ><body ><ul ><li>Coffee</li ><li>Milk</li ></ul ></body ></html ، در داخل موارد فهرست همانند خانه های جدول شما می توانيد پاراگراف مثال زير طريقه استفاده. قرار دهيد... يک فهرست ديگر و، جدول،تصوير .از اين روش را نشان می دهد <html> <body> <ul> <li><p>This is a paragraph. This is a paragraph. This is a paragraph. This is a parag <li><table border="1"><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table></li> </ul> </body> </html> فهرستهای شماره دار منظور از فهرستهای شماره دار ،فهرستهايی است که موارد آن توسط عدد ،شماره گذاری شده اند .فهرستهای شماره دار توسط برچسب < >ol شروع شده و هر مورد آن با بر چسب < >liمشخص می شود .مثال زير طريقه ساخت يک فهرست شماره دار را نشان می دهد. ><html ><body ><ol ><li>Coffee</li ><li>Milk</li ></ol ></body ></html فهرستهای دارای توضيح اينگونه از فهرستها دارای شماره يا شکل نمی باشند وبرای مواردی که می خواهيم توضيحی در کنارشان باشد به کار می روند .فهرستهای دارای توضيح توسط برچسب < >dlشروع شده و هر مورد آن با بر چسب < >dt مشخص می شود و توضيحات در داخل برچسب < >dd ><html ><bodyفهرست قرار می گيرند .مثال زير طريقه ساخت يک ><dl دارای توضيح را نشان می دهد. ><dt>Coffee</dt ><dd>Black hot drink</dd ><dt>Milk</dt ><dd>White cold drink</dd ></dl ></body ></html مشخصه typeدر فهرستها توسط اين مشخصه می توانيد شکلی را که در کنار موارد فهرستهای بدون شماره قرار می گيرد و يا اعداد فهرستهای شماره دار را به نوع دلخواه تغيير دهيد .شکلها می توانند سه نوع دايره توپر ،دايره توخالی و مربع ( )disc , circle , squareباشند و شماره گذاری ها می توانند به چهار صورت " "a b c"، "A B C"، "i ii iiiيا " "I II IIIباشند که به ترتيب با a، A، i، Iمشخص می شوند. ><html ><body ><h4>Square bullets list:</h4 >"<ul type="square ><li>Apples</li ><li>Bananas</li ><li>Lemons</li ><li>Oranges</li ></ul ></body ></html در فهرست شماره دار راtype در زير مثالی ازاستفاده .می بينيد <html> <body> <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> </body> </html> ><html ><body ><ul ><li>Coffee</li <li>Tea ><ul ><li>Black tea</li ><li>Green tea</li ></ul ></li ><li>Milk</li ></ul ></body ></html مثال زير روش استفاده از فهرستهای تودرتو را نشان می دهد .همان طور که می بينيد فهرست داخلی توسط شکل ديگری ( دايره تو خالی ) مشخص شده است. فرمها و داده های ورودی در HTML يک فرم ناحيه ای در صفحه HTMLاست که شامل عناصری می باشد. عناصر فرم به کاربر اجازه می دهند که اطالعاتی را وارد صفحه ما کند؛ و ما با دريافت آن اطالعات به اهدافی که داريم برسيم .يک فرم توسط برچسب < >formايجاد می شود. برچسب <>input پرکاربرد ترين برچسب درفرمها برچسب< >inputمی باشد در اينجا انواع اين بر چسب را شرح می دهيم. جعبه متن از اين جعبه هنگامی استفاده می شود که بخواهيم کاربر کلمات يا اعدادی را در فرم بنويسد؛ و توسط مشخصه "type="textتعيين می شود .مثال زير در همين رابطه است .توجه داشته باشيد که خود فرم قابل رويت نمی باشد وفقط عناصر داخل آن را می توانيم ببينيم .در ضمن اندازه پيش فرض برای جهبه متن در اکثر مرورگر ها 20حرف می باشد و اگر می خواهيد اين پيش فرض را تغيير دهيد بايد از مشخصه sizeاستفاده کنيد ><html ( .)size=40 ><body ><form First name: >"<input type="text" name="firstname <br> Last name: >"<input type="text" name="lastname ></form ></body ></html دکمه های راديويی از اين دکمه ها هنگامی استفاده می شود که بخواهيم کاربر يکی از چند گزينه به تعداد محدود را انتخاب کند؛ و توسط مشخصه "type="radio تعيين می شود .با انتخاب يکی از دکمه ها ،دکمه ديگری با همان نام اگر در حالت انتخاب باشند ،از حالت انتخاب خارج می شود .اگر کلمه checkedرا در برچسب inputاز نوع دکمه های راديويی بنويسيد آن دکمه به طور پيش فرض به صورت انتخاب شده خواهد شد. ><input type="radio"<html > name="s" value="male" checked ><body ><form ><input type="radio" name="s" value="male"> Male<br <input type="radio" name="s" value="female"> Female ></form ></body ></html جعبه انتخاب از اين جعبه ها هنگامی استفاده می شود که بخواهيم کاربر يک يا چند گزينه از گزينه هايی به تعداد محدود را انتخاب کند؛ و توسط مشخصه "=type "checkboxتعيين می شود .کاربر می تواند يک يا چند جعبه انتخاب را همزمان انتخاب کند .اگر کلمه checkedرا در برچسب inputاز نوع جعبه انتخاب بنويسيد آن جعبه به طور پيش فرض به صورت انتخاب شده خواهد شد. ><html "<input type="checkbox >name="bike" checked ><body ><form >"<input type="checkbox" name="bike >I have a bike<br >"<input type="checkbox" name="car I have a car ></form ></body ></html جعبه کلمه عبور از اين جعبه هنگامی استفاده می شود که بخواهيم کاربر کلمه عبور يا هر چيزی که نخواهيم اطرافيان او با نگاه به صفحه نمايش متوجه آن شوند را ،بنويسد که در اين حالت با فشار هر کليد صفحه کليد يک * در جعبه کلمه عبور نمايش داده می شود .جعبه کلمه عبور توسط مشخصه "type="passwordتعيين می شود. ><html ><body ><form Username: ><input type="text" name="user"><br Password: >"<input type="password" name="pass ></form ></body ></html دکمه دکمه توسط "type="buttonمشخص می شود و نوشته روی آن توسط مشخصه "value="textمعرفی خواهد شد .ساخت دکمه شيوه ديگری نيز دارد وآن استفاده از برچسب < >buttonاست. هنگامی که دکمه ها را فشار می دهيم بر اساس کاری که برای آنها تعريف کرده ايم عکس العمل نشان خواهند داد. دکمه ها کاربردهای مختلفی دارد که در مباحثی مانند JavaScriptراجع به طريقه استفاده از آنها صحبت می شود. ><html ><body ><form <input >"type="button" value="Button 1 ><br><br ><button>Button 2</button ></form ></body ></html جعبه drop down ><html ><body ><form >"<select name="cars <option value="volvo">Volvo <option value="saab">Saab <option value="fiat">Fiat <option value="audi">Audi ></select ></form ></body ></html اين جعبه همان گونه که در شکل زير می بينيد فهرستی است که يکی از گزينه های آن قابل رويت است و با کليک کردن روی آن بقيه گزينه ها نيز ديده می شوند .درضمن تنها يکی از موارد آن را می توانيم انتخاب کنيم .اين جعبه توسط برچسب < >selectمشخص می شود وموارد فهرست نيز توسط برچسب < >optionايجاد خواهند شد .به طور پيش فرض گزينه اول اين فهرست انتخاب شده است و اگر بخواهيم که گزينه ديگری از فهرست انتخاب شده باشد بايد کلمه selectedرا به برچسب < >optionدر گزينه مورد نظر اضافه کنيم .مثال زير طريقه استفاده را مشخص می کند. جعبه textarea گای اوقات شما نياز داريد که کاربر متنی طوالنی تر از يک خط را بنويسد .بنابر اين نمی توانيد از جعبه متن استفاده کنيد چون فقط در آن می توانيد يک خط را بنويسيد .اما توسط اين جعبه شما می توانيد به کاربر اجازه دهيد که بيش از يک خط را بنويسد .اين جعبه توسط برچسب < >textareaمشخص می شود و همانطور که در مثال زير می بينيد تعداد سطرها وستونها توسط مشخصه های rowsو colsتعيين می شوند. ><html ><body ><form >"<textarea name="text1" rows="5" cols="20 The cat was playing in the garden. ></textarea ></form ></body ></html فرم حاشيه دار <html> <body> <fieldset> <legend>Health information:</legend> <form> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> </body> </html> > شما می توانيد يک حاشيه دورfieldset < توسط برچسب >legend < عناصر فرم خود ايجاد کنيد و توسط برچسب .می توانيد کلماتی را روی قسمت بااليی حاشيه بنويسيد مشخصه actionدر فرمها و دکمه ارسال وقتی که کاربر بر دکمه Submitکليک می کند ،محتويات فرم به فايل يا آدرس ديگری فرستاده خواهد شد. مشخصه ،actionنام آن فايل يا آدرس را مشخص می کند ،آن فايل معموال دارای ابزاری برای دريافت اطالعات فرستاده می باشد .اين ابزار در مباحث ASPو CGI توضيح داده می شوند .در مثال زير شيوه ارسال اطالعات توسط "method="getمشخص می شود ،اين شيوه ها مورد بحث ASPو CGIو ...می باشد. ><html ><body >"<form name="input" action="action.asp" method="get Username: >"<input type="text" name="user >"<input type="submit" value="Submit ></form ></body ></html نکته شما می توانيد در فرم دکمه ای قرار دهيد که کاربر با کليک بر آن اطالعات فرم را به صورت پيش فرض در آورد .اين دکمه توسط عبارت <>"input type="reset ايجاد می شود. قابها ( )Frameدر HTML توسط قابها شما می توانيد بيش از يک فايل HTMLرا در يک پنجره مرورگر ،به طور همزمان نمايش دهيد .در اين حالت هر پنجره HTMLيک قاب ناميده می شود و هر قاب از بقيه مستقل است .مشکل استفاده از قاب اين است که کار بر به سختی می تواند تمام صفحه شما را چاپ کند. برچسب <>frameset اين برچسب مشخص می کند که پنجره مرورگرچگونه بايد بين فايلهای HTMLيعنی همان قابها تقسيم شود .هر Framesetمجموعه ای از قابهای سطری يا ستونی را مشخص می کند .اندازه هر قاب سطری يا ستونی ،مقدار فضايی از صفحه که آن قاب اشغال می کند را مشخص می کند. برچسب <>frame اين برچسب فايلهای HTMLکه درون هر قاب بايد قرار بگيرند را مشخص می کند. در مثال زير ما يک مجموعه از قاب با سه ستون داريم .ستون اول و سوم هرکدام %25و ستون دوم %50پهنای مرورگر را اشغال می کنند .فايل frame_a.htm در ستون اول frame_b.htm ،در ستون دوم و frame_c.htmدر ستون سوم قرار می گيرند. <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html> اگر به جای مشخصه colsاز rowsاستفاده شود قابها به ><html صورت افقی قرار خواهند گرفت. >"<frameset rows="25%,50%,25% >"<frame src="frame_a.htm >"<frame src="frame_b.htm >"<frame src="frame_c.htm ></frameset ></html هرکدام از سه فايل مثال باال که در يک قاب قرار گرفتند به صورت يک فايل HTMLمستقل نيز قابل استفاده می باشند. frame_c.htm frame_b.htm frame_a.htm نکته اگر قابهای شما دارای حاشيه قابل رويت باشند ،کاربر می تواند باکشاندن حاشيه ها اندازه قابهای شما را تغيير دهد .برای جلوگيری از اين کار شما می توانيد مشخصه noresizeرا به برچسب < >frameاضافه کنيد. برچسب <>iframe توسط اين برچسب می توانيد يک فايل HTMLرا در داخل يک قاب در هر کجای متن که بخواهيد قرار دهيد. البته بعضی از مرورگر های قديمی ممکن است برچسب < >iframeرا پشتيبانی نکنند و در اين صورت قاب در داخل متن ديده نمی شود. ><html ><body >"<iframe src ="frame_c.htm ></iframe Some older browsers don't support iframes.If they don't, the iframe will not be visible. ></body ></html * مثال زير نشان می دهد که چگونه می توان چند فايل را در سطرها و ستون ها با هم ترکيب کرد و بهHTML .شيوه دلخواه در قابها چيد <html> <frameset rows="50%,50%"> <frame src="frame_a.htm"> <frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </frameset> </html> * مثال زير نشان می دهد که چگونه يک قاب هدايت گر ( )navigatorبسازيم .قاب هدايت گر ،شامل فهرستی از لينکهاست و قاب دوم ،هدف می باشد يعنی فايلهايی که لينکها به آنها اشاره دارند در آن قاب باز خواهند شد .در اينجا فايلی با نام contents.htmدارای سه لينک می باشد و متن اصلی آن را در زير می بينيد .اين فايل در قاب اول قرار می گيرد و در قاب دوم فايل frame_c.htmقرار می گيرد. > <a href ="frame_a.htm" target ="showframe">Frame a</a > <br > <a href ="frame_b.htm" target ="showframe">Frame b</a > <br > <a href ="frame_c.htm" target ="showframe">Frame c</a در زير نتيجه را مشاهده می کنيد :هنگامی که روی Frame aکليک می کنيد در قاب ديگر فايل ><html >"*<frameset cols="120, frame_a.htmباز خواهد شد و به همين طريق ديگر >"<frame src="contents.htm "<frame src="frame_c.htm >"name="showframe می کنند. لينکها نيز فايل مرتبط را در قاب دوم باز ></frameset ></html نکته بعضی از مروگر های قديمی برچسب < >frameرا پشتيبانی نمی کنند که در اين صورت نمی توانند قابهای شما را نمايش دهند و کاربر صفحه ای خالی را خواهد ديد .برای رفع اين مشکل می توانيد از برچسب < >noframeاستفاده کنيد و اطالعاتی را داخل آن بنويسيد .در اين حالت اين گونه از کاربران اطالعات داخل اين برچسب را خواهند ديد سربرگ HTML برچسب <>head اين برچسب شامل اطالعاتی عمومی درباره فايل HTMLمی باشد .عناصر داخل برچسب < >head توسط مرورگر نشان داده نمی شوند .بر اساس استانداردهای HTMLفقط تعداد کمی از برچسبها مجاز به قرار گرفتن در برچسب < >headمی باشند و آنها عبارتند از >title <:و < >baseو < >linkو < >meta و < >styleو < .>script برچسب <>title توسط اين برچسب می توانيم عنوانی در نوار عنوان مرورگر بنويسيم .همانطور که در مثال زير می بينيد عبارت The titleدر نوار عنوان به نمايش در خواهد آمد .در ضمن اين عبارت در متن مرورگر ديده نمی شود و فقط محتويات داخل برچسب پاراگراف ديده خواهد شد. ><html ><head ><title>The title</title ></head ><body ><p>This text is displayed </p ></body ></html برچسب <>base توسط اين برچسب که معموال با مشخصه targetهمراه است می توان شيوه ارجاع به صفحه ديگری را در لينکها تعيين کرد .و ديگر نيازی به تعيين مجدد آن در برچسب < >aنمی باشد .مشخصه targetبه طور کامل در مبحث لينک ها توضيح داده شده است .به عنوان مثال اگر از دستور زير ><head><base target="_blank"></head در فايل HTMLخود استفاده کرده باشيم دو دستور زير کامال مثل هم عمل خواهند کرد يعنی هر دو سايت Yahooرا در پنجره جديدی باز خواهند کرد. <a href="http://www.yahoo.com" target="_blank">This >link</a ><a href="http://www.yahoo.com">This link</a برچسب <>meta هدف استفاده از برچسب < >metaتدارک اطالعاتی اضافی درباره فايل می باشد. و اغلب شامل اطالعاتی می باشد که مربوط به مرورگر و موتورهای جستجو است مانند شرحی از محتويات فايل .HTMLمعموال همراه اين برچسب از دو مشخصه nameو contentاستفاده می شود .بعضی از موتورهای جستجو از اين اطالعات برای فهرست بندی صفحه شما استفاده می کنند .از آنجا که بعضی از طراحان و مديران سايت های وب برای اينکه سايتشان مقام بهتری در موتورهای جستجو بدست آورد گاهی کلمات کليدی را چندين بار تکرار می کردند و به عبارتی در رتبه بندی واقعی موتورهای جستجو اختالل ايجاد می کردند ،به همين دليل بعضی از موتورهای جستجو از استفاده اطالعاتی که توسط برچسب metaتدارک ديده می شود خودداری می کنند .ولی به هر حال شما استفاده از اين برچسب را فراموش نکنيد و استفاده از آن را در برنامه کاری خود قرار دهيد. دستور زير توضيحی درباره صفحه شما به فايل HTMLاضافه می کند. " <meta name="description >" content="This page is a tutorials on HTML. دستور زير کلمات کليدی صفحه شما را به فايل HTMLاضافه می کند. " <meta name="keywords >" content="HTML, CSS, JavaScript, VBScript برچسب metaکاربرد های ديگری نيز دارد که به در جای خود راجع به آنها صحبت خواهيم کرد .در اينجا به ذکر يکی از آنها می پردازيم .فرض کنيد شما قبال يک سايت وب با نام youname.comداشتيد و بنا به داليلی می خواهيد از نام جديد yournewname.comاستفاده کنيد درضمن محتويات هر دو سايت مثل هم می باشد در اين صورت نيازی به صرف هزينه اضافه برای هر دو سايت نداريد و کافی است کاربرانی را که به آدرس قبلی شما مراجعه می کنند را به آدرس جديد هدايت کنيد و برای اين کار می توانيد از برچسب metaو از دو مشخصه http-equivو contentبه شيوه زير استفاده کنيد : " <meta http-equiv="Refresh >"content="5;url=http://www.yournewname.com عدد 5که در contentمشاهده می کنيد مدت زمانی است طول می کشد تا کاربر به آدرس جديد منتقل شود و اين زمان بر حسب ثانيه می باشد؛ که اگر از عدد 0استفاده کاربر فورا به آدرس جديد منتقل شود .در ضمن بهتر است لينکی در فايل خود قرار دهيد تا اگر کاربر به طور خودکار به آدرس جديد منتقل نشد بتواند با کليک بر لينک موجود به آدرس جديد برود : >" <a href="http://www.yournewname.com > http://www.yournewname.com</a برچسب <>link اين برچسب بيشتر مورد استفاده CSSمی باشد CSS .که مخفف Cascading Style Sheetsمی باشد خود مبحثی گسترده است و در دوره های آموزشی بعدی مفصال به آن خواهيم پرداخت لذا در اينجا فقط اشاره ای مختصر به آن می کنيم. برای اضافه کردن شيوه های نگارش به تعداد زيادی از صفحات استفاده از يک برگه شيوه نگارش خارجی کار ايده آلی می باشد .يعنی استفاده از يک فايل CSSکه تنها با ويرايش آن می توانيد ظاهر کليه صفحات خود را تغيير دهيد .هر صفحه بايد توسط برچسب < ( >linkکه در سربرگ صفحه قرار می گيرد يعنی داخل برچسب < )>headبه فايل CSSکه شيوه های نگارش در آن تعيين شده اند ،متصل شود. > <head “ <link rel="stylesheet > " type="text/css" href="mystyle.css > </head در مثال فوق مرورگر شيوه های نگارش تعيين شده را از فايل mystyle.cssخواهد خواند و متن فايل را بر اساس آنها قالببندی می کند .يک فايل CSSتوسط هر ويرايشگر ساده متن از مانند برنامه notepadقابل نوشتن است و اين فايل نبايد هيچ يک از برچسب های HTMLرا داشته باشد و فقط بايد شامل دستورات CSSباشد و بهتر است با پسوند css .ذخيره شود .در مثال زير يک فايل CSS نشان داده شده است : } hr {color: sienna } p {margin-left: 20px })" body {background-image: url("images/back40.gif برچسب <>style اين برچسب نيز مورد استفاده CSSمی باشد .به جای آنکه دستورات CSSدر فايلی جدا قرار داده شوند می توانند در داخل فايل HTMLما قرار گيرند. شيوه نگارش داخلی را در داخل سربرگ و توسط برچسب < >styleتعيين می کنيم .مانند مثال زير : > <head >" <style type="text/css } hr {color: sienna } p {margin-left: 20px })" body {background-image: url("images/back40.gif > </style > </head حال مرورگر شيوه های نگارش تعيين شده را می خواند و متن فايل را براساس آنها قالببندی می کند. برچسب <>script از اين برچسب زمانی استفاده می کنيم که بخواهيم دستورات vbscriptيا javascriptو ...را در فايل HTMLخود به کار ببريم، يا اين دستورات را از فايلی ديگر بخوانيم. * به عنوان مثال دستور زير کدهای javaرا از فايل MyScripts.js فراخوانی می کند. >"<script language="javascript" src="MyScripts.js ></script مثال زير کدهای javaرا در HTMLما می نويسد که توسط مرورگر اجرا خواهد شد. >"<script type="text/javascript )"!document.write("Hello World ></script !www.arsanjan.blogfa.com marquee مشخصه behavior این ویژگی رفتار یا نوع حرکت متن یا تصویر را مشخص می کند و مقادیر آن به شرح زیر می باشد: :slide این مقدار موجب می شود تا متن یا تصویر از یک سمت حرکت کند و در سمت دیگر متوقف شود. :scroll این مقدار موجب می شود تا متن یا تصویر از یک سمت وارد شود و از سمت دیگر خارج شود. :alternate این مقدار موجب می شود تا متن یا تصویر به صورت مداوم به چپ و راست حرکت کند. مثال: > <marquee behavior="slide">www.RAYATIS.commarquee <marquee >behavior="scroll">www.RAYATIS.commarquee <marquee >behavior="alternate">www.RAYATIS.commarquee bgcolor . این ویژگی رنگ زمینه را تعیین می کند مثال : <marquee behavior="alternate" bgcolor="lime"> www.RAYATIS.commarquee> direction جهت حرکت متن یا تصویر را مشخص می کند و مقادیر آن به شرح زیر :می باشد right: به سمت راست left: به سمت چپ up: به سمت باال down: به سمت پایین مثال : <marquee behavior="scroll" direction="right"> www.RAYATIS.commarquee> height . را مشخص می کندMARQUEE طول عنصر : <marquee behavior="scroll" direction="up" height="300" bgcolor="#aaddff">www.RAYATIS.commarquee> width . را مشخص می کندMARQUEE عرض عنصر : <marquee behavior="scroll" width="300" bgcolor="#aaddff"> www.RAYATIS.commarquee> hspace را از چپ وMARQUEE میزان فاصله افقی یا حاشیه افقی عنصر .راست تعیین می کند : <marquee behavior="scroll" hspace="50" bgcolor="#aaddff"> www.RAYATIS.commarquee> vspace را از باال و پایینMARQUEE میزان فاصله عمودی یا حاشیه عمودی عنصر .تعیین می کند : <marquee behavior="scroll" vspace="50" bgcolor="#aaddff"> www.RAYATIS.commarquee> loop . تعداد دفعاتی را که متن یا تصویر باید حرکت کند مشخص می کند : <marquee behavior="alternate" loop="3"> www.RAYATIS.commarquee> scrollamount . فاصله بین حرکت قبلی و حرکت بعدی را بر حسب پیکسل تعیین میکند : <marquee behavior="alternate" scrollamount="100"> www.RAYATIS.commarquee> scrolldelay تاخیر زمانی بین حرکت قبلی و حرکت بعدی را بر حسب میلی ثانیه تعیین .میکند : <marquee behavior="alternate" scrolldelay="3000"> www.RAYATIS.commarquee> : یک مثال برای تمام چیزهایی که گفته شد <html> <body> <b> <marquee behavior="slide" direction="right" width="25%" height="30%"><i>In Thei>marquee> <marquee behavior="slide" direction="up" height="30%" width="70" scrollamount="4" hspace="8"><i>Name Ofi>marquee> <marquee behavior="slide" width="25%" height="30%"> <font color="#df0000">Godfont>marquee> b> body> html> درج فایل صوتی افزودن فايل صوتي به زمينه صفحه با اضافه کردن تگ < >bgsoundبه سورس کد صفحه وب ،مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود .اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5به پايين آنرا پشتيباني مي کنند .اين تگ داراي دو خصوصيت src ،براي آدرس دهي فايل صوتي و loopبراي کنترل تکرار دفعات پخش مي باشد. >”bgsound src=”mymusic.mid” loop=”2 < افزودن فايل صوتي بصورت لينک يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ < >aاست که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند .البته در مرورگراينترنت اکسپلورر نسخه 6.0ابتدا پيغامي ظاهر مي شود که اگر دکمه Yesرا بزنيد آن فايل توسط خود مرورگر پخش خواهد شد .در تگ لينک بايد از خصوصيت hrefبراي آدرس دهي استفاده کنيد ،فقط دقت کنيد که پسوندها را درست بنويسيد. >a href=”musics/mysong.wav”> music file </a < فعال فقط 3فرمت Ogg ، MP3و Wavرو میشه استفاده کرد: مثال: >audio src="song.ogg"></audio < که از اسمش معلومه خودش شروع به اجرا میکنه controlsدکمه play/pauseو تایم و volumeرو به شکل زیر نمایش میده: Video فایل های ویدیویی به طور مستقیم، با این ویژگی وFlash Player درصفحه قرار میگیرن و برای نمایش به ! نیازی نیستQuicktime وSilverlight video src="movie.ogg" controls="controls">< ></video شکل اینجاست که مرورگر های قدیمی از این تگ ها پشتیبانی نمیکنن و برای حل این مشکل می تونیم فایل های صوتی و تصویری :رو برای این مرورگر ها به روش قدیمی قرار بدیم < audio src="song.ogg" controls="controls" loop="loop"> We can place a JavaScript audio here! </audio> و < video src="movie.ogg" width="320" height="240" controls="controls"> We can place a flash embedded video here! </video> درج فایل ویدئویی انواع لینک از یک صفحه به صفحه دیگر <a href=“page1.html”>hello</a> از یک بخش صفحه به بخش دیگر از همان صفحه <a href=#section1>computer</a> <a name=section1>this is a computer</a> این کار راbody برای دادن رنگ به لینک ها باید در تگ .کرد عادی: Link فعال: Alink ویزیت شده: Vlink <body Alink=red link=blue Vlink=violet>
کامپیوتر و IT و اینترنت • علوم مهندسی • تکنولوژی
دانلود آموزش HTML
70,000 تومان