تگ های پایه ای HTML
تگ های پایه ای HTML
در این بخش شما را با تگ های پایه ای آشنا می کنم. اجازه بدین با تگ پاراگراف شروع کنیم.
تگ پاراگراف یا
از این تگ برای قرار دادن پاراگراف در صفحه استفاده می کنیم.
[html]
<!DOCTYPE html>
<html>
<head>
<title>اولین صفحه اینترنتی من</title>
</head>
<body>
من در حال یادگیری اچ تی ام ال هستم
با تمرین می تونم موفق بشم!
</body>
</html>
[/html]
اگر فایل را ذخیره و مرورگر را رفرش کنید، نتیجه زیر را مشاهده می کنید:
در این مثال با استفاده از تگ p دو پاراگراف تعریف کرده ایم.
تگ های هدینگ h1 تا h6
در HTML 6 نوع تگ heading داریم.
- h1
- h2
- h3
- h4
- h5
- h6
در واقع هر کجای صفحه که نیاز باشد از تیتر استفاده کنیم، بایستی تیتر را داخل یکی از شش تگ هدینگ قرار دهید.
اگر بخواهیم از یک تیتر اصلی در صفحه استفاده کنیم بایستی از تگ h1 استفاده کنیم. به عنوان مثال اگر بخواهیم صفحه اصلی یک وب سایت خبری را در نظر بگیریم، از h1 به این صورت استفاده خواهیم کرد:
[html]
<!DOCTYPE html>
<html >
<head>
<title>روزنامه</title>
</head>
<body>
<h1>روزنامه طلوع شرق</h1>
</body>
</html>
[/html]
فایل را ذخیره و مرورگر را رفرش کنید:
حالا می توان از تگ h2 برای نمایش دسته بندی خبرها استفاده کرد.
[html]
<body>
<h1>روزنامه طلوع شرق</h1>
<h2>اخبار اقتصادی</h2>
<h2>اخبار ورزشی</h2>
<h2>اخبار سیاسی</h2>
</body>
[/html]
خروجی شبیه زیر خواهد بود:
در نظر داشته باشید که گوگل به متنی که داخل هر تگ هدینگ قرار داده اید وزن به خصوص می دهد. هر چقدر عدد هدینگ کمتر باشد، وزن آن بیشتر است. مثلا تگ h1 وزن بیشتری نسبت به h2 دارد. حالا ممکن است سوال کنید دقیقا منظور از وزن چیست؟
در سئو سایت (سئو = بهینه سازی سایت برای موتور های جستجو) بایستی همواره این نکته را در نظر داشت که می خواهید صفحات شما بر اساس چه کلمات کلیدی در گوگل ایندکس شوند. در واقع می خواهید گوگل وب سایت شما را بر اساس چه کلمات کلیدی شناسایی کند؟
یک راه شناساندن کلمات کلیدی هدینگ ها هستند. در این صفحه کلمه کلیدی “روزنامه طلوع شرق” در تگ h1 قرار گرفته. این به این معنی است که گوگل این صفحه را بیشتر با کلمات کلیدی “روزنامه طلوق شرق” میشناسد تا “اخبار سیاسی” یا “اخبار ورزشی” یا “اخبار اقتصادی”
تمرین
به عنوان تمرین، صفحه زیر را با استفاده از تگ p و هدینگ ها طراحی کنید:
جواب تمرین
برای کوتاه تر شدن کد، فقط محتویات تگ body نمایش داده شده است.
[html]
<body>
<h1>روزنامه طلوع شرق</h1>
<h2>اخبار اقتصادی</h2>
<h4>رشد ۲۷ درصدی سپرده‌های بانکی</h4>
آمارهای بانک مرکزی …
بیشترین مبلغ سپرده‌ها …
<h2>اخبار ورزشی</h2>
<h2>اخبار سیاسی</h2>
</body>
[/html]
همانطور که میبینید از تگ h4 برای نمایش تیتر خبر و از دو تگ p برای نمایش محتویات خبر استفاده شده است.
نکته: همانطور که متوجه شدید، نمایش تگ ها بر اساس ترتیبی است که تایپ شده اند. در این مثال ابتدا محتویات تگ h1 نمایش داده می شود، سپس h2، بعد از آن h4 و …
راست چین کردن محتویات صفحه در html
صفحه ما به زبان فارسی طراحی شده است. بنابراین لازم است متن صفحه راست به چپ باشد. برای اینکار باید ویژگی راست چین شدن را برای تگ head در نظر بگیریم. این ویژگی dir نام دارد. dir مخفف direction (جهت) است.
[html]
<html dir=”rtl”>
[/html]
همان طور که میبینید به تگ html ویژگی ای به نام dir و با مقدار rtl نسبت داده ایم. rtl مخفف شده right to left است. بنابراین کد اضافه شده به این معنی است:
چیدمان این صفحه راست به چپ باشد
حالا اگر فایل را ذخیره و مرورگر را رفرش کنید، مشاهده خواهید کرد که چیدمان صفحه به صورت راست به چپ نمایش داده می شود.
تگ bold – b
از این تگ برای ضخیم کردن متن استفاده می شود. به عنوان مثال در تمرین قبل، اگر بخواهیم کلمات “تیر 98” که در پاراگراف اول قرار گرفته اند را bold (ضخیم) کنیم، می توانیم کلمه تهران را ما بین تگ باز و بسته b قرار دهیم:
همانطور که مبینید کلمه تهران به صورت ضخیم نمایش داده می شود. البته قرار دادن تهران ما بین تگ باز و بسته b کمی سخت است. به دلیل اینکه از زبان فارسی و انگلیسی قرار است در یک خط استفاده شود.
بهترین راه این است که notepad را باز کنید، عبارت زیر را در آن تایپ کنید:
<b>تهران</b>
سپس آنرا از notepad کپی کرده، به VS Code بیایید و جایگزین کلمه تهران کنید.
تگ italic – i
از این تگ برای کج کردن متن استفاده می شود. i مخفف italic است. فرضا اگر بخواهید کلمه تهران را به صورت کج نمایش دهید، می توانید این کلمه را داخل تگ <i> به این صورت قرار دهید:
</i>تهران<i>
تگ
