سلام دوستان. به قسمت چهارم از آموزش زبان HTML خوش آمدید. همانطور که وعده داده بودم در این قسمت در مورد چگونه Bold و Italic کردن متن صحبت خواهیم کرد به اضافه آشنایی با تگ کامنت و تگ فونت.

قالب بندی متون با استفاده از HTML

زبان HTML از تگ هایی نظیر <b> و <i> برای قالب بندی و فُرمتینگ (Formatting) خروجی های ما استفاده میکند. به این تگ ها، تگ های قالب بندی یا فُرمَتینگ تگ (Formatting Tags) اطلاق میشود.
همانطور که مشخص است، تگ <b> برای بُلد کردن متون و از تگ <i> برای ایتالیک کردن یا کج کردن متون استفاده میشود.
خوب است بدانید که دو تگ دیگر در زبان HTML وجود دارد که همان کار دو تگ بالا را انجام میدهند که یکی تگ <strong> است که مانند تگ <b> متن شما را بُلد می کند و دیگری تگ <em> است که همان کار <i> را انجام میدهد یعنی متن شما را کج میکند.به مثال زیر توجه فرمایید:

کد:

<!DOCTYPE html>
<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>

</body>
</html>

یکبار کد بالا را امتحان کنید. آیا تفاوتی میان دو تگ <strong> و <b> یا دو تگ <em> و <i> مشاهده کردید؟
توجه: تگ هایی که تا به اینجا گفته شد همگی تگ پایانی دارند!

تگ فونت

اگر به سایت ها با دقت نگاه کنید، متون بسیاری رو با رنگ ها و اندازه های مختلف خواهید دید. در همین متن بالا کلمه “توجه” را با رنگ قرمز میبینید. حتما میخواهید بدونید که در کد های HTML چه اتفاقی میفته که خروجی رو به رنگ ها و سایز های مختلف نشون میده. با به وجود آمدن زبان CSS کمتر کسی دیگه از تگ <font> برای قالب بندی متن و رنگ و لعاب دادن به آن استفاده میکند و اکثر این کار ها در CSS انجام میشود. به همین دلیل زیاد روی این بحث مانور نمیدم و خیلی گذرا فقط به تغییر رنگ متن میپردازم و ان شاء ا… به طور مفصل در مبحث CSS به بررسی آن میپردازیم.
به مثال زیر توجه فرمایید:

کد:

<!DOCTYPE html>
<html>
<body>

<p><font color=”red”>This text is red</font></p>
<p><font color=”green”>This text is green</font></p>
<p><font color=”blue”>This text is blue</font></p>

</body>
</html>

همانطور که در مثال مشاهده کردید خیلی ساده پس از یک فاصله، با نوشتن عبارت “color=”whatever رنگ مورد نظر خودمون رو بر روی متن اعمال کردیم. توجه داشته باشید رنگ مورد نظرتون رو حتما باید بین دو تا دابل کوتیشن (“) درج کنید.
ما در اینجا دقیقا نام رنگ موردنظرمون رو درون دابل کوتیشن قرار دادیم اما با استفاده از کد های ۱۶ بیتی (هگزا دسیمال) هم میتونیم رنگ دلخواهمون رو ایجاد کنیم.

کد:

<!DOCTYPE html>
<html>
<body>

<p><font color=”#FF0000″>This text is red</font></p>
<p><font color=”#009933″>This text is green</font></p>
<p><font color=”#0000FF”>This text is blue</font></p>

</body>
</html>

در مثال بالا کد #FF0000 نمایند رنگ قرمز ، کد #۰۰۹۹۳۳ نماینده رنگ سبز و کد #۰۰۰۰FF نماینده رنگ آبی می باشد. در عکس ضمیمه شده زیر میتونید کد رنگ های بیشتری رو ببینید…

Hexadecimal Colors

تگ کامنت (Comment Tag)

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

کد:

<!DOCTYPE html>
<html>
<body>

<!–This is a comment. Comments are not displayed in the browser–>
<p> for more information about HTML tags come to my blog: blog.mahdikashani.ir</p>

</body>
</html>

اگر کد بالا را امتحان کرده باشید، حتما متوجه شدید که متن داخل تگ کامنت در مرورگر نمایش داده نمی شود.
تگ آغازین کامنت به شکل <!– و تگ پایانی آن به صورت –> می باشد.خب فکر میکنم چیزی از قلم نیفتاده باشه. امیدوارم که استفاده برده باشید. هر سوالی که براتون پیش اومد رو حتما بپرسید من هم در اسرع وقت پاسخ خواهم داد. در جلسه بعد در مورد لینک ها بحث خواهیم کرد.
فعلا خدانگهدار…

آیا مطالب مربوط به این آموزش برای شما مفید واقع شده است؟

مشاهده نتایج

Loading ... Loading …