آموزش HTML - قسمت چهارم (استفاده از css ، جداول و لیست ها)

استفاده از css در HTMLسی اس اس CSS یا (Cascading Style Sheets) چگونگی نمایش عناصر HTML را مشخص می کند.تعیین شکل نمایش عناصر HTML با CSSسی اس اس CSS همراه با HTML4 معرفی شد تا یک روش بهتری برای Style دهی عناصر HTML ایجاد کند.برای اعمال CSS بر روی تگهای HTML سه روش وجود دارد:برگه های استایل خارجی یا External style sheetبرگه های استایل داخلی یا Internal style sheetاستایل درون تگی یا Inline styleروش پیشنهادی، گزینه اول یعنی برگه های استایل خارجی است.(در آینده ی نزدیک مقالات آموزشی مربوط به css هم در صفحه ی بنده نوشته می شود)استایل درون تگی - Inline Stylesقرار دادن Styleها درون تگ HTML بسیاری از مزیت های CSS را با مخلوط کردن محتوا و چگونگی نمایش از بین می برد، از این روش به ندرت استفاده کنید.طریقه استفاده به این صورت است که باید Style مورد نظرمان را در تگ مربوطه بیاوریم، مثال زیر نشان می دهد که چگونه رنگ و margin-left تگ <p> را تغییر داده ایم:<p style=&quotcolor:blue;margin-left:20px;&quot>This is a paragraph.</p>مثال: تنظیم رنگ پس زمینه عناصر HTMLخصوصیت background-color رنگ پس زمینه یک عنصر HTML را تنظیم می کند:<!DOCTYPE html> <html> <body style=&quotbackground-color:yellow;&quot> <h2 style=&quotbackground-color:red;&quot>This is a heading</h2> <p style=&quotbackground-color:green;&quot>This is a paragraph.</p> </body> </html>خصوصیت background-color از خصوصیت قدیمی و منسوخ شده bgcolor ساخته شده است.مثال: تنظیم رنگ و اندازه و فونت عناصر HTMLخصوصیات font-family , color , font-size به ترتیب اندازه، رنگ و فونت متن را تنظیم می کنند:<!DOCTYPE html> <html> <body> <h1 style=&quotfont-family:verdana;&quot>A heading</h1> <p style=&quotfont-family:arial;color:red;font-size:20px;&quot>A paragraph.</p> </body> </html>خصوصیات font-family , color , font-size از تگ قدیمی و منسوخ شده <font> ساخته شده اند.مثال: ترازبندی متنخصوصیت text-align در جهت محور X یک متن را ترازبندی می کند:<!DOCTYPE html> <html> <body> <h1 style=&quottext-align:center;&quot>Center-aligned heading</h1> <p>This is a paragraph.</p> </body> </html> خصوصیت text-align از تگ قدیمی و منسوخ شده <center> ساخته شده است.برگه های استایل داخلی - Internal Style Sheetزمانی که یک فایل HTML با یک Style خاص و یکتا نسبت به بقیه صفحات قالب بندی شده باشد، باید از Style ohداخلی استفاده کرد.در Style های داخلی در قسمت Head صفحه HTML و توسط تگ <style> مانند زیر معرفی می شوند.<head> <style type=&quottext/css&quot> body {background-color:yellow;} p {color:blue;} </style> </head>برگه های استایل خارجی - External Style Sheetزمانی که Styleها در چندین صفحه مختلف به کار برده می شوند، استفاده از Style خارجی ایده آل خواهد بود. اینکار شما را قادر می سازد تا فقط با تغییر یک فایل، ظاهر و یا طرح بندی تمام صفحات پروژه تان را تغییر دهید.هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.<head> <link rel=&quotstylesheet&quot type=&quottext/css&quot href=&quot/mystyle.css&quot /> </head>تگ های Style در HTMLتگ <style> : برای تعریف اطلاعات طرح بندی یک سند html استفاده می شود. تگ <style> باید در قسمت head صفحه قرار داده شود.تگ <link /> : هر صفحه HTML باید با استفاده از تگ <link> به فایل CSS خارجی متصل شود. تگ <link> باید در قسمت head صفحه قرار داده شود.تگ ها و خصوصیات منسوخ شدهدر HTML4 چندین تگ و خصوصیت برای Style دهی استفاده می شود که این تگ ها در نسخه جدید HTML پشتیبانی نمی شود.به همین منظور از استفاده عناصر و خصوصیات زیر اجتناب نمایید:<font><center><strike>colorbgcolorجداول در HTMLجداول به وسیله تگ <table> تعریف می شوند.یک جدول حاوی سطرهایی می باشد (که با تگ <tr> مشخص می شوند) و هر سطر شامل تعدادی سلول است (که با تگ <td> مشخص می شوند)عبارت td مخفف "table data" است و حاوی داده های سلول ها می باشد. تگ <td> می تواند حاوی متن، لینک، تصویر، لیست ها، فرم ها، جداول دیگر و غیره باشد.<table> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>کد HTML بالا چگونه در یک مرورگر دیده می شود:row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2خصوصیت Borderاگر شما خصوصیت Border را برای جدولی مشخص نکنید، جدول بدون لبه نمایش داده می شود. گاهی اوقات این مورد می تواند کاربردی باشد، اما بیشتر مواقع ما نیاز به نمایش لبه ها داریم.برای نمایش لبه ها باید خصوصیت Border را تنظیم کنیم.<table border=&quot1&quot style=&quotwidth:300px&quot> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>توجه داشته باشید که اگر بخواهید طبق استاندارهای HTML پیش بروید نباید از ویژگی border استفاده کنید.برای تنظیم لبه ها بهتر است از CSSها استفاده کنید.با استفاده از خصوصیت border در CSS می توانید لبه ها را تنظیم نمایید:<style> table,th,td { border:1px solid black; } </style>بیاد داشته باشید که لبه ها برای دور جدول و تمام سلول های جدول، تنظیم خواهد شد.تبدیل لبه های دو خطی به یک خطیبا استفاده از خصوصیت border-collapse در CSS می توانید، لبه های دوخطی جدول را به لبه های یک خطی تبدیل کنید:<style> table,th,td { border:1px solid black; border-collapse:collapse } </style>تنظیم فاصله ی محتوای سلول ها از لبهبا استفاده از خصوصیت padding درCSS می توانید فاصله محتویات یک سلول را از لبه هایش تنظیم کنید.اگر این خصوصیت را تنظیم نکنید، فاصله محتوی تا لبه، صفر در نظر گرفته می شود.th,td { padding:15px; }تنظیم فاصله سلول ها از یکدیگربا استفاده از خصوصیت border-spacing در CSS می توانید فاصله سلول ها از یکدیگر را تنظیم کنید.table { border-spacing:5px; }عنوان جدول (Header)اطلاعات سرتیتر در یک جدول به وسیله تگ <th> تعریف می شود.بیشتر مرورگرها متن را در عنصر <th> به صورت برجسته (bold) و وسط چین نمایش می دهند.<table style=&quotwidth:300px&quot> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>با استفاده از خصوصیت text-align در CSS، می توانیم سرتیترهای جدول بالا را در سمت چپ تنظیم کنیم:th { text-align:left; }تگ های جدول در HTMLتگ <table> : تعریف جدولتگ <th> : تعریف عنوان جدول (table header)تگ <tr> : تعریف سطر جدول (table row)تگ <td> : تعریف سلول جدول (table data)تگ <caption> : تعریف تیتر جدول (table caption)تگ <colgroup> : برای فرمت دهی یک یا تعدادی از ستون ها کاربرد داردتگ <col> : برای فرمت دهی یک یا تعدادی از ستون ها کاربرد داردتگ <thead> : عناوین ستون های یک جدول (header) را گروه بندی می کندتگ <tbody> : محتویات بدنه یک جدول را گروه بندی می کندتگ <tfoot> : محتویات انتهای ستون های یک جدول (footer) را گروه بندی می کندمثال بیشتر - خودتان امتحان کنیدچگونه جدولی بدون خطوط حاشیه (Border) ایجاد کنیم.﻿﻿<!DOCTYPE html> <html> <body style=&quotdirection:rtl&quot> <h4>این جدول جاشیه ندارد:</h4> <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <h4>این جدول نیز حاشیه ندارد:</h4> <table border=&quot0&quot> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>نحوه ایجاد سرتیترهای جدول.<!DOCTYPE html> <html> <body> <h4>Table headers:</h4> <table border=&quot1&quot> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border=&quot1&quot> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html>نحوه اضافه کردن عنوان به یک جدول.﻿<!DOCTYPE html> <html> <body style=&quotdirection:rtl&quot> <table border=&quot1&quot> <caption>پس انداز ماهانه</caption> <tr> <th>ماه</th> <th>پس انداز</th> </tr> <tr> <td>شهریور</td> <td>$100</td> </tr> <tr> <td>مرداد</td> <td>$50</td> </tr> </table> </body> </html>چگونگی تعریف سلول های جدول که بیش از یک سطر یا بیش از یک ستون را شامل می شوند.<!DOCTYPE html> <html> <body> <h4>Cell that spans two columns:</h4> <table border=&quot1&quot> <tr> <th>Name</th> <th colspan=&quot2&quot>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border=&quot1&quot> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan=&quot2&quot>Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>نحوه نمایش عناصر درون عناصر دیگر.<!DOCTYPE html> <html> <body> <table border=&quot1&quot> <tr> <td> <p>This is a paragraph</p> <p>This is another paragraph</p> </td> <td>This cell contains a table: <table border=&quot1&quot> <tr> <td>A</td> <td>B</td> </tr> <tr> <td>C</td> <td>D</td> </tr> </table> </td> </tr> <tr> <td>This cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>HELLO</td> </tr> </table> </body> </html>چگونه از cellpadding برای ایجاد فاصله بیشتر بین محتوای سلول با حاشیه سلول استفاده کنیم.﻿<!DOCTYPE html> <html> <head> <style> table, th, td { border-collapse:collapse; border:1px solid black; } th, td { padding:15px; } </style> </head> <body> <table style=&quotwidth:300px&quot> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <p>Try to change the padding to 5px.</p> </body> </html>چگونه از cellspacing برای افزایش فاصله بین سلول ها استفاده کنیم.﻿<!DOCTYPE html> <html> <head> <style> table, th, td { border:1px solid black; padding:5px; } table { border-spacing:15px; } </style> </head> <body> <table style=&quotwidth:300px&quot> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <p>Try to change the spacing to 5px.</p> </body> </html>چگونه از خصوصیت "frame" برای کنترل حاشیه های دور جدول استفاده کنیم.The frame attributeلیست ها در HTMLلیست های رایج در HTML لیست های ترتیبی و غیر ترتیبی هستند.لیست های نامرتبList itemList itemList itemلیست های مرتبThe first list itemThe second list itemThe third list itemلیستهای نامرتب (Unorder List)یک لیست غیر ترتیبی یا نامرتب با تگ <ul> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند. (List Item)آیتم های یک لیست به وسیله گلوله نشانه گذاری می شوند. (دایره های کوچک سیاه رنگ)<ul> <li>Coffee</li> <li>Milk</li> </ul>نحوه نمایش کد بالا در مرورگر:CoffeeMilkلیست های مرتب (Order List)یک لیست مرتب یا ترتیبی با تگ <ol> شروع می شود. آیتم های هر لیست با تگ <li> شروع می شوند.آیتم های یک لیست به وسیله اعداد نشانه گذاری می شوند.<ol> <li>Coffee</li> <li>Milk</li> </ol>نحوه نمایش کد بالا در مرورگر:CoffeeMilkلیست های تعریفی (Description List)یک لیست تعریفی لیستی از آیتم هاست که هر آیتم توضیحی دارد.لیست های تعریفی با تگ <dl> نوشته می شوند.تگ <dl> به همراه تگ <dt> (که آیتم های موجود در لیست را مشخص می کند) و تگ <dd> ( که آیتم های موجود در لیست را توضیح می دهد) استفاده می شود.<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>نحوه نمایش کد بالا در مرورگر:Coffee - black hot drinkMilk - white cold drinkنکات مهم و اساسینکته: درون آیتم های یک لیست، می توانید تصویر، لینک، تگ </ br>، لیستی دیگر و غیره را قرار دهید.مثال بیشتر - خودتان امتحان کنیدنمایش انواع دیگر لیست های ترتیبی.Different types of ordered listsنمایش انواع دیگر لیست های غیر ترتیبی.Different types of unordered listsنمایش لیست های تو در تو.Nested listنمایش لیست های تو در توی پیچیده تر.Nested list 2نمایش لیست تعریفی.Description listتگ های لیست در HTMLتگ <ol> : یک لیست ترتیبی تعریف می کند.تگ <ul> : یک لیست غیر ترتیبی تعریف می کند.تگ <li> : آیتم های یک لیست را تعریف می کند.تگ <dl> : برای ساخت یک لیست تعریفی استفاده می شود.تگ <dt> : برای ساخت یک آیتم در لیست تعریفی استفاده می شود.تگ <dd> : برای تعریف توضیحات یک آیتم در لیست تعریفی استفاده می شود.