* احادیث از چهارده معصوم*

خاندان او (رسول خدا) نیکوترین خاندان است... زادگاه او مکه است و هجرت او به مدینه طیبه. در مدینه نام او بلند گردید، و دعوتش به همه جا کشید. او را فرستاد با حجتی پسنده - که قرآن است – و موعظتی که درمان است و دعوتی که جبران کننده ی زیان است.                  الامام علی (ع)- نهج البلاغه، الخطبه 161

به دیدار یکدیگر بروید، و همدیگر را دوست بدارید، و با هم دست دهید و باعث رنجش یکدیگر نشوید.

                                                                                    الامام الرضا (ع)- البحار78/347

درود بر مردم قم : خداوند شهرشان را از باران سیراب کند و برکاتش را بر ایشان فرو فرستد، و بدیها و گناهانشان را به نیکی بدل سازد. آنان اهل رکوع و سجود و قیام و قعودند. مردمانی فقیه و دانشمند و فهمیده اند. هم حدیث فهمند و هم راوی حدیث، و خوش عبادتد.                   الاامام الصادق (ع)-البحار 60/217

خدا همان کسی است که شب را برای شما پدید آورد تا در آن آرام گیرید،و روز را روشنی بخش (قرار داد)، آری، خدا بر مردم بسیار صاحب تفضل است، ولی بیشتر مردم سپاس نمی دارند.                                                                                                                      المومن 61

لازم ترین دانش برای تو آن دانشی است که تو را بر اصلاح دلت راهنمایی کند و تباهیهای آن را به تو نشان دهد.                                                                           الامام الکاظم (ع)- البحار 1/220

رسول خدا نگاههای خود را میان اصحابش تقسیم می کرد و به این و آن یکسان می نگریست.

                                                                                    الامام الصادق (ع)-الکافی8/268

یک نماز در مسجد من با ده هزار نماز در دیگر مسجدها، در پیشگاه خداوند برابری می کند مگر مسجد الحرام که یک نماز در آن با صد هزار نماز برابری می کند.

                                                                                    رسول الله (ص)-ثواب الاعمال80

ای کسانی که ایمان آورده اید، نباید قومی قوم دیگر را ریشخند کند، شاید آنها از اینها بهتر باشند.

                                                                                    الحجرات11

اگر از (عمر)جهان جز یک روز باقی نمانده باشد خداوند بزرگ مردی از اهل بیت مرا بر می انگیزد که آن را آکنده از عدل و داد سازد چنان که از ستم پر شده باشد.              رسول الله (ص)-البحار 51/102

سزاوارترین مردم به فرمانروایی بر این امت، چه در گذشته و چه در حال حاضر کسی است که از همه به پیامبر نزدیک تر، به کتاب خدا داناتر و در دین ژرف نگر باشد.

                                                            الامام علی (ع)-شرح نهج البلاغه لا بن ابی الحدید3/210

و با آنان بجنگید تا فتنه ای بر جا نماند و دین یکسره از آن خدا گردد.

                                                                                    الانفال39

بدانید که قم کوفه ی کوچک است، بدانید که بهشت را هشت در است که سه در آن به سوی قم می باشد. بانویی  از فرزندان من در این شهر در می گذرد که نام او فاطمه، دخت موسی است. و همه ی شیعیانم با شفاعت وی وارد بهشت می شوند.                                                 الامام الصادق (ع)-البحار 60/228

(ای پیامبر) بگو:«زیورهایی را که خدا برای بندگانش پدید آورده، و (نیز) روزبهای پاکیزه را چه کسی حرام گردانیده؟»                                                                 الاعراف32

زبانت را به نرم گویی و سلام کردن(به دیگران) عادت ده، تا دوستدارانت زیاد شوند و بد خواهانت اندک .

                                                                                    الامام علی (ع)-شرح غرر الحکم

من نه خوار کننده ی مومنان که عزت بخش ایشانم. چون دانستم که شما را نیروی (چیرگی) بر آنان نیست، به ناچار امر (خلافت) را واگذار کردم تا من و شما در میان آنان باقی بمانیم، چنان که (خضر9 اندیشمند کشتی را معیوب ساخت تا برای صاحبان آن باقی بماند.                    الامام الحسن (ع)-البحار78/287

هر کس چیزی نداشت که برای کفاره ی گناهانش بدهد، بر محمد و آل او زیاد صلوات بفرستد. زیرا صلوات گناهان را به کلی از بین می برد.                                        الامام الرضا (ع)-تنبیه الخواطر2/156

به جانم سوگند، در جنگ با کسی که مخالفت حق کند، و در گمراهی گام بر دارد، سستی نپذیرم و را نفاق پیش نگیرم.                                                                                  الامام علی (ع)-نهج البلاغه، الخطبه24

از پر خوری بپرهیزید.زیرا تباهی جسم وپیدایش بیماری و سستی در عبادت می شود.

                                                                                    رسول الله(ص)-البحار66/365

دستان خود را پیش و پس از غذا بشویید. زیرا فقر را بر طرف می سازد و بر عمر می افزاید.

                                                                                    الامام الصادق (ع)-البحار66/365

اگر علم و دانش به ستاره ی پروین (دورترین نقطه) آویخته باشد، گروهی از فرزندان فارس (ایرانیان) به آن دست خواهند یافت.                                                                    رسول الله (ص)-کنز العمال11/691

هر که بنایی پیش از نیاز سکونتش بسازد،روز قیامت مکلف شود که آن را (بر دوش خود) حمل کند.

                                                                                    الامام الصادق (ع)-وسائل الشیعه5/338

(امام علی (ع) در فرمان زمامداری مصر به مالک اشتر می فرماید: ) و با این همه بدان که میان بازرگانان بسیار کسان اند که در داد و ستد بیش از اندازه سختگیرند و بخل ورزی ناپسندی دارند و به منظور سود بیشتر کالا را احتکار می کنند و به دلخواه نرخ گران می بندند، و این کار برای توده ی مردم زیانبار و برای حکمرانان عیب و ننگ است. بنابراین از احتکار جلو گیری کن. زیرا که رسول خدا (ص) از آن منع فرموده است.                                                                            الامام علی (ع)-نهج البلاغه، الکتاب53

ای علی تو را به مسواک زدن توصیه می کنم. زیرا که مسواک زدن موجب خوشبویی دهان، خشنودی خداوند، و جلای دیده می شود، و خلال کردن تو را نزد فرشتگان محبوب می سازد، زیرا فرشتگان از بوی دهان کسی که پس از غذا خلال نمی کنددر رنج اند.               رسول الله (ص)-وسائل الشیعه2/15

راستی که در آفرینش آسمانها و زمین، و در پی یکدیگر آمدن شب و روز... و گرانیدن بادها، و ابری که میان آسمان و زمین آرمیده است، برای گروهی می اندیشندواقعاً نشانه هایی (گویا) وجود دارد.

                                                                                    البقره164

بر شما باد رعایت تقوای الهی در نهان و آشکار، و (گفتن) سخن حق در حال خشنودی و خشم، و میانه روی در دارایی و ناداری، و رعایت عدالت درباره ی دشمن و دوست، و کار و عمل در شادابی و کسالت، و خشنودی از (تقدیر) خداوند در سختی و رفاه.                              الامام علی (ع)-البحار77/288

 هر که می خواهد عزیزترین مردم باشد، باید در نهان و آشکارش از خدا پروا دارد.                                                                                                               الامام الرضا (ع)-البحار67/294

از بلاهای کمر شکن، همسایه ای است که اگر کاری نیک (از همسایه خود) ببیند آن را خاموش و پنهان سازد، و اگر کار بدی را از روی مشاهده کند آن رافاش و بر ملا سازد.

                                                                                    الامام العسکری (ع)-تحف العقول487

مبادا فردی از مسلمانان را کوچک شمرده و تحقیر کنید، که کوچک آنان نزد پروردگار بزرگ است.

                                                                                    رسول الله (ص)-مجموعه ورام1/31

هر کس برادرش را پنهانی نصیحت کند بی گمان او را آراسته است، و هر کس آشکارا (و در جمع) نصیحتش کند به یقین به حیثیت او لطمه زده است.                             الامام العسکری (ع)-تحف العقول489

(حنان بن سدیر از پدرش روایت کرده کفت:) به امام باقر(ع) عرض کردم کدام عبادت برتر است؟ فرمود: هیچ نزد خدا محبوب تر از آن نیست که آنچه نزد اوست از او درخواست و طلب شود، و هیچ کس نزد خدای عزوجل منفورتر از کسی نیست که از عبادت او کبر ورزد، و آنچه را نزد اوست درخواست نکند.

                                                                                    الامام الباقر (ع)-مجمع البیان العلوم القرآن 8/495

عمل برادرت را بر بهترین شکل آن حمل کن تا آن گاه که خلاف آن برایت معلوم شود، و هرگز به سخنی که از دهان برادرت خارج می شود و می توانی برای آن محمل خوبی بیابی، گمان بد مبر.

                                                                                    الامام علی (ع)-الکافی2/269

و اما دخترم فاطمه، او سرور زنان عالم از آغاز تا به انجام است.

                                                                                    رسول الله (ص)-تفسیر نور الثقلین1/388

گویا مومنان (واقعی) همان دین پژوهان و اهل اندیشیدن و پند گرفتن هستند. شنیده های دنیوی، گوش آنها را از (شنیدن) یاد خدا، کر نمی کند و رزق و برق دنیا چشم آنان را از یاد خدا کور نمی سازد.

                                                                                    الامام الباقر (ع)-البحار73/36

خدای عزوجل به موسی وحی کرد: ای موسی در هیچ حالی مرا فراموش مکن و به ثروت زیاد شاد مشو، زیرا از یاد بردن من دلها را سخت می کند، و با فراوانی ثروت گناهان هم زیاد می شود.

                                                                                    الامام الصادق (ع)-الکافی8/45

هر که با آرای گوناگون روبرو شود جایگاه های خطا را بشناسد.

                                                                                    الامام علی (ع)-شرح غرر الحکم5/375

ای کسانی که ایمان آورده اید، نعمت خدا را بر خود به یاد آرید، آنگاه که لشگرهایی به سوی شما (در) آمدند، پس بر سر آنان تند بادی و لشگرهایی که آنها را نمی دیدند فرستادیم. و خدا به آنچه می کنید همواره بیناست.

                                                                                    الاحزاب9

شب و روز منتظر ظهور آقایت باش، زیرا خداوند هر آنی درکاری است و هیچ کاری او را از کاری دیگر باز نمی دارد. چنین است خداوند، پروردگار جهانیان، و اوست نگه دار دوستانش و آنان از او بیمناک اند.

                                                                                    الامام الصادق (ع)-البحار98/159

هرگاه بدعتها در میان امتم آشکار شوند بر عالم است که(در برخورد با آنان) دانش خود را آشکار سازد، هر کس چنین نکند نفرین خدا بر او باد.                                                رسول الله (ص)- الکافی1/56

و آنان پیوسته با شما می جنگند-تا اگر بتوانند- شما را از دینتان بر گردانند.

                                                                                    البقره217

باید بهترن امور در نزد تو، متوسط ترین آنها در حق، و فراگیر ترین آنها در عدالت، و جامع ترین آنها به رضایت مردم باشد؛ زیرا غضب عموم، رضایت خواص را از بین می برد، و غضب خواص، در صورت وجود رضایت عموم مردم بخشوده می شود.                             الامام علی (ع)-نهج البلاغه، الکتاب53

ذکر حمد و ثنا، ذکر نفس سخت کوشی و تحمل رنج، ذکر روح بیم و امید، ذکر دل صدق و صفا، ذکر عقل تعظیم و شرم، ذکر معرفت تسلیم و رضا، و ذکر باطن مشاهده و دیدار است.

                                                                                    الامام الباقر (ع)-مشکاه الانوار133

خداوند هیچ مردمی را عذاب نکرد نگر آن گاه که به حقوق برادران تهیدست خود بی اعتنا بودند.

                                                                                    الامام الصادق (ع)-مستدرک الوسائل 12/413

چون پیامبر از غزوه تبوک بازگشت، سعد انصاری از حضرت استقبال کرد، پیامبر با او مصافحه کرد و فرمود:... از چه چیز است تو چنین پینه بسته؟ عرض کرد: ای رسول خدا! من با این ریسمان و بیل کار می کنم و درآمد آن را بر عیالم انفاق می کنم. رسول خدا بر دست او بوسه زد و فرمود: این دستی است که هرگز آتش (جهنم) بدان نمی رسد.                                                         اسد الغابه2/337

آموزش HTML

تمام صفحات وب با نوعی از HTML ساخته می شوند. لذا برای ایجاد وب سایت های پیشرفته یادگیری HTML ضروری می باشد. در این دوره آموزشی سعی شده است که با به کارگیری مثال های فراوان و دوری از هر گونه اضافه گوِیی در سریعترین زمان ممکن توانایی ایجاد صفحات وب بدون نیاز به برنامه ای کمکی در شما ایجاد گردد.

مقدمه ای بر وب و HTML

وب گسترده جهانی

وب گسترده جهانی(www , World Wide Web) که معمولا فقط وب گفته می شود؛ شبکه ای است که تمام رایانه های متصل به آن را در سراسر جهان به هم وصل می کند؛ و تمام رایانه ها در وب می توانند با هم ارتباط داشته باشند.

www چگونه کار می کند ؟

اطلاعات وب در فایلهایی به نام Web Page قرار می گیرند که آنها نیز در رایانه هایی به نام Web Server قرار دارند و رایانه ها برای دیدن صفحات وب از استانداردی ارتباطی به نام HTTP (Hyper Text Transfer Protocol ) استفاده می کنند. رایانه های متصل به وب اطلاعات موجود در Web Page ها را از طریق برنامه هایی با نام مرورگر وب (Web Browser) نشان می دهند. معمولترین مرورگرها که مورد استفاده قرار می گیرند Internet Explorer وNetscape Navigator می باشند.

چگونه مرورگرها صفحات وب را نشان می دهند ؟

همه صفحات وب شامل دستورالعمل هایی برای نمایش توسط مرورگر ها هستند، و مرورگر ها با خواندن این دستورالعمل ها صفحات را نشان می دهند. دستورالعمل های نمایش صفحات وب، برچسبهای HTML
(Hyper Text Markup Language) نامیده می شوند مانند:

 <p>This is a paragraph.</p> 

یک فایل HTML چیست ؟

یک فایل HTML فایل متنی ساده ای شامل برچسب ها (Tag) می باشد؛ که بهتر است پسوند html یا htm داشته باشد و می تواند توسط یک ویرایشگر ساده متن مانند Notepad ساخته شود. برای بهتر روشن شدن مطلب بهتر است یک فایل HTML بسازیم. در Windows برنامه Notepad را اجرا کنید و متن زیر را بنویسید :

<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <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 شما <html> است. این برچسب به مرورگر می گوید که این شروع یک فایل HTML است. آخرین برچسب در فایل شما </html> است. این برچسب به مرورگر می گوید که این پایان یک فایل HTML است. نوشته های بین برچسب <head> و برچسب </head> اطلاعات سربرگ می باشند و در پنجره مرورگر نمایش داده نمی شوند. متن بین برچسب <title> و برچسب </title> عنوان فایل می باشد و در نوار عنوان مرورگر نمایش داده خواهد شد. متن بین <body> و </body> توسط مرورگر نشان داده خواهد شد. همچنین متن بین <b> و</b> به صورت پررنگ نمایش داده می شود.  

نکته ای درباره ویرایشگرهای 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

عنوانها

عنوانها توسط برچسب <h1> تا <h6> ایجاد می شوند که <h1> بزرگترین عنوان و <h6> کوچکترین عنوان را ایجاد می کند. HTML به طور خودکار یک خط خالی قبل و بعد از عنوان اضافه می کند. به مثال زیر توجه کنید.

<html> <body> <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> </body> </html>

پاراگراف

پاراگرافها توسط برچسب <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 قالببندی کنید.

<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_subscript <br> This text contains^superscript </body> </html>

* مثال زیر به شما نشان می دهد که چگونه می توانید یک متن خط خورده و یک متن زیر خط دار را در یک فایل HTML قالببندی کنید.

<html> <body> <del>This text is deleted.</del> <br> <ins>This text is inserted.</ins> </body> </html>

* مثال زیر نشان می دهد که برچسبهای مختلف خروجی رایانه چگونه نمایش داده می شوند.

<html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br> <var>Computer variable</var> </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> <body> <abbr title="United Nations">UN</abbr> <br> <acronym title="World Wide Web" > WWW</acronym> </body> </html>

* مثال زیر نشان می دهد که آدرس را در یک فایل HTML چگونه بنویسیم.

<html> <body> <address> M Nikfazan<br> BOX 16455-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> <body> <cite>This is a citation</cite> <br> <dfn>This is a definition term</dfn> </body> </html>

همانطور که در مثالهای فوق می بینید خروجی بعضی از بر چسبها کاملا مثل هم است و بعضی کار خاصی را انجام نمی دهند. در این موارد گاهی هدف از استفاده این برچسبها تنها مشخص کردن نوع متن برای نویسنده فایل HTML می باشد. به هر حال استفاده از قالبندی های فوق به سلیقه نویسنده فایل HTML است و ضرورتی ندارد که حتما از موارد فوق دقیقا بر اساس کاربرد استفاده شود.

حروف نهادی در HTML

بعضی از حروف مانند > مفهوم خاصی برای HTML دارند، بنابراین از آنها در متن نمی توان استفاده کرد. برای نمایش حروفی مانند > در متن باید از حروف نهادی استفاده کرد. یک حرف نهادی از سه بخش اصلی تشکیل می شود :

 &یک نام نهادی;   

 &#یک عدد نهادی; 

مثلا برای نمایش > در مرورگر باید به جای نوشتن > در فایل HTML باید &lt; یا &#60; را بنویسیم. فایده استفاده از نام به جای عدد اینست که همواره نام بهتر از عدد در خاطر می ماند؛ و ضرر آن اینست که همه مرورگر ها نام های نهادی را پشتیبانی نمی کنند ولی اکثر آنها اعداد نهادی را پشتیبانی می کنند. در ضمن توجه داشته باشید که نام های نهادی به بزرگی و کوچکی حروف حساس می باشند. به عنوان مثال اگر بخواهید عبارت <b>This text is bold</b> در مرورگر نمایش داده شود باید به شیوه مثال زیر عمل کنید.

<html> <body> <p> <b>This text is bold</b> </p> </body> </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

گاهی اوقات می خواهیم در صفحه وب خود آدرس E-Mail خود را در اختیار بینندگان سایت قرار دهیم، که به راحتی می توانیم این کار را با نوشتن آدرس خود مثلا داخل یک پاراگراف عملی سازیم. مانند :

 <p>My E-Mail adress is : you@yourname.com</p>  

اما اگر بخواهیم یک لینک به آدرس E-Mail خود ایجاد کنیم که به طور خودکار یکی از برنامه های مخصوص E-Mail را در رایانه کاربر باز کرده و بعضی از موارد مورد نیاز مانند آدرس و موضوع و... را به طور خودکار در قسمتهای مخصوص خود بنویسد و بدین ترتیب کار کاربر را کم کند، باید از شیوه ای همانند دستور زیر استفاده کنیم :

 <a  

 href="mailto: you@yourname.com?Subject=Hello%20again"> 

 Send Mail</a>  

مثال زیر مطلب را روشن تر خواهد کرد :

<html> <body> <p>This is a mailto link: <a href="mailto: elearning@tehranedu.org?cc=someoneelse@tehranedu.org& bcc=andsomeoneelse2@tehranedu.org& subject=Conference& body=You%20are%20invited%20to%20a%20big%20Conference!"> Send mail!</a> </p> <body> <html>

دستورات فوق را در فایل test.htm ذخیره کرده و آن را باز کنید یا بر روی دکمه مشاهدا خروجی کلیک کنید. اگر بر روی Send mail! کلیک کنید  برنامه Outlook Express باز خواهد شد و همانطور که می بینید تعدادی از موارد به طور پیش فرض توسط شما مشخص شده است.

چند نکته مفید :

تصاویر در 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 می تواند طرز قرار گرفتن یک تصویر در کنار یک پاراگراف را تعیین کند که مثلا تصویر در سمت راست پاراگراف قرار گیرد یا در سمت چپ. به مثال زیر توجه کنید.

<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"  

مثال زیر روش استفاده از برچسب ها و مشخصه های ذکر شده را مشخص خواهد کرد.

<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>

ساخت لینک برای تصویر

شما می توانید با کلیک بر روی هر جای تصویر به آدرس مورد نظر متصل شوید برای اینکار باید از روش زیر استفاده کنید، که در اینجا مثلا با کلیک بر روی تصویر buttonnext.gif به صفحه nextpage.htm خواهید رفت.

 <a href="nextpage.htm"><img src="buttonnext.gif" ></a>  

جدول ها در HTML

جدول ها در HTML توسط برچسب <table> ایجاد می شوند. یک جدول توسط برچسب <tr> به سطرها تقسیم می شود و هر سطر توسط برچسب <td> به خانه های اطلاعاتی تقسیم می شود. یک خانه اطلاعاتی متواند شامل متن، تصویر، فهرست، پاراگراف، فرم، جدول و یا هر چیز دیگری باشد. دو مثال زیر طریقه استفاده از برچسبهای گفته شده را نشان می دهد.

* مثال زیریک جدول حاشیه دارمی باشد که ضخامت حاشیه توسط مشخصه border="1" تعیین شده است.

<html> <body> <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> </body> </html>

* در مثال زیر یک جدول بدون حاشیه نشان داده شده است.

<html> <body> <table> <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>

مشخصه border

اگر شما مشخصه border را تعیین نکنید جدول شما حاشیه نخواهد داشت. گاهی اوقات جدول بدون حاشیه برای طرحبندی صفحه مفید است ولی اغلب اوقات می خواهید که جدولتان حاشیه داشته باشد. برای نمایش جدولی با حاشیه باید از مشخصه border استفاده کنید؛ همانند جدول مثال قبل.

عنوانها در جدول

عناوین ستونها در یک جدول توسط بر چسب <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>

خانه های خالی در جدول

گاهی اوقات ما نیاز پیدا می کنیم که بعضی از خانه های جدول خالی باشند. اگر جدول ما دارای حاشیه باشد و در خانه مورد نظر چیزی ننویسیم (<td></td>) در این صورت جدول ما به صورت زیر دیده می شود.

برای جلوگیری از بهم خوردن حاشیه باید حرف نهادی &nbsp; را بکار ببریم یعنی از <td>&nbsp;</td> به جای <td></td> استفاده کنیم در این صورت جدول به صورت زیر خواهد بود.

مشخصه colspan

برای درک مفهوم این مشخصه و کاربرد آن به مثال زیر توجه کنید.

<html> <body> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html>

مشخصه rowspan

برای درک مفهوم این مشخصه و کاربرد آن به مثال زیر توجه کنید.

<html> <body> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>

مشخصه cellpadding

از این مشخصه برای ساختن فضای خالی بیشتر بین محتویات هر خانه و حاشیه آن استفاده می شود. به مثال زیر توجه کنید.

<html> <body> <table border="1" cellpadding="10"> <tr><td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

مشخصه cellspacing

از این مشخصه برای ساختن فضای خالی بیشتر بین خانه ها استفاده می شود. به مثال زیر توجه کنید.

<html> <body> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html>

چند مشخصه دیگر در مورد جداول

*توسط مشخصه bgcolor می توانید رنگ زمینه جدول یا خانه های آن را تعیین کنید.

<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 می توانید تصویری در پس زمینه جدول یا خانه ها قرار دهید.

<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>  

*مشخصه دیگری که در جدولها کاربرد دارد مشخصه frame است که دارای انواع border ، box ، void ، above ، below ، hsides ، vsides ، lhs، rhs می باشد. سه مثال زیر کاربرد این مشخصه را نشان می دهد.

<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> <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> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table>

<h4>With frame="above":</h4> <table frame="above"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> <h4>With frame="below":</h4> <table frame="below"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table> <h4>With frame="hsides":</h4> <table frame="hsides"> <tr> <td>First</td><td>Row</td> </tr> <tr> <td>Second</td><td>Row</td> </tr> </table>

<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 paragraph.</p></li> <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 مشخص می شوند.

در زیر مثالی ازاستفاده type در فهرست بدون شماره را می بینید.

<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 استفاده کنید (size=40).

<html> <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" name="s" value="male" checked >  

<html> <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 از نوع جعبه انتخاب بنویسید آن جعبه به طور پیش فرض به صورت انتخاب شده خواهد شد.

 <input type="checkbox" name="bike" checked>  

<html> <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

این جعبه همان گونه که در شکل زیر می بینید فهرستی است که یکی از گزینه های آن قابل رویت است و با کلیک کردن روی آن بقیه گزینه ها نیز دیده می شوند. درضمن تنها یکی از موارد آن را می توانیم انتخاب کنیم. این جعبه توسط برچسب <select> مشخص می شود وموارد فهرست نیز توسط برچسب <option> ایجاد خواهند شد. به طور پیش فرض گزینه اول این فهرست انتخاب شده است و اگر بخواهیم که گزینه دیگری از فهرست انتخاب شده باشد باید کلمه selected را به برچسب <option> در گزینه مورد نظر اضافه کنیم. مثال زیر طریقه استفاده را مشخص می کند.

<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>

جعبه 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>

فرم حاشیه دار

توسط برچسب <fieldset> شما می توانید یک حاشیه دور عناصر فرم خود ایجاد کنید و توسط برچسب <legend> می توانید کلماتی را روی قسمت بالایی حاشیه بنویسید.

<html> <body> <fieldset> <legend>Health information:</legend> <form> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> </body> </html>

مشخصه 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>

نکته

قابها (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_a.htm    frame_b.htm    frame_c.htm

*نکته

برچسب <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 کلیک می کنید در قاب دیگر فایل frame_a.htm باز خواهد شد و به همین طریق دیگر لینکها نیز فایل مرتبط را در قاب دوم باز می کنند.

<html> <frameset cols="120,*"> <frame src="contents.htm"> <frame src="frame_c.htm" name="showframe"> </frameset> </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>

برچسب <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>  

 Hello World!  

راه هایی آسانتر برای عیب یابی شبكه ها

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

گام اول : مستند سازی شبكه
در دست داشتن آخرین نقشه های فیزیكی و منطقی شبكه ، كمك شایانی به شناخت وضعیت فعلی شبكه می نماید . با این نقشه ها می توان ادوات مختلف ، پیكر بندی ها ، و آدرس ها راتحت نظارت داشت . ضمن آنكه از این طریق كار عیب یابی آسانتر می گردد.

گام دوم : جمع آوری كلیه اطلاعات و تحلیل خطای پیش آمده
فرض كنید كه اشكال كار می دانید ، آیا می توانید آن را مستند كنید ؟ آیا قبل ازبروز خطا ، هشداری از ایستگاه های كاری صادر نشده است ؟ برای این كه این مرحله را ساده تر كنیئ . می توانید از دستگاه LinkRunner، محصول شركت Fluke Networks استفاده كنید . این ابزار كه به سادگی قابل حمل است می تواند اشكالات اولیه درلایه فیزیكی را نشان دهد . این ابزار می تواند در خدمت تكنسین ها باشد تا در صورتی كه اشكال شبكه ، فراتر از اشكالات معمولی بود ، از متخصصان مجرب تری استفاده گردد. پس در گام دوم ، با استفاده از ابزارهای كمكی به جمع آوری كلیه اطلاعات موجود می پردازیم و اشكالات لایه فیزیكی رابررسی می نماییم .

گام سوم : دامنه مشكل ایجاد شده را محدود كنید
قدم بعدی محدود كردن دامنه مشكل ایجاد شده است . باید یررسی كنیم كه مشكل مربوط به بخشی از شبكه است یا فقط به یك كانیت محدود است ؟ مثلا اگر مشكل مربوط ب هكلانیت است پس به كابل فیزیكی یا ایستگاه كاری محدود می گردد. یعنی پس از جمع آوری اطلاعات،باید آن را به مشكل پیش آمده محدود نماییم .

گام چهارم : مشكل را رفع كنید
پس از محدود كردن دامنه مشكل ، رفع آن آسان خواهد شد . در مورد ادوات سخت افزاری ، معمولا باید آن را تعویض نمود . مثلا تعویض Patch Cable یا تغییر پورت سوئیچ یا تعویض كارت شبكه كلانیت . این گام وقتی تكمیل می شود كه پس از رفع عیب ، شبكه مجددا تست شودتا ازرفع كامل اشكال اطمینان حاصل گردد.

گام پنجم : كارهای انجام نشده را مستند كنید
حالا باید مجددا گام اول را تكرار كنید . یعنی مشكل پیش آمده و نحوه رفع آن را مستند سازی كنید . این كاربر برای مراجعات بعدی بسیار مفید خواهد بود .
اما آیا انجام این دادن همه این مراحل لازم است ؟
گاهی پیش می آید كه مشكلات شبكه ، ناشی از اشكلات سیستم عامل است . غلب تكنسین هایی كه در واحدهای فنی مستقر هستند ، هنگام انجام راهنمایی تلفنی ، به كاربران می گویند كه «یك بار كامپیوترتان را بوت كنید .» این راه حل ، در بعضی موارد مشكل را مرتفع می كند و دیگر نیاز به طی كردن گام های پنج گانه نیست . حسن این كاردر این است كه تكنسین بدون این كه محل كارش را ترك كند ، مشكل را برطرف نموده است .
اما بعضی مشكلات با بوت كردن ساده از بین نمی روند . در این موقع ، در صورتی كه كاربر كامپیو تر بتواند از خط فرمان (Command Prompt) سیستم عامل استفاده نماید ، راهنمایی تلفنی را همچنان می توان ادامه داد . یعنی فرمان IPCONFIG می تواند وجود اتصال فیزیكی را بررسی نماید .
مثلا وقتی PC برای پروتكل DHCPپیكر بندی شده اما آدرس پیش فرض ویندوز (169.254.X.X) را بر می گرداند ، مشخص می شود كه كلانیت نمی تواند با سرورDHCP ارتباط برقرار كند .
یا وقتی یك كامپیوتر پر تابل را به شبكه متصل می كنیم ، بایستی آدرس همان شبكه راداشته باشد . اما آگاهی اوقات DHCP ارتباط برقرار كند .
یا وقتی یك كامپیوتر پرتابل را به شبكه متصل می كنیم ، بایستی آدرس همان شبكه را داشته باشد . اما گاهی گاهی اوقات DHCP، آدرس subnet دیگری را به آن اختصاص می دهد . اكنون كاربر می تواند دودستور C:\>ipconfig/release و C:\>ipconfig/renew را وارد می نماید. یعنی می خواهد كه آدرس lP جدیدی داشته باشد . اگر سیستم پاسخ دهد كه انجام عمل DHCP میسر نیست . آن گاه این احتمال وجو دارد كه كاربر از پیكر بندی lP ااستاتیك استفاده كرده باشد . در این حالت جهت بررسی صحت گزارش ، باید به مستندات شبكه مراجعه نمود .
در حالتی دیگر ، اگركاربر یك آدرس lP را اعلام كند ، باید از طریق ping كردن ، آن بررسی نمود . اگر PC كاربر ، پاسخ مناسب می دهد ، یعنی آ ن كه انجام فعالیت های متداول نظیر باز كردن صفحه وب انجام پذیر است . در غیراین صورت بایستی كامپیوتر را از نزدیك مورد بررسی قرارداد.

بررسی مشكل به صورت حضوری
پس از حضور در محل كاربر ، كار جمع آوری اطلاعات شروع می شود . سؤال اول این است كه انجام كدام عمل باعث بروز مشكل شد ه است . گاهی اوقات پاسخ این سؤال، چندان روشنگرنیست . زیرا كاربرمی گوید كه وی كارخاصی انجام نداده است و همه كارها صورت گرفته در حد كارهای معمولی روزانه بوده است یا آن كه دقیقا می داند چه اتفاقی افتاده ولی ترجیح می دهد درباره آن توضیحی ندهد ، یا مسئوولیت انجام آن را بر عهده نگیرد .
در این مواقع باید كاربر را مطمئن سازید كه توضیح درباره نحوه بروز مشكل به رفع سریع آن كمك خواهد كرد . به غیر از این ها از انجام تغییرات محلی نیز سؤال كنید . مثلا این كه به تازگی دكوراسیون اتاق محل كار تغییر كرده است ی یك برنامه محافظ نمایش جدید نصب شده است یا مواردی از این دست .
بعد از آن كه تا حد ممكن دانسته هایتان را افزایش دادید ، موارد ی كه تلفنی به كاربر گفتید را مجددا خودتان آزمایش كنید . اگر عمل ping به سرور شبكه به درستی انجام می شود یا ادوات شبكه به درستی پاسخ می دهند ، نشان دهنده آن است كه ایستگاه كاری در لایه 3، به درستی به شبكه متصل است و در نتیجه به انجام تست در لایه های پایین تر نیازی نیست . پس باید توجه را به لایه های بالایی شبكه معطوف نمود . اگر این قسمت درست جواب ندهد یعنی این كه باید به سراغ لایه های پایین تر رفت . حالا باید از یك لایه شروع كنید . اگراتصال شبكه قطع باشد ، دستورping این موضوع را به خوبی نشان می دهد . برای دیدن زمان پاسخ (response Time) ، دستور زیزر استفاده می شود : C:\ping-t x x x x
نتیجه حاصله را می توان با استفاده ازTERACERT و PATHPING برای بررسی مسیر ها به سمت device مورد نظر تحلیل نموده است .
Trace route نمودن به شما می گوید كه چگونه در طول مسیر شبكه ، پكت ممكن است از بین برود . یعنی رفع عیب لایه یك شبكه را می توان از همین راه آغاز كرد . دستور C:\>tracert x.x.x.x یا C:\>patping این كار را انجام می دهند.

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

آزمون های مستقیم
1. تست لینك
2. بررسی فعالیت Segmentها
3. استفاده از DHCP به عنوان ابزار تشخیص
4. انجام ping به صورت محلی و راه دور

تست لینك
بعضی از تكنسین های شبكه معتقد ند كه روشن بودن چراغ (LED) روی كارت شبكه نشان دهنده برقرار بودن لینك است . اما این مساله در مورد تجهیزات مختلف ، معانی متفاوتی دارد . در بعضی تجهیزات ، چراغ های لینك ( Link LED) توسط نرم افزارهای مستقر در سیستم میزبان كنترل می شوند و وقتی روشن می شوند كه لایه های بالایی شبكه مشغول فعالیت باشند . بعضی كارت های شبكه چراغ لینك را وقتی روشن می كنند كه ترافیكی روی شبكه در جریان باشد . در نتیجه روشن بودن LED ، دلیل محكمی بر سالم بودن یا سالم نبودن لینك ارتباطی نیست . حتی بعضی از تجهیزات از LEDها برای نشان دادن یك طرفه یا دو طرفه بودن ارتباط (haft or full Dplex) یا نشان دادن سرعت ارتباط (00/10) استفاده می كنند .
برقراری لینك از طریق انجام روندی به نام Negotiation-Auto انجام می شود كه در طی آن ، طرف لینك اطلاعاتی را با یكدیگر تبادل می كنند . این اطلاعات شامل سرعت ارتباط یا یك طرفه / دو طرفه بودن آن می شود . در حین این تبادل ، دو طرف ارتباط قابلیت های یكدیگر را مقایسه می كنند و سعی می كنند ارتباط رابابالاترین سرعت ممكن برقرار نمایند . اگر یكی از طرفین ارتباط نتوانند به درستی خود را پیكر بندی كنند یا درایو های مورد نیاز نداشته باشند . اینارتباط نمی تواند ادامه پیدا كند . آن گاه یا روند فوق مجددا تكرار می گردد و یا ارتباط به كلی قطع می گردد.
وقتی ارتباط در یك شبكه قطع شده است . Link Runner سعی می كند ابتدا ارتباط خودش را با هر یك از طرفین لینك برقرار سازد . مثلا خودش را به كارت شبكه یا سوئیچ ( دو طرف یك ارتباط ) متصل می كند . سپس روند NegotiationـAuto را بااستفاده از استاندارد lEEE 802.3 آغاز می كند . این ارتباط در سطح سخت افزار خواهد بود و توسط نرم افزار كنترل نخواهد شد . پس از انجام این كار ، چراغ سبز رنگ LinkRunner روشن می شود و سرعت و نوع ارتباط ( یك طرفه / دو طرفه ) روی صفحه نمایش دستگاه نشان داده می شود.

با آموزش HTML شما یاد خواهید گرفت چگونه از HTML در ساخت صفحات وب خودتان استفاده کنید.
یادگیری HTML بسیار ساده است و شما از آن لذت خواهید برد.

یک فایل HTML چیست؟

                   HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).

                   یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست

                   بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد

                   یک فایل HTML باید دارای پسوند html. یا html. باشد

                   یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

آیا می خواهید یکبار امتحان کنید؟

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<b> This text is bold </b>
</body>
</html>

فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان  مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

مثال تشریح شده

اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.

پسوند htm. یا html. ?

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

به ویرایشگر های HTML توجه کنید:

شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

پرسش و پاسخ:

س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:\mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.
س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟
ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.
س:از چه مرورگری باید استفاده کنیم؟
ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاسعناصر HTML

پرونده های HTML فایل های متنی هستند که با عناصر HTML ساخته شده اند.عناصر HTML با استفاده از برچسب های HTML تعریف می شوند.

برچسب های HTML

                   برچسب های HTML برای نشانه گذاری عناصر HTML استفاده می شوند

                   بر چسب های HTML توسط دو کاراکتر < و > محاط می شوند

                   این کاراکتر های محاط کننده قلاب نامیده می شوند

                   بر چسب های HTML معمولا بصورت جفت می آیند <b> , <b/>

                   اولین برچسب دوتایی برچسب شروع و دومی برچسب پایانی است

                   متن های بین برچسب ابتدایی و انتهایی محتوای عناصر هستند

                   برچسبهای HTML به حروف کوچک و بزرگ حساس نیستند <b> معادل <B> است.

عناصر HTML

مثال HTML در صفحه قبل را بخاطر بیاورید. این یک عنصر HTML است:

<b>This text is bold</b>
عنصر HTML با یک برچسب شروع ، آغاز می شود:<b>
محتوای عنصر HTML: This text is bold
عنصر HTML با یک برچسب پایانی تمام می شود:<b/>
هدف برچسب <b> این است که تعریف کند عناصر HTML باید بصورت برجسته نشان داده شوند این نیز همچنین یک عنصر HTML است:

<body>
This is my first homepage.<b>This text is bold</b>
</body>

این عنصر HTML با برچسب آغازین <body> شروع و با برچسب پایانی <body/> تمام می شود.
هدف برچسب <body> این است که عناصر HTML را که محتوای بدنه HTML هستند تعریف کند.

چرا ما از برچسب هایی با حروف کوچک استفاده می کنیم؟

ما فقط گفتیم که برچسب های HTML حساس به حروف کوچک و بزرگ نیستند و <B>همان معنی <b>را می دهد.هنگامی که شما به وب گردی می پردازد، متوجه خواهید شد که بیشتر آموزش ها در مثال هایشان از حروف بزرگ برچسب های HTML استفاده می کنند.ما همیشه از برچسب های حروف کوچک استفاده می کنیم. چرا؟
اگر شما می خواهید خود را برای نسل های بعدی HTML آماده کنیدشما باید شروع کنید  و از برچسبهای حروف کوچک استفاده کنید.کنسرسیوم شبکه گسترده جهانی (W3C) در نظریه HTML4 خود برچسب های حروف کوچک را توصیه کرده و XHTML(نسل بعدی HTML) برچسبهای حروف کوچک را خواستار شده است.

عناصر برچسب:

برچسبها خود می توانند شامل عناصری باشند ، عناصر می توانند اطلاعات اضافی در باره عناصر HTML در صفحه شما را فراهم کنند.این برچسب عنصر بدنه را در صفحه شما معرفی می کند:
<body>
با اضافه کردن عنصر <bgcolor>شما می توانید به مرورگر بگویید که رنگ پس زمینه شما باید قرمز باشد مثل این:<"body bgcolor="red>
این برچسب یک جدول HTML را معرفی می کند:<table>. با اضافه کردن عنصر حاشیه شما می توانید به مرورگر بگویید که جدول نباید هیچ لبه و حاشیه ای داشته باشد: <"table border="0>
عناصر همیشه در یک زوج نام/مقدار می آیند، مثل این: نام="مقدار"
عناصر همیشه به برچسب شروع عناصر HTML اضافه می شوند

حالتهای کتیشن ، "قرمز" یا "قرمز"؟

محتوای عناصر باید همیشه در کتیشن ها محدود شوند ، از هر دو حالت کتیشن و  دوبل کتیشن می توان استفاده کرد ولی استفاده از دوبل کتیشن ها متداول تر است. در بعضی موقعیت های نادر مثل هنگامی که محتوای عناصر خود دارای کتیشن هستند  لازم است که از تک کتیشن استفاده کنیم: "Name="john "shotgun" Nelson  های پیشرفته به آخرین نسخه مرورگرها نیاز دارند. برچسب های پایه HTML

مهمترین برچسب در HTML برچسب هایی هستند که سر تیتر ها ، پاراگراف ها و پرش به خط بعد را معرفی می کنند. بهترین راه یادگرفتن HTML کار کردن با مثال هاست.

مثالها

ساده ترین Html
این مثال ساده ترین نمونه html است که در آن، از کمترین برچسب ممکن، استفاده شده است. در این مثال جمله نوشته شده درون برچسب body، نمایش داده می شود. 

پاراگراف ساده
این مثال نشان می دهد، که نوشته داخل برچسب پاراگراف، چگونه نمایش داده می شود.

(مثالهای بیشتر، در انتهای این صفحه آمده است)

 سر تیتر ها

سر تیترها با برچسب های <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 بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

<p> This is a paragraph </p>
<p> This is another paragraph </p>

پرش به خط بعد

برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد.

توضیحات در HTML

برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.

<!--This is a comment-->

توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید.

نکات پایه ای - اطلاعات مفید

هنگامی که شما یک متن HTML می نویسید هرگز نمی توانید مطمئن باشید این متن  در یک مرورگر دیگر چطور نشان داده می شود.تعدادی از مردم صفحه نمایش بزرگ کامپیوتر دارند و تعدادی کوچک. هر بار که کاربر اندازه پنجره را تغییر دهد متن دوباره قالب بندی خواهد شد. هرگز سعی نکنید که با اضافه کردن خطوط خالی و فاصله در متن آن را در ویرایشگرتان قالب بندی کنید.
HTML فاصله ها را از متن حذف می کند، هر تعدادی از فاصله ها تنها  به یک فاصله  تبدیل می شوند.

مقداری اطلاعات اضافی

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

برای وارد کردن یک خط خالی یک عملکرد بد است.بجای آن از برچسب <br>استفاده کنید.(اما از <br> برای ساخت لیست خالی استفاده نکنید ، صبر کنید تا در مورد لیستهای HTML یاد بگیرید)
شما ممکن است متوجه باشید که پاراگراف ها می توانند بدون بستن برچسب <p/> نوشته شوند.نسخه بعدی HTML اجازه نخواهد داد که هیچ برچسب پایانی را جا بیندازید.HTML بطور خود کار یک خط خالی اضافی قبل و بعد از برخی عناصر اضافه می کند مثل قبل و بعد از پاراگراف و قبل و بعد از سر تیتر ها.ما از یک خط افقی (برچسب<hr>) برای جدا کردن بخش های مختلفدرسمان استفاده کرده ایم.

مثالهای بیشتر

پاراگرافهای بیشتر
این مثال رفتار برچسب پاراگراف را با نمایش چند نمونه از آن، نشان می دهد.

سر خط
با استفاده از برچسب سر خط، به ابتدای خط بعد می رویم. این مثال رفتار این برچسب را نشان می دهد.

مشکلات نمایش
با این مثال، متوجه می شوید، در صورتی که از برچسبها استفاده نکنید، صفحه بندی شما، نادیده گرفته می شود.

سر فصل
در این مثال طریق متمایز کردن جملات سر فصل را می بینید.

سر فصل در وسط خط
این مثال نشان می دهد که چگونه می توان،محل نمایش جمله، در خط را تعیین کرد.

خط افقی
این مثال روش نمایش یک خط افقی را نشان می دهد.

توضیحات مخفی
گاهی، نیاز به نوشتن توضیحی درباره html خود دارید. این توضیح باید در حالت نمایش دیده نشود. این مثال روش نوشتن چنین متن هایی را، داخل html، نشان می دهد.

رنگ زمینه
می توانید رنگ زمینه html خود را تعیین کنید. این مثال را ببینید.

برچسب های پایه

موجودیت های HTML

تعدادی از کاراکترها مثل کاراکتر ">" یک معنی خاص در HTML دارندو از این رو نمی توان از آنها در متن ها استفاده کرد. برای نشان دادن علامت کوچکتر از ">" ما باید از یک موجودیت کاراکتر استفاده کنیم.

موجودیت های کاراکتر

تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از ">" که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم.
یک موجودیت کاراکتر سه بخش دارد: یک علامت "&" ، یک موجودیت اسم یا یک علامت "#" و یک موجودیت عددو در نهایت یک ";".
برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;60#& .
فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند.
توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.

فاصله بدون شکست

یکی از موجودیت کاراکترهای پر استفاده در HTML فاصله بدون شکست است. بطور عادی HTML فاصله ها را در متن شما کوتاه خواهد کرد ، اگر شما ده فاصله در متن خود بگذارید HTML 9 تای آن را از بین خواهد برد. برای اضافه کردن فاصله در متنتان ، از موجودیت کاراکتر ;nbsp& استفاده کنید.

موجودیت کاراکترهای پر استفاده

دیگر موجودیت کاراکترهای پر استفاده

پیوندهای HTML

HTML برای پیوند به پرونده های دیگر در وب از فرا پیوندها استفاده می کند.

مثالها

ایجاد فراپیوند
این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.

عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.

(مثالهای بیشتر، در انتهای این صفحه آمده است)

برچسب Anchor و موجودیت Href

HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor

<a href="url"> متنی که نمایش داده می شود </a>

در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.    
این Anchor یک پیوند به html.ir را معرفی می کند:

<a href="http://www.html.ir"> html.ir را ملاقات کنید </a>

خط بالا شبیه این نشان داده خواهد شد :

html.ir را ملاقات کنید

موجودیت Target

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

<a href="http://www.html.ir/" target="_blank"> html.ir را ملاقات کنید </a>

برچسب Anchor و موجودیت نام

موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. هنگامی که ما از یک Anchor نام دار استفاده می کنیم، می توانیم پیوندهایی بسازیم که مستقیما بتواندبه یک بخش خاص در صفحه برود. در ست به جای آنکه بگذاریم  کاربر در صفحه بگردد. در پایین طریقه نوشتن یک Anchor نام دار آمده است.

<a name="lable">متنی که نوشته می شود</a>

از موجودیت نام برای ساخت یک Anchor نام دار استفاده می شود. نام یک Anchor می تواند هر متنی که شما بخواهید باشد.خط زیر یک Anchor نام دار را معرفی می کند.

<a name="tips"> بخش اطلاعات مفید </a>

شما باید توجه کنید که یک Anchor نام دار، در یک حالت خاص نشان داده نمی شود. برای پیوند مستقیم به بخش "Tips" یک علامت "#" و نام آن Anchor را به انتهای آن url اضافه کنید:

<a href="http://www.html.ir/links.html#Tips"> پرش به بخش اطلاعات مفید </a>

یک فرا پیوند به بخش نکات مفید از میان فایل "Links.html" شبیه به این خواهد بود

<a href="#Tips"> پرش به بخش نکات مفید </a>

نکات پایه ای - اطلاعات مفید

همیشه یک علامت "/" به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید

href="http://www.html.ir/links.html"

شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت "/" به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:

href="http://www.html.ir/links.html/"

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

مثالهای بیشتر

ارجاع به فراپیوند، در پنجره جدید
در این مثال، روش ساخت فراپیوندی نشان داده می شود، که در آن، کاربر پس از کلیک روی فراپیوند، صفحه فعلی را از دست نداده و پنجره جدیدی برای نمایش صفحه پیوندی، برای او، باز می شود.

پیوند به محلی در همین متن
فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ فراپیندهای این مثال، چگونگی این کار را نشان می دهند.

شکستن حصار قاب
اگر صفحه شما، داخل یک قاب نمایش داده می شود، فرا پیوندهای آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.

فراپیوند Email
در صورتیکه آدرس فراپیوند شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.

فراپیوند Email (نوعی دیگر)
در این مثال نمونه دیگری از فراپیوند نوع mailto را می بینید.

برچسب Anchor