تگ های کاربردی HTML

نویسنده پوریا ستایش پوریا ستایش
1399/05/03
0
77
زمان مطالعه 8 دقیقه
تگ های کاربردی HTML

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

تگ Body در HTML

یکی از تگ‌ های کاربردی HTML که برای ایجاد یک صفحه HTML استفاده می‌کنیم ، تگ Body است.استفاده از این تک اجباری است. فقط محتوای داخل تگ های body می‌توانند در صفحه نمایش داده شوند. در قطعه کد زیر می‌بینید که به این صورت تگ های body باز و بسته می‌شوند:

<body>

</body>

وقتی که فایل HTML تگ body داشته باشد ، می‌توانید انواع مختلفی از محتوا را برای کاربران نمایش دهید.

<body>
    <p>Hello World!<p>
</body>

تگ عنوان در Html

کارکرد تگ‌های Heading یا عنوان در HTML مشابه عناوین در رسانه‌ها است. در روزنامه‌ها ، عنوان‌ها معمولاً برای جلب توجه خواننده استفاده می‌شوند و تفاوتی بین متن عادی و عنوان ایجاد می‌کنند.

تگ عنوان در HTML

از عنوان‌ها برای توصیف محتوایی که کاربر انتظارش را دارد استفاده می‌شود مثل عنوان فیلم یا مقاله آموزشی مثل همین مقاله که عنوانش «تگ های کاربردی HTML» با تگ عنوان در ابتدای همین صفحه نوشته شده است.

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

  • <h1> - برای عناوین اصلی استفاده می‌شود و سایر عناوین کوچک‌تر، زیر عنوان در نظر گرفته می‌شوند.
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

کد مثال زیر از عنوانی برای جلب توجه خواننده استفاده می‌کند.

<h1>BREAKING NEWS</h1>

خروجی مثل عبارت زیر است. اگر دقت کنید با تگ p کمی تفاوت دارد که دلیل آن بزرگ تر و برجسته بودنش است:

تگ عنوان در HTML

تگ Div در HTML

یکی از محبوب‌ترین تگ‌ها در HTML تگ <div> است. <div> کوتاه شده عبارت division است. Div نگهدارنده ای است که صفحه را بخش‌بخش می‌کند. این بخش‌ها برای گروه بندی عناصر بسیار مفید هستند. به قطعه کد زیر توجه کنید:

<body>
    <div>
        <h1>Why use divs?</h1>
        <p>Great for grouping elements!</p>
    </div>
</body>

<div> می‌تواند شامل هر تگ HTML باشد. به یاد داشته باشید که همیشه برای خوانایی بهتر ، با استفاده از کلید tab برای فرزندان داخل تگ‌ها تو رفتگی ایجاد کنید.

تگ‌های استایلی در HTML

تگ‌ها به‌صورت پیش‌فرض دارای یک سری استایل یا رفتار هستند. می‌توانید متن را با استفاده از تگ های HTML استایل دهید. دو تگ em و strong برای این منظور استفاده می‌شوند.

تگ <em> باعث می‌شود متن به‌صورت کج یا اصطلاحاً italic نوشته شود ، در حالی که تگ <strong> متن را برجسته می‌کند.

تگ <em> به‌طور کلی به‌عنوان تأکید italic ارائه می‌شود. تگ <strong> به‌طور کلی به‌عنوان تأکید متن برجسته ارائه می‌شود.

نگاهی به قطعه کد زیر بیندازید:

<p>
    سلام 
    <strong>کاربر عزیز</strong> 
    <em>
        امیدواریم از این مطلب استفاده کرده باشید
    </em>
</p>

خروجی چیزی شبیه به عبارت زیر است:

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

اگر دقت کرده باشید کلمه «سلام» به‌صورت برجسته و جمله‌ای که داخل تگ <em> است به‌صورت «italic» یا متن کج نوشته شده است.

تگ span در HTML

در مقاله قبلی با تگ پاراگراف آشنا شدید، اگر می‌خواهید متنی را با HTML نمایش دهید ، می‌توانید از تگ پاراگراف یا یک تگ span استفاده کنید.

معمولاً برای متن‌های بلند از پاراگراف و برای متن‌های خیلی کوتاه از span استفاده می‌شود. همچنین کاربرد دیگر span استفاده از آن داخل یک تگ پاراگراف است. کاربرد استفاده از span داخل یک تگ p این است که بعداً به‌وسیله css می‌توانیم استایل مورد نظر را روی span اعمال کنیم.

به هر یک از این عناصر در قطعه کد زیر نگاهی بیندازید:

<div>
    <h1>Technology</h1>
</div>
<div>
    <p>
        <span>Self-driving cars</span>
        They are good!
    </p>
</div>

در مثال بالا ، دو تگ <div> متفاوت وجود دارد.

<div> دوم حاوی <p> به همراه span به محتوای Self-driving cars است. این عنصر عبارت «Self-driving cars» را از بقیه متن در پاراگراف جدا می‌کند. بهتر است وقتی از یک عنصر <span> استفاده کنید که می‌خواهید یک محتوای خاص را درون پاراگرافی هدف قرار دهید.

ویژگی یا Attribute در HTML

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

ویژگی چیست؟

ویژگی‌ها محتوایی هستند که به تگ شروع اضافه می‌شوند. ویژگی‌ها از طریق ارائه اطلاعات، دست ما را برای طراحی با CSS و جاوا اسکریپت باز می‌گذارند.

ویژگی‌ها از دو بخش تشکیل شده اند:

  • نام ویژگی
  • مقدار ویژگی

یکی از ویژگی‌هایی که زیاد استفاده می‌شود «id» یا شناسه است. ما می‌توانیم از ویژگی id برای ایجاد تفاوت بین مطالب استفاده کنیم و وقتی بیش از یک‌بار از یک عنصر مثل div استفاده می‌کنیم ، استفاده از id های منحصر به فرد بسیار کارآمد است.

وقتی یک id را به <div> اضافه می‌کنیم ، آن را در تگ شروع قرار می‌دهیم:

<div id="intro">
    <h1>Introduction</h1>
</div>

برای مشخص کردن قسمت‌های مختلف صفحه به شکل زیر عمل می‌کنیم:

<body>
    <div id="introduction">
        <h2>About</h2>
    </div>
    <div id="media">
        <h2>Media</h2>
    </div>
</body>

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

ساختار درختی HTML

بررسی ساختار HTML به‌شدت به ما کمک می‌کند که در آینده از آن در جاوا اسکریپت و CSS استفاده کنیم. درک ساختار HTML یادگیری جاوا اسکریپت برای شما آسان می‌کند.

HTML یک ساختار درختی دارد. همان‌طور که در تمرین‌های مختلف دیدید ما عناصر را داخل عناصر دیگر قرار می‌دهیم. وقتی یک عنصری درون یک عنصر دیگر قرار بگیرد ، عنصر داخلی فرزند عنصر بیرونی است. از نگاه دیگر عنصر فرزند، داخل عنصر پدر قرار گرفته است.

<body>
    <p>This paragraph is a child of the body</p>
</body>

در مثال بالا ، عنصر <p> داخل عنصر <body> قرار دارد.

عنصر <p> فرزند عنصر <body> در نظر گرفته می‌شود و عنصر <body> پدر محسوب می‌شود.

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

<body>
    <div>
        <h1>Sibling to p, but also grandchild of body</h1>
        <p>Sibling to h1, but also grandchild of body</p>
    </div>
</body>

در مورد ماهیت تگ div در آینده صحبت خواهیم کرد. در اینجا فقط کافی است بدانید در HTML تگی وجود دارد به اسم تگ div، به ویژگی‌ها و کاربردش فکر نکنید.

  • در این مثال ، عنصر <body> پدر عنصر <div> است.
  • هر دو عنصر <h1> و <p> فرزندان عنصر <div> هستند.
  • از آنجا که عناصر <h1> و <p> در یک سطح قرار دارند ، آن‌ها خواهر و برادر محسوب می‌شوند و هر دو نوه عنصر <body> هستند.

همان‌طور که در واقعیت فرزندان ویژگی‌هایی را از والدینشان به ارث می‌برند در HTML نیز این‌گونه است. درک سلسله مراتب HTML بسیار مهم است زیرا عناصر فرزند می‌توانند رفتار را از والدین خود به ارث ببرند. شاید از خود بپرسید مگر عنصر هم رفتار دارد؟ بله هر عنصری دارای رفتاری است که از پیش تعیین شده است و مرورگرها به‌خوبی از آن‌ها آگاه هستند.  به این رفتار سبک یا Style نیز گفته می‌شود. در آینده بیشتر با آن‌ها آشنا خواهیم شد.

در پایان مقاله باید...

با تگ‌های div و span و em و strong و h1 الی h6 آشنا شده باشید. دید خوبی به ویژگی‌ها در HTML داشته باشید. همچنین ساختار HTML را درک کرده باشید.

اگر سؤال یا نظری دارید خوشحال می‌شویم در قسمت نظرات عنوان کنید.