آموزش قدم به قدم HTML – بخش سوم: معرفی تگ های اصلی

جمعه ۶ آذر ۱۳۹۴

آموزش قدم به قدم HTML - بخش سوم: معرفی تگ های اصلیReviewed by جواد نبوی on Nov 27Rating: 5.0

آموزش قدم به قدم HTML

سلام؛ اگر با بخش های قبلی آموزش قدم به قدم HTML در وب تستر با ما همراه بوده باشید حتما می دانید که تا الان اینها را یاد گرفتیم:

مفهوم زبان های برنامه نویسی و نشانه گذاری وب – تعریف کامل زبان HTML – مفهوم تگ ها و انواعشان – نحوه ایجاد یک سند اچ تی ام ال و شروع کار

خب, حالا باید برویم سراغ جدی ترین بحث یعنی معرفی تگ های اصلی.

تگ های عنوان

عنوان ها در html توسط تگ های <h1> تا <h6> نمایش داده می شوند. فرض کنید صفحه اچ تی ام الی دارید و می خواهید در ابتدای صفحه, عنوان آن را بنویسید و در زیرش هم متن توضیحات را. برای ایجاد عنوان کافیست براساس اهمیت آن از تگ های <h1> تا <h6> استفاده کنید.(مهمترین عنوان <h1> و غیرمهمترین عنوان <h6> است. بقیه عناوین به ترتیب اهمیت میتوانند <h4>,<h3>,<h2>یا <h5> باشند.)

حالا وقتی می گوییم “عنوان” دقیقا منظورمان چیست؟ منظورمان از عنوان, همان معنی فارسی اش است. اما با یکسری ویژگی های از پیش تعریف شده که آن را از بقیه متن متمایز می کند. چند تا از این ویژگی ها را در زیر می بینید:

  1. عنوان ها به صورت پیشفرض با سایز درشت تر و به صورت bold هستند. (<h1> درشت ترین عنوان و <h6> ریز ترین عنوان است)
  2. گوگل و بقیه موتور های جستجو از تگ های عنوان برای مشخص کردن موضوع صفحه یا مقاله استفاده می کنند. (این مهمترین ویژگی است)
  3. وقتی عنوان یک صفحه یا مطالب یک صفحه با متن درشت در آن قرار داشته باشد بیننده راحتتر صفحه را مرور میکند و موضوع اصلی آن مطلب را می فهمد.

نمونه ای از یک عنوان:

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 را توضیح خواهیم داد. منتظر قسمت بعدی باشید.

آموزش قدم به قدم HTML بخش اول

آموزش قدم به قدم HTML بخش دوم

آموزش قدم به قدم HTML بخش چهارم


این مطلب تمام توسط وب تستر تهیه و نوشته شده است. لطفا کپی رایت را رعایت کنید!

تبلیغات

نویسنده (مدیر سایت)

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

6 دیدگاه برای “آموزش قدم به قدم HTML – بخش سوم: معرفی تگ های اصلی”

  1. محمد رسول گفت:

    سلام ، فیلم های آموزشی تاثیر بیشتری ندارند؟

    1. جواد نبوی گفت:

      سلام.تاثیرش بیشتر که هست. اما فعلا امکانش رو نداریم. اگه این سبک آموزش قابل فهم نیست یا ضعفی داره میتونید به ما بگید تا برطرفش کنیم یا آموزش ها رو کاملتر کنیم.

  2. مهمان گفت:

    سلام لطفا آموزش های قدم به قدم و تصویری قرار بدید شما فقط متن قرار دادید و یه سری کد این که فایده نداره باید آموزش ها به صورت تصویری باشه که برای همه قابل فهم باشه

    1. جواد نبوی گفت:

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

  3. سعیده گفت:

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

    1. جواد نبوی گفت:

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *