آموزش HTML به زبان ساده-قسمت پنجم:تگ های متنی

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

معرفی تگ های متنی

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

معرفی تگ <p>

حرف p بر گرفته از حرف اول کلمه‌ی Paragraph به معنی “بند” است. تعریف دقیق پاراگراف به صورت زیر ارائه شده است.

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

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

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

See the Pen dybKmqw by amir (@amir5250) on CodePen.0

پس تا اینجا متوجه شدیم که فاصله های بیش از یک عدد و همچنین Enter هیچ تاثیری بر فاصله های بین کلمه های درون یک تگ <p> ندارند. برای اینکه بتوانید فاصله بین متن‌ها را به شکل دلخواه بنویسید باید از یکی از روش های زیر استفاده کنید.

روش اول: استفاده از تگ <pre>

نام این تگ از واژه preformatted به معنی”پیش فرمت شده” گرفته شده است و باعث می‌شود تا متن شما دقیقا همان گونه که درون تگ های متنی نوشته شده است، نمایش داده شود. از این تگ معمولا برای نوشتن شعر استفاده می‌شود چرا که اگر چند بیت شعر را درون یک تگ paragraph قرار دهیم، همه‌ی مصرع های آن پشت سر هم قرار می‌گیرند. این عنصر دارای تگ بسته نیزمی‌باشد. قطعه کد زیر نمونه ای از تگ <pre> است.

[

See the Pen yLBqPbe by amir (@amir5250) on CodePen.

روش دوم:استفاده از عبارت ;nbsp&

برای اینکه بتوانیم از چند فاصله پشت سر هم استفاده کنیم، می‌توانیم از عبارت‌ رزرو شده nbsp& استفاده کنیم. این عبارت برگرفته از کلمه Non-Breaking Space به معنی”فاصله ای که به خط بعد نرود” می‌باشد. این عبارت را می‌توانیم درون تگ های متنی به کار ببریم. دقت کنید که فقط تگ های متنی پذیرای این عبارت می‌باشند. زیرا این عبارت یک عنصر فاصله و عضوی از یک متن است. برای متوجه شدن این موضوع به کادر زیر توجه کنید.

[codepen_embed height="265" theme_id="0" slug_hash="pozZpoe" default_tab="html,result" user="amir5250"]See the Pen pozZpoe by amir (@amir5250) on CodePen.0

روش سوم:استفاده از تگ <br>

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

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

See the Pen XWrBzGe by amir (@amir5250) on CodePen.0

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

تگ های متنی <i> و <em>

این دو تگ که برگرفته از حرف اول کلمات italic و emphasized هستند به مورب کردن متن‌ها کمک می‌کنند. هر دو تگ دارای یک تگ باز و یک تگ بسته هستند. اما این دو تگ یک تفاوت جزئی نیز دارند. کلمه emphasized به معنای “تاکید شده” است و موتور های جستجو عبارت درون این تگ را یک کلمه مهم تلقی خواهند کرد. در حالی که تگ <i> تنها به مورب کردن می‌پردازید. در واقع می‌توان گفت از تگ <em> برای تاکید بر یک کلمه یا یک جمله استفاده می‌شود. هر چند می‌توان تمام متن خود را درون این تگ قرار دهیم اما بهتر است از این کار اجتناب شود. و برای کج کردن متن ها فقط از تگ <i> استفاده کنیم.

برای درک بهتر این موضوع کد های زیر را نگاه کنید.

See the Pen YzKvagb by amir (@amir5250) on CodePen.0

دیدید که هر دو تگ یک استایل را به متن ها می‌دهند اما در عمل این دو تفاوت هایی دارند.

تگ های متنی <b> و <strong>

متن هایی که بین این دو تگ قرار می‌گیرند هر دو یک ظاهربه خود می‌گیرند. هر دو به ضخیم کردن متن می‌پردازند. تگ <b> برگرفته از حرف اول کلمه bold به معنای لغوی “جسور” است اما این کلمه در نگارش به معنی “ضخیم” است. از این تگ، تنها برای زیباسازی متن ها استفاده می‌شود. در حالی که تگ <strong> علاوه بر اینکه به ضخیم کردن متن کمک می‌کند به مهم سازی آن متن نیز کمک می‌کند. پس متنی که درون تگ <strong> قرار می‌گیرد متن بسیار مهمی است.

برای شناختن این تگ ها به کد های زیر نگاه کنید.

See the Pen mdbKLPJ by amir (@amir5250) on CodePen.0

استفاده همزمان از چند تگ متنی

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

See the Pen PoYaepG by amir (@amir5250) on CodePen.0

برای نوشتن تو در توی تگ ها، باید تگ های باز و بسته عنصر فرزند درون تگ های باز و بسته عنصر والد خود قرار بگیرد. برای مثال دراولین نوشته کادر بالا تگ های باز و بسته <i></i> درون تگ های باز و بسته <p></p> قرار گرفته اند و تگ های باز و بسته <strong></strong> درون تگ های باز و بسته <i></i> قرار گرفته‌اند. پس در نتیجه می‌توانیم بگوییم که عنصر <strong> فرزند عنصر <i> است. و عنصر <i> نیز والد عنصر <strong> می‌باشد.

دیگر تگ های متنی

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

See the Pen JjPZvVo by amir (@amir5250) on CodePen.0

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

در استایل نوشته شده، ما direction به معنی “جهت” را نوشتیم. سپس در جلوی آن، عبارت rtl که مخفف واژگان Right To Left است را نوشتیم تا جهت صفحه ما و در نتیجه همه‌ی تگ های متنی را برابر راست به چپ قرار دهیم.

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