رفتن به مطلب
جستجو در
  • تنظیمات بیشتر ...
نمایش نتایجی که شامل ...
جستجو در ...

behrooz

مدیر ارشد
  • تعداد ارسال ها

    33
  • تاریخ عضویت

  • آخرین بازدید

  • روز های برد

    4

آخرین بار برد behrooz در 24 مرداد 1397

behrooz یکی از رکورد داران بیشترین تعداد پسند مطالب است !

اعتبار در سایت

26 Good

درباره behrooz

  • درجه
    از فعال گذشته

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

فعال کردن
  1. behrooz

    آموزش html

    پایان فصل اول آموزش HTML ?
  2. behrooz

    آموزش html

    جلسه بیست و سوم فرم ها در html حتما تابحال صفحات مربوط به پر کردن فرم در سایت ها را دیده اید . در اکثر مباحث آموزش html ، مواردی را معرفی کردیم که با آنها می توانستید اطلاعاتی را به کاربر نمایش بدهید اما فرم ها برای دریافت اطلاعات از کاربر و ذخیره این اطلاعات به کار می روند . در یک فرم باید شخص کاربر برخی موارد را پر کرده و برخی را نیز انتخاب کند و سپس با فشار دادن یک دکمه ، اطلاعات به سرور (server) حاوی سایت ارسال خواهد شد . تگ <form> برای ساخت یک فرم در html : شروع یک فرم را با تگ شروع <form> و پایان فرم را با تگ پایانی <form/> اعلام می کنیم . محتویات فرم در بین این دو تگ قرار خواهند گرفت . اطلاعات دریافتی از کاربر باید توسط صفحه ای دیگر مورد پردازش قرار گیرد . درون تگ شروع <form> باید مشخصه action را برابر آدرس صفحه ای قرار بدهیم که می خواهد بر روی اطلاعات دریافت شده از کاربر پردازش انجام دهد . معمولا صفحه پردازش با استفاده از php نوشته می شود . php زبانی است که برای نوشتن صفحات اینترنتی دینامیک به کار می رود (برخلاف html که برای نوشتن صفحات اینترنتی استاتیک به کار می رود ) . صفحه ای که اطلاعات را پردازش می کند ، می تواند اطلاعات را بر روی یک پایگاه داده ذخیره کند یا آنها را در صفحه ای از سایت نمایش بدهد یا به ایمیل ارسال کند و یا اینکه موارد دلخواه دیگری را انجام بدهد . تگ <input> : با استفاده از تگ <input> می توانیم شیوه های مختلفی از انواع دریافت اطلاعات از کاربر را به کار ببریم . برای این منظور باید تگ <input> را درون زوج تگ <form> و <form/> بنویسیم . درون تگ <input> باید مشخصه type را تعیین کنیم تا مشخص شود که نوع دریافت اطلاعات از کاربر به چه صورت می باشد . انواع دریافت اطلاعات از کاربر با استفاده از تگ <input> را در زیر شرح می دهیم : جعبه متن : فرض کنید بخواهیم یک جعبه متن را طراحی کنیم که در آن کاربر متن دلخواه خود را نوشته و سپس این متن به سرور (server) حاوی سایت ارسال شود . برای این منظور باید درون تگ <input> ، مشخصه type را برابر text قرار بدهیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <form method="post" action="script.php"> <input type="text"> </form> </body> </html> نتیجه : نکته : کاربر ابتدا باید درون جعبه متن ، متن دلخواه خود را نوشته و سپس کلید enter را فشار بدهد تا متن نوشته شده توسط صفحه script.php مورد پردازش قرار بگیرد . البته روش بهتر این است که یک دکمه برای ارسال متن ، طراحی شود زیرا معمولا یک فرم شامل چندین بخش برای پر کردن و انتخاب می باشد و بنابراین ابتدا کاربر باید تمامی بخش ها را پر کرده و انتخاب کند و در انتها نیز دکمه ای برای ارسال اطلاعات در نظر گرفته شده باشد . بنابراین قبل از اینکه شیوه های دیگر دریافت اطلاعات برای فرم را توضیح بدهیم ، ابتدا نحوه ساخت دکمه ارسال اطلاعات (دکمه submit) را شرح خواهیم داد . طراحی دکمه ارسال اطلاعات (دکمه submit) : برای طراحی دکمه ارسال اطلاعات (دکمه submit) ، باید در انتهای فرم و قبل از تگ پایانی <form/> ، عبارت زیر را بنویسیم : <input type="submit" value="submit message"> عبارتی که برای مشخصه value تعیین می کنیم ، بر روی دکمه ارسال اطلاعات (دکمه submit) نمایش داده می شود . <html> <head> </head> <body> <form method="post" action="script.php"> <input type="text"> <input type="submit" value="submit message"> </form> </body> </html> نتیجه : دکمه های رادیویی : حتما تاکنون دکمه های رادیویی را در فرم های اینترنتی دیده اید . این دکمه ها به صورت دایره های توخالی می باشند که اگر بر روی آنها کلیک کنید به صورت توپر در می آیند . توپر شدن یک دکمه رادیویی نشان دهنده انتخاب عبارت نوشته شده برای آن دکمه رادیویی می باشد . برای ساخت دکمه های رادیویی ، باید درون تگ <input> ، مشخصه type را برابر radio قرار بدهیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <form method="post" action="script.php"> yes<input type="radio" value="yes"><br /> no<input type="radio" value="no"> </form> </body> </html> نتیجه : yes no مشاهده می کنید که دو گزینه yes و no به کاربر نمایش داده شده است که کاربر باید یکی از آنها را انتخاب کند . نکته : در مثال قبل ، ممکن است کاربر به اشتباه ، ابتدا گزینه غلط را انتخاب کند و پس از متوجه شدن اشتباه بودن انتخاب خود ، گزینه صحیح را انتخاب کند ، در این زمان هر دو دکمه رادیویی به صورت توپر نمایش داده می شوند و دیگر کاربر نمی تواند گزینه غلط را به صورت توخالی در آورد . برای پیشگیری از وقوع این مشکل باید برای هر دو دکمه رادیویی یک نام را انتخاب کنیم ، یعنی اینکه برای تگ <input> ، مشخصه name را برای هر دو دکمه رادیویی به صورت یک نام واحد انتخاب کنیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <form method="post" action="script.php"> yes<input name="yes_or_no" type="radio" value="yes"><br /> no<input name="yes_or_no" type="radio" value="no"> </form> </body> </html> نتیجه : yes no جعبه انتخاب : جعبه انتخاب ، جعبه ای می باشد که در جلوی یک عبارت (گزینه) قرار می گیرد و چنانچه بخواهیم آن گزینه را انتخاب کنیم باید درون آن جعبه کلیک کنیم ، آنگاه درون جعبه یک علامت ((تیک)) نمایش داده خواهد شد . چنانچه برای بار دوم درون جعبه کلیک کنیم ، آنگاه علامت ((تیک)) برداشته می شود . برای ساخت یک جعبه انتخاب ، باید درون تگ <input> ، مشخصه type را برابر checkbox قرار دهیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <form method="post" action="script.php"> yes<input type="checkbox"><br> no<input type="checkbox"> </form> </body> </html> نتیجه : yes no جعبه کلمه عبور (پسورد) : جعبه کلمه عبور (پسورد) در واقع یک جعبه متن است که اطلاعاتی که کاربر در آن می نویسد به صورت آرایه ای از علامت * نمایش داده می شود و برای وارد کردن اطلاعات محرمانه و کلمه های عبور (کلمه رمز) مناسب می باشد . نمایش اطلاعات با علامت * ، باعث می شود تا افرادی که در کنار کاربر هستند ، نتوانند اطلاعات وارد شده توسط وی در جعبه کلمه عبور را ببینند . برای ساخت یک جعبه کلمه عبور باید درون تگ <input> ، مشخصه type را برابر password قرار دهیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <form method="post" action="script.php"> <input type="password"> </form> </body> </html> نتیجه : چنانچه در جعبه نمایش داده شده ، کلماتی را بنویسید ، به جای حروف آن کلمات ، علامت * نمایش داده می شود .
  3. behrooz

    آموزش html

    جلسه بیست و دوم ساخت لیست (فهرست) در html فهرست ها جزو مواردی هستند که بسیار در ساختار سایت ها به کار می روند . یک فهرست شامل تعدادی بخش های مختلف است که به ترتیب و پشت سر هم نمایش داده می شوند . این بخش ها می توانند شامل موارد مختلفی همچون متن ، عکس ، جدول و … باشند . می توان در کنار این بخش ها ، شماره و یا هر شکل کوچک دیگری را قرار داد . انواع فهرست ها در html : در html ، دو نوع فهرست داریم که تفاوت آنها در نحوه علامت گذاری بخش های مختلف فهرست می باشد . نوع اول ، فهرست های شماره دار و نوع دوم ، فهرست های بدون شماره می باشد . تگ هایی که برای این دو نوع فهرست به کار می روند ، متفاوت می باشند . برای فهرست های شماره دار از زوج تگ <ol> و <ol/> و برای فهرست های بدون شماره از زوج تگ <ul> و <ul/> استفاده می کنیم . فهرست های بدون شماره در html : تگ <ul> در html برای ساخت فهرست های بدون شماره به کار می رود . در واقع شروع یک فهرست بدون شماره را با تگ <ul> و پایان فهرست را با تگ <ul/> اعلام می کنیم . برای تعریف هر بخش فهرست ، باید از تگ <li> استفاده کنیم ، یعنی عبارت مربوط به آن بخش از فهرست را باید در میان زوج تگ <li> و <li/> قرار بدهیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <ul> <li>number 1</li> <li>number 2</li> <li>number 3</li> </ul> </body> </html> نتیجه : number 1 number 2 number 3 مشاهده می کنید که در کنار هر بخش فهرست ، یک علامت به شکل دایره توپر نمایش داده شده است . فهرست های شماره دار در html : تگ <ol> در html برای ساخت فهرست های شماره دار به کار می رود . در واقع شروع یک فهرست شماره دار را با تگ <ol> و پایان فهرست را با تگ <ol/> اعلام می کنیم . برای تعریف هر بخش فهرست ، باید از تگ <li> استفاده کنیم ، یعنی عبارت مربوط به آن بخش از فهرست را باید در میان زوج تگ <li> و <li/> قرار بدهیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <ol> <li>number 1</li> <li>number 2</li> <li>number 3</li> </ol> </body> </html> نتیجه : number 1 number 2 number 3 مشاهده می کنید که در کنار هر بخش فهرست ، شماره ای متناسب با ترتیب قرارگیری آن بخش در فهرست ، نمایش داده شده است .
  4. behrooz

    آموزش html

    جلسه بیست و یکم ساخت جدول در html استفاده از جداول ، شیوه ای مناسب برای نمایش اطلاعات دسته بندی شده و منظم می باشد . در html از تگ <table> برای ساخت یک جدول استفاده می شود . شروع جدول را با تگ شروع <table> و پایان جدول را با تگ پایان <table/> اعلام می کنیم . درون این دو تگ ، با هر تگ <tr> می توانیم یک سطر برای جدول ایجاد کنیم . درون زوج تگ <tr> و <tr/> ، با هر تگ <td> می توانیم یک خانه برای آن سطر ایجاد کنیم . به مثال زیر توجه کنید. جدولی با 2 سطر و 2 ستون می سازیم : <html> <head> </head> <body> <table border="1"> <tr> <td>cell number 1</td> <td>cell number 2</td> </tr> <tr> <td>cell number 3</td> <td>cell number 4</td> </tr> </table> </body> </html> نتیجه : cell number 1 cell number 2 cell number 3 cell number 4 باید دقت داشته باشید که برای تگ <table> ، مشخصه border را برابر 1 قرار داده ایم . اگر این مشخصه را تعیین نکنیم ، جدول بدون دیواره نمایش داده می شود . این حالت را در مثال زیر بررسی می کنیم : <html> <head> </head> <body> <table> <tr> <td>cell number 1</td> <td>cell number 2</td> </tr> <tr> <td>cell number 3</td> <td>cell number 4</td> </tr> </table> </body> </html> نتیجه : cell number 1cell number 2 cell number 3cell number 4 مشاهده می کنید که جدول بدون دیواره می باشد .
  5. behrooz

    آموزش html

    جلسه بیستم نمایش عکس ها در html نمایش عکس ها در فایل html بسیار پرکاربرد می باشد زیرا ارزش یک تصویر بیش از هزاران کلمه می باشد تا بتوانید به سادگی منظور خود را به مخاطب منتقل کنید . اما در استفاده از عکس ها باید بسیار مراقب باشید زیرا اگر حجم عکس های یک صفحه html زیاد باشد آنگاه زمان بارگذاری آن صفحه در مرورگر کاربر زیاد می شود و ممکن است کاربر پشیمان شده و از سایت شما خارج شود . توصیه می شود که هم این جنبه را در نظر بگیرید که عکس های سودمند برای کاربر جذاب خواهد بود و هم اینکه حجم عکس های مورد استفاده اگر زیاد باشد ممکن است کاربر را فراری بدهد . تگ <img> برای نمایش عکس ها در صفحات html : در html از تگ <img> برای نمایش عکس ها استفاده می شود ، به این صورت که باید آدرس عکس مورد نظرمان را در تگ <img> بنویسیم . برای این منظور از مشخصه src در تگ <img> استفاده می شود . در مباحث ابتدایی شرح داده شد که بهتر است بر روی desktop خود فولدری به نام www.mysite.com بسازید و در آن فایلی را که کدها را در آن تست می کنید (با نام index.html) قرار دهید . چنانچه این کار را انجام داده باشید ، اکنون باید درون این فولدر یک فولدر با نام images بسازید تا فایل های عکس ها را در این فولدر قرار دهید . در مثال های بعدی فرض شده است که فایل های عکس شما درون این فولدر قرار دارد . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> first paragraph . </p> <img src="images/photo.gif" /> <p> second paragraph . </p> </body> </html> ابتدا درون فولدر images عکسی با نام photo.gif قرار دهید . سپس کدهای زیر را بنویسید : نتیجه : . first paragraph . second paragraph مشاهده می کنید که عکس مورد نظر بین دو پاراگراف نمایش داده شده است .
  6. behrooz

    آموزش html

    جلسه نوزدهم تگ های شیوه نمایش متن در html معمولا زیاد پیش می آید که بخواهیم بخشی از متن را به شیوه ای خاص نمایش بدهیم ، مثلا برجسته تر ، زیرخط دار ، به صورت زیر نویس ، به صورت بالانویس و … . در html برای هر یک از این نمایش ها ، تگ های اختصاصی وجود دارد که در ادامه آنها را شرح خواهیم داد . نمایش متن با حروف پررنگ با تگ <b> : چنانچه قصد داشته باشیم بخشی از متن با حروف پررنگ نمایش داده شود باید از زوج تگ <b> و <b/> استفاده کنیم . حرف b از حرف اول کلمه Bold گرفته شده است . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> this text is not bold . </p> <p> <b>this text is bold .</b> </p> </body> </html> نتیجه : this text is not bold . this text is bold . در مثال فوق ، تفاوت بین یک متن Bold و یک متن غیر Bold نمایش داده شده است . نمایش متن به صورت زیرخط دار با تگ <ins> : برای آنکه متن یا کلماتی را به صورت زیرخط دار نمایش دهیم ، تنها کافی است که آن متن یا کلمات را در بین زوج تگ <ins> و <ins/> بنویسیم . به مثال زیر توجه کنید : <html> <head> </head> <body> please visit <ins>karenit</ins> . </body> </html> نتیجه : please visit karenit مشاهده می کنید که کلمه karenit به صورت زیرخط دار نمایش داده شده است . نمایش متن به صورت ایتالیک با تگ <i> : چنانچه تمایل داشته باشید بخشی از متن را به صورت ایتالیک نمایش دهید باید آن بخش از متن را بین زوج تگ <i> و <i/> قرار دهید . به مثال زیر توجه کنید : <html> <head> </head> <body> <p>this text is about html</p> <i>this text is about html</i> </body> </html> نتیجه : this text is about html this text is about html در مثال فوق تفاوت بین یک متن ایتالیک و یک متن غیر ایتالیک به خوبی نمایش داده شده است . نمایش متن به صورت زیرنویس با تگ <sub> : گاهی پیش می آید که بخواهیم یک یا چند کلمه را به صورت زیرنویس بنویسیم . در html برای این منظور از تگ <sub> استفاده می شود . به مثال زیر توجه کنید : <html> <head> </head> <body> this is<sub>karenit</sub> </body> </html> نتیجه : this is karenit مشاهده می کنید که کلمه karenit به صورت زیرنویس نوشته شده است . نمایش متن به صورت بالانویس با تگ <sup> : برای نوشتن یک یا چند کلمه به صورت بالانویس ، باید از زوج تگ <sup> و <sup/> استفاده کنیم . کلماتی که می خواهیم به صورت بالانوبس نوشته شوند باید در بین زوج تگ <sup> و <sup/> قرار بگیرند . به مثال زیر توجه کنید : <html> <head> </head> <body> this is<sup>karenit</sup> </body> </html> نتیجه : this is karenit در متن بالا ، کلمه karenit به صورت بالانویس نوشته شده است .
  7. behrooz

    آموزش html

    جلسه هجدهم ترسیم خط افقی در html با تگ hr استفاده از خط افقی ، شیوه ای ساده برای جدا کردن مطالب مختلف از یکدیگر می باشد . برای ترسیم یک خط افقی در html ، از تگ <hr> استفاده می شود . در واقع این تگ باعث می شود که مطالب قبل و بعد از آن با یک خط افقی از یکدیگر جدا شوند . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> first paragraph . </p> <hr> <p> second paragraph . </p> </body> </html> نتیجه : first paragraph . second paragraph . مشاهده می کنید که بین پراگراف اول و پاراگراف دوم یک خط افقی رسم شده است .
  8. behrooz

    آموزش html

    جلسه هفدهم نوشتن توضیحات در فایل html معمولا زمانی که حجم کدهای فایل html افزایش یابد مجبور می شوید که توضیحاتی را برای بخش های مختلف کدها بنویسید تا در آینده راحت تر بتوانید آنها را تغییر دهید . این روش بسیار کارآمد است و از گیج شدن در بین انبوه کدها جلوگیری می کند . شروع توضیحات را با علامت های –!> و پایان توضیحات را با علامت های <– اعلام می کنیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <!-- comment about first paragragh --> <p> first paragraph . </p> <!-- comment about second paragragh --> <p> second paragraph . </p> </body> </html> نتیجه : .first paragraph .second paragraph مشاهده می کنید که دو توضیح نوشته شده در بین کدها ، در مرورگر نمایش داده نشده اند .
  9. behrooz

    آموزش html

    جلسه شانزدهم تعیین مشخصات فونت ها در html در یک فایل html بیش از هر چیز ، متن ها به کار می روند . زیبایی ، اندازه ، رنگ و سایر ویژگی های فونت های به کار رفته در متن اهمیت بسیار زیادی دارد . در html از تگ <font> برای تعیین ویژگی های فونت ها استفاده می شود . البته این کار را با CSS نیز می توان انجام داد و مطمئنا استفاده از CSS انتخاب بسیار بهتری می باشد ، اما برای شروع یادگیری و حتی در مواقعی خاص ، استفاده از تگ <font> مفید خواهد بود . تعیین نوع فونت ها با مشخصه face : در تگ <font> با استفاده از مشخصه face می توانیم نوع فونت را تعیین کنیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> <font face="Georgia"> this is a paragraph . </font> </p> </body> </html> نتیجه : با توجه به اینکه مشخصه face در تگ <font> برابر با Georgia قرار داده شده است ، بنابراین متن با فونت Georgia نمایش داده شده است . تعیین اندازه فونت ها با مشخصه size : در تگ <font> با استفاده از مشخصه size می توانیم اندازه فونت را تعیین کنیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> <font size="3"> first paragraph . </font> </p> <p> <font size="6"> second paragraph . </font> </p> </body> </html> نتیجه : پاراگراف اول را با مشخصه size برابر 3 و پاراگراف دوم را با مشخصه size برابر 6 قرار داده ایم و تفاوت اندازه فونت های دو پاراگراف به خوبی قابل مشاهده می باشد . تعیین رنگ فونت ها با مشخصه color : در تگ <font> با استفاده از مشخصه color می توانیم رنگ فونت را تعیین کنیم . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> <font color="red"> this is a paragraph . </font> </p> </body> </html> نتیجه : مشاهده می کنید که رنگ فونت ها به رنگ قرمز نمایش داده شده است زیرا مشخصه color در تگ <font> را برابر red قرار داده ایم .
  10. behrooz

    آموزش html

    جلسه پانزدهم ساخت لینک در html یکی از بهترین قابلیت های html ، امکان ساخت لینک می باشد تا کاربران به راحتی از یک صفحه html به صفحه ای دیگر بروند . تگ مورد استفاده برای ساخت لینک در html ، تگ <a> می باشد . به مثال زیر توجه کنید : <html> <head> </head> <body> <a href="http://www.karenit.ir">karenit</a> </body> </html> نتیجه : karenit مشاهده می کنید که عبارت karenit به صورت یک لینک نمایش داده شده است . مشخصه href در تگ <a> ، آدرس لینک را مشخص کرده است که برابر http://www.karenit.ir قرار داده شده است بنابراین چنانچه بر روی این لینک کلیک کنید صفحه اینترنتی مربوط به آدرس ذکر شده نمایش داده می شود . مشخصه target برای تعیین نحوه باز شدن لینک در مرورگر : با استفاده از مشخصه target در تگ <a> می توانیم مشخص کنیم که لینک در همین پنجره فعلی باز شود و یا اینکه در پنجره جدیدی باز شود . به مثال زیر توجه کنید : <html> <head> </head> <body> <a href="http://www.karenit.ir" target="_blank">karenit</a> </body> </html> نتیجه : karenit چنانچه بر روی لینک ساخته شده کلیک کنید ، لینک در یک پنجره جدید باز می شود .
  11. behrooz

    آموزش html

    جلسه چهاردهم تعیین رنگ در html در طراحی صفحات html در موارد زیادی همچون تعیین رنگ پس زمینه ، رنگ فونت های متن و … می توانیم از رنگ های مختلف استفاده کنیم . برای تعیین یک رنگ مشخص در html ، سه روش وجود دارد که در ادامه هر یک را شرح خواهیم داد . روش اول : تعیین رنگ به صورت Name در این روش تنها کافی است که نام رنگ مورد نظرمان را بنویسیم . به مثال زیر توجه کنید : <html> <head> </head> <body bgcolor="yellow"> <p> this is a paragraph . </p> </body> </html> نتیجه : مشاهده می کنید که رنگ پس زمینه به صورت زرد نمایش داده شده است . روش دوم : تعیین رنگ به صورت HEX در این روش به هر رنگ یک کد شامل 6 کاراکتر اختصاص یافته است . این کاراکترها می توانند اعداد 0 تا 9 و یا حروف A تا F باشند . قبل از نوشتن 6 کاراکتر ، باید علامت ((#)) را بنویسیم . به مثال زیر توجه کنید : <html> <head> </head> <body bgcolor="#FF0000"> <p> this is a paragraph . </p> </body> </html> نتیجه : مشاهده می کنید که رنگ پس زمینه برابر با رنگ متناظر با کد FF0000 ، که کد مربوط به رنگ قرمز می باشد ، نمایش داده شده است . روش سوم : تعیین رنگ به صورت rgb در این روش هر رنگ با سه عدد مشخص می شود که هر عدد می تواند از 0 تا 255 باشد . به مثال زیر توجه کنید : <html> <head> </head> <body bgcolor="rgb(255,0,255)"> <p> this is a paragraph . </p> </body> </html> نتیجه : مشاهده می کنید که رنگ پس زمینه برابر با رنگ متناظر با کد (255,0,255)rgb نمایش داده شده است .
  12. behrooz

    آموزش html

    جلسه سیزدهم تغییر رنگ پس زمینه سایت چنانچه رنگ پس زمینه سایت را مشخص نکنید ، رنگ پس زمینه به طور پیش فرض به صورت سفید نمایش داده می شود . به مثال زیر توجه کنید : <html> <head> </head> <body> <p> this is a paragraph . </p> </body> </html> نتیجه : مشاهده می کنید که رنگ پس زمینه همان رنگ پس زمینه پیش فرض ، یعنی رنگ سفید ، می باشد . مشخصه bgcolor برای تگ body : برای آنکه رنگ پس زمینه دیگری غیر از رنگ سفید انتخاب کنیم ( مثلا سبز ) می توانیم از مشخصه bgcolor برای تگ body استفاده کنیم . به مثال زیر توجه کنید : <html> <head> </head> <body bgcolor="green"> <p> this is a paragraph . </p> </body> </html> نتیجه : مشاهده می کنید که رنگ پس زمینه به صورت سبز رنگ نمایش داده شده است . برای تعیین رنگ در html ، چندین روش وجود دارد که این روش ها را در مبحث بعدی شرح خواهیم داد
  13. behrooz

    آموزش html

    جلسه دوزادهم ساخت اسکلت یک سایت کامل اکنون آماده هستید که اسکلت یک سایت کامل را بسازید . کار من این است که کدهای مربوط به اسکلت یک سایت کامل را به شما بدهم و کار شما تنها یک چیز است و آن ((خرابکاری)) می باشد . نخندید کاملا جدی گفتم ، شما باید این کدها را کپی کرده و نتیجه را مشاهده کنید که یک اسکلت کامل برای سایت است سپس باید بخش های مختلف آن را دستکاری کنید و ببینید چه چیزهایی خراب می شود . تنها با این روش است که می توانید به چگونگی شکل گرفتن این اسکلت پی ببرید . نگران خرابکاری نباشید هر وقت که بخواهید کدهای صحیح در این صفحه در اختیار شما می باشد . البته من نیز توضیحاتی را در مورد کدها ارائه خواهم کرد . <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>عنوان صفحه</title> <style type="text/css"> body { font-family:Arial, Helvetica, sans-serif; text-align:right; direction:rtl; } .container { width:100%; margin:0 auto; } body, div, h1, h2, h3, h4, h5, h6, p, ul, img { margin:0px; padding:0px; } #logo1 { background:url(../images/kelid.gif) no-repeat; width:100%; height:180px; background-position:center } #tagline { padding-top:60px; text-align:center; } #tagline h3 { font-size: 30px; color: #09F; } ul#menu { list-style:none; padding-top:50px; } ul#menu li a { font-size:20px; color:#090; text-decoration:none; } ul#menu li { float:right; padding-left:0px; padding-right:30px; width:150px; } #sidebar1 { width: 20%; float:left; direction:rtl; padding-top:30px; padding-bottom:30px; padding-right:2%; padding-left:2%; } ul#sidebar1_menu { list-style:none; } #content { width:52%; float:left; padding-top:30px; padding-bottom:30px; padding-right:0px; } #content h2 { font-size: 24px; color: #00C; padding-top: 25px; } #content h3 { font-size:24px; color:#444444; padding:20px; } #content h4 { font-size: 18px; color: #373737; font-weight: normal; } #content p { text-align:justify; font-size: 18px; color: #000; padding-top: 20px; } #content small { font-size: 12px; color: #373737; } #content a { color: #F33; font-weight: bold; text-decoration: none; } #sidebar2 { width: 20%; float:left; direction:rtl; padding-top:30px; padding-bottom:30px; padding-left:2%; padding-right:2%; } ul#sidebar2_menu { list-style:none; } ul#sidebar2_menu li a { text-decoration:none; } #footer { width: 100%; text-align:center; padding-top:60px; } </style> </head> <body> <div id="main"> <div class="container"> <div id="header"> <div id="logo1"> <div id="tagline"> <h3>شعار تبلیغاتی سایت شما در این محل نمایش داده می شود</h3> </div> </div> <div style="clear:both"></div> <ul id="menu"> <li><a href="#">خانه</a></li> <li><a href="#">مبحث اول</a></li> <li><a href="#">مبحث دوم</a></li> <li><a href="#">مبحث سوم</a></li> <li><a href="#">تماس با ما</a></li> </ul> <div style="clear:both"></div> </div><!--end header --> <div id="sidebar1"> <h3>عنوان ستون سمت چپ</h3> <br /> <ul id="sidebar1_menu"> <li>عبارت اول از ستون سمت چپ</li> <hr /> <li>عبارت دوم از ستون سمت چپ</li> <hr /> <li>عبارت سوم از ستون سمت چپ</li> <hr /> </ul> </div><!--end sidebar1--> <div id="content"> <h1>عنوان اصلی مبحث</h1> <h2>زیر عنوان :</h2> <p> مباحث به زبان فارسی در این محل نوشته خواهد شد . </p> </div><!--end content--> <div id="sidebar2"> <h3>عنوان ستون سمت راست</h3> <br /> <ul id="sidebar2_menu"> <li><a href="#">اولین لینک از ستون سمت راست</a></li> <hr /> <li><a href="#">دومین لینک از ستون سمت راست</a></li> <hr /> <li><a href="#">سومین لینک از ستون سمت راست</a></li> <hr /> </ul> </div><!--end sidebar2--> <div style="clear:both"></div> </div><!--end main container--> </div><!--end main--> <div id="footer"> <div class="container"> <div style="clear:both"></div> <p> Copyright © 2012 www.yoursite.com <br /> All Rights Reserved </p> </div><!--end footer container--> </div><!--end footer--> </body> </html> توضیحاتی در مورد کدها : نحوه جداسازی بخش های مختلف سایت با تگ div : در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد . بخش های مختلف سایت عبارتند از header که در بالاترین بخش سایت نمایش داده می شود و درواقع سردر ورودی سایت می باشد ، sidebar1 که ستون سمت چپ سایت است ، sidebar2 که ستون سمت راست سایت است ، content که مطالب مربوط به هر صفحه در آن نوشته می شود و بین دو ستون اصلی سایت قرار می گیرد و footer که در پایین ترین بخش سایت قرار می گیرد و معمولا حاوی علامت تجاری سایت ، حقوق مادی و معنوی سایت و … می باشد . چگونگی نوشته شدن کدهای CSS : کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ <head> و <head/> ) . شروع کدهای CSS را با تگ <“style type=”text/css> و پایان کدهای CSS را با تگ <style/> اعلام کرده ایم . سپس ابتدا باید مشخص کنیم که می خواهیم مشخصه ها را به کدام بخش سایت اعمال کنیم . اگر بخواهیم مشخصه ای را به محتویات یک تگ div اعمال کنیم باید ابتدا علامت # را نوشته و بعد از این علامت ، نام id مربوط به آن تگ div را بنویسیم . سپس یک علامت ((})) را نوشته و پس از آن مشخصه های مورد نظرمان را می نویسیم . چنانچه قصد نوشتن چند مشخصه را داشته باشیم باید آنها را با علامت ((;)) از یکدیگر جدا کنیم . پس از نوشتن تمامی مشخصه های مورد نظرمان ، علامت (({)) را به کار می بریم تا اعلام کنیم که مشخصه های آن تگ div پایان یافته است . برای سایر تگ ها نیز باید همین شیوه را اجرا کنیم و کدهای آنها را پشت سرهم بنویسیم . همان طور که می بینید برای تعیین مشخصه های تگ های div ، ترتیب فراخوانی تگ های div دقیقا مثل ترتیب نوشته شدن کدهای آنها در بخش body فایل html می باشد . نکته : بهترین انتخاب برای نوشتن کدهای CSS ، نوشتن آنها در فایلی جدا از فایل html می باشد زیرا با این شیوه می توانید کدهای CSS را به هر فایل html که بخواهید اعمال کنید و برای این کار تنها باید در فایل html آدرس فایل حاوی کدهای CSS را مشخص کنید . ما فعلا از این شیوه استفاده نکرده ایم تا گیج نشوید و تمرکز اصلی خود را فعلا بر روی نکات دیگر قرار دهید . نحوه چیدمان بخش های مختلف سایت در کنار هم : نحوه چیدمان بخش های مختلف سایت باید به این شکل باشد که ابتدا header نمایش داده شود و سپس دو ستون اصلی سایت و بخش content باید در پایین قسمت header نمایش داده شوند . ما برای کنار هم قرار دادن دو ستون اصلی و بخش content از مشخصه float استفاده کرده ایم که باعث می شود تگ های div شناور شوند و موقعیت خود را بر اساس تگ div کنار خود ، تنظیم کنند . در کدهای CSS مشاهده می کنید که برای هر سه تگ div با id های sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به این صورت که چون ابتدا کدهای sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعیین کرده ایم تا در سمت چپ صفحه قرار بگیرد ، سپس بخش content را داریم که مشخصه float آن را نیز برابر left تعیین کرده ایم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس برای sidebar2 نیز مشخصه float را برابر left تعیین کرده ایم تا در کنار بخش content که در سمت چپ آن است بچسبد . نکته : برای آنکه دو ستون اصلی و بخش content به درستی در کنار هم قرار بگیرند باید مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زیر sidebar1 و content قرار بگیرد . برای فهمیدن عرض هر بخش ابتدا باید در کدهای CSS نگاه کنید و ببینید عرض آن بخش چقدر تعریف شده است و علاوه بر این باید ببینید که این بخش ها دارای مشخصه padding-left یا padding-right هستند یا نه . زیرا باید میزان این مشخصه ها را به عرض تعریف شده اضافه کنید . به عنوان مثال در کدهای بالا عرض های تعریف شده به صورت درصد می باشند و زمانی که کل درصدها را برای sidebar1 ، content و sidebar2 جمع بزنید ، برابر 100 درصد خواهد شد .
  14. behrooz

    آموزش html

    جلسه یازدهم استفاده از id برای دادن نام اختصاصی به هر تگ div همانطور که در مبحث قبلی گفتم ، نوشتن مشخصه style درون تگ div انتخاب مناسبی نیست و ما به جای آن روش بهتری را پیشنهاد می کنیم . در این روش برای هر تگ div یک نام اختصاصی ( یک id ) در نظر می گیریم و سپس ویژگی هایی را که می خواهیم به آن تگ div نسبت دهیم را در قسمت head از فایل html قرار می دهیم . همان مثال مبحث قبل را این بار با این روش می نویسیم : <html> <head> <style type="text/css"> #column1 { float:left; padding-right:100px; } #column2 { float:left; } </style> </head> <body> <div id="column1"> <p>paragraph number 1</p> </div> <div id="column2"> <p>paragraph number 2</p> </div> </body> </html> نتیجه : paragraph number 1 paragraph number 2 مشاهده می کنید که نتیجه دقیقا همان نتیجه مثال مبحث قبلی است . این روش بسیار کارآمد است که باعث می شود با گذشت زمان که صفحه شما شلوغ تر می شود ، گیج نشوید و راحت تر بتوانید مشخصه های هر تگ را تغییر دهید . در کدنویسی بالا ، ابتدا برای تگ div اول یک id با نام column1 و برای تگ div دوم یک id با نام column2 مشخص کرده ایم . حال باید کدهای CSS را بنویسیم . محل کدهای CSS باید بین تگ های <head> و <head/> باشد . شروع کدهای CSS را با تگ شروع <style type=”text/css”> اعلام می کنیم و پایان کدهای CSS را نیز با تگ پایانی <style/> اعلام می کنیم ، سپس بین این دو تگ ، کدهای CSS را می نویسیم . برای تگ های div ، نام هایی اختصاصی ( id ) ساختیم تا بتوانیم در این محل به آنها ویژگی هایی را اختصاص دهیم . برای اینکه هر تگ div را مشخص کنیم ابتدا علامت # را نوشته و سپس نام id مربوط به آن را می نویسیم . سپس بین دو علامت { و } تمامی مشخصه هایی را که می خواهیم برای آن تگ div می نویسیم .
  15. behrooz

    آموزش html

    جلسه دهم تگ div برای ساخت اسکلت سایت من قبل از اینکه طراحی سایت را یاد بگیرم چندین بار آموزش های مختلف html را در مراجع مختلف خوانده بودم اما آنقدر آن مراجع در مورد تگ ها و مشخصه های تگ ها توضیح می دادند که در نیمه راه خسته می شدم و آن را رها می کردم . تا اینکه در مرجعی که برای آموزش طراحی قالب سایت بود با تگ div آشنا شدم و یاد گرفتم که ابتدا با تگ های div ، اسکلت و ساختار اصلی سایت خود را بسازم و سپس هرگاه از بخشی از ظاهر این ساختار خوشم نیامد به سراغ یادگیری تگ های جدید بروم و با آنها سایت خود را بهتر و زیباتر کنم . بنابراین در این مرحله شما را با تگ div آشنا می کنم ، شاید این آشنایی زود باشد اما حکمت دارد !!! امروزه در اکثر سایت ها یک شکل برای بالای سایت (header) و یک ستون اصلی در وسط برای محتوای هر صفحه (content) ، دو ستون برای دو طرف ستون اصلی که شامل لینک ها ، اخبار کوتاه ، تبلیغات ، پیام ها و … می باشند (sidebar1 و sidebar2) و در پایین صفحه نیز بخشی برای تبلیغات ، معرفی شرکت صاحب سایت ، حقوق سایت و … (footer) ، به کار می رود . اما قبلا مشاهده کردید که مرورگر دستورات html را خوانده و بخش هایی را که باید نمایش دهد به صورت ستونی و پشت سرهم نمایش می دهد ، بنابراین ما به تگی نیاز داریم که با آن بخش های مختلف صفحه را از یکدیگر جدا کنیم و سپس بتوانیم بر روی هر بخش تغییرات مورد نظر خود را اعمال کنیم ، به گونه ای که این تغییرات چیدمان سایر بخش ها را به هم نریزد . تگ مورد استفاده برای این منظور ، تگ div می باشد . نمایش اطلاعات دو div به صورت پشت سرهم : در واقع این حالت ، حالت متداول است و چنانچه هیچ مشخصه ای برای نحوه قرارگیری تگ های div در کنار هم مشخص نکنید ، آنگاه خود به خود اطلاعات درون تگ های div پشت سرهم نمایش داده می شود . <html> <body> <div> <p>paragraph number 1</p> </div> <div> <p>paragraph number 2</p> </div> </body> </html> نتیجه : paragraph number 1 paragraph number 2 مشاهده می کنید که نتیجه با حالتی که از دو پاراگراف پشت سر هم استفاده کنیم یکسان است . نمایش اطلاعات دو div به صورت دو ستون در کنار هم : با مثال بعدی نشان خواهیم داد که چگونه می توانیم اطلاعات درون دو div را به صورت دو ستون در کنار هم قرار دهیم : <html> <body> <div style="float:left ; padding-right:100px"> <p>paragraph number 1</p> </div> <div style="float:left"> <p>paragraph number 2</p> </div> </body> </html> نتیجه : paragraph number 1 paragraph number 2 این بار اطلاعات درون دو تگ div در دو ستون کنار هم نمایش داده شده اند و دلیل آن استفاده از مشخصهstyle=”float:left” می باشد . این مشخصه ، تگ های div را به صورت شناور در می آورد و با تعیین جهت left برای float ، باعث شده ایم که تگ div دوم در سمت راست تگ div اول قرار بگیرد . دقت شود که در تگ div اول از مشخصه padding-right:100px استفاده کرده ایم که باعث می شود به اندازه 100 پیکسل از محتویات تگ div دوم که در سمت راست آن قرار خواهد گرفت ، فاصله بگیرد . نکته : مشخصه style مربوط به CSS می باشد . CSS شیوه ای است که با استفاده از آن می توانید حجم کدنویسی خود را به نحو چشمگیری کاهش دهید . در واقع از شیوه CSS به روش های مختلفی می توان استفاده نمود که روش فوق ساده ترین حالت آن ، اما نه بهترین انتخاب ، می باشد . در مباحث بعدی شکل دیگری از استفاده از شیوه CSS را برای شما شرح خواهم داد .
×
×
  • اضافه کردن...