ما با امکانات و طرح جدید برگشتیم ...

معرفی پاراگراف و استایل در HTML

آموزش html

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

پاراگراف در HTML

عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند:

مرورگرها به صورت خودکار به قبل و بعد از یک پاراگراف کمی فضای سفید اضافه می‌کنند.

نمایش HTML

شما نمی‌توانید از نحوه نمایش داده شدن سند HTML به طور قطع مطمئن باشید. نمایشگر‌های بزرگ یا کوچک و پنجره‌های نغییر سایز یافته، نتایج متفاوتی ایجاد خواهند کرد. در HTML شما نمی‌توانید با افزودن فضای بیشتر یا چند خط اضافه در میان کدهایتان خروجی را تغییر دهید. مرورگر در هنگام نمایش صفحه، هرگونه فضا یا خطوط اضافی را حذف می‌کند. یک نمونه از این رویداد را در زیر مشاهده می‌کنید:

تگ پایانی را فراموش نکنید

بیشتر مرورگرها حتی اگر در هنگام نوشتن کدها تگ پایانی را فراموش کنید باز هم HTML را به درستی نمایش می‌دهند:

 

مشاهده
معرفی اصول اولیه و عناصر HTML

مثالی که در بالا آورده شد در بیشتر مرورگرها به درستی کار می‌کند اما بر این اصل تکیه نکنید. فراموش کردن تگ پایانی می‌تواند نتایج پیش‌بینی نشده و یا خطاهایی را به دنبال داشته باشد.

 شکست خط در HTML

عنصر <br> در HTML یک شکست خط را تعریف می‌کند. اگر می‌خواهید بدون ایجاد یک پاراگراف جدید در خط خود شکست ایجاد کرده و به خط بعد بروید از عنصر <br> استفاده کنید:

تگ <br> یک تگ خالی محسوب می‌شود یعنی نیازی به تگ پایانی ندارد.

نمایش شعرگونه

نمایش شعرگونه در سند HTML محتوا را در خطوط تفکیک شده و به صورت جداجدا نمایش می‌دهد که در زیر یک نمونه از آن را مشاهده می‌کنید:

عنصر <pre> در HTML

عنصر <pre> در HTML متن‌های از پیش قالب‌بندی شده را تعریف می‌کند. متنی که داخل عنصر <pre> قرار می‌گیرد با فونتی با عرض ثابت (معمولا Courier) نمایش داده شده و فضا و شکست خط را حفظ می‌کند. در زیر یک نمونه از این کد را مشاهده می‌کنید:

خصوصیت Style در HTML

 مشخص کردن استایل یک عنصر HTML می‌تواند از طریق خصوصیت style انجام شود که دارای اصول چینش زیر است:

مشاهده
چگونه برنامه نویسی را شروع کنیم؟

Property یک خصوصیت از CSS و value یک مقدار CSS است. برای یادگیری CSS حتما به سری مقالات آموزشی که در وب سایت تدریس کده قرار داده شده است مراجعه کنید. چون HTML و CSS لازمه و مکمل یکدیگر هستند.

 رنگ پشت زمینه HTML

خصوصیت background-color در واقع رنگ پشت زمینه را برای یک عنصر HTML تعریف می‌کند. مثال زیر رنگ پشت زمینه صفحه را به آبی تغییر می‌دهد:

رنگ متن HTML

خصوصیت color رنگ متن را برای عنصر HTML تعریف می‌کند:

فونت HTML

خصوصیت font-family در واقع فونتی که باید در یک عنصر HTML به کار رود را تعریف می‌کند:

اندازه متن HTML

خصوصیت font-size اندازه متن را برای هر یک از عنصرهای HTML تعریف می‌کند:

هم ترازی متن HTML

خصوصیت text-align هم ترازی متن افقی را برای یک عنصر HTML تعریف می‌کند که در زیر نمونه کد آن را مشاهده می‌کنید:

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

توسط
تومان