ساخت وبسایت برای مبتدی ها

[daniad]

آموزش وبسایت
اول باید بدانیم که وبسایت چگونه اجرا میشه و ساختار کلیش چطوره
وبسایت در واقع از یه سری کد هایی که برنامه نویس وبسایت اونا رو نوشته بوجود اومده
اون کد ها انواع مختلفی دارند و نوشتن هر کدوم قواعد خواص خود رو داره و هر کدوم کار خاصی رو انجام میده
پایه ای ترین کد های یک وبسایت کد های html هستند که کار آنها صرفا ایجاد نوشته ها رنگ ها فرم ها و لینک ها و چیز هایی از این قبیل به صورت محدود است
html زبون کد نویسی ساده ای هست یعنی ظرف چند روز میشه اونو یاد گرفت و قواعد پیچیده ای نداره
شما اگر html بلد باشی میتونید یک وبسایت رو به طور خیلی ساده طراخی کنید
و البته بدون دخالت html نمیشه وبسایت رو طراحی کرد
زبان بعدی که مورد نیاز هست css هست که کار اون رنگ و شکل دادن به سایت بصورت خرفه ای است
یعنی شما با html سایت رو میسازید و با css به اون طرخ و شکل میدین
css هم مثل html بسیار ساده هست و قواعد خواصی نداره و طی چند روز یاد میگیرید
خوب اگر css و html رو بلد باشید میتونید یک وبسایت زیبا و ساده رو بسازید
در مرحله بعد باید کار با کد های jquery رو یاد بگیرید که کارش ایجاد حرکت و جلوه های تصویری در سایت هست
مثلا جابجا شدن یک تصویر یا قیب شدن آن بعد از چند ثانیه
یاد گیری کار با کد های jquery کمی سخت هست و نیاز به تمرین و تجربه زیاد داره
خوب تا اینجا میتونید یک وبسایت زیبا با جلوه های تصویری زیبا بسازید
تا اینجا وبسایتی که ساختیم رو static یا ثابت مینامیم چون هر کاری که کاربر داخل سایت انجام میده هیچ تغییری داخل سای ایجاد نمیشه و همینطور به صورت اوتوماتیک خود سایت هیچ کاری نمیکنه و برای هر تغییر باید جداگانه برای اون کد بنویسید
اما نوع دیگری از وبسایت وجود دارد که به او dynamic یا متحرک میگویند
چون طوری اونا رو تنظیم میکنید که در زمانی حاص کار خاصی رو انجام میدن یا کاربر میتونه در اونا دخل تصرف داشته باشه
مثلا ثبت نام کنه و وارد پنل کاربریش شه
یا کار هایی از این قبیل
در وبسایت های داینمیک علاوه بر استفاده از زبان های بالا باید از یک زبان سمت سرور هم استفاده کنید
زبان سمت سرور یعنی زبانی که از سمت سرور اصلی دستوراتی رو انجام میده که تو ظاهر قابل مشاهده نیستند
مثلا برای ثبت نام یک کاربر اطلاعات ثبت شده رو داخل سرور ذخیره میکنند و کار هایی از این قبیل
زبان های تحت سرور معروف که اغلب از اونا استفاده میشه php و asp هستند
سایت های بزرگی مثل گوگل یاهو و فیسبوک و... از php استفاده میکنند و سایتی مانند مایکروسافت و پارس آنلاین و ... از asp
asp تحت ویندوز و php تحت لینوکس است
خوب برای یاد گرفتن این ها ماه ها باید تلاش کنید و آموزش ببینید و تمرین کنید و البته در اون صورت حرفه ای میشوید
ولی برای ساخت یک وبسایت با استفاده از همه زبانهای بالا ختما نیاز نیست که اونا رو بلد باشید
بجاش میتونید از cms ها کمک بگیرید
cms یک نوع نرم افزار تحت وب است که خودش با زبان های ذکر شده در بالا نوشته شده پس در واقع خودش یک وبسایت است که شما نصب میکنید و باهاش وبسایت خودتونو با امکانات روونش میسازید .
وبسایت هایی کامل و با کیفیت رو میشه با cms ها ساخت بطوریکه عمده سایت های داخل اینترنت با cms ها ساخته شده اند
معروف ترین cms ها Wordpress و joomla و nuke و vbuiltin هستند که کارایی قوی ای دارند و از همه آنها پرکاربرد تر wordpress هست که خیلی از سایت ها با اون نوشته شدند
زبان تخت سرور wordpress زبان php هست
تغریبا همه سایت های دانلود داخل ایران با wordpress ساخته شدند
مثل donwloadha.ir , -------------.com و ...
من در این آموزش کاملا کار با wordpress که از این به بعد به اون wp میگیم رو شرخ میدم تا با اون یک وبسایت کامل و قوی بسازید.
خوب حالا ما با سازوکار کلی وبسایت آشنا شدیم
خال باید بدانیم چطوری وبسایت برای کاربران قابل دیدن میشه
وبسایت رو باید در یک فضای اینترنتی یا همون هاست بریزیم و اون هاست رو به یک دومین یا همون آدرس سایت وصل کنیم
دومین ها با توجه به پسوندشون .ir .com .net .org .me .us .biz و ... قیمت های مختلفی دارند مثلا .ir حدود 4 هزار تومن است ولی .com بطور متوسط 25 هزار تومن
گفتم متوسط چون قیمت سرکتهای مختلف کمی فرق داره
هاست هم بر اساس حجم و پهنای باند و... قیمت بندی میشه که زیاد گرون نیست
هاست ها کنترل پنل های متفاوتی دارند که معروف ترین آنها cpanel هست که از php پشتیبانی میکنه و برای سایتی که با wp ساخته شده گزینه خوبی است
کنترل پنل معروف بعد direct admin است که اونم php رو ساپورت میکنه و برای وردپرس میشه ازش استفاده کرد
کنترل پنل معروف websitepanel هم asp رو ساپورت میکنه و تحت ویندوز هست و برای wp مناسب نیست
بعد از خرید هاست و دومین از طریق پنل دومین که به ما از شرکت فروشنده میدهند dns های هاست خود را که شرکت هاستینک به ما میده رو set میکنیم و پس از اون هر کس آدرس دومین ما را در مرور گرش بزند به هاست ما منتقل میشه که سایت رو روش گذاشتیم پس وارد سایت میشه
dns هم مخفف کلمه domain name service هست که معمولا 2 تا آدرس ساده است و فقط باید اونا رو داخل پنل دومین قرار بدیم و به اطلاعات بیشتر از این نیاز نداریم
این نمای کلی از ساخت سایت بود
حالا برای ساخت سایت با wp همه مراخل را در قسمت بعدی آموزش عملی توضیح میدم

[Sh-Meteor]

ادامه بده...
مشتاقیم یاد بگیریم...
.
من خودم html، css رو بلدم...
یه کوچولو هم javascript رو بلدم.
من برای یکی از دروس دانشگاهی مون یه سایت استاتیک نوشتم که فقط توش از html، css و js استفاده شده
ولی دوست دارم گسترشش بدم و داینامیکش کنم.
.
.
به سوال: بهتر نیست کلا از cms ها استفاده نکنیم.
خودمون کد نویسیش رو انجام بدیم.
در ضمن من تجریه کار با هیچ نوع cms ـی رو ندارم...
ولی طبق شنیده هام فکر کنم، joomla بهتر باشه، اینطور نیست؟؟

[Mr.Pooya]

ادامه بده...
مشتاقیم یاد بگیریم...
.
من خودم html، css رو بلدم...
یه کوچولو هم javascript رو بلدم.
من برای یکی از دروس دانشگاهی مون یه سایت استاتیک نوشتم که فقط توش از html، css و js استفاده شده
ولی دوست دارم گسترشش بدم و داینامیکش کنم.
.
.
به سوال: بهتر نیست کلا از cms ها استفاده نکنیم.
خودمون کد نویسیش رو انجام بدیم.
در ضمن من تجریه کار با هیچ نوع cms ـی رو ندارم...
ولی طبق شنیده هام فکر کنم، joomla بهتر باشه، اینطور نیست؟؟

سلام

با اجازه استارتر عزیز:

نوشتن یک سایت از پایه یک مزایایی داره و یک معایبی.

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

اما عیب بزرگش اینه که برای مبتدی ها نوشتن وب سایت از پایه می تونه خیلی خطرناک باشه بخاطر امنیتش. همونطور که از اسم تاپیک بر میاد برای مبتدی ها هست و کسانی که تازه شروع کردند مطمئنا نمی تونن امنیت سایت رو به خوبی تامین کنند و اولین بخشش هم SQL Injection هست که با اشتباهات و رعایت نکردن بعضی موارد خیلی راحت میشه یک سایت رو -- کرد.

اما CMS ها اکثرا از امنیت قابل قبولی برخوردار هستند که بزرگترین مزیت سی ام اس به حساب میاد

موفق باشید

[Sh-Meteor]

سلام

با اجازه استارتر عزیز:

نوشتن یک سایت از پایه یک مزایایی داره و یک معایبی.

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

اما عیب بزرگش اینه که برای مبتدی ها نوشتن وب سایت از پایه می تونه خیلی خطرناک باشه بخاطر امنیتش. همونطور که از اسم تاپیک بر میاد برای مبتدی ها هست و کسانی که تازه شروع کردند مطمئنا نمی تونن امنیت سایت رو به خوبی تامین کنند و اولین بخشش هم SQL Injection هست که با اشتباهات و رعایت نکردن بعضی موارد خیلی راحت میشه یک سایت رو -- کرد.

اما CMS ها اکثرا از امنیت قابل قبولی برخوردار هستند که بزرگترین مزیت سی ام اس به حساب میاد

موفق باشید
به نظر شما از کدوم cms استفاده کنم؟؟؟
ورد پرس، جوملا، ویبولتین یا ...
مزایا و معایب هر کدوم چیه؟؟؟

[Mr.Pooya]

به نظر شما از کدوم cms استفاده کنم؟؟؟
ورد پرس، جوملا، ویبولتین یا ...
مزایا و معایب هر کدوم چیه؟؟؟

راستش نمیشه ۱۰۰٪ گفت کدوم خوبه کدوم بد.

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

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

PHP Nuke هم خوبه ولی سرعت لودش خیلی پایینه چون سنگینه.

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

[daniad]

ادامه بده...
مشتاقیم یاد بگیریم...
.
من خودم html، css رو بلدم...
یه کوچولو هم javascript رو بلدم.
من برای یکی از دروس دانشگاهی مون یه سایت استاتیک نوشتم که فقط توش از html، css و js استفاده شده
ولی دوست دارم گسترشش بدم و داینامیکش کنم.
.
.
به سوال: بهتر نیست کلا از cms ها استفاده نکنیم.
خودمون کد نویسیش رو انجام بدیم.
در ضمن من تجریه کار با هیچ نوع cms ـی رو ندارم...
ولی طبق شنیده هام فکر کنم، joomla بهتر باشه، اینطور نیست؟؟

ممنون دوستم حتما
برای سوالتون همونطور که دوستمون گفتند خوبی ها و بدی های خودش رو داره
ولی شما بر حسب نیازتون باید این کار رو بکنید
یعنی کلا کمتر پیش میاد که نیاز باشه همه چیز رو از پایه بنویسید مثل وقتی که برای یک شرکت یک سایت با ویژگی های خواص خود را مینویسید
مثلا سایتی مثل ناحیه کاربری اراوه دهندگان اینترنت (isp ها ) رو نمیشه با cms ها نوشت و اختصاصی و بطور دقیق نوشته میشن
ولی سایت هایی که شما هر رووز نیاز داری کلی توش مطلب بزاری باید از cms استفاده کنی حتما
علاوه بر اینها امروزه cms های بزرگ اینقدر توصعه پیدا کردند که خیلی امکانات رو بدون داشتن دانش زیاد برای وبمستران فراهم میکنند.
و همونطور که دوستمون گفت نوشتن برنامه اختصاصی نیاز به دانش و دقت زیادی از جهت امنیت هست .

حتما آموزش رو ادامه میدم .
با تشکر

[daniad]

به نظر شما از کدوم cms استفاده کنم؟؟؟
ورد پرس، جوملا، ویبولتین یا ...
مزایا و معایب هر کدوم چیه؟؟؟

من خودم wordpress رو به شما پیشنهاد میکنم و از اون استفاده میکنم زیرا :
1_ در حال حاضر هزاران نفر در حال توصعه آن هستند و همچنین منابع و مستندات فارسی زیادی داره
2_بسیار ساده و روان است و شما از 0 هم که شروع کنید میتونید راخت باهاش کنار بیاید
3_کلی پلاگین و افزودنی هر روز برای اون ساحته میشه که شما هر نیازی براتون پیش بیاد با 1 جستجو پلاگینی که مشکل شما رو خل کنه پیدا میکنید.
4_امکانات زیادی داره و نقص و کاستی کمتر در اون دیده میشه
5_از نظر سئو واقعا خوب هست و سئوی بالایی داره
و ...
البته سایر cms ها ویژگی ها و خوبی های خود را دارند ولی من wp رو پیشنهاد میکنم

[Cna_1]

سلام برای سایت داینامیک یادگرفتن CSS و HTML نیاز هست؟

کلا کسی که صرفا میخواد یکی دو تا سایت داشته باشه و اداره کنه نیازه این همه چیزو یاد بگیره ؟
من میخوام سایت داینامیک داشته باشم باید کار با چه نرم افزارهایی رو یاد بگیرم ؟ :((

[daniad]

کاربردی ترین راه استفاده از cms ها است که گفتم
در ادامه آموزششونو میگم

[kian98]

سلام

بهتر نبود یکم بیشتر روی مقالتون وقت میگذاشتید.

چندتا اشتباه جزئی داره که باعث سردرگمی کاربران میشه.همین طور بنده چندتا مقاله مثل همین در انجمن گذاشتم.

باتشکر

[Mr.Pooya]

سلام برای سایت داینامیک یادگرفتن CSS و HTML نیاز هست؟

کلا کسی که صرفا میخواد یکی دو تا سایت داشته باشه و اداره کنه نیازه این همه چیزو یاد بگیره ؟
من میخوام سایت داینامیک داشته باشم باید کار با چه نرم افزارهایی رو یاد بگیرم ؟ :((

نمی دونم این تاپیک پرسش و پاسخ هم هست یا فقط آموزش دوستی که موضوع را شروع کردند باید این رو تعیین کنید !

نه HTML CSS کافی نیست برای ساخت یک سایت داینامیک باید یک زبان مثل PHP یا ASP , Perl , Python یا امثال این ها رو بلد باشید.

موفق باشید.

[Thor God]

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

[daniad]

سلام دوستان
اول 1 عذر خواهی میکنم که دیر شد
حالا قسمت دوم رو آماده کردم براتون

فصل 2
Html
در فصل قبل با کلیات وبسایت و اجرای آن آشنا شدیم .
در این فصل قصد داریو با زبان اچ تی ام ال آشنایی پیدا کنیم زیرا در سایت وردپرسی می تواند خیلی کمک کند.
این زبان قواعد خیلی خیلی ساده ای دارند که برای یاد گرفتن آن فقط کمی تمرین لازم است .
همانطور که گفتیم این زبان پایه و اساس وبسایت است و در هر وبسایتی از این زبان استفاده شده
در این زبان باید از تگ ها استفاده کنیم
تگ چیه ؟
تگ در لغت به معنای برچسب هست
در اچ تی ام ال تگ ها بین <> قرار میگیرند مثل :
<body>
<hr>
<p>
در این زبان همه دستورات در فالب تگ ها نوشته میشوند
بعضی از تگ ها تکی هستند و خیلی ها 2تایی
یعنی چی ؟
بعضی از تگ ها فقط 1 بار نوشته میشوند و دستور خاصی رو اجرا میکنند مثل :
<br>
این تگ برای رفتن به خط بعد یا همون کاری که کلید اینتر در ویرایشگر های متن انجام میده رو انجام میده!
چون در این زبان شما هر چه فاصله بگذارید بین جمله ها و یا به خط بعد بروید تاثیر ندارد و باید تگ مربوط رو برای این کار بنویسید
مثلا اگر کد به شکل زیر باشد
Hi im dani and im glad to learn you lets learning!
I hope to be good
خروجی اینطوری میشه
Hi im dani and im glad to learn you lets learning!I hope to be good

اما اگر بخواهیم مثل همون کد اول که نوشتیم به نمایش در بیاد باید اینطوری بنویسیم
Hi im dani and im glad to learn you lets learning!
<br>
I hope to be good

بعضی از تگ ها هم 2 تایی اند همونطور که گفتیم
یعنی از 1 جا شروع میشوند و در 1 جا پایان می یابند
هر نوشته ای که بین آغاز و پایان این تگ ها باشد از اونا تاثیر میگیره
چطور؟
مثلا :
<h2> this is a heading </h2>
حالا جمله بالا تحت تاثیر تگ
میباشد!<h2>
تگ های 2تایی به این صورت اند همه
<tag>matne beine tag ke az oon tasir migire </tag>
میبینید که سخت نیست زیاد
حالا در این فصل ما قصد داریم با چند تگ کاربردی آشنا بشویم که برای کار با وردپرس با قدرت بیشتری وارد عمل شویم .

شروع نوشتن اچ تی ام ال و کاربرد تگ های مهم
برای نوشتن کد های اچ تی ام ال ابتدا 1 فایل متنی در ویندوز بسازید و اسم اون رو بزارید
Index.html
خب قالب کلی دستورات html به شکل زیر هست
----------------------------------------------------------------------------------------------------


<html>
تمام دستورات این زبان باید در بین تگ html نوشته شوند
<head>
تگ head حاوی اطلاعات اصلی که همچنین meta-information نیز نامیده می شود در یک پرونده است.
عناصر داخل عنصر head نباید توسط مرورگر نشان داده شوند
<style>
در این تگ شکل و شمایل سایت رو با استفاده از دستورات css تعریف میکنیم

</style>
</head>
<body>
بخش اصلی دستورات html در این تگ نوشته میشود که بدنهی اصلی سایت را تشکیل میدهد و در واقع دستورات آن محتویات قابل مشاهده در مرور گر را بوجود می آورند
</body>
</html>


----------------------------------------------------------------------------------------------------------------
فرض کنیم میخواهیم جمله زیر در مرور گر به نمایش در بیاد
Hi Im dani
And its nice to meet you!

باید دستورات زیر را در فایل index.html بنویسیم

<html>
<head>
<style>
</style>
</head>
<body>
Hi Im dani
<br>
And its nice to meet you!
</body>
</html>

خب از آن جا که قصد من فقط معرفی شما با html است و میخواهم در حدی که با وردپرس به مشکل نخوریم به شما یاد بدهم سعی میکنم بیشتر دستورات کاربردی این زبان در وردپرس را به شما آموزش دهم!
خب برای ورد پرس شما فقط به دستورات تگ <body> نیاز دارید و بقیه رو خود وردپرس انجام میده
پس از حالا به بعد هر تگی که معرفی میکنیم در body به کار میره و داخل ویرایشگر وردپرس قابل استفادس
تگ <img>
این تگ از نوع تکی هست و برای قرار دادن عکس بکار میرود
قالب کلی این تگ به شکل زیر است
<img src=”adresse akse morede nazar” height=”ertefae aks” width”arze aks” align=”makane aks”>

ارتفاع و عرض بر حسب px نوشته میشوند
برای آدرس عکس سعی کنید اون رو به این شکل بنویسید
[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] siteton/name ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]) aks
align هم مکان عکس داخل صفحه هست و میتونه مقدار های زیر رو داشته باشه
Center )وسط(
Left )چپ(
Right )راست(
یکی دیگه هم بود یادم رفته :دی
توجه کنید اگر برای عکس عرض و ارتفاع تعریف نکنید به اندازه واقعی خود نمایش داده میشود
مثال
<img src=”[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ] “ height = “100px” width=”200px” align=”left”>



سر تیتر ها
سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند.

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>



پاراگراف ها
پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.

<p> This is a paragraph </p>
<p> This is another paragraph </p>

پرش به خط بعد
برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد

توضیحات در HTML
برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.
<!--This is a comment-->
توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید
برچسب Anchor و موجودیت Href
HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor
<a href="url"> متنی که نمایش داده می شود </a>

مثال

<a href=[ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ]>Film 1 download</a>

خروجی


Film 1 download ([ برای مشاهده لینک ، لطفا با نام کاربری خود وارد شوید یا ثبت نام کنید ])

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