ورود / ثبت نام
هر سایتی نیاز به نمایش متن دارد. در این نوشته تگهای مربوط به متن را به شما آموزش میدهیم. در توضیحات هر تگ نمونه کد و خروجی هر کد نمایش داده شده است که با دقت در آن بهتر می‌توانید این آموزشها را دنبال کنید.
تگ عنوان (h1 - h6)
HTML شش سطح برای عناوین سایت در نظر گرفته است.:
<h1> , <h2> , <h3> , <h4> , <h5> , <h6>
با کلیک بر روی هر کدام از تبهای زیر توضیحات هر تگ را ببینید
برای عنوان اصلی سایت از این تگ استفاده کنید
برای زیر عنوانهای سایت از این تگ استفاده کنید
اگر سایت شما نیاز به زیرعنوان های بیشتر با اندازه های کوچکتر داشته باشد می‌توانید از <h3> یا <h4> یا <h5> یا <h6> استفاده کنید.
در واقع <h1> برای مهمترین عنوان و <h6> برای عنوان با کمترین اهمیت استفاده می‌شود
نمونه کد:
<h1> This is a Main Heading </h1>
<h2> This is a level 2 Heading </h2>
<h3> This is a level 3 Heading </h3>
<h4> This is a level 4 Heading </h4>
<h5> This is a level 5 Heading </h5>
<h6> This is a level 6 Heading </h6>
خروجی کد:
This is a Main Heading
This is a level 2 Heading
This is a level 3 Heading
This is a level 4 Heading
This is a level 5 Heading
This is a level 6 Heading
تگ پاراگراف (p)
برای ایجاد پاراگراف، کلمات تشکیل دهنده آن را بین تگ آغازین <p> و تگ پایانی </p> قرار دهید.
نمونه کد:
<p>
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
</p>
خروجی کد:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است.
در واقع طراحان سایت با استفاده از این متنِ آماده به راحتی برای طرح های خود متن انتخاب میکنند و خود را درگیر اینکه چه متنی برای صفحه خود انتخاب کنند نمی‌شوند.
علت دیگر استفاده از متن نامهوم لورم ایپسوم می‌تواند این باشد که وقتی فردی به طرح شما نگاه می‌کند ممکن است کلمات و جملات با معنی متن حواسش را پرت کند و ناخودآگاه جملات متن را دنبال کند و از بررسی طرح اصلی غافل شود
تگ بولد و ایتالیک <b> <i>
برای نمایش محتوای به صورت Bold (تو پر و برجسته) از تگ <b> استفاده میکنیم برای نمایش محتوای به صورت Italic (مورب) از تگ <i> استفاده کنید.
نمونه کد:
<p>
لورم ایپسوم متن <b>ساختگی با تولید سادگی نامفهوم</b> از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود <i>ابزارهای کاربردی</i> می باشد.
</p>
خروجی کد:
لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.
تذکر: در خروجی بالا کلمه ابزارهای کاربردی باید به صورت مورب نمایش داده شود که به اشتباه به صورت معمولی نمایش داده می‌شود. چنانچه در vscode یا سایر ادیتورها این کد را امتحان کنید خروجی این کلمه به این صورت است:
ابزارهای کاربردی
تگ <sub> و <sup>
تگ <sup> برای عملیات ریاضی در به توان رساندن عددی استفاده می‌شود. در واقع کلمه مربوطه را کمی بالاتر از جمله می آورد .
تگ <sub> برای عملیات ریاضی مثل اندیس یا پائین نویس استفاده می‌شود در واقع کلمه ی مربوطه را کمی پائین تر از جمله می آورد
نمونه کد:
<p>
a <sup> 2 </sup> + b <sup> 2</sup> = c <sup> 2 </sup> + 1
</p>
<p>
f(x) = A<sub> 1 </sub> + A <sub> 2 </sub> + 1
</p>
خروجی کد:
a 2 + b 2 = c 2 + 1
f(x) = A 1 + A 2 + 1
با استفاده از این تگ ها در html میتوان عملیات های ریاضی ، پاورقی و … را نوشت.
تگ <br> و <hr>
برای شروع پاراگراف یا عنوان جدید ، در یک سطر جدید ، از تگ <br> استفاده میکنیم و برای جداسازی مطالب یا بخش های یک وبسایت با استفاده از یک خط افقی ، از تگ <hr> استفاده میکنیم
نمونه کد:
<p>
لورم ایپسوم<br>
متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ <br>
و با استفاده از طراحان گرافیک است.
</p>
<hr>
<p>
حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
</p>
خروجی کد:
لورم ایپسوم
متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ
و با استفاده از طراحان گرافیک است.
حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد
با استفاده از این تگ ها در html میتوان عملیات های ریاضی ، پاورقی و … را نوشت.
تگ <em> و <strong>
دو تگ strong و b از نظر ظاهری هیچ تفاوتی با هم ندارند اما از نظر معنایی تگ strong نشان می‌دهد که محتوای این تگ از اهمیت بیشتری برخوردار است
به طور مشابه تگهای i و em از نظر ظاهری تفاوتی با هم ندارند اما از نظر معنایی تگ em تاکیدی بر محتوای درون تگ خود دارند.
نمونه کد:
<strong>This text is important!</strong>
<br>
<b> This is a bold text </b>
خروجی کد:
This is a bold text
در واقع با قرار دادن محتوای با اهمیت در تگ strong و em به رباتها و موتورهای جستجو کمک می‌کنید که موضوع و اهمیت کلیدواژه‌های سایت شما را بهتر ایندکس‌گذاری کنند و به این شکل سئوی سایت خود را بهبود ببخشید
تفاوت تگ em و i چیست؟ از نظر ظاهری هیچ تفاوتی بین تگهای strong و b نیست. اما همانطور که گفته شد اگر محتوایی که میخواهید در سایت نمایش دهید با اهمیت است این محتوا را در تگ strong قرار میدهید. اما محتوای با اهمیت چیست؟ فرض کنید سایت فروش لباس دارید و میخواهید کلمه لباس را در سایتتان بولد کنید. بهتر است کلمه لباس را در تگ strong قرار دهید که موتورهای جستجو بهتر متوجه اهمیت این کلمه در سایت شما شوند. اما اگر به هر دلیلی بخواهید در سایتتان کلمه موبایل را بولد کنید با توجه به اینکه موبایل ارتباطی با محتوای اصلی سایت شما ندارد این کلمه را در تگ b قرار دهید.
دقیقا همین توضیحات را برای em و i نیز در نظر بگیرید که em تگی برای نمایش محتوای با اهمیت در سایت شماست.
برای مشاهده سایر تگهای مربوط به متن، کتاب زیر را به صورت رایگان دانلود کنید
مطالب این صفحه مفید بود؟
میتونی روی عکس کلیک کنی و کتاب آموزش HTML رو همین الان رایگان دانلود کنی
دوست داری طراحی سایت یاد بگیری؟
دوره های پیشنهادی دانشگاه برنامه نویسان:
