وبلاگ شخصی مهدی کاشانی – آموزش: آموزش مفاهیم HTML (جلسه سوم)

سلام دوستان. به قسمت سوم از آموزش زبان HTML خوش آمدید. در این قسمت میخوام نحوه ساخت سرتیتر ها (Headings) در سایز های مختلف رو بهتون آموزش بدم.

سرتیتر ها (Headings)

هدینگ ها از نظر سایز با برچسب های <h1> تا <h6> تعریف میشوند و دارای دو تگ شروع و پایانی می باشند که تگ <h1> مهمترین تیتر و تگ <h6> کم اهمیت ترین تیتر را معرفی میکند.

کد:

<!DOCTYPE html>
<html>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

</body>
</html>

نکته: مرورگر ها به صورت خودکار قبل و بعد از سر تیتر ها مقداری فضای خالی (Margin) ایجاد میکنند.
اگر از هدینگ ها در صفحه وب خود استفاده میکنید، آن ها را فقط برای تیتر ها استفاده کنید نه برای بزرگتر کردن و یا بُلد (Bold) کردن متن. موتور های جستجو از هدینگ ها برای فهرست کردن ساختار و محتوای صفحات وب شما استفاده میکنند. از آنجا که کاربران از سرتیتر ها برای سطحی خوانی مطالب صفحه شما استفاده میکنند، استفاده از هدینگ ها جهت نمایش ساختار متون ضروری است.

پاراگراف ها

ابتدا کد زیر را در ++Note Pad (یا هر ویرایشگر متنی دیگه که از آن استفاده میکنید) کپی کنید و آن را با فرمت html. ذخیره کنید تا نتیجه را ببینید:

کد:

<!DOCTYPE html>
<html>
<body>

My first page is done,
and I like it!

</body>
</html>

خواهید دید که فاصله دلخواه شما ایجاد نشده و تمام متن در یک خط نمایش داده میشود. باید بدانید که در html برای ایجاد یک متن در خط جدید دکمه Enter بر روی کیبوردتان نتیجه دلخواه را برای شما رقم نخواهد زد و برای رسیدن به نتیجه دلخواه باید از پاراگراف ها استفاده کنید.
پاراگراف ها در زبان HTML با تگ <p> تعریف می شوند و دارای تگ آغازین و پایانی می باشد. توجه داشته باشید که فراموش کردن تگ پایانی و نبستن آن ممکن است نتایج غیر قابل پیش بینی را برای شما به وجود آورد. حال اگر کد بالا را با استفاده از پاراگراف ها تعریف کنید نتیجه دلخواه شما حاصل خواهد شد.

کد:

<!DOCTYPE html>
<html>
<body>

My first page is done,
<p>and I like it!</p>

</body>
</html>

پرش به خط بعد (Line Breaks)

اگر کد قبلی را امتحان کرده و نتیجه را دیده باشید، متوجه یک فاصله مابین دو خط خواهید شد. اگر نخواهید که بین خطوطتان این فاصله ایجاد شود، راه حل دیگری غیر از پاراگراف بندی نیز وجود دارد که به آن، لاین برِیک گفته می شود و تگ آن به صورت <br> نمایش داده میشود. توجه داشته باشید که این تگ از نوع تگ های منحصر بفرد (Unique Tags) می باشد و تگ پایانی ندارد و نیاز به بستن آن نیست.

کد:

<!DOCTYPE html>
<html>
<body>

My first page is done,
<br>and I like it!

</body>
</html>

خط افقی

اگر میخواهید ما بین محتوای صفحات وب خود یک خط افقی ایجاد کنید تا مطالب را از هم جدا کنید، میتوانید از تگ <hr> استفاده کنید. این تگ هم مانند تگ لاین بریک، از نوع تگ محصر بفرد یا یونیک تگ می باشد و تگ پایانی ندارد.

کد:

<!DOCTYPE html>
<html>
<body>

<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>

</body>
</html>

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

فعلا خدانگهدار…