آموزش HTML – تغییرات دیداری متن‌ها

آموزش HTML – تغییرات دیداری متن‌ها

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

آموزش HTML تغییرات دیداری متن‌ها

برای تغییر متن‌ها در HTML لازم است خصیصه‌ی اضافی style را به هر تگ اضافه کنید؛ البته برای تغییر دیداری متن‌ها در HTML نیاز به مقداری دانش نسبت به CSS دارید زیرا این‌روزها تقریبا به ندرت پیش می‌آید. در صفحات وب اگر CSS در کنار HTML یک ساختار شکیل به صفحات می‌دهد. نحوه‌ی استفاده از خصیصه‌ی style بسیار ساده است و تنها کافیست تا کلمه style را در هر تگ بنویسید.

مثل:

<p style=""></p>
<a style=""></a>
<img style="" />
.
.
.
n

خب حالا با توجه به این مقدمات به بررسی بحث اصلی این نوشته یعنی تغییرات دیداری نوشته‌ها در زبان HTML می‌پردازیم.

تغییر نوع فونت نوشته ها در HTML

اگر قصد تغییر نوع فونت متن‌ها را دارید می‌توانید با استفاده از همان خصیصه‌ی style این کار را انجام دهید. البته محدودیت‌هایی نیز دارید اینکه اگر بخواهید از فونت‌های خاص در این بخش استفاده کنید. حتما باید فونت‌ها را در CSS به صفحه خود اضافه کنید. اما با توجه به اینکه این سری آموزشی به عنوان سری آموزشی HTML است قصد توضیح این کار را نداریم. در این بخش شما می‌توانید از فونت‌هایی که در اکثر سیستم‌ها موجود هستند استفاده کنید. این فونت ها عبارتند از : فونت tahoma، فونت arial و …؛

برای تغییر فونت نوشته‌ها به روش زیر عمل می‌کنیم:

<p style="font-family:tahoma;">نوشته برای آزمایش</p>

نکته: تمام المان‌های متن‌دار قابلیت تغییر فونت دارند و این قابلیت تنها مخصوص تگ p نیست.

تغییر اندازه نوشته ها در HTML

در این بخش هم با کمک خصیصه‌ی style می‌توانید اندازه‌ی نوشته‌ها را در اچ‌تی‌ام‌ال تغییر دهید؛ البته نکته‌ای که قابل ذکر است این است که اندازه‌ی متن‌ها بر اساس پیکس یا واحد آن px است.

برای تغییر اندازه‌ی نوشته‌ها در اچ‌تی‌ام‌ال به روش زیر عمل کنید:

<p style="font-size:15px;">نوشته برای آزمایش</p>

نکته: تمام المان‌های متن‌دار قابلیت تغییر اندازه را دارند و این قابلیت تنها مخصوص تگ p نیست.

تغییر رنگ نوشته ها در HTML

برای تغییر رنگ نوشته‌ها در اچ‌تی‌ام‌ال کافیست از خصیصه‌ی style و امکان color استفاده کنید. در این امکان اچ‌تی‌ام‌ال رنگ‌ها به دو صورت حضور دارند.

• حالت‌های مختلف رنگ در اچ‌تی‌ام‌ال.
• رنگ‌های پیش‌فرض که از نام آن‌ها استفاده می‌شود؛ مثل : black، blue و … .
• رنگ‌هایی که سفارشی هستند و از کد هگزا دسیمال یا hex آن‌ها استفاده می‌شود؛ مثل : #f0f1f2 و …

با توجه به مطالب بالا برای تغییر رنگ نوشته‌ها در اچ‌تی‌ام‌ال از روش زیر این‌کار را انجام دهید:

<p style="color:#f0f1f2;">نوشته برای آزمایش</p>

نکته: تمام المان‌های متن دار قابلیت تغییر رنگ را دارند و این قابلیت تنها مخصوص تگ p نیست.

تراز نوشته ها در HTML

برای تغییر تراز بندی نوشته‌ها در زبان اچ‌تی‌ام‌ال باز هم از خصیصه‌ی کاربردی style استفاده خواهیم کرد. تراز بندی متن‌ها در html شامل موارد زیادی می‌شود که از پرکاربردترین آن‌ها می‌توان به تراز چپ، تراز راست و تراز وسط نام برد.

برای کنترل تراز نوشته ها در اچ‌تی‌ام‌ال از کد زیر استفاده کنید:

<p style="text-align:center;"></p>
<p style="text-align:left;"></p>
.
.
.
n

نکته: تمام المان‌های متن دار قابلیت تغییر تراز را دارند و این قابلیت تنها مخصوص تگ p نیست.با توجه به مطالبی که تا به حال ذکر شد یک تمرین جالب را برای شما به اشتراک می‌گذاریم.

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

نظرات خود را در ارتباط با “کار با متن در HTML” برای ما بنویسید. برای استفاده از تمامی جلسات از هشتگ #دوره_آموزشی_HTML در سایت ما استفاده کنید.

منتظر جلسه‌ی بعدی دوره‌ی آموزشی HTML بمانید.