بعد از آشنایی با مقدمات html در جلسه اول دوره، آموزش کار با متن در html اولین مبحثی هست که به اون می‌پردازیم. یه صفحه وب شامل عناصر مختلفی مثل متن، عکس، ویدیو، صوت و… هست اما اونچه توی صفحات وب متداول تر هست متنه. به همین دلیل کارمون رو با آموزش کار با متن در html شروع می‌کنیم.
اگه از جلسه اول دوره مفهوم تگ رو به یاد داشته باشید، می‌دونید که برای نمایش عناصر مختلف توی یه صفحه وب از تگ‌های مختلف استفاده می‌کنیم. هر تگ ویژگی‌ها، خوصیات و کاربردهای مخصوص به خودش رو داره بنابراین وقتی در حال آموزش تگ‌ها هستید، هر تگ رو با دقت یاد بگیرید تا بعدها بتونید بهترین انتخاب رو برای پیاده‌سازی صفحات وب مورد نظرتون داشته باشید.
تگ‌های مربوط به کار با متن در html (پیاده‌سازی):
اولین دسته از تگ‌های مربوط به کار با متن در html، تگ‌هایی هستن که بهمون کمک میکنن یه متن رو توی صفحه وب نشون بدیم. این تگ‌ها، باتوجه به متنی که قراره نمایش بدیم متفاوتن که در ادامه یکی یکی اونها رو بهتون توضیح میدم.
ساده‌ترین حالت برای نمایش متن و کار با متن در html اینه که توی تگ body متن مورد نظرمون رو تایپ کنیم?. به همین راحتی?. حتما الان با خودتون میگید اینهمه مقدمه چینی کردی که اینو بگی؟ اینو که خودمون می‌دونستیم?. صبر کنید عجول نباشید. من گفتم این ساده‌ترین راهه ولی نگفتم که روش مناسبی هست.
در واقع این بدترین روش برای کار با متن‌ها هست. چون در این حالت شما صرفا یه متن رو در صفحه وب نمایش می‌دید اما هیچ اطلاعاتی راجع به این متن به موتورهای جست و جو نمی‌دید و این ضربه مهلکی به سئو سایتتون وارد میکنه. کاربر به عنوان یک انسان با دیدن شکل و شمایل صفحه میتونه متوجه بشه کدوم قسمت متن عنوان هست و کدوم قسمت عنوان نیست. همچنین میتونه بفهمه شما روی کدوم قسمت متن تاکید داشتید و روی کدوم قسمت‌ها نه. اما موتور جست و جو گر چنین درکی نداره و تنها معیار رتبه‌دهی اون تگ‌های استفاده شده هست. بنابراین توی کار با تگ‌های مربوط به متن دقت کنید.
حالا که این نکته مهم رو متوجه شدیم بریم سراغ تگ‌ها.
تگ‌های h1 تا h6 در کار با متن در html:
تگ‌های خانواده h مربوط میشن به نمایش عناوین توی صفحه وب که از h1 تا h6 شماره گذاری میشن. هرچی شماره h کمتر باشه از اهمیت بیشتری برای موتور جست و جو گر برخورداره. یعنی متنی که توی تگ h1 می‌نویسید نسبت به متنی که توی تگ h2 نوشته شده از اهمیت بیشتری برخورداره. به مثال زیر دقت کنید
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
همونطور که می‌بینید توی این مثال متن‌های Heading 1 تا Heading 6 توی تگ‌های h1 تا h6 نوشته شدن. توی این مثال Heading 1 نسبت به Heading 2 از اهمیت بیشتری برای موتور جست و جو برخورداره. پس شما فقط برای نمایش متن‌های که خیلی براتون مهمن و روشون تاکید دارید از این تگ‌ها استفاده می‌کنید. خروجی این مثال رو هم با هم ببینیم که این شکلیه!.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
دوستان در نظر داشته باشید که به هیچ عنوان اندازه متن رو برای استفاده از این تگ‌ها ملاک قرار ندید. که مثلا اگه یه متن بزرگ نیاز داشتید بیاید و با استفاده از h1 اون رو نمایش بدید بلکه معیارتون فقط و فقط اهمیت اون متن باشه. بعدها با استفاده از Css یاد می‌گیریم اندازه و شکل و شمایل متن‌ها رو تغییر بدیم.
? یه نکته مهم دیگه در مورد تگ‌های خانواده h اینه که هر صفحه وب فقط و فقط باید یدونه تگ h1 داشته باشه. یعنی هر صفحه فقط یدونه عنوان اصلی داره و در غیر اینصورت سایتتون رتبه منفی از گوگل دریافت میکنه که اصلا برای سئو سایتتون خوب نیست.
تگ p در کار با متن در html:
بعد از تگ‌های خانواده h نوبت میرسه به تگ p که مختص نمایش پاراگراف‌ها هست. البته این جمله به این معنی نیست که فقط وقتی متن شما در حد یه پاراگراف باشه می‌تونید از این تگ استفاده کنید بلکه تگ p برای نمایش همه متن‌های معمولی در صفحه وب مناسبه.
برای مثال توی همین مطلب آموزشی که الان دارید می‌خونید، این متن‌هایی که زیر عناوین نوشته شدن در واقع به کمک تگ p پیاده‌سازی شدن. به مثال زیر دقت کنید.
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>
خروجی این کد به شکل زیر هست
This is a paragraph.
This is a paragraph.
This is a paragraph.
تگ label در کار با متن در html:
این تگ برای نمایش یه متن معمولی که کم اهمیت‌تر از تگ p هست استفاده میشه. کاربرد این تگ بیشتر توی فرم‌ها هست که وقتی به آموزش فرم‌ها در html برسیم، این تگ رو به طور کامل بهتون توضیح میدم. اما برای اینکه فعلا متوجه بشید این تگ چی هست، به تصویر زیر نگاه کنید. عبارت نام دانش جو، متنی هست که با استفاده از تگ label نمایش داده شده. این تگ بیشتر برای انتساب یک متن به یکی از اجزا فرم مثل کادر ورود متن استفاده میشه.
تگ span در کار با متن در html:
تگ span معمولا برای نشانه گذاری قسمتی از متن استفاده میشه. برای مثال فرض کنید که توی صفحه وب متنی دارید که به رنگ مشکی و ایتالیک هست، اما قصد دارید قسمتی از این متن آبی و bold باشه. یعنی استایل متفاوتی به اون اعمال کنید. در چنین مواردی می‌تونید از تگ span استفاده کنید. به مثال زیر توجه کنید.
<!DOCTYPE html>
<html>
<body>
<h1>The span element</h1>
<p>My mother has <span style=”color:blue;font-weight:bold”>blue</span> eyes and my father has <span style=”color:darkolivegreen;font-weight:bold”>dark green</span> eyes.</p>
</body>
</html>
حالا به خروجی این تکه کد دقت کنید. همونطور که می‌بینید کلمه blue و کلمه dark نسبت باقی متن استایل متفاوتی دارن و برای این کار از تگ span استفاده شده.
My mother has blue eyes and my father has dark green eyes.
تگ‌های مربوط به کار با متن در html (استایل‌دهی):
تا اینجای کار با تگ‌هایی آشنا شدیم که بهتون کمک می‌کرد یه متن رو توی صفحه وب نشون بدید. علاوه بر این تگ‌ها، یه سری تگ‌ها هستن که بهمون کمک میکنن رنگ، سایز و در کل استایل متن‌ها رو تغییر بدیم. البته همینجا به عنوان یه نکته بهتون بگم که این تگ‌ها امروزه تقریبا اصلا استفاده نمیشن و راه حل بهتر اینه که استایل‌ها رو با استفاده از Css به تگ‌های html اعمال کنیم. اما لازمه برای تسلط به کار با متن در html با این تگ‌ها هم آشنا باشید و اگه جایی دیدید یا شنیدید بدونید این تگ‌ها چی هستن و چه کاری انجام میدن.
من اینجا به طور مختصر این تگ‌ها و کارایی‌شون رو بهتون معرفی می‌کنم.
تگ u : برای اعمال خاصیت underline به یک متن استفاده میشه.
تگ i : برای اعمال خاصیت ایتالیک به یک متن استفاده میشه.
تگ b و strong : برای اعمال خاصیت bold به یک متن استفاده میشه.
تگ strike : برای اعمال حالت خط خوردگی به یک متن استفاده میشه.
این درس رو خوندم که چی بشه؟!
توی این درس کار با متن در html رو آموزش دیدیم. می‌دونم الان حتما تو این فکر هستید که چرا همه چی اینقد بی رنگ و لعاب و خشکه. صبر داشته باشید کم کم یاد می‌گیرید آیتم‌های دیگه‌ای رو هم وارد صفحه html خودتون بکنید. در ادامه و بعد از اتمام این دوره با یاد گرفتن Css می‌تونید صفحات واقعی طراحی کنید و وارد دنیای وب بشید پس در این راه صبور باشید و حتما حتما تمرین کردن رو یادتون نره.
موفق و پیروز باشید?. قسمت‌های بعدی این دوره آموزشی رو دنبال کنید.
