قوانین پینگ پنگ
سلام؛ اگر با بخش های قبلی آموزش قدم به قدم HTML در cutedownloadبا ما همراه بوده باشید حتما می دانید که تا الان اینها را یاد گرفتیم:
مفهوم زبان های برنامه نویسی و نشانه گذاری وب – تعریف کامل زبان HTML – مفهوم تگ ها و انواعشان – نحوه ایجاد یک سند اچ تی ام ال و شروع کار
خب, حالا باید برویم سراغ جدی ترین بحث یعنی معرفی تگ های اصلی.
سلام؛ اگر با بخش های قبلی آموزش قدم به قدم HTML در cutedownloadبا ما همراه بوده باشید حتما می دانید که تا الان اینها را یاد گرفتیم:
مفهوم زبان های برنامه نویسی و نشانه گذاری وب – تعریف کامل زبان HTML – مفهوم تگ ها و انواعشان – نحوه ایجاد یک سند اچ تی ام ال و شروع کار
خب, حالا باید برویم سراغ جدی ترین بحث یعنی معرفی تگ های اصلی.
خب, حالا باید برویم سراغ جدی ترین بحث یعنی معرفی تگ های اصلی.
تگ های عنوان
عنوان ها در html توسط تگ های <h1> تا <h6> نمایش داده می شوند. فرض کنید صفحه اچ تی ام الی دارید و می خواهید در ابتدای صفحه, عنوان آن را بنویسید و در زیرش هم متن توضیحات را. برای ایجاد عنوان کافیست براساس اهمیت آن از تگ های <h1> تا <h6> استفاده کنید.(مهمترین عنوان <h1> و غیرمهمترین عنوان <h6> است. بقیه عناوین به ترتیب اهمیت میتوانند <h4>,<h3>,<h2>یا <h5> باشند.)
حالا وقتی می گوییم “عنوان” دقیقا منظورمان چیست؟ منظورمان از عنوان, همان معنی فارسی اش است. اما با یکسری ویژگی های از پیش تعریف شده که آن را از بقیه متن متمایز می کند. چند تا از این ویژگی ها را در زیر می بینید:
- عنوان ها به صورت پیشفرض با سایز درشت تر و به صورت bold هستند. (<h1> درشت ترین عنوان و <h6> ریز ترین عنوان است)
- گوگل و بقیه موتور های جستجو از تگ های عنوان برای مشخص کردن موضوع صفحه یا مقاله استفاده می کنند. (این مهمترین ویژگی است)
- وقتی عنوان یک صفحه یا مطالب یک صفحه با متن درشت در آن قرار داشته باشد بیننده راحتتر صفحه را مرور میکند و موضوع اصلی آن مطلب را می فهمد.
- …
نمونه ای از یک عنوان:
HTML
<h1>متن نمونه</h1>
توجه: حتما میدانید که کد بالا را باید بین تگ باز و بسته <body> قرار دهید. (کلا کد های همه ی عناصر قابل نمایش در صفحه را بین دو تگ body باید قرار دهید.)
توجه: به هیچ وجه برای Bold کردن متون از تگ های عنوان استفاده نکنید.
توجه: برای داشتن سئوی بهتر, پیشنهاد می کنیم از تگ h1 برای عنوان مطلب و از تگ های دیگر عنوان برای عناوین موجود درون متن مطلب استفاده کنید.
تگ های پاراگراف
برای نمایش پاراگراف (بند) ها از تگ <p> استفاده می کنیم. این تگ هم باید باز و بعد از قرار گرفتن متن در آن بسته شود.
تگ <p> یک خط بعد از خودش را خالی می گذارد. یعنی وقتی یک تگ <p> باز شد و بعد از نوشتن متن درونش, به صورت <p/> بسته شد, پاراگراف بعدی از یک خط پایینتر شروع میشود. به کد زیر و نتیجه اش توجه کنید:
HTML
<p>متن نمونه پاراگراف اول</p> <p>متن نمونه پاراگراف دوم</p>
نتیجه کد بالا:
متن نمونه پاراگراف اول
متن نمونه پاراگراف دوم
اما اگر بخواهید بدون اینکه پاراگراف جدیدی ایجاد کنید, به خط بعدی بروید میتوانید از تگ </ br> استفاده کنید. تگ </ br> یک تگ تهی است. یعنی نیازی به تگ پایان ندارد. نمونه زیر را ببینید:
HTML
<p>متن نمونه<br />پارا<br />گراف اول</p>
نتیجه:
متن نمونه
پارا
گراف اول
نکته: از چند خط بالا احتمالا باید متوجه شده باشید که اچ تی ام ال, متون را همانطور که نوشته می شوند, در مرورگر نمایش نمی دهد. شما اگر متنی را به صورت زیر در یک سند اچ تی ام ال بنویسید:
HTML
<p> متن نمونه پاراگراف اول </p>
به شکل زیر نمایش داده می شود:
متن نمونه پاراگراف اول
برای رفع این مشکل ساده ترین راه همان استفاده از تگ </ br> است. اما روش دیگری هم وجود دارد. توسط تگ <pre> می توانید متون را همانطور که در اچ تی ام ال نوشته می شود در مرورگر نمایش دهید. به نمونه زیر توجه کنید:
HTML
<pre>
متن نمونه
پاراگراف اول
متن نمونه
پاراگراف اول
</pre>
نتیجه:
متن نمونه
پاراگراف اول
متن نمونه
پاراگراف اول
البته همانطور که در نتیجه میبینید فونت متن به شکل خاصی در آمده است.
فرمت دهی به متون
اگر بخواهید متنی را به صورت bold و یا italic نمایش دهید به تگ های فرمت دهی نیاز خواهید داشت. برای نمایش یک متن به صورت bold از تگ <b> یا <strong> استفاده کنید و برای نمایش متن به صورت italic از تگ <i> یا <em> استفاده کنید. توجه داشته باشید که این تگ ها باید حتما در انتها بسته شوند.
نمونه:
HTML
<i> این یک متن ایتالیک است </i> <b> این یک متن بولد است </b> <em> این یک متن ایتالیک است </em> <strong> این یک متن بولد است </strong>
نتیجه:
این یک متن ایتالیک است
این یک متن بولد است
این یک متن ایتالیک است
این یک متن بولد است
همچنین تگ <code> میتواند متون را به صورت کد و با فونت مخصوص کد ها نمایش دهد. به عنوان مثال کد هایی که در این آموزش قرار داده شده اند توسط تگ <code> به این شکل در آمده اند. البته میتوان به آن استایل های دلخواه داد که بعدا به طور مفصل به آن می پردازیم.
تگ های لینک
برای لینک دار کردن یک متن می توانید از تگ <a> استفاده کنید. تگ <a> از جمله تگ هایی ست که باید برای آن خصوصیت هایی را تعیین کرد. لازم به ذکر است که در HTML بعضی از تگ ها, خصوصیت هایی را می پذیرند که این خصوصیت ها ویژگی های آن تگ را تعیین می کنند. خصوصیت ها به شکل زیر و در تگ شروع نوشته می شوند:
HTML
مقدار خصوصیت"=نام خصوصیت"
به طور مثال برای تعیین آدرس لینک ها از خصوصیت href در تگ شروع <a> استفاده می شود. به فرمول زیر توجه کنید:
HTML
<a href="link adress"> متن لینک </a>
فرمول بالا, فرمول کلی ایجاد یک لینک است. در قسمت link adress باید آدرس محلی که میخواهید کاربر با کلیک روی لینک به آن ارجاع داده شود را وارد کنید. در قسمت متن لینک می توانید متن لینک را تعیین کنید. همچنین میتوانید به جای متن از یک عکس یا هر عنصر دلخواه دیگری استفاده کنید.
مثال:
HTML
<a href="http://webtoaster.ir"> وب تستر </a>
نتیجه کد بالا به صورت زیر است:
همانطور که در کد بالا دیدید, ما ابتدا تگ شروع را نوشتیم و درون تگ شروع, خصوصیت href را با مقدار http://webtoaster.ir (که آدرس لینک مورد نظر ماست) تعیین کردیم. سپس متن لینک را بعد از تگ آغاز نوشتیم و در پایان تگ پایان <a/> را قرار دادیم.
توجه: حتما خصوصیت ها را درون دو دابل کوتیشن (“) قرار دهید. اما در بعضی موارد خاص که مقدار خصوصیت خود دارای دابل کوتیشن می باشد مجاز هستید که مقدار خصوصیت را درون دو سینگل کوتیشن (‘) قرار دهید.
شما می توانید برای تگ <a> خصوصیت های دیگری نیز علاوه بر href تعیین کنید. یکی از این خصوصیت ها, title است. توسط این خصوصیت میتوانید کاری کنید که کاربر با آوردن موس روی لینک, پس از مدت کوتاهی متنی را به صورت یک جعبه در کنار لینک مشاهده کند. این متن توسط خصوصیت title مقدار دهی میشود. به کد زیر توجه کنید:
HTML
<a href="http://webtoaster.ir" title="this is a title"> وب تستر </a>
در زیر نتیجه کد بالا را می بینید. موس را روی لینک بیاورید و چند لحظه صبر کنید. نتیجه را ببینید:
در کد بالا به ساختار بندی خصوصیت ها خوب توجه کنید. ببینید که چگونه یک خصوصیت در کنار خصوصیت دیگر قرار میگیرد. این روند می تواند ادامه داشته باشد و خصوصیت های دیگری نیز به آن ها اضافه شود. خصوصیت دیگری که در تگ لینک بسیار مورد توجه است خصوصیت target می باشد. خصوصیت target مشخص می کند که صفحه ی لینک شده چگونه باز شود. آیا با کلیک کردن روی لینک در همان تب به مقصد برود یا در تبی جدید و یا در پنجره ای جدید از مرورگر. به کد زیر توجه کنید:
HTML
<a href="http://webtoaster.ir" target="_blank"> خصوصیت target با مقدار _blank </a> <a href="http://webtoaster.ir" target="_parent"> خصوصیت target با مقدار _parent </a> <a href="http://webtoaster.ir" target="_self"> خصوصیت target با مقدار _self </a> <a href="http://webtoaster.ir" target="_top"> خصوصیت target با مقدار _top </a>
نتیجه را در زیر ببینید. روی هر کدام از لینک ها کلیک کنید تا با عملکرد هرکدام از مقادیر خصوصیت target آشنا شوید. (البته این را هم بگویم با کلیک کردن روی بعضی از این لینک ها, صفحه جدید به جای همین صفحه باز میشود. حواستان باشد!):
خصوصیت target با مقدار _blank
خصوصیت target با مقدار _parent
خصوصیت target با مقدار _self
خصوصیت target با مقدار _top
لینک به یک صفحه ی دیگر یا لینک به بخشی از همان صفحه؟
نکته ای که در استفاده از تگ <a> وجود دارد این است که با استفاده از این تگ میتوان هم به یک صفحه ی خارجی لینک داد و هم به بخشی از همان صفحه ای که لینک در آن قرار دارد. حتی میتوان به بخشی از یک صفحه خارجی هم لینک داد. این امکان توسط خصوصیت name امکان پذیر است. اما اینبار دیگر خصوصیت name را در خود تگ <a> نمی گذاریم. تصویر زیر گویای همه چیز است:
همانطور که در تصویر بالا مشخص است, ابتدا باید مقصد را مشخص کنیم. سپس به مقصدمان لینک دهیم. برای مشخص کردن مقصد کافیست خصوصیت name را با مقداری دلخواه (که در تصویر بالا برابر maghsad است) تعیین کنیم. این خصوصیت باید درون تگ مقصد قرار داشته باشد. در تصویر بالا تگ مقصدمان <h1> است. این تگ می تواند هر چیزی باشد. سپس مقدار خصوصیت href لینکمان را به صورت «مقدار name#» تعیین می کنیم. یعنی بعد از یک علامت # مقدار name ای که برای تگ مقصد تعیین کرده بودیم را قرار می دهیم.
به پایان بخش سوم آموزش قدم به قدم HTML رسیدیم. در قسمت بعدی هم ادامه ی تگ های اصلی html را توضیح خواهیم داد. منتظر قسمت بعدی باشید.
4راز که هکر های شبکه وایرلس نمی خواهند شما بدانید. 
