::. کد نویس .::

آموزش طراحی سایت و برنامه نویسی تحت وب

::. کد نویس .::

آموزش طراحی سایت و برنامه نویسی تحت وب

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

۲۰ مطلب در بهمن ۱۳۹۱ ثبت شده است

در آموزش بخش 3 یاد گرفتیم چگونه متنی را در یک صفحه ی html قرار دهیم .

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

ابتدا در بین کد های خود ( هرکجا که میخواهید عکس قرار بگیرد )

مثلا یک فایل متنی نوشتید :

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<p> This text is bold </p>
</body>
</html>

و دوست دارید بعد از تگ P یک عکس قرار دهید .

حال بعد از کد P کد زیر را میتوانید در آن قرار دهید

<img src="link axe morede nazar" alt="توضیحات عکس">

مثال را کامل میکنیم :

<html>
<head>
<title>title of page </title>
</head>
<body>
This is my first home page.<p> This text is bold </p>
<img src="link axe morede nazar" alt="توضیحات عکس">
</body>
</html>

به همین راحتی میتوانید عکس های خود را در یک صفحه html به نمایش در آورید - " کدنویس "

  • علی حاتمی

 

 

سیستم وردپرس یکی از راحت ترین سیستم های مدیریت محتوای سایت میباشد که کار کردن با آن بسیار ساده و در عین حال لذت بخش میباشد .

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

  • علی حاتمی

آموزش اول

هر وب سایت دارای چند بخش اصلی میباشد که در ذیل به آنها اشاره میکنیم :

اگر شما در وب سایت های دانلود دقت کرده باشید میتوان فهمید که طرح کلی این وب سایتها تقریبا شبیه به هم است مثلا مطالب اصلی سایت در وسط صفحه قرار دارد و الباقی لینک ها ( مطالب پربازدید , نظرات , آمار ها و... ) در قسمت کناری سایت قرار دارد حال در زبان های کد نویسی و طراحی این قسمت ها دارای نام هایی است که یادگرفتن آنها در برقراری ارتباط با گرافیست برای طراحی psd  و ... تاثیر زیادی دارد

  1. قسمت بالایی یک سایت ( قسمتی که تصویری در بالایی سایت به عنوان لوگو و ... قرار دارد ) را هدر Header مینامند
  2. قسمتی که مطالب یک سایت در آن قرار میگیرد را content مینامند
  3. قسمت های کناری یک سایت ( بخشی که تبلیغات در کنار سایت ها قرار میگیرد + لینک دیگر مطالب + آمار سایت و ... ) را ساید بار  sidebar  نامیده و به سایدبار چپ و سایدبار راست جدا میشود ( برخی سایت ها دارای 2 ساید بار در سمت چپ و راست هستند )
  4. قسمت پایینی سایت که توضیحاتی در رابطه با حق نشر سایت ( کپی رایت ) تاریخ افتتاح سایت و ... قرار میگیرد را فوتر footer مینامند که حتما لزومی نیست این بخش در سایت قرار بگیرد .

این 4 بخش کلی ترین دسته بندی بخش های یک سایت میباشد که در آموزش های بعدی به توضیح کامل و تشریح بخش های سایت خواهیم پرداخت .

  • علی حاتمی

PSD سایت یا همان طرح اولیه ای که برای یک سایت طراحی میشود , طرحی است پیشفرض برای کمک به کدنویس که بفهمد طرح کلی سایت به چه صورت بوده و از روی آن الگو برداری کند و تمامیت زیبایی یک سایت را طراح گرافیست ( کسی که PSD طراحی میکند ) تعیین میکند .

بر فرض مثال قسمت بالایی یک سایت ( header ) یک سایت قرار است دارای یک لوگو( logo ) باشد ؛ این طراح PSD است که لوگو را در پی اس دی قرار داده و به کد نویس میفهماند که جایی که قرار است لوگو قرار بگیرد دقیقا کجاست !

 

  • علی حاتمی

DNS دامنه چیست؟ مانند آجرهای یک خانه است. آدرس DNS ها ممکن است به صورت زیر باشد:

ns1.server.com
ns2.server.com

DNS برای این که هاست شما به دامنه شما مربوط شود ، تنظیم می شود. سرور های ns1 ممکن است قطع باشند به همین دلیل باید ns2 کار کند. اگر به هر دلیلی Data Center هاست شما از بین برود ، DNS های شما نیز از بین می روند تا دامنه بدون هاست شما دزدیده نشود.

 

هاست یا Host یعنی چه؟ با توضیحات بالا فهمیدید که هاست و دامنه به یک دیگر وابسته اند. هاست (Host) در زبان انگلیسی به معنی میزبان است. یعنی میزبانی سایت شما برعهده  شرکتی است که شما انتخاب کردید. Host یک کامپیوتر تحت شبکه است که توسط cpanel سایت شما کنترل می شود. محتوای این کامپیوتر یک سیستم عامل است که شما انتخاب کردید لینوکس یا ویندوز. و در درایو های دیگر محتوایی که شما از طریق cpanel برای سایت خود ریخته اید وجود دارد. پس Host هم یک کامپیوتر است که با وسایل جانبی پیشرفته و مودم های مخصوص ، به cpanel متصل شده و در شبکه اینترنت پخش می شود. برای این هاست ها باید حتما DNS دامنه تنظیم شود. ممکن است بگویید من و دوستم از یک هاست خریده ایم ولی DNS هایمان فرقی ندارد. چرا؟ DNS پرتکول خاصی ندارد و تنظیمات DNS نیز توسط مرورگر ها قابل مشاهده نیست. DNS فقط شامل یک نشانی نیست بلکه به طور اتوماتیک یوزرنیم و پسورد هاست مربوطه نیز در هاست ها به آدرس DNS فرستاده می شود تا بتوان کنترل DNS را در دست گرفت.

 

هاست VPS چیست؟ هاست VPS فقط در یک کامپیوتر اجرا می شود و توسط سخت افزار های مخصوص مجازی سازی می شود. یک سوپر کامپیوتر وظیفه چندین کامپیوتر را دارد و به هر سایت مقداری رم و فضا اختصاص می دهد. این هاست ها معمولا گران هستند ولی سرعت آن ها بیش از بقیه هاست است. هاست VPS معمولا برای سازمان های هاستینگ خیلی قوی و پرمشتری گذاشته می شود.

 

Data Center چیست؟ وقتی سایت هایی مثل فیس بوک تا این حد بازدید دارند خب بدیهیست که اگر بخواهند تمام اطلاعات میلیون ها کاربر را بر روی یک کامپیوتر هاست مجازی یا هاست معمولی ذخیره کنند کامپیوتر بلافاصله کرش کرده و تمام اطلاعات کاربران در عرض یک چشم به هم زدن از بین می رود. پس باید جهت کمتر شدن هزینه و افزایش مقدار فضا آن ها را به قسمت های مختلفی که شبیه کابل های برق هستند و در آن اطلاعات ۰ و ۱ رد و بدل می شود. هر هاست معمولی مجازی یا هر نوع هاست باید یک یا چند Data Center داشته باشد.

  • علی حاتمی

دامنه چیست ؟

به آدرس های سایت , دامنه می گویند. مانند www.google.com که دامنه آن google.com است. شاید اجزای هر URL را بدانید ولی دامنه یکی از مهم ترین قسمت های سایت و URL است. برای مثال دامنه زیر را ببینید:

https://www.coder.blog.ir

پسوند IR ، پسوند این دامنه است ولی دقت کنید:

https://www.1ghadami.blogfa.com/default.aspx

aspx پسوند فایل default و COM پسوند دامنه ماست. خب حالا فرق .com و .net و .ir و … در چیست؟ هر یک از پسوند های دامنه معنای خاصی دارد. مثلا پسوند .ac.com یا ac.ir را برای دانشگاه ها و موسسات آموزش می گذارند. هر دامنه بسته به نوع خود در سازمان مربوطه و هر سازمان اجازه اجاره آن را از سازمان خاصی می گیرد. برای مثال برای ثبت دامنه phpassistant.ir ، ما باید به سازمان نیک مراجعه کنیم تا آن را برای ما ثبت کنند. دامنه هایی با پسوند عمومی مثل net یا com در سازمانی به نام Domain Name Register Center ثبت می شود. اگر شما بخواهید دامنه ای ثبت کنید مشخصات شما را می خواهند. خواستن مشخصات به این دلیل است که مشخصات شما در پایگاه Whois ثبت شود و از دزدیده شدن دامنه شما جلوگیری شود.

 

Whois چیست؟ کجاست؟

Whois یک پایگاه وابسته به سازمان ثبت دامنه است که با جستجوی هر دامنه DNS ، نام مشخصات مالک و نام ثبت کننده نمایش داده می شود که آن را در سایت های اجاره دامنه حتما دیده اید.

  • علی حاتمی

اضافه کردن گوشه های گرد در CSS2 بسیار وقت گیر بود . ما باید برای هر گوشه از یک تصویر استفاده میکردیم .

در CSS3 ایجاد گوشه های گرد آسان است .
در CSS3 از ویژگی border-radius برای ایجاد گوشه های گرد استفاده میشود .
و شما میتوانید گوشه های گرد در آن ایجاد کنید

به مثال زیر توجه کنید :

این جعبه دارای گوشه های گرد است.

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

div {
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 یا قدیمی تر */
}
</div>
  • علی حاتمی

html - آموزش 5 ام

برای اینکه بخواهیم کد نویسی مرتب و تمیزی داشته باشیم و کار کردن خود نیز راحت تر باشد میبایست در کدنویسی html فایل css را که در فایلی دیگر قرار است نوشته شود را فراخوانی کنیم .

حال چگونه این کار را انجام دهیم ؟

  1. ابتدا یک صفحه ی html ایجاد کنید ( مثلا index.html )
  2. سپس بخش های آن ( html , header , body و... ) را مشخص کنید
  3. یک فایل css ایجاد کنید ( فایل های Css میبایست با فرمت css باشد مثل : style.css )
  4. سپس در بخش هدر ( header ) کد زیر را قرار دهید :
  5. <link type="text/css" rel="stylesheet" href="style.css" />

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

  • علی حاتمی

css3 - آموزش دوم

توضیح کلی دررابطه Class و ID !

از این دو برای معرفی کردن به المنت ها ( DIV ) به استایل سایت برای شناختن قسمتی از سایت برای استایل دادن به آن میباشد

مثال :

		<div id="head"></div>
		<div class="head"></div>

 

در مثال بالا ما با یک المنت که با مشخص کردن قسمت head سایت آن را در Css سایت میتوانیم تغییر داده و به آن استایل دهیم .

 

  • علی حاتمی

css3 - آموزش اول

در کار با css در کدنویسی html میبایست تعدادی از کلمات و المنت های ضروری را یاد داشته باشید .

 

margin : اطراف المنت رو خالی میکنه و یه جورایی ایجاد فاصله بین عکس ها , متن ها و ... میکنه

float : برای مشخص کردن مکان المنت ها میباشد - راست یا چپ بودن آن

padding : فاصله ی داخلی المنت های را تغییر داده و تغییرات درونی آن میباشد و شباهاتی به margin دارد

background : برای ایجاد بکگراند درون المنت استفاده میشود

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

border : برای ایجاد کادر در دوره المنت استفاده میشود

font-family : برای معرفی نوعه فونت نوشته ها میباشد

font-size : اندازه ی فونت نوشته ها

height : ارتفاع المنت موجود را میتوان با استفاده از آن مشخص کرد

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

color : همانطور که از اسمش مشخص است برای تعیین رنگ المنت میباشد ولی دقت کنید رنگ نوشته ها را تغییر میدهد نه کل المنت را !

background-color : برای تعیین رنگ کلیه بک گرانده المنت ها

display : با استفاده از این کلمه در css میتوانید مشخص کنید که طریقه ی نمایش یک المنت به چه صورت باشد یا حتی آن را نمایش ندهد !

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

  • علی حاتمی