سایر
2 دقیقه پیش | جمهوری آذربایجان با گرجستان و ترکیه مانور مشترک نظامی برگزار می کندایرنا/ جمهوری آذربایجان روز یکشنبه قبل از آغاز مذاکرات وین با حضور نمایندگان منطقه قره باغ کوهستانی، اعلان کرد که قصد دارد تمرین های نظامی با مشارکت گرجستان و ترکیه برگزار ... |
2 دقیقه پیش | ژنرال فراری سوری از رژیم صهیونیستی درخواست کمک کردالعالم/ ژنرال سابق و فراری ارتش سوریه که به صف مخالفان بشار اسد پیوسته، از رژیم صهیونیستی خواست که در مقابله با رییس جمهوری سوریه، مخالفان مسلح (تروریست ها)را یاری کند!.به ... |
آموزش HTML – بخش هشتم: تغییرات رنگ و اندازه و نوع فونت
تغییر فونت و مشخصات متون یکی از امکانات پر استفاده در طراحی ظاهر صفحات اچ تی ام ال است و بدون شک بدرد شما هم بسیار خواهد خورد. با ما همراه باشید تا در این بخش به شما نحوه تغییرات در فونتها و متونها را آموزش دهیم.
برای تغییر در نوشتهها و به طور کلی هر المان اچ تی ام ال لازم است که کلمه دیگری را به تگ آنها بیفزاییم. به این کلمه اضافی اتریبیوت استایل میگوییم. استایل در واقع مجموعهای از صفات را برای المانهای اچ تی ام ال مشخص میکند و البته فقط مختص به متن نیست و المان های دیگر نیز از این تگ برای ایجاد تغییرات در صفحه اچ تی ام ال استفاده میکنند. مثلا رنگ، اندازه و … صفاتی هستند که توسط اتریبیوت استایل در صفحه مشخص میشوند. البته بعد از یادگیری CSS تمامی استایلها در فایل CSS مورد استفاده میشود و کمتر پیش میآید که نیاز به استفاده از استایلها در درون صفحه اچ تی ام ال داشته باشیم. ولی با توجه به لزوم یادگیری مباحث استایل در اچ تی ام ال, این بخش را برای شما به آموزش این موضوع اختصاص دادهایم.
نحوهی استفاده از اتریبیوت استایل نیز بسیار ساده است و تنها کافیست تا کلمه Style را در کنار نام تگ در تگ شروع کننده بنویسیم. همانند زیر:
محتوا با استایل دلخواه
برای درک بهتر در مثال زیر ما میخواهیم بر روی المان P تغییراتی را ایجاد نماییم.
مرحله اول: تگ اچتیامال مورد نظر را آغاز میکنیم؛ مثلا قصد تغییر در المان
را داریم.
مرحله دوم: اتریبیوت استایل style را به المان مورد نظر اضافه میکنیم و بعد از آن یک علامت ""= میگذاریم :
مرحله سوم: حالا در بین دو علامت " " آن چیزهایی که میخواهیم در المان ما تغییر کند مینویسیم. مثلا در پاراگراف نوع فونت یا اندازه فونت را مینویسیم.
در این مثال برای تغییر فونت از font-family استفاده میکنیم و در روبروی آن، نوع فونت دلخواه را مینویسیم. مثلا برای فونت (Tahoma) مینویسیم: .
بعد از نوشتن هر استایل و نوع آن حتما از علامت ; استفاده میکنیم. این علامت در واقع بین تمامی استایلها قرار میگیرد و آنها را از هم جدا میکند. دقت داشته باشید که استفاده از این علامت به طور کلی اهمیت زیادی دارد و به صفحه میفهماند که شما در حال تغییر استایلهای صفحه هستید.
به مثال زیر توجه کنید:
متن قرار گرفته در اینجا آبی رنگ خواهد شد < ” ; h1 style = ” color : blue>
در این مثال با h1 را با اتریبیوت استایل به رنگ آبی در آوردهایم. در نتیجه رنگ نهایی آن آبی خواهد شد.
حالا که با نحوه کلی استفاده از اتریبیوت style آشنا شدیم، قصد داریم تا استایلهای قابل استفاده بیشتری را در مشخصه فونت برایتان معرفی کنیم:
font-family – نوع فونت:اگر قصد تغییر نوع فونت را دارید, با استفاده از این استایل میتوانید نوع فونت (مثلا tahoma، Times New Roman و …) را تغییر دهید. همچنین امکان اضافه کردن فونتهای دلخواه به صفحه از طریق CSS نیز وجود دارد که ما این کار را به دوره آموزشی CSS موکول کردهایم. در صورتی که نام فونت را اشتباه بزنید، امکان عدم نمایش فونت شما وجود دارد و در این حالت مرورگر فونت پیش فرض را جایگزین خواهد کرد.
متن اینجا با فونت Tahoma ایجاد خواهد شد.
font-Size – ابعاد فونت:اندازهی فونت بر حسب پیکسل (مثلا ۱۰px یا ۱۲ px و …) بیان میشود. البته مقیاسهای دیگری به غیر از پیکسل نیز وجود دارند که از جمله آنها میتوان به em اشاره نمود. در کل پیشنهاد میشود که برای ابعاد فونت از مقیاس پیکسل استفاده نمایید.
مرحله اول: ابتدا تگ
یا که مربوط به متن است را مینویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه میکنیم.
مرحله سوم: در استایل باز شده کلمه ابعاد مورد نظر:font-size را مینویسیم.
مرحله پایانی: متن مورد نظر را در بین دو تگ
مینویسیم. مشاهده خواهید که متن شما با اندازه دلخواه به نمایش در خواهد آمد.
متن اینجا با فونت ۱۰px ایجاد خواهد شد.
color – رنگ فونت :
رنگ متنها را در اچ تی ام ال به دو شکل میتوان تعیین کرد. در حالت اول, رنگ نوشتهها را با رنگهای پیش فرض (مثلا blue، yellow یا …) مشخص میکنند. در این حالت انتخابها به رنگهای از پیش تعریف شده محدود میشود, ولی اگر قصد استفاده از رنگ خاصی را دارید باید از کد شش رقمی آنها در کنار علامت # استفاده کنید. مثلا ۸۸۸۸۸۸# رنگ سفید یا FF330A# رنگ نارنجی است. برای به دست آوردن کد رنگها میتوانید از نرم افزارهای گرافیکی همچون فوتوشاپ یا سرویسهای آنلاین همچون HTML Color یا HTML Color picker استفاده نمایید.
به مثال زیر نگاه کنید تا نحوهی تغییر رنگ المان در اچ تی ام ال را بیاموزید.
مرحله اول: ابتدا تگ
یا که مربوط به متن است را مینویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه میکنیم.
مرحله سوم: در استایل باز شده کلمه color: رنگ مورد نظر را مینویسیم. رنگ مورد نظر یا کد شش رقمی رنگ است یا اسم رنگ همانند(yellow, Blue و یا …)
متن با فونت تاهما و رنگ سفید
مرحله پایانی: متن مورد نظر را در بین دو تگ
مینویسیم. مشاهده خواهید که متن شما با رنگ دلخواه به نمایش در خواهد آمد.
هم تراز کردن – text-align:
یکی دیگر از موارد قابل استفاده در اتریبیوت استایل در متنها text-align است. این خصوصیت به شما کمک میکند تا متنهایتان را چپ چین, راست چین یا وسط چین کنید. نوشتن این مولفهها نیز کاملا مشابه قبلیهاست و تنها کافیست همانند قبل مراحل زیر را طی کنید.
مرحله اول: ابتدا تگ
یا که مربوط به متن است را مینویسیم.
مرحله دوم: در مرحله بعد اتریبیوت استایل را به تگ مورد نظر اضافه میکنیم.
مرحله سوم: در استایل باز شده کلمه text-align:center را برای وسط چین مینویسیم.
مرحله پایانی: متن مورد نظر را در بین دو تگ
مینویسیم و از دیدن نتیجه صفحه لذت میبریم.
متن وسط صفحه قرار میگیرد
متن سمت راست صفحه قرار میگیرد
متن سمت چپ صفحه قرار میگیرد
نمونه کدمتن وسط صفحه قرار میگیرد
متن سمت راست صفحه قرار میگیرد
متن سمت چپ صفحه قرار میگیرد
نتیجهای که مرورگر نمایش خواهد دادمتن وسط صفحه قرار میگیرد
متن سمت راست صفحه قرار میگیرد
متن سمت چپ صفحه قرار میگیرد
پر رنگ کردن متن – boldگاهی پیش میآید که بخواهیم بخشی از متن را پررنگتر کنیم تا توجه بیشتری از کاربران جلب کند. برای این کار بهترین کار استفاده از تگهایی است که متن را بولد (bold) میکند. برای این کار باید کلمه یا متنی که میخواهیم پر رنگ شود را در بین دو تگ قرار دهیم. البته تگ نیز دقیقا کار مشابهی را انجام میدهد. توجه داشته باشید که کل متن را بولد نکنید چون نه تنها این کار باعث توجه کاربر نمیشود، بلکه ممکن است از زیبایی طرح شما کاسته شود. همچنین تگ برای موتورهای جستجو ملاک محسوب میشود.
برای مثال ما میخواهیم کلمه اچ تی ام ال را در متن زیر پر رنگ نماییم.
ما در حال یادگیری اچ تی ام ال هستیم
برای این کار دور کلمه اچ تی ام ال تگ قرار دهیم.
هستیماچ تی ام ال ما در حال یادگیری
italic کردن که حروف را حالت مورب میکند (مثال: متن ایتالیک) نیز با تگ متن انجام میشود. برای این کار مشابه قبل ابتدا متن را در تگ پاراگراف مینویسید و سپس بخشی از آن را که میخواهید ایتالیک کنید در بین دو تگ قرار میدهیم.
I am so tired.
نمونه کداستآسان بسیار اچ تی ام ال یادگیری
نتیجهای که مرورگر نمایش خواهد دادیادگیری اچ تی ام ال بسیار آسان است
همانطور که مشاهده میکنید، در بین متن با استفاده از تگهای b و e,m موفق شدیم تا بخش دلخواهمان را به صورت بولد و پررنگ یا ایتالیک در بیاوریم. حالا در ادامه خلاصهای از آنچه در این جلسه گفته شده است را با هم مرور خواهیم کرد.
خلاصه قسمت هشتم:در این قسمت چیزهایی که یادگرفتهایم را به صورت کاملا خلاصه مرور میکنیم.
در هشتمین قسمت از سری آموزش HTML و سیاساس با نحوه تغییر در فونتها با کمک اتریبیوت استایل آشنا شدیم. اتریبیوت استایل خواص بسیار دیگری نیز دارد و در تگهای دیگر هم به کار میرود. اتریبیوت استایل برای تگ پاراگرافدارای مولفههایی از جمله font-family, font-size و color است. مثال یک پاراگراف با استایل دلخواه: متن با رنگ قرمز, فونت با اندازه ۱۰px و Tahoma است. برای چپ چین یا راست چین یا وسط چین کردن متن از کلمه text-align استفاده میکنیم و در آن کلمه center, left یا right برای چپ وسط یا راست قرار دادن متن به کار میبریم. برای پر رنگ کردن متنها نیز تنها باید از تگ یا استفاده کرد. برای ایتالیک(مورب کردن متن) باید از تگ
ویدیو مرتبط :
تغییر فونت و اندازه فونت در کتابخوان سونی