تگ های قالب بندی متن قسمت یک

تگ های قالب بندی متن قسمت یک

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

معرفی تگ p

با استفاده از تگ p در HTML می توانیم یک پاراگراف را تعریف کنیم یعنی موتورهای جست و جو با دیدن تگ p متوجه می‌شوند که با یک پاراگراف روبه رو هستند ، یک پاراگراف در HTML با تگ آغازین <p> شروع شده و به تگ پایانی <p/> ختم می‌شود.
به مثال زیر توجه کنید :

<p>
    آموزش طراحی سایت 
</p>

خصوصیات تگ p

• تگ p در دسته عناصر block level (بلاکی) جای میگیرد.
• زمانی که شما برای نمایش یک پاراگراف از تگ p استفاده می‌نمایید مرورگرها به صورت خودکار یک فضای خالی در پایین و بالای پاراگراف اعمال می‌کنند که البته شما می‌توانید با استفاده از ویژگی‌های زبان CSS این فضاهای خالی را حذف و یا میزان آن را تغییر دهید.

نکات تکمیلی در مورد تگ p

• تگ p توسط تمامی مرورگرها پشتیبانی می‌شود .
• تگ p را می‌توان در داخل تگ‌های map ، form ، iframe ، div ، dd ، del ، fieldset ، button ، noframes ، center ، blockquote ، applet ، address noscript، object ، ins ،th ، td، li و body به کار برد.

تگ br و تگ nobr در HTML

تگ br چیست ؟ کاربرد تگ br در html چیست ؟ چگونه در یک خط شکستگی ایجاد کنیم ؟ از تگ nobr در html به چه منظوری استفاده میشود؟  اگر به دنبال یافتن پاسخ این سوالات هستید این مقاله آموزشی را از دست ندهید .

1 آموزش طراحی سایت با HTML

1.1 تگ br چیست ؟

1.2 تگ nobr چیست ؟

1.3 نکات تکمیلی در مورد تگ br :

1.4 نکات تکمیلی در مورد تگ nobr :

تگ br چیست ؟

با استفاده از تگ br در HTML می‌توانیم در خط شکستگی ایجاد کرده و به سطر بعدی برویم، تگ br از جمله عناصر تهی به شمار می‌آید و به تگ پایانی نیاز ندارد. شما می‌توانید تگ br را به شکل <br> به کار ببرید.
به مثال زیر توجه کنید :

<p>
    Training br tag <br> and <br> nobr tag
</p>

تگ nobr چیست ؟

تگ nobr در مقابل تگ br قرار دارد و محتوایی که درون این تگ قرار می‌گیرد به هیچ عنوان شکسته نمی‌شود مگر اینکه تگ br درون این تگ قرار بگیرد . این تگ بر خلاف تگ br دارای تگ پایانی هم می‌باشد و به صورت <nobr></nobr> به کار می‌رود .
به مثال زیر توجه کنید :

<p>
    <nobr>Training br tag and nobr tag<nobr>
</p>

نکات تکمیلی در مورد تگ br :

تگ br توسط تمامی مرورگرها پشتیبانی می‌شود .

نکات تکمیلی در مورد تگ nobr :

استفاده از تگ nobr در طراحی سایت ممکن است باعث ایجاد اسکرول افقی در پنجره مرورگر شود پس سعی کنید که از این تگ با احتیاط استفاده نمایید .

تگ hr در HTML

تگ hr در html چیست و چه کابردی دارد ؟ برای رسم خط در html چه راه هایی پیش رو داریم ؟ تغییر رنگ تگ hr به چه صورت امکان پذیر است و چگونه می توانیم استایل های دلخواهی را برای این تگ تعریف کنیم ؟ اگر به دنبال پاسخ این سوالات هستید و قصد دارید با خصوصیات یا صفات تگ hr در html و کاربرد تگ hr در html به صورت جامع و به همراه مثال آشنا شوید این مقاله را به هیچ عنوان از دست ندهید. هم چنین در این مقاله 5 صفت پرکاربرد تگ hr را با هم بررسی خواهیم کرد.

1  معرفی تگ hr

2 صفات تگ hr

3 اهمیت تگ hr در سئو سایت

معفی تگ hr

با استفاده از این تگ در HTML می‌توانیم در صفحات وب خطوط افقی ایجاد نماییم این تگ از جمله عناصر تهی به شمار می‌رود و نیازی به تگ پایانی ندارد شما می‌توانید تگ hr را به شکل </hr> به کار ببرید. البته می‌توان از این تگ به صورت <hr> نیز استفاده نمود که مربوط به نسخه های قدیمی HTML است .
به منظور درک بهتر چگونگی کشیدن خط در HTML به مثال زیر توجه کنید :

<p>
    Training hr tag 
</p>
<hr/>

صفات تگ hr

این تگ دارای صفت‌های (Attributes) مختلف است که هیچ کدام از این صفت‌ها در HTML5 پشتیبانی نمی‌شوند، و همان‌طور که میدانید اخرین نسخه HTML نیز HTML5 می‌باشد. در HTML5 به جای استفاده از این صفت‌ها ، از CSS برای استایل‌دهی و تغییر رنگ و ظاهر تگ hr استفاده می‌کنند.

در جدول زیر لیست صفت‌های تگ hr را مشاهده می‌نمایید.

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

خصوصیات تگ hr در HTML

• تگ hr توسط تمامی مرورگرها پشتیبانی می‌شود .
• تنظیمات پیش فرض CSS بر روی تگ h1 به شرح زیر است

  hr { 
      display: block;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      margin-left: auto;
      margin-right: auto;
      border-style: inset;
      border-width: 1px;
  }
  

• در HTML 4.01، تگ <hr> صرفا نشان دهنده یک خط افقی بود و حالت معنایی نیز نداشت.
• برخلاف بقیه ورژن‌های دیگر HTML در XHTML، تگ <hr> با یک تگ پایانی بسته می‌شود، همانند: <hr />

اهمیت تگ hr در سئو سایت

در HTML5، از تگ <hr> برای جدا کردن دو موضوع در صفحه وب استفاده می‌شود و  می‌توان گفت در نگاه سئو این تگ دارای معنا می‌باشد. در صورتی که تمایل دارید درمورد سئو سایت اطلاعاتی بیشتری کسب نمایید ما شما را به خواندن مقالات آموزش سئو سایت فراز نتورک دعوت می کنیم.

تگ h1 تا h6 در HTML

1  معرفی تگ h1 تا h6

2 صفات تگ h1 تا h6

3 نقش واهمیت تگ h1 تا h6 در سئو سایت

4 نکات تکمیلی در مورد تگ h1 تا h6

معرفی تگ h1 تا h6

از تگ های h1 تا h6 برای ایجاد یک تیتر یا عنوان در HTML استفاده می‌شود، به این تگ‌ها ، تگ‌های heading گفته می‌شود و در دسته‌ی تگ ‌های قالب بندی متن جای می‌گیرند.
تگ های h1 تا h6 بر اساس درجه اهمیت در شش سایز (h1 , h2 , h3 , h4 , h5 , h6) استفاده می‌شوند و درجه اهمیت از h1 به h6 کاهش می‌یابد یعنی تگ h1 دارای بیشترین اهمیت و تگ h6 دارای کمترین اهمیت از دید موتورهای جست و جو است پس سعی کنید در استفاده از تگ ها در طراحی وبسایت خود نهایت دقت را داشته باشید.

برای درک بهتر کاربرد تگ های h1 تا h6 در طراحی سایت به مثال زیر توجه کنید :

<h1>
   Mizfa.com
</h1>
<h2>
   Mizfa.com
</h2>
<h3>
   Mizfa.com
</h3>
<h4>
   Mizfa.com
</h4>
<h5>
   Mizfa.com
</h5>
<h6>
   Mizfa.com
</h6>

صفات تگ h1 تا h6

تگ های heading دارای صفت‌ھای class ،  id ، style ، title ، dir ، lang و align ھستند که در جدول زیر به بررسی صفت های تگ h1 تا h6 خواھیم پرداخت:

بقیه صفت ھا نیز جزء صفات عمومی ھستند که قبلا آنھا را معرفی کرده ایم.

نقش واهمیت تگ h1 تا h6 در سئو سایت

توجه داشته باشید که تگ های h1 تا h6 در سئو و بهینه سازی سایت بسیار اهمیت دارند و برای فهماندن قسمت‌های مهم سایت به موتورهای جست و جو از این تگ‌ها استفاده می‌شود.

نکات تکمیلی در مورد تگ h1 تا h6

• تگ h1 تا h6 توسط تمامی مرورگرها پشتیبانی می‌شوند .
• تمامی مرورگرها به صورت پیش فرض تگ های h1 تا h6 را به صورت درون خطی یا inline level نمایش می‌دهند .

تگ b و تگ strong در HTML

1 معرفی تگ b و تگ strong

2 تفاوت تگ b و تگ strong

3 اهمیت تگ strong در سئو سایت

4 سبک نگارش تگ b و تگ strong

معرفی تگ b و تگ strong

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

برای درک بهتر کاربرد تگ b و strong در طراحی سایت به مثال زیر توجه کنید :

<p> آموزش 
   <b> طراحی سایت </b>
</p>

<p> آموزش 
   <strong> طراحی سایت </strong>
</p>

تفاوت تگ b و تگ strong

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

اهمیت تگ strong در سئو سایت

تگ strong در سئو سایت اهمیت دارد و همانطور که در قسمت تفاوت تگ b و strong اشاره کردیم زمانی که بخواهیم به موتورهای جست و جو بگوییم که محتوایی که ضخیم شده محتوای مهمی است از این تگ استفاده می‌کنیم. برای کسب اطلاعات بیشتر درباره ی سئو و بهینه سازی سایت پیشنهاد می‌کنم مقالات آموزشی سئو سایت فرازنتورک را از دست ندهید .

سبک نگارش تگ b و تگ strong

تمامی مرورگرها به صورت پیش فرض تگ b و strong را با سبک نگارش و یا استایل زیر نمایش می‌دهند که البته شما می‌توانید با استفاده از CSS این سبک نگارش را تغییر دهید .

strong {
    font-weight: bold;
}

b {
   font-weight: bold;
}

خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم در جلسه آینده به معرفی مابقی تگ های قالب بندی متن در HTML می‌پردازیم.

مطالب مرتبط :

1-تاریخچه پیدایش HTML

2-تگ های قالب بندی متن قسمت دوم

3- تگ های قالب بندی متن قسمت سوم

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

جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.

نویسنده: راحله تبریزی