آموزش HTML – قسمت ششم

چهارشنبه, ۲۱ام مرداد , ۱۳۸۸ | ۱۶ دیدگاه

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

قبل از شروع این قسمت چند نکته قابل ذکر و مهم رو یاد آوری میکنم:

اول اینکه یکی از بهترین راهها برای یادگیری بهتر تمرینه.پس قسمت های قبلی رو فراموش نکنید و سعی کنید اونها رو مرور کنید.

دوم اینک ای خودآموز برای استفاده شما دوستان نوشته میشه پس نظرات و پیشنهادات خودتون رو برای هر چه بهترشدن این خودآموز با ما در میان بزارید.

سوم اینکه در قسمتهای آینده در نظر دارم به صورت Work Shop  و یا به قول خودمون به صورت عملی آموزش ساختن یک وب سایت رو از ابتدا شروع کنم.

این کار مستلزم این  است که یک سری پیش نیاز رو یاد بگیرید پس همچنان با استفاده از notepad  به نوشت کدهای html  بپردازید که بسیار مهمه و با ما همراه باشید.

Table ها

همیشه برای ساختن هر سازه ای  احتیاج به یک استخوانبندی  وجود دارد. این موضوع در مورد یک صفحه وب نیز صادق است و برای ساختن یک صفحه وب ( با توجه به ایده ما برای طراحی  ظاهر آن صفحه ) احتیاج به یک ساختار کلی است  که در اکثر موارد از دید کاربران و باز دیدکنندگان صفحات وب مخفی می ماند.

این ساختار کلی در اکثریت موارد به وسیله table  ها و در طراحی مدرن به وسیله تگ های div  (که کاربرد بسیار زیادی در طراحی و ساخت صفحات وب دارد) صورت می گیرد.

در اینجا به table  ها می پردازیم و در قسمتهای آینده به صورت مفصل به تگهای div خواهیم پرداخت.

Table  ها به وسیله تگ  <table>  به مرورگرها معرفی میشوند و دارای ستون وسطر هستند.

ستون ها به وسیله تگهای <td>  و سترها به وسیله تگهای <tr>  مشخص میشوند.لازم به ذکر است که تگهای <tr>  و <td> به تنهایی کاربردی ندارند و لزوما باید همراه تگ <table> در کدها قرار بگیرند.

در زیر نمونه ای از یک  table  با یک ستون و یک سطر می بینید.

<table>

<tr>

<td></td>

</tr>

</table>

به نحوه باز شدن وبسته شدن تگها توجه کنید ( قانون تگهای باز و بسته – قسمت اول آموزش html )

این table  می تواند تعداد دلخواهی ستون وسطر داشته باشد و محدودیت از این نظر وجود ندارد.

برای اینکه بتوانیم کنترل بیشتری بر روی ظاهر این جدول ها داشته باشیم می توانیم از خصوصیت های این جدول ها استفاده کنیم.

طول و عرض table ها

دو خصوصیت width    و height  این توانایی را به ما میدهد که طول و ارتفاع این جدولها را تععین کنیم.

این طول و عرض می توانند به صورت وابسته و یا ثابت باشند.در حالت وابسته طول و عرض با درصدی از عرض کل صفحه مشخص می شود و در اندازه گذاری ثابت مقداربه صورت ثابت به جدولها و سلولها داده می شود.

<table width=”۲۰۰” height=”۲۰۰”>

<tr>

<td></td>

<td></td>

</tr>

</table>

این جدول دارای دو ستون و یک سطر با ارتفاع  و عرض ۲۰۰ پیکسل است.

<table width=”۸۰%” height=”۸۰%”>

<tr>

<td></td>

<td></td>

</tr>

</table>

صوصیت Border

مرز بین این سطر ها وستونها با استفاده از خطوط (border  ) مشخص میشود که میتوان با استفاده از این خصوصیت آن را کنترل کرد.

<table width=”۲۰۰” height=”۲۰۰” border=”۱”>

<tr>

<td></td>

<td></td>

</tr>

</table>

مقدار خصوصیت    border نشان دهنده ضخامت آن است ) واحد پیکسل (  و در صورتی که مقدار آن صفر باشد ( border=”۰”  ) هیچ border نمایش داده نمیشود .

Align و یا چینش در سطرها و ستون ها

هر سطر و یا ستون در یک جدول می تواند چینش مختص به خود را داشته باشد یعنی عناصر داخل آن سطر و یا ستون  از چینش آن سطر و یا ستون پیروی میکنند.

به طور مثال :

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td>ستون اول – سطر اول</td>

<td> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

در این مثال جدول از دو سطر و دو ستون تشکیل شده است که در مثال مشخص شده است.

کلیه سطر ها وستون ها از چینشی که به تگ table  در ابتدای مثال داده شده است پیروی میکنند و چینش همه سطرها و ستونها center  است .

میتوان به هر یک از سطرها و ستونها نیز به تنهایی چینش و align  داد به مثال زیر توجه کنید:

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td   align=”right”>ستون اول – سطر اول</td>

<td    align=”left”> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

در مثالها ملاحضه میکنید که نوشته هایی که در بین تگهای <td> </td>  نوشته شده اند در آن سلول نمایش داده میشوند و در صورتی که هیچ عنصری در بین این تگها نباشد سلول به صورت خالی نمایش داده می شود.

عناصر کوچکتر تشکیل دهنده هر جدول را سلول می نامیم.در مثال بالا جدول دارای چهار سلول است.

Table های تو در تو

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

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td   align=”right”>ستون اول – سطر اول</td>

<td    align=”left”>

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center”>

<tr>

<td   align=”right”>ستون اول – سطر اول </td>

<td    align=”left”> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

</td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

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

Background color ( رنگ پس زمینه )

هر جدول و یا هر سلول و یا هر سطر و یا ستون می تواند دارای رنگ پس زمینه مختص به خود باشد.به مثال زیر توجه کنید:

<table width=”۲۰۰” height=”۲۰۰” border=”۰” align=”center” bgcolor=”red”>

<tr>

<td   align=”right” bgcolor=”blue”>ستون اول – سطر اول</td>

<td    align=”left”> ستون دوم – سطر اول </td>

</tr>

<tr>

<td> ستون اول – سطر دوم </td>

<td> ستون دوم – سطر دوم </td>

</tr>

</table>

ملاحضه مینمایید که رنگ پس زمینه جدول به رنگ قرمز است ولی رنگ سلول ستون اول – سطر اول به رننگ آبی است و چون خودش دارای رنگ پس زمینه است از رنگ پس زمینه کل جدول پیروی نمی کند.

Table  ها دارای خصوصیات بسیاری هستند که در طول تمرین با آنها آشنا خواهید شد و آنها را تجربه می کنید.

برای آشنایی بیشتر با خصوصیات جدولها و کاربردهای بسیار آن در طراحی صفحات وب با ما باشید.

فایل Pdf  این خود آموز به همراه مثالهای آن در یک  فایل قرار گرفته و برای راحتی شما دوستان در اختیارتان گذاشته شده است.

Be Sociable, Share!


۱۶ دیدگاه


  1. پرند
    ۲۲ مرداد ۱۳۸۸

    خوب بود ولی من یک سواب داشتم می خواستم بدونم نرم افزاری هست که صفحات وبی رو که با نرم افزار های طراحی وب می سازیم را به عکس با فرم jepg یا به صورت pdf تبدیل کنم پیشاپیش از راهنمایتون سپاسگزارم




  2. امیر
    ۲۲ مرداد ۱۳۸۸

    ممنون از نظرت.
    من نرم افزار خاصی رو نمیشناسم ولی میتونم یه راهنمایی بکنم.
    صفحه ای رو که ساختی با browser باز کن از کلید print screen استفاه کن. بعد میتونی این عکس رو توی یه نرم افزار گرافیکی ذخیره کنی و ویرایش کنی . البته برای کپی کردن اول کلید print screen بزن بعد توی محیط یه نرم افزار گرافیکی مثل فتو شاپ یا paint کلید ctl+v رو بزن .
    من بر این فرض این مطلب رو نوشتم که شما این کارو بلد نبودی.




  3. سعيد
    ۲۲ مرداد ۱۳۸۸

    ممنون امیرجان
    خیلی عالی بود




  4. امیر
    ۲۳ مرداد ۱۳۸۸

    خواهش می کنم وظیف است. امیدوارم که بدردتون خورده باشه؟




  5. صادق افشار
    ۲۸ مرداد ۱۳۸۸

    ممنون
    من زیاد نمیدونم ولی کل این اموزشها رو خوندم و چیزهای خوبی یاد گرفتم
    اگه یه فیل فلش داشته باشیم و بخوایم توی وب نمایش داده بشه به عنوان بکگراند چکار باید بکنیم
    بازم ممنون




  6. محمد
    ۱۱ شهریور ۱۳۸۸

    ممنون.
    قسمت table برای من کاربرد داشت …
    فعلا …




  7. hadiyeh
    ۲۳ آبان ۱۳۸۸

    ba tashakor tebghe mamool ali bood albateh be nazare man az ghesmathaye pish kamel tar bood kheily komakam kard




  8. صادق
    ۲۳ آبان ۱۳۸۸

    خیلی عالیه
    فقط در مورد طراحی قالب وبلاگ هم اگه میشه توضیح بدید
    ممنون از شما




  9. علیرضا
    ۳ اسفند ۱۳۸۸

    این قسمت از آموزشهای Html کاربردی ترین آموزش بود. البته برای من و تا اینجا. تشکر




  10. جميله
    ۱۰ اسفند ۱۳۸۸

    به نظر من مطالبتون خیلی ساده و روانه اما یه خواهشی ازتون داشتم بعضی از برنامه هاتون قابل اجرا نیست لطفا در نوشتن کدها و دستورات دقت بیشتری کنید و بعضی از نکاتی که ممکنه برنامه درست اجرا نشه را ذکر نمایید . با تشکر فراوان




  11. mehdi
    ۱ فروردین ۱۳۸۹

    salam:
    ba tashakor az shoma!




  12. حسین
    ۳۰ مرداد ۱۳۸۹

    ممنون
    آموزش هات رو خیلی خوب و با دقت می نویسی جای تبریک داره !
    از attribute های منسوخ(Deprecated) وقتی استفاده می کنی ذکر کنی که بهتره که با وجود CSS بهرته از ینها استفاده نشه 😉




  13. sonia
    ۱۲ بهمن ۱۳۸۹

    mamnon az in amozeshhay khobeton




  14. محمدرضا
    ۱۸ بهمن ۱۳۹۰

    دوست عزیز ، فکر میکنم لینک های دانلود فایل های آموزشی مشکل دارن




  15. تازه کار
    ۲۰ بهمن ۱۳۹۰

    خیلی عالی ممنون از زحمات




  16. masih
    ۴ فروردین ۱۳۹۱

    ین قسمت از آموزشهای Html کاربردی ترین آموزش بود.تشکر



دیدگاه خود را بنویسید