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

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

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

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

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

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

کاراکتر های زیادی در html را نیاز خواهید داشت ! مثلا قرار دادن فاصله در یک نوشته و کوچکتر و بزرگتر کردن متن و...

نتیجه توضیحات نام موجودیت شماره موجودیت
  فاصله بدون شکست    
< کوچکتر از &lt; &#60;
> بزرگتر از &gt; &#62;
& ampersand &amp; &#38;
" علامت کتیشن &quot; &#34;
' آپاستروف &apos;(در IE کاربرد ندارد) &#39;



دیگر موجودیت کاراکترهای پر استفاده

نتیجه توضیحات نام موجودیت شماره موجودیت
¢ cent &cent; &#162;
£ پاوند &pound; &#163;
¥ ین &yen; &#165;
§ بخش &sect; &#167;
© حق کپی &copy; &#169;
® علامت ثبت شده &reg; &#174;
× ضرب &times; &#215;
÷ تقسیم &divide; &#247;

  • علی حاتمی

 

html - بخش 4

در کد نویسی html شاید به بخواهید بر فرض مثال یک پاراگراف یا یک لینک و ... در صفحه ی html خود قرار دهید .

برای قرار دادن اینگونه مطالب و متن ها نیاز به یک سری کد در html میباشد که میتوانید با مطالعه این مقاله از آن بهره ببرید .

نحوه ی قرار دادن پاراگراف : شما میتوانید با قرار دادن کد <p> که مخفف پاراگراف میباشد شروع یک پاراگراف را درآن قرار دهید و با <p/> به آن پایان دهید .

نحوه ی قرار دادن متن : شما میتوانید با استفاده از کد <span> یک متن , نوشته و هر چیزی که مربوط به فایل های متنی میباشد را در آن قرار داده و با <span/> به آن پایان دهید .

نحوه ی قرار دادن لینک در html : شما میبایست برا قراردادن لینک در یک صفحه ی html از کد زیر استفاده کنید :

<a href="link marbote"> matne neveshte </a>

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

  • علی حاتمی
html

html - بخش 3

با توجه به توضیحاتی که دررابطه با مطلب " توضیحاتی در مورد شروع کد نویسی html " ( لینک مطلب ) و آموزشی که در آن قرار دادم شما میتوانید یک صفحه ی ساده ی html بسازید
پس از تایپ بخش DOCTYPE شما میبایست بخش ها و قسمت های اصلی صفحه ی html خود را مشخص کنید که در اکثر موارد شامل بخش های زیر میباشد :
1 » html معرف شروع صفحه میباشد و پس از DOCTYPE قرار میگیرد و آخرین گزینه ای است که باید در پایان کد نویسی بسته شود ( بسته شدن تگ ها در html به صورت <html/> میباشد )
2 » head که در این بخش موضوعاتی چون : تایتل یا عنوان صفحه ی html , توضیحات نوع فایل مثلا utf-8 , فراخوانی استایل ( css ) , توضیحات سایت ( description ) , کلمات کلیدی ( keywords ) و ... قرار میگیرد . و پس از پایان اینها حتما میبایست تگ بسته شود !
3 » Body که متن و تصاویر و الباقی آنچه که لازمه ی قرار گیری و دیده شدن در صفحه ی html میباشد در آن قرار میگیرد . و قبل از تگ html بسته میشود .

  • علی حاتمی

جی کوئری

Jquery یک کتاب خانه ی بسیار مفید و خوب برای Java Script است و مشکلات جاوا را برای تطابق با مرورگرهای مختلف را حل کرده و کار آن چندان سخت نیست .

برِای آموزش جی کوئری شما حتما باید پیش نیاز های css  و html را یاد داشته باشید تا بتوانید از آن در طراحی خود استفاده کنید و بهره ببرید

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

Jquery از نوع جاوا اسکریپت بوده و کاربردهای زیادی مثل استفاده از اسلاید شو ها , اسلایدر های زیبا و بروز و ... از آن استفاده کرد .

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

  • علی حاتمی

وردپرس فارسی

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

قابلیت هایی که وردپرس را متمایز کرده و فرق زیادی با الباقی cms ها { مثل : جوملا , دروپال و .... } دارد :

قابلیت های انعطاف پذیری و همه کار بودن ( اعم از : ایجاد فروشگاه اینترنتی , وب سایت شخصی , شرکتی , سرگرمی , دانلود و ... )

راحت بودن محیط کاری برای وبمستر و ساده بودن آن

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


از کجا وردپرس نصب کنم ؟ 

شما میتوانید با مراجعه به سایت : wp-persian.com از بخش دانلود آن وردپرس فارسی را دانلود کرده و نصب کنید !

به زودی " کد نویس " آموزش نصب وردپرس فارسی را به صورت کاملا ساده و تصویری منتشر خواهد کرد و شما میتوانید وب نوشت " کد نویس " را دنبال کنید تا یاد بگیرید چگونه از طریق وردپرس فارسی یک سایت بسازید !


  • علی حاتمی

css
css چیست ؟
CSS دستوراتی است که توسط آنها میتوان تمامی خصوصیات ظاهری صفحه وب سایت را تعیین کرد.
بنابراین شما توسط کدهای HTML صفحه وب سایت خود را پیاده سازی میکنید و با دستورات CSS مشخص میکنید هر عنصر چه خصوصیات ظاهری داشته باشد. خصوصیاتی مانند رنگ عنصر، اندازه هر عنصر، رنگ و اندازه فونت های مورد استفاده، فاصله عنصرها از یکدیگر، حاشیه و غیره . CSS مخفف کلمه Cascading Style Sheets و به معنی شیوه نامه آبشاری است. علت این نامگذاری نحوه اعمال دستورات به عناصر موجود در صفحه است. شما برای اعمال دستورات CSS به عناصر HTML می بایست از بیرونی ترین عنصر به ترتیب به عناصر داخلی آن دسترسی پیدا کنید که تداعی کننده حالت آبشاری است که بعد از استفاده از دستورات متوجه این موضوع خواهید شد.

چرا باید از css استفاده کنیم ؟
CSS می تواند در بسیاری از کارهای تکراری ، زمان طراحی و حجم کدهای سایت صرفه جویی کند. شما میتوانید یکبار خصوصیات ظاهری عناصر را در وب سایت توسط دستورات CSS مشخص کنید، سپس هرکجا در وب سایت از عنصر مورد نظر استفاده کردید، خصوصیات مشخص شده را به آن عنصر اعمال کنید. همچنین هر زمان نیز تصمیم بگیرید ظاهر وب سایت را تغییر دهید، کافیست به محلی که دستورات CSS را نوشته اید مراجعه کرده و آنها را تغییر دهید تا ظاهر عنصر مورد نظر در تمام صفحات وب سایت تغییر کند و نیازی به تغییر تمام صفحات سایت نیست. بنابراین حجم صفحات وب سایت شما نیز کمتر خواهد شد و در نتیجه سرعت بارگزاری صفحه وب شما افزایش خواهد یافت. همچنین دستورات CSS می تواند در یک فایل جداگانه از کدهای HTML شما نوشته شود و این تفکیک تمیزی و پیچیدگی کمتر کدها را در تمامی وب سایت برای شما به ارمغان می آورد. خوب است بدانید گوگل در رتبه بندی وب سایت ها، سرعت بارگزاری و کیفیت کدها را نیز مدنظر قرار میدهد و وب سایت هایی را که سرعت بارگذاری آنها مناسب نباشد، کمتر به جستجو کنندگان معرفی خواهد کرد.
  • علی حاتمی

header html

html - بخش 2

در تمامی فایل های نوشته شده html در سراسر وب فایل های متنی و کدهای موجود در source سایت ها دارای کلمه ی معرفی میباشد که از طریق خواندن این کلمات معرفی و مهم به مرورگر اطلاعات حاوی فایل html را ارسال میکند و مرورگر شما دقیقا متوجه میشود که فایل html از چه نوع اطلاعات داده ای میباشد مثلا : html4 , html1 , html5 و ...

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

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

 

متن DOCTYPE معرفی میکند فایل html شما را به مرورگر که در این مثال میگوید : صفحه ی html از نوعه html4.01 به صورت پابلیک ( عمومی ) به زبان انگلیسی و در آخر لینکی از سایت w3 میباشد که گیرنده ی یک سری اطلاعات میباشد .

ضمنا » برنامه نویسان تحت وب آماتور که فقط xhtml کار میکنند و وب سایت های قدیمی از این یک خط کد استفاده نمیکنند ! { شاید نمیدانند ! :) }

  • علی حاتمی

پست ثابت !

html

از آنجایی که شما در این وب نوشت به آموزش html خواهید پرداخت بهتر است بدانید در معنای کلی معنای کلمه ی html چیست ؟

  • HTML مخفف زبان نشانه گذاری فرا متنی است(hyper text markup language).
  • یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
  • بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
  • یک فایل HTML باید دارای پسوند htm. یا html. باشد
  • یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود
  • علی حاتمی

html

html - بخش 1

نیازمندی های ایجاد کدهای اچ تی ام ال ( html ) که برپایه ی آن نیز برنامه ریزی شده دربردارنده چند کلمه ی مهم و کلیدی میباشد که با به خاطر سپردن آن هرکجا که نیاز به طراحی یک فایل html داشتید میبایست از آنها استفاده کنید . پس یادگیری آن الزامی است ! 

هر فایل html از چند بخش اصلی تشکیل میشود . که اعم از :

1 ) html - کد اصلی اچ تی ام ال در سر بالای کل کد ها قرار میگیرد به صورت » <html> میباشد .

2 ) head - کد هدر یا قسمت بالایی سایت که بعد از html قرار میگیرد  به صورت » <head> میباشد .

3 ) body - یا همان بدنه ی html میباشد که استایل بدنی فایل را تشکیل میدهد و پس از همه قرار میگیرد و به صورت » <body> میباشد .

  • علی حاتمی
ویرایش

هو العالم ...
نرم افزارهای زیادی در مبحث ویرایش فایل های HTML و PHP  و بیشتر زبانهای برنامه نویسی تحت وب موجود میباشد که شما نیز میتوانید با استفاده از آنها به راحتی فایل های خود را ویرایش و از آن استفاده کنید
نرم افزار پیش فرض که در ویندوز xp و 7 نصب میباشد و شما میتوانید از آن بهره ببرید note pad بوده که کار با آن راحت و ساده میباشد ولی آنقدر که نیاز یک ادیتور ( editor ) باشد نیست
نرم افزار کامل و کاربردی حال حاضر در دنیای کدنویسی تحت وب ویرایش فایل های تحت وب دوست و برادر note pad بوده و با اسم note pad++ میباشد که قابلیت ها و مزایای زیادی را دارا میباشد و شما میتوانید با جستجویه کلمه ی : دانلود نرم افزار note pad++ در گوگل از سایت های دانلود فارسی جدیدترین نسخه ی آن را دانلود کنید .
 

  • علی حاتمی