عضو کانال یوتیوب ما شوید.

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

آموزش HTML
آموزش 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 باشید.

موفق و پایدار باشید.

برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]