آموزش HTML – کار با متون و آشنایی با خصوصیات (۳)

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

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

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

تگ‌های عنوان – H1 … H6

تگ‌های عنوان یک مجموعه ۶ موردی از تگ‌هایی است که به ما کمک می‌کنند تا عنوان‌های متنی را در صفحه ایجاد کنیم. چرا ۶ مورد هستند؟ سوال خوبی است. به مثال روزنامه بازگردید. شما می‌توانید عنوان‌های مختلفی را ببینید، برخی از آن‌ها بزرگ‌تر هستند و برخی کوچکتر، پس سطح بندی یا بهتر است بگوییم درجه‌بندی شده‌اند.
تگ‌های عنوان عبارت هستند از موارد زیر:

کدهای بالا را در فایل test1.html که در جلسه پیش ساختیم «در بین تگ‌های body» قرار بدهید و آن‌ را اجرا بکنید. حال می‌توانید مشاهده کنید که تگ‌ها با شماره کوچکتر،‌ متنی با اندازه بزرگ‌تر تولید می‌کنند.

تگ hr

از تگ hr برای کشیدن یک خط افقی استفاده می‌شود. این تگ یک تگ Self Closing است به این معنا که تگ بسته ندارد.
بیایید یک مثال ترکیبی از استفاده تگ پاراگراف، عنوان،‌ شکست خط و خط افقی را مشاهده کنیم.

کدهای بالا را در یک ویرایشگر قرار داده و در یک فایل با پسوند html ذخیره نمایید. بعد از آن فایل را با مرورگر باز کنید.

خاصیت‌ها یا Attributes

قبل از اینکه مستقیما راجع به خاصیت‌ها صحبت کنیم بیایید یک مثال کلی از خاصیت‌ها را بیان کنیم. دو انسان کامل از نظر جسمی را در نظر داشته باشید. این دو انسان هر دو پا دارند، دست دارند، چشم دارند و… . اما این انسان‌ها کاملا شبیه همدیگر نیستند. هر کدام از این افراد یکسری صفات منحصر به فرد برای خودشان را دارند. ممکن است یکی از آن‌ها صبور و دیگری کم طاقت باشد و یا اینکه یکی مهربان و دیگری رفتار خشنی داشته باشد.
تگ‌های HTML نیز دقیقا به همین صورت هستند. شما ممکن است دو تگ H1 را در صفحه داشته باشید اما این موارد می‌توانند صفات متفاوتی داشته باشند.
صفات و خصوصیات به تگ‌های HTML این قابلیت را می‌دهند تا کارهای بیشتری انجام دهند و کارایی بالاتری داشته باشند. برای تعریف صفات در HTML به صورت زیر می توانید کار بکنید:

برای مثال یکی از خاصیت‌هایی که بسیار استفاده می‌شود خاصیت class است که ما بعدا در رابطه با آن نیز صحبت می‌کنیم. اما برای اضافه کردن آن به تگ‌های مختلف می‌توانیم به صورت زیر عمل کنیم:

مقدار value برای هر کلاس به صورت دلبخواه است و هر مقداری را می‌توان در آن قرار داد.
اما قبل از اینکه این بحث را خاتمه دهیم یک موضوع مهم دیگر نیز وجود دارد که باید به آن اشاره کنیم:
ما دو دسته از خاصیت‌ها را داریم. خاصیت‌های همگانی و خاصیت‌های انحصاری.
خاصیت‌های همگانی به آن دسته از خاصیت هایی اشاره دارد که برای تقریبا تمام تگ‌ها استفاده می‌شود. برای مثال class یک خاصیت همگانی است که می‌شود از آن در تگ‌های متفاوت استفاده کرد.
خاصیت‌های انحصاری به خاصیت‌هایی گفته می‌شود که برای یک یا چند تگ محدود استفاده می‌شود. برای مثال خاصیت method تنها برای تگ form استفاده می‌شود و مورد استفاده تگ‌های دیگر قرار نمی‌گیرد.