سایت خود را بسازید ، به روش saalek110

saalek110

saalek110

Well-Known Member
دیگه نمای کار ترسیم شد....

حالا شما می روی وظایف خودت را انجام می دهی
و من هم وطایف خودم را....

ظاهر سایت و گستردگی سایت به خود شما مربوطه.... با html کار می کنی

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

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

هر وقت شما دوست داشتی می تونی قسمت ثبت نظر ره به سایتت اضافه کنی. یا اصلا نکنی. سایت مال توست، لوازمش هم تحت اختیار توست.

لوازم دیگر مثلا:
شمارنده برای صفحات...
ثبت نام و لوگین..
لوازم رصد بازدید کنندگان...مثلا ip اونها...
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
لوازم جاوا اسکریپت:
که بهتره نگیم لوازم ، چون فعلا یک ابزار بیشتر نیست... اونم دکمه های بالای ادیتور است ، مثلا می خواهی متنی در سایتت قرمز باشه...دکمه قرمز را می زنی، و در سایتت اون کلمه قرمز نمایش داده میشه ، یا سایز کلمه.

خوب نمیشه که هر بار بخوای مطلبی در سایتت بزنی با کدهای html کار کنی...
شما سایتت یک ادیتور داره ، که در ادیتور می نویسی و با دکمه های بالای ادیتور متن را تزیین می کنی . مثلا یک قسمت را وسط چین می کنی یا عکس می اندازی یا لینک...
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
اجزای دیگر کنترل پنل:

من یک نگاهی به کنترل پنل الان انداختم ، باقی چیزها نیاز نیست فعلا...

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


یک قسمت دامین هم در کنترل پنل داره... اگر کسی دامین داره مثلا محمد دات کام ، احتمالا می تواند اونجا به هاست وصل کند...من کار نکردم.

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

یک قسمت آمار هم هست که خودتان بروید ببینید.
 
saalek110

saalek110

Well-Known Member
Html را یاد گرفتید... شاید بگید ۴ تا تگ که بیشتر نگفتید...
خوب html یک سری تگ است فقط.. و هر تگ چیزی را نمایش می دهد...
بعدا تگ های ضرورری دیگر را هم میگیم.

یک راه دیگه اینه یک نرم افزار اندرویدی آموزش html دانلود کنید و تگ ها را ببینید.
بعدا شاید لینک گوگل استورش را گذاشتم. یا خودتان در گوگل استور html را سرچ کنید یا html tutorial
 
saalek110

saalek110

Well-Known Member
result.png

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

در فایل جدا با پسوند css

ولی در فایل جدا یک ایرادی داره... وقتی تغییرش می دهی ، بروسر از فایل ذخیره شده قبلی یعنی کچ کرده خود استفاده می کند....
کلا بروسر می خواد صرفه جویی کنه و میگه دلیلی نداره هر بار فایل css را بخونم...
من یک ایده شخصی دارم و اونم اینه که جور دیگه از فایلهای css استفاده کنیم تا بروسر این رفتارش را کنار بزاره....
بعدا میگم چطوری.

فعلا می خواهیم نگاهی به css بکنیم...
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

کل بالا از سایت:
www.w3schools.com

CSS Tutorial

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
دکمه try it yourself را اگر بزنید می توانید کل را تغییر بدهید و نتیجه تغییر را ببینید.


اگر شما کد بالا را در یک فایل در فایل منیجر خود اپلود کنید میشه این:



Screenshot_۲۰۲۴-۰۱-۱۸_۰۷۲۳۵۲.jpg

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

Css همین مشخصات است.
یعنی رنگ و سایز و طرز نشستن وسط یا چپ یا راست و ....


در کد بالا ، کدهای css در قسمت head وسط تگهای style قرار گرفته.
قبلا گفتیم html شامل head و body است.
یکی از چیزهایی که در head قرار می گیره ، همین css است.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
در کد بالا دیدیم برای عنوان و مقاله یعنی h1 و p مشخصات داده بود...
ولی سبک من این طوری نیست....
من یک اسم می دهم به یک قالب ... و مشخصات قالب را درش می نویسم...این جوری:
CSS: 
#myname
{
border:7px solid #8877cc;

}

الان در کد بالا ، با دادن اسم myname یک قالب تعریف کردم
داخل کروشه ها لیست صفات را می نویسم....
در گد بالا کادری تعریف کردم با رنگ دورخاصی و صخامت ۷
کلمه myname هر اسمی گه شما دوست دارید است.

کد سایت کاملش این طوری میشه:

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>

  #myname {
    border:7px solid #8877cc;
       }

    </style>
          </head>
          <body>

          <div id='myname'>
          salam.
          </div>
          </body>
          </html>



Screenshot_۲۰۲۴-۰۱-۱۸_۰۷۴۵۳۹.jpg
خوب بی ریخته ، می دونم ... چون فقط خواستم یک خط کد بنویسم در css که شما گیج نشوید...
میشه زیباترش کرد...

ولی فعلا بحث زیباییش نیست....ساختار کد را بحث کنیم...
یک قالب به نام myname تعریف کردیم و یک سری صفات می تونیم درش بنویسیم...
در بدنه سایت یک div ایجاد کردیم .... اومدیم id اون را همون myname دادیم و داخل div نوشتیم salam.

این سبک من است....البته یکی از روشهای css است و مال من نیست ولی من این طوری استفاده می کنم...
یعنی نمیام h1 و p را صفاتش را عوض کنم ، یک اسم خودم می دهم ، با یک سری صفات داخل کروشه ... بعد داخل بدنه سایت از اون قالب استفاده می کنم.

در این مثال css در head است ولی میشه در یک فایل دیگر نوشت اونها را ، و صفحات زیادی از سایت شما ازش استفاده کنند.
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
ادامه css
پس یک سری فایل داریم داخلش با انتخاب نامهایی مثل myname در پست قبل ...قالبهایی می سازیم..
در صفحه سایت خود ، میگیم از کدوم فایل css استفاده می کنیم...
و بعد اون اسم‌قالب ها را می آوریم و مشخصات اون قالب بر اون قسمت سایت ما اعمال میشه.
 
saalek110

saalek110

Well-Known Member
Margin

حالا بیاییم اون css را کمی بهتر کنیم.
می آییم css اون را دو خط اضافه می کنیم...

CSS: 
  #myname {
    border:7px solid #8877cc;
    margin-right:150px;
    margin-left:150px;
       }



در عکس پایین یا لینک بالا می بینید کادر رنگی از کناره های سایت فاصله گرفته.
یادتون باشه کل کدهای سایت را باید اپلود کنید... من فقط کدهای css را در این پست نشان دادم تا سریع تر کل اضافه شده را ببینید ولی مثل چند پست قبل باید باقی کدها هم در سایت باشد. یعنی در فایل آپلودی شما به فایل منیجر همین چند خط کد را آپلود نکنید چون ناقص است.
پس فهمیدید margin چیه..... فاصله از اطراف ...اینجا از چپ و راست ... می توانید top و bottom را خودتان تایپ کنید. برای بالا و پایین.
Screenshot_۲۰۲۴-۰۱-۱۸_۰۸۴۳۲۱.jpg
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
Padding

CSS: 
  #myname {
    border:7px solid #8877cc;
    margin-right:150px;
    margin-left:150px;

    padding-top:30px;
    padding-bottom:30px;
       }



در لینک بالا یا تصویر پایین ، اثر padding را می بینید...یعنی salam از خط بالا و پایین فاصله گرفته...
ولی چسبیده به چپ ... padding-left باید اضافه بشه.


Screenshot_۲۰۲۴-۰۱-۱۸_۰۸۵۱۴۲.jpg
 
saalek110

saalek110

Well-Known Member
CSS: 
http://saalek110.great-site.net/amozesh/yourweb/a6.php?i=1


CSS: 
  #myname {
    border:7px solid #8877cc;
    margin-right:150px;
    margin-left:150px;

    padding-top:30px;
    padding-bottom:30px;

    padding-left:30px;
       }

Screenshot_۲۰۲۴-۰۱-۱۸_۰۸۵۵۱۸.jpgدر سایت یا عکس بالا ، padding چپ را هم من اضافه کردم تا salam به ضلع چپ نچسبد.


شما خودتان می توانید padding راست را هم اضافه کنید.

پس padding فاصله محتویات از اضلاع است ولی margin فاصله اضلاع از اطراف سایت بود.
 
saalek110

saalek110

Well-Known Member
رنگ بک گراند

CSS: 
  #myname {
    border:7px solid #8877cc;
    margin-right:150px;
    margin-left:150px;

    padding-top:30px;
    padding-bottom:30px;

    padding-left:30px;

    background-color:rgba(150,60,140,1);
       }


Screenshot_۲۰۲۴-۰۱-۱۸_۰۹۰۳۲۶.jpg

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

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

www.w3schools.com

CSS RGB and RGBA Colors

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com
 
saalek110

saalek110

Well-Known Member
فونت سایز و فونت فامیلی:



CSS: 
  #myname {
    border:7px solid #fff733;
    border-radius:25px;

font-size:70px;

    margin-right:150px;
    margin-left:150px;

    padding-top:30px;
    padding-bottom:30px;

    padding-left:30px;

    background-color:rgba(250,130,30,1);
       }

در کد بالا font-size اضافه شده ، نوشته درشت شده.
و همچنین font-family را می توانیم تعین کنیم.

CSS: 
  font-family: "Times New Roman", Times, serif;

font-family: Arial, Helvetica, sans-serif;

در لینک زیر توضیحات بیشتری در مورد فونت فامیلی می توانید بخوانید:

www.w3schools.com

CSS font-family property

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com www.w3schools.com

یا سایت فارسی زیر:


free-learn.ir

آموزش ویژگی font-family در CSS | سایت آموزشی فری لرن

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی font-family در CSS با من همراه باشید.
free-learn.ir free-learn.ir

کلی سایتهای فارسی برای آموزش css و html است ، با یک سرچ می توانید کلی آموزش پیدا کنید... شاید توضیحات من کم و ناقص باشد...خودتان را محدود به این تاپیک نکنید. Html و css کارش نمایش است ، چیزی منفجر نمی شود اگر کد اشتباه باشه ، فقط نمایش بدجور میشه که می بینید و اصلاح می کنید.
Screenshot_۲۰۲۴-۰۱-۱۸_۰۹۱۸۰۲.jpg
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
رنگ بک گراند سایت:

میگم چطوره رنگ بک گراند سایتمون را هم عوض کنیم.

HTML: 
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-color:rgba(140,240,130,1);
}
  #myname {
    border:7px solid #fff733;
    border-radius:25px;

font-size:70px;

    margin-right:150px;
    margin-left:150px;

    padding-top:30px;
    padding-bottom:30px;

    padding-left:30px;

    background-color:rgba(250,130,30,1);
       }

    </style>
          </head>
          <body>

          <div id='myname'>
          salam.
          </div>
          </body>
          </html>


Screenshot_۲۰۲۴-۰۱-۱۸_۰۹۳۴۳۲.jpg

در قسمت html ما فقط یک salam نوشتیم ولی ببینید css چطور به سایت ما آب و رنگ داده.
می بینید که css خیلی هم ساده و قابل فهم است.

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

saalek110

Well-Known Member
CSS: 
           background-image: url('images/myimage.jpg');

عکس بک گراند:

عکس را جایی آپلود می کنیم در یک پوشه در فایل منیجر و آدرسش را در کد بالا می دهیم.
 
saalek110

saalek110

Well-Known Member
می بینید که css یک سری صفات است که ما تنظیم می کنیم، مثل رنگ و سایز و ....
خودتان آموزش های css پیدا کنید ، چه فارسی چه انگلیسی ، چون اون کدها را ببینید خودتان می توانید تست کنید و بفهمید کارش چیه... اسم صفات هم دیدید خیلی کمک کننده است بفهمیم برای چیه.

هر چی بیشتر تگ های html و صفات css را ببینید و تمرین کنید.. سایتهای زیباتری می توانید بسازید...
مسائل فکری و معمایی نداره ، فقط تزیین و نمایش است با یک سری تگ ها و صفات مشخص و معلوم.
 
saalek110

saalek110

Well-Known Member
تقریبا تمام css که در سایت خودم به کار برده بودم را گفتم. اگر صفتی جا مونده بود بعدا میگم.

بعدا باز css کار شده. در قسمت بالا ، یک سری صفات گفته شد.

result.png
 
آخرین ویرایش:
saalek110

saalek110

Well-Known Member
کد php:

PHP: 
<?php
    echo "Hollo World!";
?>

نشانه های شروع و پایان php را در کد بالا می بینید و داخلش یک خط کد php نوشته شده ، دستور echo کارش چاپ‌ است و اینجا hello world چاپ میشه.


در سایت بالا می بیند hello world چاپ شده ، سایت بالا ، همین کدی که می بینید را داره.
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا