ساخت هدر – 6

در این قسمت ما باید با کلاس ها و id که به نظر من اصل زبان css هستند کار کنیم
برای ساخت هیدر یا سر صفحه ما به یک id نیاز داریم من نام اون رو headr گذاشتم این نام دلخواه است به این صورت می نویسیم

#headr{} 

حال شروع به خاصیت دادن به آن می کنیم

ابتدا برای تعیین عرض آن از خاصیت width استفاده می کنیم من اینجا مقدار را برابر 960px قرار دادم

حالا باید ارتفاع را مشخص کنیم که از خاصیت height استفاده می کنیم مقدار آن را 150 پیکسل قرار میدهیم.

حالا کدها را مطابق روبه رو به تگ style خود اضافه میکنیم

#header{
width: 960px;
height: 150px;
}

ادامه مطلب …

سبک دهی به پاراگراف و لینک 5

در قسمت قبل کدهای خود را تا اینجا پیش بردیم

<html>

<head>

<style type=”text/css”>

body{
padding: 0px; 
margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: #DDDDDD;
color: #333333;
}

</style>
</head>

<body>

</body>

</html>

امروز قصد داریم که تغیراتی را به پیشفرض های اچ تی تم ال تگ های پاراگراف و لینک بدهیم 

ادامه مطلب …

خواص body و تراز بندی قالب 4

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

body { background: #C0C0C0; color:red; }

خاصیت اول رنگ بود که در مورد آن صحبت کردیم برای همین آن را نوشته و به بخش بعدی می رویم

برای ایجاد و تعیین فونت پیشفرض از font-family استفاده می کنیم با قرار دادن کاما بین فونت ها در صورت اجرا نشدن فونت اول ، فونت دوم در کامپیوتر کاربر نشان داده می گردد و الی آخر .

 body {font-family: Arial, Helvetica, sans-serif;}

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

p {

padding-left: 40px;
padding-right: 20px;
padding-bottom: 30px;
padding-top: 40px;
background-color: #00CCFF;

}

برای فراخوانی کد از تگ p در body استفاده کنید

ما اینجا خاصیت padding را برار صفر در نظر می گیریم تا تمامی حاشیه ها از بین بروند و طرح بدون محدودیت شود

خاصیت بعدی margin است همانند خاصیت pading عمل می کند با این تفاوت که برای جابه جایی متن و اشیا به کار می رود margin  همانند خاصیت padding  عمل می کند با این تفاوت که برای جابه جایی متن و اشیا به کار می رود

p{

margin-bottom: 10px;
margin-right: 30px;
margin-left: 100px;
margin-top: 200px;
background-color: #00CCFF;

}

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

<html>

<head>

<style type=”text/css”>


body{

padding:0px;

margin: 0px;
font-family: Arial, Helvetica, sans-serif;
background-color: #DDDDDD;
color: #333333;
}


</style>
</head>

<body>

</body>

</html>

طراحی پس زمینه 3

برای شروع اول از همه تگ <style> را درون header قرار می دهیم مانند زیر

<html>

<head>
<title></title>


        <style type=”text/css”>

</style>

</head>

<body>

</body>

</html>

حالا شروع به نوشتن می کنیم

1- برای تعیین خصوصیت بدنه از خاصیت body استفاده می کنیم این خاصیت ما را در تعین رنگ ، عکس ، فونت ، حاشیه ها ، نوع چینش ، راست به چپ بودن و خیلی از خاصیت های

صفحه اصلی قالب کمک می کند .

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

<html>

<head>
<title></title>


        <style type=”text/css”>

               body { }


</style>


</head>

<body>

</body>

</html>

مقادیری که می خواهیم در آن تغییرات ایجاد کنیم درون کروشه می نویسیم
به عنوان مثال برای تغییر رنگ نوشته ها از خاصیت color و برای تغییر رنگ پس زمینه از خاصیت background استفاده می کنیم

مثال :

<html>

<head>
<title></title>


        <style type=”text/css”>

               body { background: #C0C0C0;  color:red; }


</style>


</head>

<body>

</body>

</html>

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

فرم کلی قالب 2

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

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

برای شروع ما تمام کدهای خود را درون تگ های <style> </style> قرار خواهیم داد و برای فراخوانی کدها در بخش body از تگ <div> استفاده می کنیم

برای شروع کار یک سند html بسازید حالا با هم شروع میکنیم

هر سند html از دو بخش head و body شکیل شده که کدهای css را درون قسمت head و کدهای html را دون بخش body قرار می دهیم

<html>

<head>
       <title></title>
</head>

       <body>

      </body>

</html>

پیشنهاد : برای راحتی کار پیشنهاد میکنم از نرم افزار های کمکی مثل دریم ور استفاده کنید من خودم با نرم افزار HTMLPad  کار می کنم

طراحی قالب دو سطونه 1

برای طراحی یک قالب استاندارد باید به چند نکته توجه کنیم

1- اول اینکه html یاد بگیریم

2- دوم با زبان css آشنایی داشته باشیم

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

کمک کنیم

فعلا برای آشنایی دوستان با دو زبان html و css مقالات زیر را مطالعه نمایید

آموزش اج تی ام ال

اموزش سی اس اس 

 

آموزش وردپرس 1

این آموزش  مفاهیم اساسی و پیشرفته وردپرس را فراهم می کند. آموزش وردپرس ما برای مبتدیان و حرفه ایها طراحی شده است.

وردپرس منبع CMS (سیستم مدیریت محتوا) است که بر اساس PHP و MySQL است.

آموزش وردپرس ما شامل همه موضوعات وردپرس مانند نصب، ایجاد وردپرس، کار بر روی داشبورد وردپرس، ایجاد و ویرایش پست ها، صفحات و نظرات، کار با تم ها و پلاگین ها، امنیت وردپرس، نحوه پشتیبان گیری وردپرس، بهینه سازی وردپرس و غیره است.

 

پيش نياز
قبل از یادگیری وردپرس، باید دانش پایه ای از HTML داشته باشید.
آموزش وردپرس ما برای کمک به مبتدیان و حرفه ای طراحی شده است.

عکس در html قسمت7

برچسب img در HTML برای نمایش تصویر در صفحه وب استفاده می شود. برچسب img یک تگ خالی است که دارای ویژگی های خاص است، تگهای بسته در عنصر تصویر HTML استفاده نمی شوند.

ادامه مطلب …

تگ Anchor یا لینک – ق6

تگ لنگر Anchor  تعریف یک لینک است که یک صفحه را به یک صفحه دیگر مرتبط می کند. خصیصه href مهمترین ویژگی تگ لینک است.

ادامه مطلب …

حلقه for loop قسمت 14

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

مهمترین نوع حلقه ها حلقه for و حلقه while است

نحوه نوشتن حلقه for

ادامه مطلب …

1 2 3