در این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم.
اندازه فونت را می توان با دستور زیر تعیین کرد:
به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. وقتی که می خواهیم یک متن بزرگتر دیده شود از علامت مثبت و زمانی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر توجه کنید:
این هم نتیجه تغییر سایز فونت:
این متن بزرگتر دیده می شود
برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم:
این هم متن کوچک شده:
این متن کوچکتر دیده می شود
این هم تعدادی مثال برای درک بهتر مطالب:
این متن با اندازه 4 نوشته شده است
این متن با اندازه 3 نوشته شده است
این متن با اندازه 2 نوشته شده است
این متن با اندازه 1 نوشته شده است
این متن با اندازه 1- نوشته شده است
این متن با اندازه 2- نوشته شده است
این متن با اندازه 3- نوشته شده است
برای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم، با این فرمان :
می توانیم رنگ مورد نظر خود را با نام انگلیسی آن در فرمان بالا قرار دهیم یا از معادل هگزا دسیمال رنگ به جای اسم رنگ استفاده کنیم.
برای شروع با اسم رنگ شروع می کنیم:
متن نهایی:
متن مورد نظر
حالا از معادل هگزا دسیمال رنگ قرمز به جای نام رنگ استفاده می کنیم. البته استفاده از اسم رنگها ساده تر است اما شما ممکن است بخواهید از رنگهای پیچیده تری استفاده کنید.در مورد رنگ قرمز باید به این صورت عمل کنیم:
در اینجا نتیجه با مثال قبلی یکسان است:
متن مورد نظر
معادل هگزا دسیمال رنگها را باید با علامت # شروع کرد و بعد از این علامت شش حرف یا عدد دیگر قرار می گیرد. برای رنگ قرمز بعد از علامت # دو F و چهار صفر قرار می گیرد.
اگر می خواهید معادل هگزادسیمال رنگها را به دست آورید اینجا را کلیک کنید.
فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار می توانید از دو تگ استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر:
متن بزرگ و طلایی
همچنین می توانید از شناسه های size و color در یک تگ استفاده کنید. مانند زیر:
متن بزرگ و طلایی
شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن می پردازیم.
-
از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید:
سرفصل بزرگ
سرفصل بزرگ
سرفصل 2
سرفصل 2
سرفصل 3
سرفصل 3
در حال کوچک شدن
در حال کوچک شدن
کوچکتر
کوچکتر
بسیار کوچک
بسیار کوچک
از دستورات بالا می توانید برای عنوان مطالب استفاده کنید.
-
وقتی که تگ
در متنی وارد می شود بقیه آن خط به خط بعد منتقل می شود. در حقیقت تگ
یا همان Line Break کاری مشابه فشردن کلید Enter به همراه Shift را انجام می دهد. قابل ذکر است که این تگ نیازی به تگ پایانی ندارد. به یک مثال توجه کنید:
Here is the second line
نتیجه مثال بالا به اینگونه است:
Here is the second line
مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخورد به خط بعدی نمی رود. اما تگ
مرورگر را مجبور می کند به خط بعدی برود.مثلاً متن زیر را در ویرایشگر متن خود بنویسید و به صورت html ذخیره کنید، فقط یک خط را در مرورگر خود خواهید دید:
یک خط
جدید می خواهم
نتیجه به این صورت خواهد بود:
برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن را به این صورت بنویسیم:
یک خط
جدید می خواهم
این هم نتیجه:
من،
یک خط
جدید می خواهم
-
تگ پاراگراف است. این تگ باعث ایجاد یک فضای خالی عمودی بین دو خط در دو پاراگراف می شود. درست مثل اینکه شما
را دو بار تایپ کنید.از این تگ در اول پاراگراف برای تمایز دو پاراگراف استفاده می شود. به مثال زیر توجه کنید:
خط دوم از پاراگراف اول
این هم پاراگراف جدید
و نتیجه به این صورت است:
خط اول از پاراگراف اول
خط دوم از پاراگراف اول
این هم پاراگراف جدید
تگ پاراگراف هم نیازی به تگ پایانی ندارد. اما شما می توانید برای فهم بهتر آنرا در متن خود به کار ببرید. مثلاً به این صورت:
پاراگراف اول
پاراگراف دوم
ادامه پاراگراف دوم
این متن همان نتیجه ای را دارد که متن زیر دارد:
پاراگراف اول
پاراگراف دوم
ادامه پاراگراف دوم
این هم نتیجه هر دو متن بالا:
پاراگراف اول
پاراگراف دوم
ادامه پاراگراف دوم
البته اگر می خواهید صفحه ای که طراحی می کنید معتبر باشد بهتر است از تگ پایانی پاراگراف استفاده کنید. استفاده از تگ پایانی در XHTML الزامی است.
تا اینجا شما می توانید یک صفحه وب پر از متن را بنویسید. در درس بعد به اندازه فونت و رنگ متن می پردازیم.
در این درس به کار با متنها می پردازیم. ابتدا با این تگ شروع می کنیم:
1- این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید:
مثال بالا به صورت زیر دیده می شود:
متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود
بیایید با تگهای دیگری ادامه دهیم:
2- زیرخط (Underline):
این هم نتیجه:
این متن با زیر خط مشاهده می شود
3- حروف کج (Italic):
و نتیجه به این صورت است:
این متن به صورت مورب دیده می شود
4- حروف خط خورده:
متن در مرورگر به این صورت دیده می شود:
این متن به صورت خط خورده دیده می شود
5- وسط چین:
نتیجه کد:
این متن در وسط خط نوشته می شود
شما می توانید بیشتر از یک فرمان را برای یک متن اجرا کنید. مثلاً وقتی که می خواهید متنی به صورت پر رنگ و کج نوشته شود. برای این کار هر دو تگ ابتدایی را برای متن در ابتدای آن و تگهای پایانی را در جایی که می خواهیم پایان پر رنگی و کجی متن باشد قرار می دهیم.
با این مثال توجه کنید:
نتیجه هم به این صورت دیده می شود:
این متن به صورت کج و پر رنگ دیده می شود
آیا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در پاسخ باید گفت در مثال بالا خیر، اما مواردی وجود دارد که ترتیب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پایانی
قبل ازاین متن به صورت پر رنگ و کج دیده می شود
اما این روش خسته کننده است. در اینجا مهم نیست تگها به چه صورت باز و بسته شوند. اما نکته مهمی که باید در نظر داشته باشید این است که متنها تحت تأثیر تگهایی که قبل از آنها باز شدهاند و بسته نشده اند قرار می گیرند. تأثیر یک تگ تمام می شود وقتی که تگ بسته شود.
مثال زیر را در نظر داشته باشید:
این نتیجه را به ما می دهد:
این متن پر رنگ، کج و دارای زیرخط است
اما این یکی:
این نتیجه را به ما می دهد:
این متن پر رنگ، کج و دارایزیرخط است
همان طور که دیدید متن بولد و ایتالیک زودتر از متن زیرخط دار به پایان رسید و این به این دلیل است که تگهای پایانی بولد ()و ایتالیک () زود تر نوشته شدند و انتهای متن فقط توسط تگ زیرخط () تحت تأثیر قرار دارد.
متنها به صورت پیش فرض در سمت چپ صفحه به نمایش در می آیند. اما با استفاده از
و این هم نتیجه آن:
به این مثال توجه کنید
شما با تمرین این بخش می توانید آمادگی ورود به درس بعد که در مورد سرفصل، پاراگراف، و خطوط است را به دست آورید.