تیتر، پاراگراف و روابط خویشاوندی در html
تگ‌های مهم تیترها، پارگراف، و روابطی که بین تگ‌های مختلف html وجود دارد در این مقاله آموزشی نیوسان‌وب با یک مثال عملی ارائه شده است.
قبلا در مقاله آشنایی با برخی تگ‌های مهم html در خصوص برخی تگ‌ها بخصوص تگ‌هایی که در صفحه نمایش داده نمی‌شوند، نکات لازم را خدمت دوستان ارائه کردیم. در ادامه در خصوص برخی دیگر از تگ‌های مهم که در داخل تگ body قرار می‌گیرند و قابلبت به نمایش در آمدن دارند، مطالب تکمیلی را ذکر خواهیم کرد.
تگ پاراگراف در html
تگ پارگراف یگی از تگ‌های مهم html است که با دو قطعه کد باز و بسته شدن <p></p/> محدوده یک پاراگراف را نشان می‌دهد. هر آنچه که بین این دو قطعه کد قرار گیرد، یک پاراگراف به شمار می‌رود. یک body ممکن است چندین پاراگراف داشته باشد که نویسنده مقاله یا محتوای متنی امکان دارد به دلایلی همچون ساختاربندی مناسب از تعدادی ار آنها بهره بگیرد.
قبلا روش شروع کار با visual studio code را گفتیم. یک فولدر خالی بسازید آن را 003 نامگذاری کنید، این فولدر را در visual studio code انتخاب کنید و با کلیک روی New File یک فایل Index.html ایجاد کنید، سپس در داخل ویرایشگر آن فایل، نوع سند را html مشخص کنید و پس از تایپ doc با یک tab، تگ‌های اولیه و پایه‌ای را ایجاد کنید. در تگ title می‌توانید بنویسید HTML Tags که در سربرگ مرورگر برای صفحه جاری شما به نمایش در خواهد آمد. حال به داخل تگ body بروید. یک تگ برای پاراگراف ایجاد کنید و آن را ببندید. می‌توانید بین دو قطعه کد تگ p، یک اینتر بزنید تا به خط بعدی برود. در داخل آن یک متن آزمایشی بنویسید و به این ترتیب، اولین پاراگراف را ایجاد کنید. به محل فایل پروژه بروید و آن را با یک مرورگر بازکنید، هم اکنون متوجه می‌شوید که اولین محتوای متنی خود را موفق شده‌اید ایجاد کنید. برای مثال کدهای زیر را ببینید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags</title>
</head>
<body>
<p>
Hello Newsunweb.com. This is my first paragrap. I am here to learn HTML. Newsunweb.com is a website to learn programming and Web Designing.
</p>
</body>
</html>
خوب دوستان، اولین پاراگراف را ایجاد کردید. البته به جای انگلیسی می‌توانید به شکل فارسی هم بنویسید. اما در صورتی که فارسی می‌نویسید، بهتر ایت به مرورگر اعلام کنید که زبان این صفحه فارسی است. به این منظور می‌توانید در خط دوم در به جای en که معرف انگلیسی است، fa را تایپ کنید: <html lang="fa">.
همانطور که گفتیم در به کار بردن تگ پاراگراف محدودیتی وجود ندارد و هر چند تعداد را می‌توانید به کار ببرید. به این منظور، می‌توانید پس از تگ پایانی پاراگراف کنونی، یک تگ باز دیگر برای پاراگراف ایجاد کنید و سپس آن را ببندید و متنی که می‌خواهید را هم در آن یادداشت کنید.
تگ تیترها
تیترها اهمیت زیادی در صفحات html دارند، در واقع می‌توان گفت که این تیترها هستند که محدوده هر پاراگراف را مشخص می‌کنند و منظور کلی از یک پاراگراف را معین می‌کنند. تیترها از h1 تا h6 در html وجود دارند. تگ h1 تیتر اصلی است و توجه کنید که طبق اصول سئو، تعداد مجاز این تگ در صفحه، همیشه باید یکی باشد. اما تگ‌های h2 تا h6 ممکن است به هر تعدادی در یک صفحه استفاده شوند که استفاده از آنها نیز به ساختار صفحه شما و سطوح مختلف آنها از نظر سرتیتر و زیرمجموعه و همچنین ارتباطات موضوعی بین مطالب شما دارد. توجه کنید که اندازه فونت کلمات به کار رفته در هر تیتر هم با توجه به نوع تیتر، تغییر می‌کند. اما دقت کنید که هرگز برای تغییر فونت کلمات از این تگ‌ها استفاده نکنید، بلکه تنها در عناوین و برای نشان دادن ساختار صحیح متن از آنها بهره بگیرید. این تگ‌ها هم دو بخشی هستند و جمله یا عبارات لازم بین دو قطعه کد آن قرار می‌گیرد. همانطور که حدس زدید، کدهای بالا طبق ساختار صححیح نوشته نشده‌اند که در کدهای بعدی، آن را اصلاح می‌کنیم:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Tags</title>
</head>
<body>
<h1>Why I use Newsunweb.com?</h1>
<p>
Hello Newsunweb.com. This is my first paragrap. I am here to learn HTML. Newsunweb.com is a website to learn
programming and Web Designing....
</p>
<p>
I am going to tell you what I want to lean here ...
</p>
<h2>HTML</h2>
<p>
HTML is the first thing I want to learn here. I have studied ....
</p>
<h2>CSS</h2>
<p>
CSS is the secound thing I will learn on the Newsunweb.com website ...
</p>
<h2>C#</h2>
<p>
After learning HTML and CSS I want to lean C# programming language.
</p>
<h3>What is C#?</h3>
<p>
C# has been designed by Microsoft, they develope and support it ...
</p>
<h3>What can C# do?</h3>
<p>
You can design Web Applications, APIs, Phone and windows applications by C#.
</p>
</body>
</html>
خب همانطور که دیدید، ما توسط استفاده از تگ‌های h و p محتوای خود را تولید کردیم. به کاربرد صحیح تگ‌های h دقت کنید که محدوده هر پاراگراف را مشخص می‌کنند. خروجی آنچه انجام دادیم به صورت زیر است:
روابط خویشاوندی بین تگ‌ها
بین تگ‌ها روابط خویشاوندی قابل تعریف است. برای مثال در مثال بالا تگ html تگ اصلی یا پدر، تگ body و head فرزند هستند. هر یک از تگ‌های اولین سطح موجود در این تگ‌ها، نوه html و به همین ترتیب الی آخر هستند. در داخل تگ body ما چندین تگ معرفی کردیم. h1 هم فرزند، تگ body است و با تگ <p> رابطه برادر و خواهری دارد؛ چرا که در یک سطح هستند. این روابط بعدا در بحث CSS می‌توانند مفید واقع شوند. توجه کنید که بهتر است وقتی در حال یادگیری هستید و برای خوانایی بهتر، رعایت دندانه گذاری یا تورفتگی تگ‌ها را انجام دهید تا با یک نگاه به آسانی بتواندی متوجه روابط بین تگ‌های مختلف شوید. ایجاد فاصله در نتیجه نهایی تاثیری ندارد اما در هر حال برای سرعت بالاتر، باید حذف شود. دوستان عزیز دقت کنند که با زدن shift alt f از صفحه کلید در ویژوال استودیو کد می‌توانند کدها را مرتب کنند.
جمع‌بندی
در این مقاله در خصوص تگ‌های پاراگراف و تیترها در HTML بحث کردیم و نکات لازم را در خصوص آنها بیان کردیم و با یک مثال به توصیف آنها پرداختیم تا روش صحیح و اصولی به کار گیری آنها را در تولید محتوای متنی برای سایت‌ها فرا بگیرید. در نهایت روابط خویشاوندی بین تگ‌ها را برای درک صحیح جریان تگ‌ها در فایل‌های HTML تعریف کردیم که توصیه می‌کنیم برای مطالب مکمل این بخش با ما همچنان همراه باشید که با یک مقاله دیگر در آینده در خدمت شما همراهان نیوسان‌وب خواهیم بود.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.