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

saalek110 · Jan 18, 2024

دیگه نمای کار ترسیم شد....

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

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

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

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

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

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

saalek110 · Jan 18, 2024

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

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

saalek110 · Jan 18, 2024

اجزای دیگر کنترل پنل:

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

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

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

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

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

saalek110 · Jan 18, 2024

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

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

saalek110 · Jan 18, 2024

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

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

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

فعلا می خواهیم نگاهی به css بکنیم...

saalek110 · Jan 18, 2024

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>

کل بالا از سایت:

W3Schools.com

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

دکمه try it yourself را اگر بزنید می توانید کل را تغییر بدهید و نتیجه تغییر را ببینید.

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

http://saalek110.great-site.net/amozesh/yourweb/a2.php

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

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

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

saalek110 · Jan 18, 2024

در کد بالا دیدیم برای عنوان و مقاله یعنی 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>

http://saalek110.great-site.net/amozesh/yourweb/a3.php?i=1

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

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

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

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

saalek110 · Jan 18, 2024

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

saalek110 · Jan 18, 2024

Margin

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

CSS:

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

http://saalek110.great-site.net/amozesh/yourweb/a4.php?i=1

در عکس پایین یا لینک بالا می بینید کادر رنگی از کناره های سایت فاصله گرفته.
یادتون باشه کل کدهای سایت را باید اپلود کنید... من فقط کدهای css را در این پست نشان دادم تا سریع تر کل اضافه شده را ببینید ولی مثل چند پست قبل باید باقی کدها هم در سایت باشد. یعنی در فایل آپلودی شما به فایل منیجر همین چند خط کد را آپلود نکنید چون ناقص است.
پس فهمیدید margin چیه..... فاصله از اطراف ...اینجا از چپ و راست ... می توانید top و bottom را خودتان تایپ کنید. برای بالا و پایین.

saalek110 · Jan 18, 2024

Padding

CSS:

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

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

http://saalek110.great-site.net/amozesh/yourweb/a5.php?i=1

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

saalek110 · Jan 18, 2024

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;
       }

در سایت یا عکس بالا ، padding چپ را هم من اضافه کردم تا salam به ضلع چپ نچسبد.

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

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

saalek110 · Jan 18, 2024

رنگ بک گراند

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);
       }

http://saalek110.great-site.net/amozesh/yourweb/a8.php?i=1

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

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

W3Schools.com

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

saalek110 · Jan 18, 2024

http://saalek110.great-site.net/amozesh/yourweb/b1.php?i=1

CSS:

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


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

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

    padding-left:30px;

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

در این پست border radius اضافه شد تا دور کادر گرد باشد...
رنگها را هم تغییر دادم.

saalek110 · Jan 18, 2024

فونت سایز و فونت فامیلی:

http://saalek110.great-site.net/amozesh/yourweb/b2.php?i=1

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;

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

W3Schools.com

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

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

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

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

free-learn.ir

کلی سایتهای فارسی برای آموزش css و html است ، با یک سرچ می توانید کلی آموزش پیدا کنید... شاید توضیحات من کم و ناقص باشد...خودتان را محدود به این تاپیک نکنید. Html و css کارش نمایش است ، چیزی منفجر نمی شود اگر کد اشتباه باشه ، فقط نمایش بدجور میشه که می بینید و اصلاح می کنید.

saalek110 · Jan 18, 2024

رنگ بک گراند سایت:

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

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>

http://saalek110.great-site.net/amozesh/yourweb/c1.php?i=1

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

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

saalek110 · Jan 18, 2024

CSS:

           background-image: url('images/myimage.jpg');

عکس بک گراند:

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

saalek110 · Jan 18, 2024

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

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