<![CDATA[انجمن های تخصصی علوم رایانه و هنرهای دیجیتال - صفحات استاتیک ]]> https://www.forum.cgaria.com/ Wed, 27 May 2026 02:32:34 +0000 MyBB <![CDATA[پرسشنامه ارزیابی سایت های تجارت الکترونیک ایران]]> https://www.forum.cgaria.com/thread-1348.html Wed, 18 Jan 2017 20:45:51 +0330 ghiyas]]> https://www.forum.cgaria.com/thread-1348.html پرسشنامه حاضر به منظور انجام پایان نامه کارشناسی ارشد با عنوان "ارزيابي و رتبه بندی شركت ها بر اساس معیارهای اعتماد در تجارت الکترونیک " طراحی شده است 
عزیزانی که تجربه خرید  از فروشگاه های ایرانی به صورت اینترنتی را دارند این پرسشنامه را تکمیل نمایند
انجام این پایان نامه در گرو دریافت نظرات شما پاسخ دهنده گرامی می‌باشد.
 
تقاضامندم بنده را در انجام این تحقیق یاری فرمایید. همچنین پاسخ ها کاملاً محرمانه بوده و صرفا برای انجام این تحقیق به کار خواهد رفت

غیاث الدین فخری 

????پیشاپیش از همکاری صمیمانه و دقت نظر شما در ارائه پاسخ های مناسب که منجر به تحلیلی واقع بینانه خواهد شد ، کمال تشکر را دارم.????
برای پاسخ به سوالات پرسشنامه لینک زیر را انتخاب کنید
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*]]> پرسشنامه حاضر به منظور انجام پایان نامه کارشناسی ارشد با عنوان "ارزيابي و رتبه بندی شركت ها بر اساس معیارهای اعتماد در تجارت الکترونیک " طراحی شده است 
عزیزانی که تجربه خرید  از فروشگاه های ایرانی به صورت اینترنتی را دارند این پرسشنامه را تکمیل نمایند
انجام این پایان نامه در گرو دریافت نظرات شما پاسخ دهنده گرامی می‌باشد.
 
تقاضامندم بنده را در انجام این تحقیق یاری فرمایید. همچنین پاسخ ها کاملاً محرمانه بوده و صرفا برای انجام این تحقیق به کار خواهد رفت

غیاث الدین فخری 

????پیشاپیش از همکاری صمیمانه و دقت نظر شما در ارائه پاسخ های مناسب که منجر به تحلیلی واقع بینانه خواهد شد ، کمال تشکر را دارم.????
برای پاسخ به سوالات پرسشنامه لینک زیر را انتخاب کنید
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*]]> <![CDATA[آموزش ساخت انیمیشن با استفاده از CSS]]> https://www.forum.cgaria.com/thread-932.html Sat, 23 Jan 2016 17:24:28 +0330 Mohsen Omidvar]]> https://www.forum.cgaria.com/thread-932.html آموزش ساخت انیمیشن با استفاده از CSS
[تصویر: CSS_HTML_Animation.jpg]
 
در این آموزش ویدیویی به طراحی انیمیشن های جذاب و کاربردی برای صفحات وب با استفاده از سی اس اس و اچ تی ام ال  پرداخته میشه
کیفیت : HD
فرمت : MP4
زبان : انگلیسی ساده و روان
دانلود رایگان آموزش ساخت انیمیشن با استفاده از CSS :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
حجم : 348 مگابایت]]> آموزش ساخت انیمیشن با استفاده از CSS
[تصویر: CSS_HTML_Animation.jpg]
 
در این آموزش ویدیویی به طراحی انیمیشن های جذاب و کاربردی برای صفحات وب با استفاده از سی اس اس و اچ تی ام ال  پرداخته میشه
کیفیت : HD
فرمت : MP4
زبان : انگلیسی ساده و روان
دانلود رایگان آموزش ساخت انیمیشن با استفاده از CSS :
*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*
حجم : 348 مگابایت]]> <![CDATA[آموزش حذف اسکرول افقی در قالب با استفاده از سی اس اس]]> https://www.forum.cgaria.com/thread-892.html Tue, 08 Dec 2015 23:56:15 +0330 Ehsan]]> https://www.forum.cgaria.com/thread-892.html آموزش حذف اسکرول افقی در قالب با استفاده از سی اس اس CSS :

برای حذف اسکرول افقی که یکی از مشکلات رایج طراحی قالب می باشد می توانید پرونده : شیوه‌نامه (style.css) را ویرایش کنید و به تگ بادی body کدهای زیر را اضافه کنید :

کد:
overflow-x: hidden; /*حذف اسکرول افقی*/
overflow-y: auto; /*اسکرول عمودی*/

 نمونه کد تغییر یافته قالب وردپرس :

کد:
body {
    line-height: 1;
 overflow-x: hidden; /*حذف اسکرول افقی*/
 overflow-y: auto; /*اسکرول عمودی*/
}
]]> آموزش حذف اسکرول افقی در قالب با استفاده از سی اس اس CSS :

برای حذف اسکرول افقی که یکی از مشکلات رایج طراحی قالب می باشد می توانید پرونده : شیوه‌نامه (style.css) را ویرایش کنید و به تگ بادی body کدهای زیر را اضافه کنید :

کد:
overflow-x: hidden; /*حذف اسکرول افقی*/
overflow-y: auto; /*اسکرول عمودی*/

 نمونه کد تغییر یافته قالب وردپرس :

کد:
body {
    line-height: 1;
 overflow-x: hidden; /*حذف اسکرول افقی*/
 overflow-y: auto; /*اسکرول عمودی*/
}
]]> <![CDATA[آموزش استفاده از سی اس اس در طراحی قالب]]> https://www.forum.cgaria.com/thread-891.html Tue, 08 Dec 2015 23:50:31 +0330 Ehsan]]> https://www.forum.cgaria.com/thread-891.html آموزش استفاده از سی اس اس در طراحی قالب وردپرس :
برای استفاده از CSS سه روش وجود دارد:
۱. CSS به شیوه درون خطی inline
۲. CSS به شیوه درون سند (داخلی)   internal
۳. CSS به شیوه برون سند (خارجی)  external


CSS درون خطی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی منحصربه‌فردی بر روی یک عنصر اچ‌تی‌ام ال استفاده می‌شود. توصیه می‌شود که از این نوع شیوه‌دهی تا حد امکان کمتر استفاده شود. چگونگی کاربرد آن به شکل نمونه زیر است:

کد:
<h1 style= “ color : blue ;  margin-left : 30px ; ” > این یک عنوان است  </h1>

برای استفاده از این نوع شیوه‌دهی کافی‌ست که از واژه style در عنصر مورد نظر خود استفاده کنید، همه‌ی خصوصیت‌ها و مقدارهایشان باید داخل دو علامت ”  و ”  قرار گیرند.

بین نام خصوصیت (color) و مقدار آن (blue) باید از علامت : بهره برد و در پایان هر دستور از علامت ; استفاده کرد.


CSS داخلی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی منحصربه‌فردی بر روی یک سند اچ‌تی‌ام ال استفاده می‌شود. یعنی شیوه‌دهی بر روی عناصر یک سند انجام می‌شود.

برای استفاده از این نوع شیوه‌دهی باید شیوه‌ها را با استفاده از واژه  style  در میان دو برچسب <head> و </head> قرار داد.

کد:
<head>
<style>
body {
   background-color : linen ;
}h1 {
   color : maroon;
   margin-left : 40px ;
}
.center {
text-align : center ;
}
</style>
</head>

شیوه‌دهی های دو عنصر body  و h1  بر روی عناصر اچ‌تی‌ام‌ال انجام می‌شود، اما برای center که انتخابگر کلاس است باید خصوصیت کلاس را به هر عنصر که می خواهیم شیوه دهی در آن انجام شود، وارد کنیم. مانند:


کد:
<p class=”center”>

متن پاراگراف

</p>

CSS خارجی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی بر روی تمام سندهای تارنما استفاده می‌شود. ما می توانیم با استفاده از تنها یک پرونده (فایل) هر شیوه‌ای را که می‌خواهیم بر روی تمام سندهای تارنما اجرا کنیم.

برای استفاده از شیوه‌دهی خارجی به ترتیب زیر عمل می‌کنیم:

۱. ابتدا باید یک پرونده با پسوند css. بسازیم و تمام شیوه‌های مورد نظر خود را در آن بنویسیم.

کد:
body {
background-color: lightblue ;
}

h1 {
color: navy ;
margin-left: 20px ;
}


۲. پیوند پرونده css  در سندهای اچ‌تی‌ام‌ال وارد کنیم. برای وارد کردن پیوند باید آن را داخل دو برچسب <head>  و  </head> سندها (برگه‌ها) قرار دهیم:

کد:
<head>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >
</head>

به این ترتیب تمام شیوه‌های نوشته شده در پرونده  style.css  در همه‌ی برگه‌هایی که این پیوند در آنها نوشته شده انجام می‌شوند.


ترتیب اجرای CSS

اگر شیوه‌های یکسانی در هر سه حالت شیوه‌دهی (درون خطی، داخلی و خارجی ) نوشته شوند، ترتیب انجام آنها به طریق زیر است:

۱. شیوه دهی خارجی

۲. شیوه‌دهی داخلی

۳. شیوه‌دهی درون خطی


کد:
<head>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >

<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>

</head>

به این ترتیب شیوه‌دهی درون خطی آخرین شیوه‌دهی است که انجام می‌شود و بر روی عناصر تاثیر می‌گذارد. پس ترتیب اثرگذاری آن برعکس ترتیب انجام آن است.



نکته: در صورتی که پیوند پرونده css  که در بین دو برچسب <head> و </head> گذاشته شده است بعد از دستورهای style داخلی آورده شود، ترتیب اجرای سی‌اس‌اس در مورد آنها تغییر می‌کند. به شکلی که ابتدا شیوه‌های  داخلی انجام می‌شود و سپس شیوه‌های پرونده خارجی:

کد:
<head>
<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >

</head>



در کل باید گفت که شیوه‌دهی خارجی یا همان استفاده از یک پرونده css ، معمول‌ترین راه انجام شیوه‌دهی CSS است.]]> آموزش استفاده از سی اس اس در طراحی قالب وردپرس :
برای استفاده از CSS سه روش وجود دارد:
۱. CSS به شیوه درون خطی inline
۲. CSS به شیوه درون سند (داخلی)   internal
۳. CSS به شیوه برون سند (خارجی)  external


CSS درون خطی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی منحصربه‌فردی بر روی یک عنصر اچ‌تی‌ام ال استفاده می‌شود. توصیه می‌شود که از این نوع شیوه‌دهی تا حد امکان کمتر استفاده شود. چگونگی کاربرد آن به شکل نمونه زیر است:

کد:
<h1 style= “ color : blue ;  margin-left : 30px ; ” > این یک عنوان است  </h1>

برای استفاده از این نوع شیوه‌دهی کافی‌ست که از واژه style در عنصر مورد نظر خود استفاده کنید، همه‌ی خصوصیت‌ها و مقدارهایشان باید داخل دو علامت ”  و ”  قرار گیرند.

بین نام خصوصیت (color) و مقدار آن (blue) باید از علامت : بهره برد و در پایان هر دستور از علامت ; استفاده کرد.


CSS داخلی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی منحصربه‌فردی بر روی یک سند اچ‌تی‌ام ال استفاده می‌شود. یعنی شیوه‌دهی بر روی عناصر یک سند انجام می‌شود.

برای استفاده از این نوع شیوه‌دهی باید شیوه‌ها را با استفاده از واژه  style  در میان دو برچسب <head> و </head> قرار داد.

کد:
<head>
<style>
body {
   background-color : linen ;
}h1 {
   color : maroon;
   margin-left : 40px ;
}
.center {
text-align : center ;
}
</style>
</head>

شیوه‌دهی های دو عنصر body  و h1  بر روی عناصر اچ‌تی‌ام‌ال انجام می‌شود، اما برای center که انتخابگر کلاس است باید خصوصیت کلاس را به هر عنصر که می خواهیم شیوه دهی در آن انجام شود، وارد کنیم. مانند:


کد:
<p class=”center”>

متن پاراگراف

</p>

CSS خارجی

از این نوع سی‌اس‌اس  برای انجام شیوه دهی بر روی تمام سندهای تارنما استفاده می‌شود. ما می توانیم با استفاده از تنها یک پرونده (فایل) هر شیوه‌ای را که می‌خواهیم بر روی تمام سندهای تارنما اجرا کنیم.

برای استفاده از شیوه‌دهی خارجی به ترتیب زیر عمل می‌کنیم:

۱. ابتدا باید یک پرونده با پسوند css. بسازیم و تمام شیوه‌های مورد نظر خود را در آن بنویسیم.

کد:
body {
background-color: lightblue ;
}

h1 {
color: navy ;
margin-left: 20px ;
}


۲. پیوند پرونده css  در سندهای اچ‌تی‌ام‌ال وارد کنیم. برای وارد کردن پیوند باید آن را داخل دو برچسب <head>  و  </head> سندها (برگه‌ها) قرار دهیم:

کد:
<head>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >
</head>

به این ترتیب تمام شیوه‌های نوشته شده در پرونده  style.css  در همه‌ی برگه‌هایی که این پیوند در آنها نوشته شده انجام می‌شوند.


ترتیب اجرای CSS

اگر شیوه‌های یکسانی در هر سه حالت شیوه‌دهی (درون خطی، داخلی و خارجی ) نوشته شوند، ترتیب انجام آنها به طریق زیر است:

۱. شیوه دهی خارجی

۲. شیوه‌دهی داخلی

۳. شیوه‌دهی درون خطی


کد:
<head>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >

<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>

</head>

به این ترتیب شیوه‌دهی درون خطی آخرین شیوه‌دهی است که انجام می‌شود و بر روی عناصر تاثیر می‌گذارد. پس ترتیب اثرگذاری آن برعکس ترتیب انجام آن است.



نکته: در صورتی که پیوند پرونده css  که در بین دو برچسب <head> و </head> گذاشته شده است بعد از دستورهای style داخلی آورده شود، ترتیب اجرای سی‌اس‌اس در مورد آنها تغییر می‌کند. به شکلی که ابتدا شیوه‌های  داخلی انجام می‌شود و سپس شیوه‌های پرونده خارجی:

کد:
<head>
<style>
body {
background-color: linen;
}h1 {
color: maroon;
margin-left: 40px;
}
</style>
<link href=“style.css”   rel=“stylesheet”   type=“text/css”  >

</head>



در کل باید گفت که شیوه‌دهی خارجی یا همان استفاده از یک پرونده css ، معمول‌ترین راه انجام شیوه‌دهی CSS است.]]> <![CDATA[آموزش برنامه نویسی جاوا]]> https://www.forum.cgaria.com/thread-829.html Tue, 01 Sep 2015 11:44:00 +0430 zahra110]]> https://www.forum.cgaria.com/thread-829.html
لینک این ویدئوی آموزشی رو براتون میزارم:

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*]]>
لینک این ویدئوی آموزشی رو براتون میزارم:

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*]]> <![CDATA[آموزش برنامه نویسی جاوا]]> https://www.forum.cgaria.com/thread-828.html Tue, 01 Sep 2015 11:44:00 +0430 zahra110]]> https://www.forum.cgaria.com/thread-828.html
لینک این ویدئوی آموزشی رو براتون میزارم:

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*]]>
لینک این ویدئوی آموزشی رو براتون میزارم:

*شما قادر به دیدن لینک ها نیستید ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید*]]> <![CDATA[حذف اسکرول افقی و عمودی قالب با استفاده از سی اس اس]]> https://www.forum.cgaria.com/thread-728.html Sat, 09 May 2015 22:54:28 +0430 Ehsan]]> https://www.forum.cgaria.com/thread-728.html راه حل از بین بردن اسکرول افقی با css

همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.


کد:
<style type="text/css">
.class{
overflow:hidden; /*overflow:auto; overflow:scroll; overflow:visible;*/
}
</style>

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


کد:
<style type="text/css">
.class{
overflow-x: hidden; /*حذف اسکرول افقی*/
overflow-y: auto; /*اسکرول عمودی*/
}
</style>


این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.
در قالبهای وردپرس برای حذف اسکرول افقی می توانید  فایل style.css را ویرایش کنید و کد زیر را در تگ بادی body قرار دهید :

کد:
body {
overflow-x: hidden !important;
}
]]> راه حل از بین بردن اسکرول افقی با css

همانطور که با css می توان ویژگی های مربوط به پهنای اِلمان مورد نظر را تعریف کرد، می توان با خاصیت های آن، اسکرول ناخواسته را نیز حذف کرد، به طور معمول برای از بین بردن اسکرول (عمودی) از ویژگی overflow به صورت زیر استفاده می شود.


کد:
<style type="text/css">
.class{
overflow:hidden; /*overflow:auto; overflow:scroll; overflow:visible;*/
}
</style>

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


کد:
<style type="text/css">
.class{
overflow-x: hidden; /*حذف اسکرول افقی*/
overflow-y: auto; /*اسکرول عمودی*/
}
</style>


این کد را می توانید در یک کلاس تعریف کنید و آن کلاس را به بلاک یا تگ body (برای از بین بردن اسکرول در کل صفحه) نسبت دهید.
در قالبهای وردپرس برای حذف اسکرول افقی می توانید  فایل style.css را ویرایش کنید و کد زیر را در تگ بادی body قرار دهید :

کد:
body {
overflow-x: hidden !important;
}
]]> <![CDATA[قفل کردن کامل راست کلیک در صفحه سایت ها]]> https://www.forum.cgaria.com/thread-647.html Fri, 24 Oct 2014 18:16:18 +0330 Farzad]]> https://www.forum.cgaria.com/thread-647.html
کد:
 قفل کردن کامل راست کلیک
<!--locking Right click by : fa-tools.ir-->

<script language="javascript" src="http://fa-tools.ir/code/rightclick/right-click.js"></script>

<a target="_blank" href="http://fa-tools.ir/News/topic/21/" > کد حرفه ای قفل کردن کامل راست کلیک </a><div style="display:none"><a href="http://fa-tools.ir" > </a></div>

<!--locking Right click by : fa-tools.ir-->
]]>
کد:
 قفل کردن کامل راست کلیک
<!--locking Right click by : fa-tools.ir-->

<script language="javascript" src="http://fa-tools.ir/code/rightclick/right-click.js"></script>

<a target="_blank" href="http://fa-tools.ir/News/topic/21/" > کد حرفه ای قفل کردن کامل راست کلیک </a><div style="display:none"><a href="http://fa-tools.ir" > </a></div>

<!--locking Right click by : fa-tools.ir-->
]]> <![CDATA[استفاده از استایل خارجی برای طراحی صفحات HTML]]> https://www.forum.cgaria.com/thread-643.html Fri, 03 Oct 2014 20:58:01 +0330 Farzad]]> https://www.forum.cgaria.com/thread-643.html
برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

کد:
div { font-family:Arial }
.redtext { color:red }


حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

کد:
<link rel="stylesheet" type="text/css" href="URL">


شناسه "rel="stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه "type="text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه " "=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

کد:
<link rel="stylesheet" type="text/css" href="http://www.neopersia.org/css/example.css">


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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

کد:
<div>این متن با فونت Arial نمایش داده خواهد شد.</div>


این هم نتیجه:
این متن با فونت Arial نمایش داده خواهد شد.

همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:

کد:
<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>


نتیجه به این صورت خواهد بود:


این متن به رنگ قرمز نمایش داده خواهد شد.]]>
برای شروع با استفاده از یک ویرایشگر متن مانند Notepad در ویندوز یک فایل متنی ایجاد کنید. سپس اطلاعات زیر را در این فایل وارد کنید:

کد:
div { font-family:Arial }
.redtext { color:red }


حالا این متن را با نام example.css ذخیره کنید ( شما می توانید از هر نامی که می خواهید برای ذخیره کردن فایل استفاده کنید، فقط به خاطر داشته باشید که پسوند فایل باید css. باشد. ).

برای پیوند دادن یک فایل استایل خارجی به صفحه HTML باید از تگ <LINK> استفاده کنیم که در بخش HEAD در متن HTML قرار می گیرد. یک نمونه از این تگ را می توانید در اینجا ببینید:

کد:
<link rel="stylesheet" type="text/css" href="URL">


شناسه "rel="stylesheet مشخص می کند که فایل مورد نظر شما یک استایل است.

شناسه "type="text/css مشخص کننده نوع متن فایل برای مرورگر است.

شناسه " "=href مشخص کننده محل قرار گرفتن فایل استایل شماست. شما می توانید از آدرس کامل فایل استفاده کنید و یا اگر فایل شما در همان پوشه ای است که متن HTML شما قرار دارد می توانید تنها از نام فایل استفاده کنید.

حالا متن HTML مورد نظر که می خواهید استایل به آن افزوده شود را باز کنید . خط زیر را بین تگ <HEAD> و <HEAD/> وارد کنید. مطمئن شوید که آدرس فایل CSS را درست وارد کرده اید:

کد:
<link rel="stylesheet" type="text/css" href="http://www.neopersia.org/css/example.css">


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

حالا هر تگ DIV که در صفحات مورد نظر شما وجود داشته باشد محتویاتی با فونت Arial خواهد داشت. برای مثال فایل example.css به همین صفحه پیوند شده است و در صورتی که در این صفحه از DIV استفاده شود محتویات آن با فونت Arial نمایش داده می شوند:

کد:
<div>این متن با فونت Arial نمایش داده خواهد شد.</div>


این هم نتیجه:
این متن با فونت Arial نمایش داده خواهد شد.

همچنین وقتی که از کلاس redtext در تگها استفاده شود متن به رنگ قرمز نمایش داده می شود:

کد:
<p class="redtext">این متن به رنگ قرمز نمایش داده خواهد شد.<p>


نتیجه به این صورت خواهد بود:


این متن به رنگ قرمز نمایش داده خواهد شد.]]> <![CDATA[استفاده از کلاس و id در طراحی صفحات با CSS]]> https://www.forum.cgaria.com/thread-641.html Fri, 03 Oct 2014 20:50:11 +0330 Farzad]]> https://www.forum.cgaria.com/thread-641.html
با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:

کد:
p.black {color: black}
p.red {color:red}


در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:
کد:
<p class="black">این متنی است که به رنگ مشکی نمایش داده می شود</p>
<p class="red">این متن به رنگ قرمز نمایش داده می شود.</p>

نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است:

کد:
<p class="red center">این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد</p>


در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنیم:

کد:
.center {text-align: center}


اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید:
کد:
<p class="center">متن این پاراگراف به صورت وسط چین نمایش داده می شود</p>
<div class="center">متن این قسمت به صورت وسط چین نمایش داده می شود</div>
<h2 class="center">متن این سرفصل به صورت وسط چین نمایش داده می شود</h2>

تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند.

ما می توانیم از سلکتور کلاس برای تگی که حاوی شناسه class است استفاده کنیم که در قسمتهای قبلی در این مورد توضیح داده شد. علاوه بر این می توانیم از ویژگیهای تعریف شده در سلکتور کلاس برای تگهایی که در یک تگ محتوی شناسه class قرار دارند نیز استفاده کنیم. مثلا برای لینکهایی که در یک DIV قرار دارند و برای DIV کلاس تعریف شده است. برای این کار در نوشتن استایل مربوطه باید پس از نقطه که مشخص کننده سلکتور کلاس است نام کلاس را وارد کنیم و پس از وارد کردن یک فضای خالی نام تگی که می خواهیم ویژگیهای بر روی آن اعمال شود. به مثال زیر توجه کنید:

در این مثال از استایل زیر در استفاده می کنیم:

کد:
.test { border: #F00 1px double }
.test a { color: green }
.test a:hover { border: yellow 2px solid }


کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:

کد:
<div class="test">
<a href="#">لینک آزمایشی شماره 1</a>
</div>
<a href="#">لینک آزمایشی شماره 2</a>

   افزودن استایل به نوع مشخصی از عناصر

همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود.برای مثال برخی از این عناصر را که از تگ <input> در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید:

    <"input type="text>
    کادرهای متنی که در فرمها استفاده می شود.
    <"input type="checkbox>
    چک باکس هم با استفاده از تگ <input> به وجود می آید.
    <"input type="radio>
    در ساختن دکمه های رادیو هم از همان تگ استفاده می شود.
    <"input type="button>
    این تگ در ساختن هم استفاده می شود.
    <"input type="submit>
    برای ساختن دکمه ارسال فرم هم از تگ <input> استفاده می شود.

حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای عناصر مورد نظر است که به صورت زیر انجام می گیرد:

فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ <input> استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم:

کد:
input[type="text"] {
width: 200px
}


کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه "type="text استفاده شده است اثر می گذارد.

البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.

 
سلکتور id

روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که شناسه "id="border دارند با کادری سبز رنگ نمایش داده می شوند:

کد:
#border { border: green thin solid }


برای مثال ما از استایل بالا در این صفحه استفاده کرده ایم. حالا کد زیر را وارد صفحه می کنیم:

کد:
<h3 id="border">این یک سرفصل با اندازه 3 است</h3>
<div id="border">این قسمت یک div است </div>

در قسمت زیر می توانید نتیجه کد بالا را مشاهده کنید:
این یک سرفصل با اندازه 3 است
این قسمت یک div است

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

کد:
p#border { border: green thin solid }


استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد.

نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند.]]>
با استفاده از کلاس می توانیم برای یک تگ HTML استایلهای متفاوتی را تعریف کنیم. برای نمونه فرض کنیم می خواهیم در صفحه دو نوع پاراگراف داشته باشیم: یکی با متن مشکی و دیگری با متن قرمز. برای مشخص کردن این دو نوع پاراگراف می توانیم از سلکتور کلاس استفاده کنیم. ابتدا استایل را به صورت زیر می نویسیم:

کد:
p.black {color: black}
p.red {color:red}


در مرحله بعد باید برای هر پاراگرافی که می خواهیم به رنگ مشکی باشد از شناسه "class="black در تگ <p> استفاده کنیم و برای پاراگراف قرمز از شناسه "class="red. البته نام کلاسها اختیاری است ولی بهتر است آنها را طوری انتخاب کنید که مفهوم داشته باشند تا وقتی که حجم استایل شما بیشتر شد به گنگ نباشد. در مثال زیر می توانید کد مربوط به نوشتن دو پاراگراف بالا را در متن HTML ملاحظه کنید:
کد:
<p class="black">این متنی است که به رنگ مشکی نمایش داده می شود</p>
<p class="red">این متن به رنگ قرمز نمایش داده می شود.</p>

نکته : شما می توانید بیش از یک کلاس برای یک تگ HTML تعریف کنید اما برای این کار نباید دو بار از شناسه class استفاده کرد. بلکه باید در یک شناسه class نام دو کلاس مورد نظر را با یک فاصله بین آنها وارد کرد. برای مثال برای پاراگراف زیر از دو کلاس فرضی red و center استفاده شده است:

کد:
<p class="red center">این متن پاراگرافی است که تحت تأثیر دو کلاس red و center قرار دارد</p>


در نوشتن استایل می توان از نوشتن نام تگ در سلکتور کلاس چشم پوشی کرد. در این صورت ویژگیهای تعریف شده در آن کلاس بر هر تگ HTML که از کلاس مربوطه در شناسه class آن استفاده شده باشد اثر می گذارد. برای مثال در کلاس زیر ویژگی وسط چین را تعریف می کنیم و از نام تگ در سلکتور کلاس استفاده نمی کنیم:

کد:
.center {text-align: center}


اکنون برای هر تگی که احتیاج به وسط چین داشته باشد می توانیم از کلاس بالا استفاده کنیم. به چند نمونه در زیر توجه کنید:
کد:
<p class="center">متن این پاراگراف به صورت وسط چین نمایش داده می شود</p>
<div class="center">متن این قسمت به صورت وسط چین نمایش داده می شود</div>
<h2 class="center">متن این سرفصل به صورت وسط چین نمایش داده می شود</h2>

تذکر : هیچ وقت نام کلاس را با یک عدد شروع نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن کلاس استفاده کنند.

ما می توانیم از سلکتور کلاس برای تگی که حاوی شناسه class است استفاده کنیم که در قسمتهای قبلی در این مورد توضیح داده شد. علاوه بر این می توانیم از ویژگیهای تعریف شده در سلکتور کلاس برای تگهایی که در یک تگ محتوی شناسه class قرار دارند نیز استفاده کنیم. مثلا برای لینکهایی که در یک DIV قرار دارند و برای DIV کلاس تعریف شده است. برای این کار در نوشتن استایل مربوطه باید پس از نقطه که مشخص کننده سلکتور کلاس است نام کلاس را وارد کنیم و پس از وارد کردن یک فضای خالی نام تگی که می خواهیم ویژگیهای بر روی آن اعمال شود. به مثال زیر توجه کنید:

در این مثال از استایل زیر در استفاده می کنیم:

کد:
.test { border: #F00 1px double }
.test a { color: green }
.test a:hover { border: yellow 2px solid }


کد HTML زیر برای این مثال مورد استفاده قرار می گیرد:

کد:
<div class="test">
<a href="#">لینک آزمایشی شماره 1</a>
</div>
<a href="#">لینک آزمایشی شماره 2</a>

   افزودن استایل به نوع مشخصی از عناصر

همانطور که می دانید با وجود اینکه برخی از عناصر در صفحه با هم تفاوت دارند، از یک تگ HTML برای ایجاد آنها استفاده می شود.برای مثال برخی از این عناصر را که از تگ <input> در به وجود آوردن آنها استفاده می شود می توانید در زیر مشاهده کنید:

    <"input type="text>
    کادرهای متنی که در فرمها استفاده می شود.
    <"input type="checkbox>
    چک باکس هم با استفاده از تگ <input> به وجود می آید.
    <"input type="radio>
    در ساختن دکمه های رادیو هم از همان تگ استفاده می شود.
    <"input type="button>
    این تگ در ساختن هم استفاده می شود.
    <"input type="submit>
    برای ساختن دکمه ارسال فرم هم از تگ <input> استفاده می شود.

حالا فرض کنید ما در یک صفحه از چند نمونه از عناصر بالا استفاده کرده ایم ولی فقط می خواهیم ویژگیهای یکی از آنها را تغییر دهیم. دو روش برای این کار وجود دارد: یکی استفاده از کلاس است که در این روش اگر تعداد زیادی از عنصر مورد نظر در صفحه وجود داشته باشد باید به همان تعداد از شناسه class در تگهای آنها استفاده کنیم و ممکن است این کار باعث افزایش حجم صفحه یا موجب سختی در نوشتن کد شود. روش دوم تعریف کردن سلکتور input برای عناصر مورد نظر است که به صورت زیر انجام می گیرد:

فرض کنید می خواهیم فقط عرض کادرهای متنی را در صفحه تغییر دهیم. در صورتی که در استایل از سلکتور input به تنهایی استفاده کنیم عرض همه چک باکسها ، دکمه ارسال، دکمه های رادیو و سایر عناصری که از تگ <input> استفاده کرده اند نیز تغییر می کند. برای انجام این کار می توانید سلکتور را به صورت زیر تعریف کنیم:

کد:
input[type="text"] {
width: 200px
}


کد استایلی که در بالا نوشتیم فقط بر روی کادر های متنی که در آنها از شناسه "type="text استفاده شده است اثر می گذارد.

البته این روش ممکن است در مرورگر Internet Explorer پشتیبانی نشود اما مرورگرهای Firefox و Opera از آن پشتیبانی می کنند.

 
سلکتور id

روش دیگری که برای تعریف استایل وجود دارد استفاده از id است. شناسه id احتمالاً در آینده جایگزین شناسه name در تگهای HTML می شود بنا بر این در هرصفحه نباید بیش از یک بار از هر ID استفاده شود. اگر بیش از یک بار از یک id استفاده شود کارایی صفحه تغییری نمی کند ولی صفحه اعتبار خود را از دست می دهد. سلکتور id با علامت # مشخص می شود. با استایل زیر همه عناصر که شناسه "id="border دارند با کادری سبز رنگ نمایش داده می شوند:

کد:
#border { border: green thin solid }


برای مثال ما از استایل بالا در این صفحه استفاده کرده ایم. حالا کد زیر را وارد صفحه می کنیم:

کد:
<h3 id="border">این یک سرفصل با اندازه 3 است</h3>
<div id="border">این قسمت یک div است </div>

در قسمت زیر می توانید نتیجه کد بالا را مشاهده کنید:
این یک سرفصل با اندازه 3 است
این قسمت یک div است

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

کد:
p#border { border: green thin solid }


استایل بالا فقط روی پاراگرافی که شناسه "id="green در آن به کا رفته اثر می گذارد.

نکته : هرگز نام یک id را با یک عدد آغاز نکنید چون در این صورت مرورگرهای Mozilla و Firefox نمی توانند از آن استفاده کنند.]]> <![CDATA[آموزش طراحی وبسایت با html قسمت 1]]> https://www.forum.cgaria.com/thread-637.html Thu, 18 Sep 2014 21:05:35 +0430 محمد علی]]> https://www.forum.cgaria.com/thread-637.html

مقدمه:

HTML مخفف "HyperText Markup Language" است. HTML زبانی است که از آن برای نوشتن صفحات وب ایستا (استاتیک) استفاده می شود. این زبان برای مشخص کردن عناصر مختلف صفحه از یک سری تگ (برچسب) استفاده می شود. برای مثال برای اینکه یک تصویر را واصرد فحه کنیم از برچسب <img> استفاده می کنیم و برای مشخص کردن یک پاراگراف متن مورد نظر خود را بین تگ <p> و <p/> قرار می دهیم. بدین وسیله مرورگر اینترنت می تواند عناصر مختلف صفحه را شناسایی کند و آنها را نمایش دهد. مرورگرهای اینترنت کدهای HTML را دریافت می کنند و پس از تفسیر آنها را به صورت یک صفحه وب به نمایش در می آورند.


قسمت اول:

شما میتوانید برای طراحی صفحات وب خود از یک نرم افزار قوی برای کد نویسی استفاده نمایید که من در اینجا نرم افزار Macromedia Dreamweaver 8 به شما معرفی میکنم و این نرم افزار لظوما بهترین نرم افزار در جهت کد نویسی html است



قدم اول:

ما برای کد نویسی html نیاز به چند تا کد برای شروع داریم که به این گونه تعریف میشود:

کد:
<html>

<html/>
در بین دو تگ html دو تگ head برای قسمت بالایی سایت تعریف میشود


کد:
<html>
<head>

<head/>

<html/>
, و کد های body را هم تعریف مینماییم


کد:
<html>
<head>

<head/>
<body>

<body/>

<html/>

خب در این جا ما کد شروع رو نوشتیم بقیقه کار در جلسه بعد انجام میشود خدانگهدار]]>

مقدمه:

HTML مخفف "HyperText Markup Language" است. HTML زبانی است که از آن برای نوشتن صفحات وب ایستا (استاتیک) استفاده می شود. این زبان برای مشخص کردن عناصر مختلف صفحه از یک سری تگ (برچسب) استفاده می شود. برای مثال برای اینکه یک تصویر را واصرد فحه کنیم از برچسب <img> استفاده می کنیم و برای مشخص کردن یک پاراگراف متن مورد نظر خود را بین تگ <p> و <p/> قرار می دهیم. بدین وسیله مرورگر اینترنت می تواند عناصر مختلف صفحه را شناسایی کند و آنها را نمایش دهد. مرورگرهای اینترنت کدهای HTML را دریافت می کنند و پس از تفسیر آنها را به صورت یک صفحه وب به نمایش در می آورند.


قسمت اول:

شما میتوانید برای طراحی صفحات وب خود از یک نرم افزار قوی برای کد نویسی استفاده نمایید که من در اینجا نرم افزار Macromedia Dreamweaver 8 به شما معرفی میکنم و این نرم افزار لظوما بهترین نرم افزار در جهت کد نویسی html است



قدم اول:

ما برای کد نویسی html نیاز به چند تا کد برای شروع داریم که به این گونه تعریف میشود:

کد:
<html>

<html/>
در بین دو تگ html دو تگ head برای قسمت بالایی سایت تعریف میشود


کد:
<html>
<head>

<head/>

<html/>
, و کد های body را هم تعریف مینماییم


کد:
<html>
<head>

<head/>
<body>

<body/>

<html/>

خب در این جا ما کد شروع رو نوشتیم بقیقه کار در جلسه بعد انجام میشود خدانگهدار]]> <![CDATA[وارد کردن CSS در تگهای HTML]]> https://www.forum.cgaria.com/thread-624.html Tue, 05 Aug 2014 22:26:58 +0430 Farzad]]> https://www.forum.cgaria.com/thread-624.html برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

کد:
<div style="property:value"
برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

کد:
<div style="color:green">متن داخل DIV </div>
توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

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

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:
کد:
<div style="color:red; font-style:italic">این متن قرمز رنگ و ایتالیک است.</div>
نتیجه به صورت زیر خواهد بود:

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


کد:
<div style="color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center">متن مورد نظر اینجا قرار می گیرد.</div>
در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.
]]> برای افزودن استایل به یک تگ باید عبارت " "=style را وارد تگ مربوطه کنیم و ویژگیهای مورد نیاز خود را بین دو دابل کوت ( " ) وارد می کنیم. مثلاً فرض کنید می خواهیم به یک تگ DIV استایل اضافه کنیم. در این صورت تگ DIV به صورت زیر در می آید.

کد:
<div style="property:value"
برای نمونه وقتی بخواهیم متن داخل یک DIV به رنگ سبز نمایش داده شود می توانیم به صورت زیر تگ DIV را بنویسیم:

کد:
<div style="color:green">متن داخل DIV </div>
توجه کنید که بین ویژگی color و رنگ سبز ( green ) از علامت دو نقطه ( : ) استفاده شده نه از علامت مساوی که در تگهای HTML استفاده می شود. همچنین لازم نیست مقادیر مورد نظر را بین علامت های نقل قول ( " ) قرار دهیم. می توانید نتیجه به کارگیری کد بالا را در سطر زیر مشاهده کنید:

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

این امکان نیز وجود دارد که به یک تگ HTML بیش از یک ویژگی افزوده شود. تنها کافی است بین ویژگیهای مختلف از یک نقطه ویرگول ( ; ) استفاده کنیم. برای مثال اگر بخواهیم متنی که در یک DIV قرار دارد به رنگ قرمز و به صورت ایتالیک باشد می توانیم به صورت زیر کد DIV را بنویسیم:
کد:
<div style="color:red; font-style:italic">این متن قرمز رنگ و ایتالیک است.</div>
نتیجه به صورت زیر خواهد بود:

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


کد:
<div style="color:blue; font-style:italic; font-weight:bold; font-size:12pt; text-align:center">متن مورد نظر اینجا قرار می گیرد.</div>
در این مثال ما متنی را با رنگ آبی، ایتالیک، ضخیم، اندازه فونت 12pt و در وسط صفحه خواهیم داشت:

متن مورد نظر اینجا قرار می گیرد.
]]> <![CDATA[اصول نوشتن جاوا اسکرپت]]> https://www.forum.cgaria.com/thread-615.html Fri, 18 Jul 2014 11:39:41 +0430 Farzad]]> https://www.forum.cgaria.com/thread-615.html به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم:

{ 1 وارد کردن اسکرپت در بخش <head> صفحه }
{ 2 وارد کردن جاوا اسکرپت در بخش <body> صفحه }
{ 3 استفاده از فایل اسکرپت خارجی }
به یاد داشته باشید که می توانید از همه روشهای بالا به طور همزمان برای وارد کردن جاوا اسکرپت در صفحه استفاده کنید.

در دو روش اول کدهای جاوا اسکرپت به طور مستقیم وارد صفحه HTML می شوند. برای وارد کردن جاوا اسکرپت در این دو روش از تگ script استفاده می شود. تمامی کدهای جاوا اسکرپتی که می خواهید به طور مستقیم وارد صفحه کنید باید در تگ script قرار داشته باشند وگرنه مرورگر به جای به کار بردن آنها را به صورت متن در صفحه نمایش می دهد. معمولاً کدهای جاوا اسکرپت با ساختار زیر وارد صفحه می شوند :


کد:
<script language="javascript" type="text/javascript">
دستورات جاوا اسکرپتی که قصد استفاده از آنها را دارید در این قسمت وارد می شوند
</script>

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


{ 1 وارد کردن اسکرپت در بخش <head> صفحه }


در هنگام باز شدن یک صفحه وب عناصر موجود در بخش <head> قبل از سایر اجزای صفحه لود می شوند. معمولاً هنگامی کدهای جاوا اسکرپت در بخش <head> متن استفاده می شود که بخواهیم مطمئن شویم به هنگام نیاز کدهای ما لود شده اند.

در اینجا یک مثال از استفاده از جاوا اسکرپت در <head> را مشاهده می کنید:

کد:
<html dir="rtl">

<head>
<script language="javascript" type="text/javascript">
function message() {
document.write('<div align="center">کدهای جاوا اسکرپت موجود در &lt;head&gt; صفحه قبل از سایر اجزای صفحه لود می شوند <br> این متن به وسیله همین نوع اسکرپت به وجود آمده است</div>');
}
</script>
</head>

<body>
<p align="center"><a href="javascript:message();">روی این متن کلیک کنید</a></p>
</body>

</html>

{ 2 وارد کردن جاوا اسکرپت در بخش <body> صفحه }

این امکان وجود دارد که کدهای جاوا اسکرپت را در قسمت <body> صفحه وارد کنیم. در این صورت لود شدن آنها تا هنگامی که آن بخش از صفحه لود شود به عقب می افتد و اگر صفحه به صورت کامل باز نشود ممکن است اسکرپت ما کار نکند. مثال زیر یک نمونه از وارد کردن جاوا اسکرپت در <body> صفحه HTML را نشان می دهد:

کد:
<html dir="rtl">

<head>
<title>جاوا اسکرپت در بدنه صفحه</title>
</head>

<body>
<script language="javascript" type="text/javascript">
document.write('<br><h1 align="center">این متن توسط جاوا اسکرپت نوشته شده است.</h1>');
</script>
</body>

</html>


{ 3 استفاده از فایل اسکرپت خارجی }

گاهی اوقات ممکن است بخواهید از یک سری از کدهای جاوا اسکرپت برای چندین صفحه استفاده کنید و نمی خواهید همه آنها را به صورت جداگانه در هر صفحه بنویسید. در این مواقع می توانید کدهای مورد نظر خود را در یک فایل متنی وارد کنید و آنرا با پسوند js. ذخیره کنید. در هر صفحه ای که بخواهید از این فایل استفاده کنید کافی است آنرا در آن صفحه فرا خوانی کنید. ( به یاد داشته باشید که در این فایلهای خارجی نباید از تگهای <script> که مخصوص HTML هستند استفاده کنید )

برای فرا خوانی این فایلها به صفحه از همان تگ script که در موارد قبل استفاده می کردیم کمک می گیریم با این تفاوت که در اینجا به آن یک شناسه src که آدرس اسکرپت ما به عنوان مقدار آن قرار گرفته است اضافه می کنیم.

برای مثال کد جاوا اسکرپت زیر را در نظر بگیرید :

کد:
var text = '<br><h1 align="center" dir="rtl" >این متن با استفاده از جاوا اسکرپت نوشته شده است.</h1>';

document.write(text);
ما این کد را در فایلی با نام external.js در همان پوشه ای که صفحه ما قرار دارد ذخیره کرده ایم. حالا با وارد کردن کد زیر در صفحه می توانیم فایل بالا را فراخوانی کنیم:
کد:
<script language="javascript" type="text/javascript" src="external.js"></script>
انتظارانتظار]]> به طور کلی به سه طریق می توانیم از جاوا اسکرپت در یک صفحه استفاده کنیم:

{ 1 وارد کردن اسکرپت در بخش <head> صفحه }
{ 2 وارد کردن جاوا اسکرپت در بخش <body> صفحه }
{ 3 استفاده از فایل اسکرپت خارجی }
به یاد داشته باشید که می توانید از همه روشهای بالا به طور همزمان برای وارد کردن جاوا اسکرپت در صفحه استفاده کنید.

در دو روش اول کدهای جاوا اسکرپت به طور مستقیم وارد صفحه HTML می شوند. برای وارد کردن جاوا اسکرپت در این دو روش از تگ script استفاده می شود. تمامی کدهای جاوا اسکرپتی که می خواهید به طور مستقیم وارد صفحه کنید باید در تگ script قرار داشته باشند وگرنه مرورگر به جای به کار بردن آنها را به صورت متن در صفحه نمایش می دهد. معمولاً کدهای جاوا اسکرپت با ساختار زیر وارد صفحه می شوند :


کد:
<script language="javascript" type="text/javascript">
دستورات جاوا اسکرپتی که قصد استفاده از آنها را دارید در این قسمت وارد می شوند
</script>

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


{ 1 وارد کردن اسکرپت در بخش <head> صفحه }


در هنگام باز شدن یک صفحه وب عناصر موجود در بخش <head> قبل از سایر اجزای صفحه لود می شوند. معمولاً هنگامی کدهای جاوا اسکرپت در بخش <head> متن استفاده می شود که بخواهیم مطمئن شویم به هنگام نیاز کدهای ما لود شده اند.

در اینجا یک مثال از استفاده از جاوا اسکرپت در <head> را مشاهده می کنید:

کد:
<html dir="rtl">

<head>
<script language="javascript" type="text/javascript">
function message() {
document.write('<div align="center">کدهای جاوا اسکرپت موجود در &lt;head&gt; صفحه قبل از سایر اجزای صفحه لود می شوند <br> این متن به وسیله همین نوع اسکرپت به وجود آمده است</div>');
}
</script>
</head>

<body>
<p align="center"><a href="javascript:message();">روی این متن کلیک کنید</a></p>
</body>

</html>

{ 2 وارد کردن جاوا اسکرپت در بخش <body> صفحه }

این امکان وجود دارد که کدهای جاوا اسکرپت را در قسمت <body> صفحه وارد کنیم. در این صورت لود شدن آنها تا هنگامی که آن بخش از صفحه لود شود به عقب می افتد و اگر صفحه به صورت کامل باز نشود ممکن است اسکرپت ما کار نکند. مثال زیر یک نمونه از وارد کردن جاوا اسکرپت در <body> صفحه HTML را نشان می دهد:

کد:
<html dir="rtl">

<head>
<title>جاوا اسکرپت در بدنه صفحه</title>
</head>

<body>
<script language="javascript" type="text/javascript">
document.write('<br><h1 align="center">این متن توسط جاوا اسکرپت نوشته شده است.</h1>');
</script>
</body>

</html>


{ 3 استفاده از فایل اسکرپت خارجی }

گاهی اوقات ممکن است بخواهید از یک سری از کدهای جاوا اسکرپت برای چندین صفحه استفاده کنید و نمی خواهید همه آنها را به صورت جداگانه در هر صفحه بنویسید. در این مواقع می توانید کدهای مورد نظر خود را در یک فایل متنی وارد کنید و آنرا با پسوند js. ذخیره کنید. در هر صفحه ای که بخواهید از این فایل استفاده کنید کافی است آنرا در آن صفحه فرا خوانی کنید. ( به یاد داشته باشید که در این فایلهای خارجی نباید از تگهای <script> که مخصوص HTML هستند استفاده کنید )

برای فرا خوانی این فایلها به صفحه از همان تگ script که در موارد قبل استفاده می کردیم کمک می گیریم با این تفاوت که در اینجا به آن یک شناسه src که آدرس اسکرپت ما به عنوان مقدار آن قرار گرفته است اضافه می کنیم.

برای مثال کد جاوا اسکرپت زیر را در نظر بگیرید :

کد:
var text = '<br><h1 align="center" dir="rtl" >این متن با استفاده از جاوا اسکرپت نوشته شده است.</h1>';

document.write(text);
ما این کد را در فایلی با نام external.js در همان پوشه ای که صفحه ما قرار دارد ذخیره کرده ایم. حالا با وارد کردن کد زیر در صفحه می توانیم فایل بالا را فراخوانی کنیم:
کد:
<script language="javascript" type="text/javascript" src="external.js"></script>
انتظارانتظار]]> <![CDATA[اصول نوشتن صفحات HTML]]> https://www.forum.cgaria.com/thread-614.html Fri, 18 Jul 2014 09:48:19 +0430 Farzad]]> https://www.forum.cgaria.com/thread-614.html
Tags and their position
اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:

کد:
<u>tags and their position</u>
نتیجه را به این صورت می بینید:

Tags and their position

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

کد:
<img src="myimage.gif">
البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً <br> که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و <p> که برای رفتن به پاراگراف بعدی استفاده می شود.

در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :

کد:
<u>         متن زیرخط دار          </u>
کد بالا همان نتیجه ای را می دهد که کد زیر دارد:

کد:
<u>متن زیرخط دار</U>
به این طریق هم اگر نوشته شود فرقی نمی کند:

کد:
<u>
متن زیرخط دار
</u>
قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.


کد:
<html>
<head>
<title>html قالب اصلی</title>
</head>
<body>
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
</body>
</html>
برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.

تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.

تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است.

تگ <body> بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.]]>
Tags and their position
اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:

کد:
<u>tags and their position</u>
نتیجه را به این صورت می بینید:

Tags and their position

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

کد:
<img src="myimage.gif">
البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً <br> که برای رفتن به خط بعدی استفاده می شود، <hr> که برای ایجاد یک خط افقی به کار می رود و <p> که برای رفتن به پاراگراف بعدی استفاده می شود.

در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً <P> همان <p> است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :

کد:
<u>         متن زیرخط دار          </u>
کد بالا همان نتیجه ای را می دهد که کد زیر دارد:

کد:
<u>متن زیرخط دار</U>
به این طریق هم اگر نوشته شود فرقی نمی کند:

کد:
<u>
متن زیرخط دار
</u>
قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.


کد:
<html>
<head>
<title>html قالب اصلی</title>
</head>
<body>
هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است
</body>
</html>
برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ <html> است که علامت شروع یک متن HTML است و تگ پایانی آن <html/> است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.

تگ بعدی <head> است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با <head/> به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.

تگ <title> به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: <title/> در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است.

تگ <body> بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از <body/> استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :

هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است

چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.]]> <![CDATA[آموزش کار با استایل (CSS)]]> https://www.forum.cgaria.com/thread-613.html Fri, 18 Jul 2014 09:39:01 +0430 Farzad]]> https://www.forum.cgaria.com/thread-613.html
CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.]]>
CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.]]>