با عضو شدن در کانال تلگرام ما از اخرین مطالب باخبر شوید

همین حالا عضو شوید!

صفحه اصلی

اموزش طراحی سایت

اموزش css

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

در این اموزش سعی بر این است که  Css را به به طور مقدماتی یاد بگیریم.css برای رنگ و لعاب به عناصر html درون صفحه است که مخفف کلمه ی cascade syle sheet میباشد.

ما به سه روش میتوانیم css را به صفحه ی html خود اعمال کنیم :

   1.درون خطی:

       بدین منظور است که مادرون همان خطی که کد html خود را نوشتیم css خود را هم مینویسیم:  (با اتریبیوت style)

<p style="background: red;">inline css</p>

2.درون صفحه ای:

      برای عمل به این روش به این صورت عمل میکنیم که درون صفحه (معمولا در درون تگ head) تگ style خود را باز میکنیم و  دستورات css خود را مینویسیم: 

<"style type="text/css>
}p
;background: red

{

</style>

 در اینجا ما یک تگ style باز کردیم و اتریبیوت type="text/css" را به ان دادیم که معنی ان این است نوع محتوای ما از نوع متن css است و بعد درون ان دستورات را نوشتیم.

   ساخت فایل css :

    در این روش ما ابتدا یک فایل با فرمت .css میسازیم و بعد درون صفحه ی html ان را لینک میدهیم(وصل میکنیم به صفحه ی html خود) ودرون ان دستورات را مینویسیم و دستورات درون صفحه اعمال میشوند.   

<"link type="text/css" rel="stylesheet" href="css/style.css>

اتریبیوت href مسیر فایل css مارا مشخص میکند rel بدین معنی است که نقش این فایل استیل صفحه است.

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

سینتکس(syntax) یا قواعد نوشتاری css :

                                  

ما درون css ابتدا تگ یا المنتی که میخواهیم روی ان تغییرات ظاهری ایجاد کنیم را مینویسیم (ان را بر اساس id یا class یا نام تگ انتخاب میکنیم) و بعد اکولاد باز و بسته را مینویسیم.

درون دو اکولاد نام ویژگی را مینویسیم و بعد ام را مقدار میدهیم و در اخر ; میگذاریم.

نکته:برای استفاده از اتریبیوت ایدی یک تگ برای استایل دهی ابتدا # را نوشته و بعد ایدی ان تگ را مینویسیم و برای استفاده از class تگ برای استایل دهی ابتدا . را مینویسیم و بعد نام کلاس ان تگ

اموزش طراحی سایت

اموزش Html

یک سند Html از تگ های Html تشکیل میشود.تگ ها درون <tagName> و <tagName/> قرار میگیرند که نشان دهنده شروع و پایان تگ است(<> به معنی شروع و </> به معنی پابان تگ است).

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

<p> this is p tag</p>

 <p> نشان دهنده ی شروع تگ p و <p/> نشان دهنده ی پایان تگ p است.

یک سند ساده ی Html از چندین تگ ابتدایی تشگیل میشود:

<html>
<head>
<title>pmcode.ir</title>
<meta charset="utf-8">
</head>
<body>
 
</body>
</html>

                              

در تمامی صفحات وب این تگ های پایه وجود دارند.(در بخش بعدی کاربرد تگ های بالا را یاد خواهیک گرفت)

نکته: تگ های html میتوانند درون یکدیگر قرار بگیرند.

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

<br>

تگ بالا که کارش رفتن به خط بعدی است فقط از یک بخش تشکیل میشود و به صورت : <br></br> نوشته نمیشود.

برای فارسی نویسی از تگ زیر استفاده کنید(در اینده این تگ را توضیح خواهیم داد):

<meta charset="utf-8">

 

انواع تگ ها

 

1. DOCTYPE

        ------> نشان دهنده این است که ما از چه نسخه ی html استفاده کردیم ( <DOCTYPE html!> نشان دهنده HTML5 است )

2. تگ html

        ------> این المان نشان دهندی شروع و پایان سند html است و تمامی تگ ها درون این تگ قرار میگرد.

3. تگ head

        ------> این تگ که اولین تگ بعد از html است حاوی اطلاعاتی از سایت شما میباشد که میتواند شامل:عنوان صفحه و لینک فایل های css و js, محل قرار گرفتن meta تگ ها(متا ت ها بسیار مهم هستند!) باشد و تگ هایی که درون این قرار بگیرند در بدنه سایت شما نشان داده نخواهد شد!

     

4. Body

        ------> این تگ بعد از تگ head قرار میگیرد و شامل مواردی میشود که درون صفحه قرار میگیرند و بدنه سایت شما را تشکیل میدهند و برای کاربر قابل مشاهده است.

5. تگ p

        ------> این تگ که درون body قرار میگرد وظیفه نشان دادن پاراگراف را بر عهده دارد که نمونه ان را در بالا مشاهده میکنید. شاید برای شما سوال پیش بیاید که چرا برای نشان دادن پاراگراف از p استفاده میکنیم و مستقیم ب بدون این تگ نمینویسیم؟

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

تگ های زیادی برای نشان دادن متن در حالت ها گوناگون وجود دارد.

5. تگ hn (h1 تا h6)

        ------> این تگ ها هم برای نشان دادن متن مورد استفاده قرار میگیرد البته در سایز های متفاوت:

                  

 

در اینده تگ های بیشتری را یاد خواهیم گرفت

اتریبیوت ها

اتریبیوت ها برای مشخص کردن بعضی از ویژگی های یک تگ است که درون تگ باز قرار میگیرند

شکل بالا نمایی کلی از یک تگ به همراه یک اتریبیوت است.

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

اتربیوت class برای دادن یک کلاس به یک المنت است که با استفاده از ان بتوانیم به ان المنت دسترسی داشته باشیم.

اتریبیوت id برای دادن ایدی به یک تگ است.(ایدی برای هر تگ باید منحصر به فرد باشد).

البته لازم نیست برای هر تگ بیاییم و ایدی و کلاس بنویسیم (فقط در صورت لزوم)

<p class="class" id="id"> this is p tag</p>

در کد بالا ما به تگ p یک کلاس و یک ایدی دادیم.