نوشته های برچسب خورده: لیست ها در اچ تی ام ال

فونت ها

برای ایجاد تغییرات در فونت ها باید از استایل در html استفاده کنیم. روش استفاده از استایل به صورت زیر است:

<tagname style = “style1; style2;”>محتوا</tagname>

همان طور که مشاهده می کنید استایل را به صورت فوق و در قسمت اول تگ به کار می بریم. به طور کلی استایل ها برای ایجاد تغییرات در المان های اچ تی ام ال به کار می روند. حال با یک مثال نحوه ایجاد تغییرات در فونت ها را آموزش می دهیم. مثلا می خواهیم تگ h1 را با فونت تاهما و رنگ آبی نشان دهیم.

<h1 style = “font-family: tahoma; color: blue;”>متن عنوان</h1>

font-family نوع فونت و color رنگ آن را مشخص می کند. توجه داشته باشید که امکان نمایش فونت پیش فرض در صورت اشتباه نوشتن نام فونت وجود دارد. برای رنگ ها از کد آن ها نیز می توانید استفاده کنید.

برای تغییر در اندازه فونت از خاصیت font-size استفاده می کنیم. اندازه فونت را معمولا بر حسب پیکسل px بیان می کنیم. البته معیارهای دیگری مانند em نیز وجود دارند.

در مثال زیر متنی با فونت تاهما رنگ 11111# و اندازه 12 پیکسل نمایش می دهیم.

<p style = “font-family: tahoma; color: #11111; font-size: 12px;”>متن مورد نظر</p>

هم تراز کردن متن

اتربیوت مورد نظر برای هم تراز کردن متن text-align می باشد. این خصوصیت به شما کمک می کند که متن خود را راست چین، وسط چین یا چپ چین کنید.

<p style = “text-align: right;”>متن راست چین</p>

<p style = “text-align: center;”>متن وسط چین</p>

<p style = “text-align: left;”>متن چپ چین</p>

پر رنگ کردن متن

برای پر رنگ کردن متن از تگ های <b></b> و <strong></strong> استفاده می کنیم و متن مورد نظر را در بین این تگ ها قرار می دهیم.

برای ایتالیک کردن متن نیز از تگ <em></em> استفاده می شود.

<p> آموزش <em>اچ تی ام ال</em> با <b>پردیس وردپرس</b> </p>

پایان جلسه هشتم

لیست ها در html

لیست ها در اچ تی ام ال کاربرد فراوانی دارند. از منو ها گرفته تا بسیاری دیگر از داده های منظم را با استفاده از لیست در متن قرار می دهیم. در html سه نوع لیست داریم:

• لیست های نامنظم یا unorderd که دارای ترتیب دلخواه است
• لیست های منظم یا orderd که دارای ترتیب خاصی مثلا بر اساس اعداد یا حروف الفبا مرتب می شود
• نوع سوم نیز لیست توضیحات است که بعد از عنوان، توضیحات نوشته می شود و چندان کاربردی ندارد

لیست نامنظم

<ul>

<li>متن آیتم اول</li>

<li>متن آیتم دوم</li>

<li>متن آیتم سوم</li>

</ul>

اگر لیست های html را دیده باشید حتما متوجه شده اید که در کنار لیست ها معمولا یک علامت دایره توپر دیده می شود. این علامت یا آیکون را می توان با استفاده از صفت list-style-type تغییر داد. این اتربیوت به تگ ابتدایی <ul> اضافه می شود.

<ul list-style-type: “آیکون موردنظر”>

• disc دایره تو پر پیش فرض
• circles دایره
• squares مربع
• noun بدون آیکون

لیست منظم

<ol>

<li>آیتم اول</li>

<li>آیتم دوم</li>

<li>آیتم سوم</li>

</ol>

از خاصیت list-style-type در لیست های ترتیبی می توان به صورت زیر زیر استفاده کرد:

• 1 برای مرتب سازی بر اساس اعداد
• A مرتب سازی بر اساس حروف بزرگ
• a مرتب سازی بر اساس حروف کوچک
• I مرتب سازی با اعداد یونانی
• i مرتب سازی با اعداد یونانی کوچک

توجه داشته باشید که موارد فوق هم مانند آیکون در کنار لیست ها نمایش داده می شود و ترتیب را نشان می دهد. برای مثال لیست زیر بر حسب اعداد مرتب شده:

<ul list-style-type: “1”>

 پایان قسمت هفتم