آموزش HTML مقدماتی؛ معرفی پاراگراف و استایل در HTML
•
اگر تا این درس با سری مقالات آموزش HTML همراه بودید، با مقدمات و اصول HTML، عناصر، خصوصیات و عناوین آن آشنا شده‌اید. در درسنامه امروز قصد داریم به معرفی دو بخش مهم در یک سند یعنی پاراگراف و استایل در HTML بپردازیم. همان‌طور که می‌دانید صفحاتی که در وب توسط HTML ایجاد می‌کنیم نیاز به ظاهری زیبا هم دارند تا مخاطب ما به سوی خواندن و درک مطلبی که قصد انتقال آن را داریم جلب شود. مطالب توسط پاراگراف به بخش‌های مختلف تقسیم شده و توسط استایل در HTML دارای ظاهری زیبا می‌شوند.
پاراگراف در HTML
عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>مرورگرها به صورت خودکار به قبل و بعد از یک پاراگراف کمی فضای سفید اضافه می‌کنند.
نمایش HTML
شما نمی‌توانید از نحوه نمایش داده شدن سند HTML به طور قطع مطمئن باشید. نمایشگر‌های بزرگ یا کوچک و پنجره‌های نغییر سایز یافته، نتایج متفاوتی ایجاد خواهند کرد. در HTML شما نمی‌توانید با افزودن فضای بیشتر یا چند خط اضافه در میان کدهایتان خروجی را تغییر دهید. مرورگر در هنگام نمایش صفحه، هرگونه فضا یا خطوط اضافی را حذف می‌کند. یک نمونه از این رویداد را در زیر مشاهده می‌کنید:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>تگ پایانی را فراموش نکنید
بیشتر مرورگرها حتی اگر در هنگام نوشتن کدها تگ پایانی را فراموش کنید باز هم HTML را به درستی نمایش می‌دهند:
<p>This is a paragraph.
<p>This is another paragraph.مثالی که در بالا آورده شد در بیشتر مرورگرها به درستی کار می‌کند اما بر این اصل تکیه نکنید. فراموش کردن تگ پایانی می‌تواند نتایج پیش‌بینی نشده و یا خطاهایی را به دنبال داشته باشد.
شکست خط در HTML
عنصر <br> در HTML یک شکست خط را تعریف می‌کند. اگر می‌خواهید بدون ایجاد یک پاراگراف جدید در خط خود شکست ایجاد کرده و به خط بعد بروید از عنصر <br> استفاده کنید:
<p>This is<br>a paragraph<br>with line breaks.</p>تگ <br> یک تگ خالی محسوب می‌شود یعنی نیازی به تگ پایانی ندارد.
نمایش شعرگونه
نمایش شعرگونه در سند HTML محتوا را در خطوط تفکیک شده و به صورت جداجدا نمایش می‌دهد که در زیر یک نمونه از آن را مشاهده می‌کنید:
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</p>عنصر <pre> در HTML
عنصر <pre> در HTML متن‌های از پیش قالب‌بندی شده را تعریف می‌کند. متنی که داخل عنصر <pre> قرار می‌گیرد با فونتی با عرض ثابت (معمولا Courier) نمایش داده شده و فضا و شکست خط را حفظ می‌کند. در زیر یک نمونه از این کد را مشاهده می‌کنید:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>بیشتر بدانید:
- HTML چیست و چه کاربردی دارد؟
خصوصیت Style در HTML
مشخص کردن استایل یک عنصر HTML می‌تواند از طریق خصوصیت style انجام شود که دارای اصول چینش زیر است:
<tagname style="property:value;">Property یک خصوصیت از CSS و value یک مقدار CSS است. برای یادگیری CSS حتما به سری مقالات آموزشی که در وب سایت لیداوب قرار داده شده است مراجعه کنید. چون HTML و CSS لازمه و مکمل یکدیگر هستند.
رنگ پشت زمینه HTML
خصوصیت background-color در واقع رنگ پشت زمینه را برای یک عنصر HTML تعریف می‌کند. مثال زیر رنگ پشت زمینه صفحه را به آبی تغییر می‌دهد:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>رنگ متن HTML
خصوصیت color رنگ متن را برای عنصر HTML تعریف می‌کند:
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>فونت HTML
خصوصیت font-family در واقع فونتی که باید در یک عنصر HTML به کار رود را تعریف می‌کند:
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>اندازه متن HTML
خصوصیت font-size اندازه متن را برای هر یک از عنصرهای HTML تعریف می‌کند:
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>هم ترازی متن HTML
خصوصیت text-align هم ترازی متن افقی را برای یک عنصر HTML تعریف می‌کند که در زیر نمونه کد آن را مشاهده می‌کنید:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>آموزش دو بخش دیگر از زبان نشانه‌گذاری HTML هم به پایان رسید. توصیه می‌کنیم برای یادگیری ساده و گام به گام این زبان حتما از درس اول آموزش HTML مقدماتی شروع کرده و گام به گام با آموزش‌ها پیش بروید. در مقاله بعدی با آموزش سه بخش دیگر از فاکتورهای HTML همراه شما هستیم تا بتوانید به درستی مراحل مقدماتی طراحی سایت را پیش ببرید
منبع : لیداوب