آموزش کدنویسی شماره ۱
از این به بعد قصد داریم طی چندین مطلب نکات اولیه و به مرور زمان نکات کلیدی در رابطه با آموزش کدنویسی قالب وب سایت که شامل کدنویسی قالب های وبلاگ هم می شود را آموزش دهیم. هدف ما آموزش تمامی مباحث کدنویسی نیست چرا که آموزش طراحی صفحات وب در مباحث کدنویسی ممکن است بسیار مفصل و شاید خسته کننده باشد یا در مقالات آموزشی نتوان تمام مطالب را گنجاند و آموزش داد ، بلکه ۸۰% نکات کاربردی و مطالبی که برای ویرایش قالب سایت و وبلاگ نیاز دارید بدانید ارائه خواهد شد.
ابتدا از کد های مبتدی و پرکاربرد تر شروع می کنیم. در کدنویسی صفحات وب با نوشتن عبارت هایی ، محل قرار گیری یک جدول یا متن یا تصویر را با مشخصات خاص خود در صفحه معرفی می کنیم تا یک طرح گرافیکی را به یک صفحه وب تبدیل کنیم.
تذکر : هرگونه ایراد در کد قالب سایت یا وبلاگ شما باعث عدم نمایش صحیح سایت و عدم دسترسی مطلوب موتورهای جستجو به سایت خواهد شد.
توجه داشته باشید در کد نویسی صفحات وب هر عبارت با یک شروع و پایان همراه است پس دقت کنید هر کد که باز می شود باید در جایی بسته شود در غیر اینصورت صفحه ممکن است با مشکل نمایش داده شود.
کد های اولیه صفحات وب بدین صورت می باشد:
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
محتوای صفحه
</body>
</html>
همانطور که می بینید یک صفحه وب باید شامل کدهای بالا حتما باشد. به هریک از عبارت هایی که بین علامت کوچکتر رو بزرگتر قرار می گیرد تگ (tag) گفته می شوند . توجه کنید که این عبارت ها ابتدا باز شده و یک متن یا کد بین آنها قرار گرفته و بعد بسته می شوند. نکته دیگر اینکه این کدهای اولیه صفحات وب حتما باید یک بار در کد قالب شما قرار گرفته باشند. بسیاری از کاربران به علت بی اطلاعی کدهایی را در قالب درج می کنند که این تگ ها در آنها قرار دارد و باعث می شود این تگ ها در کد قالب چندین بار تکرار شوند. پس دقت کنید این تگ های اصلی قالب فقط یک بار در قالب موجود باشد!
تگ html که با رنگ قرمز مشخص شده بیانگر شروع و پایان کدنویسی صفحه است. تمام کدهای صفحه باید بین این تگ قرار میگیرد. تگ head که با رنگ سبز مشخص شده برای نمایش عنوان صفحه و عملگر های خاصی که در آینده توضیح خواهیم داد بکار می رود. این تگ باید دقیقا بعد از تگ html قرار گیرد. تگ آبی رنگ که body می باشد بعد از تگ head قرار گرفته و محتویات صفحه شامل متن ها و تصاویر و کدهای جانبی در این قسمت جای می گیرد. بنابر این هر کدی که در صفحه قابلیت نمایش دارد باید در این تگ قرار گیرد.
اکنون با چند کد کاربردی آشنا شویم.
کد درج تصویر به همراه توضیح مشخصات آن :
<img border="0" src="http://www.blogskin.ir/desktop/12.jpg" width="450" height="300" alt="tozihat-ax">
با درج این کد در قالب ، عکسی با مشخصات بالا شامل طول ۴۵۰ پیکسل (width) و عرض ۳۰۰ پیکسل (height) و دارای ضخامت کادر دور عکس صفر پیکسل یا بدون کادر (border) و همراه با یک متن توضیحات عکس (alt) با آدرس تصویر نوشته شده (src) نمایش داده می شود.
کد درج متن به همراه توضیح مشخصات آن :
<font style="color:#000000;font-size:10pt"> salam </font>
برای درج متن همراه با تنظیمات دلخواه مانند اندازه فونت و رنگ آن ، باید از تگ font استفاده کرد.همانطور که در کد نمونه مشاهده می کنید تنظیمات هر تگ با عبارت style آغار می شود و تنظیمات در آن تعریف می شود. توجه کنید که متن مورد نظر شما باید در بین دو تگ font که باز و بسته شده است قرار گیرد!
تنظیمات رنگ متن با عبارت color و اندازه فونت با font-size تعیین می شود. برای رنگ یک کد ۶ رقمی باید درج شود و سایز فونت متن هم با معیار pt و px سنجیده می شود.ما بطور معمول از pt استفاده می کنیم.
توجه : بین تعریف هر یک از تنظیمات ، این عبارت (;) درج می شود.
البته بصورت حرفه ایی تنظیمات مربوط به متن ها در جداول با تنظیمات خاص خود تعریف می شوند و تگ font در اینجا تنها جنبه کاربردی دارد و معمولا در کدنویسی حرفه ای استفاده نمی شود.
برای قرار دادن متن در یک سمت از جدول موردنظر ، با این کد می توان این کار را انجام داد:
<div style="text-align:center"> متن شما </div>
در کد بالا محتویات و متن شما که بین عبارت div قرار گرفته است وسط چین خواهد شد.برای راست چین و یا چپ چین کردن محتویات و متن ها به جای کلمه center از کلمات right و left استفاده کنید.
در مطالب آینده به توضیحات بیشتری در مورد کدنویسی قالب ها اشاره خواهیم کرد.
خیلی دستتون درد نکنه ؟
لطفا ادامه بدین و قسمت های بعدی را تا حد حرفه ای توضیح بدین..
سایتتون خیلی عالیه
آقا واقعا” ممنون
گل کاشتین . خیلی عالی بود اگه امکانش هست این آموزش ها رو تا حد حرفه ای پیش ببرید
ممنون میشیم.
موفق باشید
دستتون درد نکنه لطفا در مورد نوشتن قالب بیشتر توضیح دهید.
مرسی لطفا ادامه بدیــــــــــــــن
خیلی کارتون عالی و حرفهییه. ممنون. خسته نباشید. لطفا جزئیترشم ادامه بدید
فوق العاده بود من از کد نویسی جیزی نمیدونستم ولی وقتی کنجکاو شدم و به وب شما سر زدم الان چیز های مفیدی یاد گرفتم و مشتاق شدم تا سطح حرفه ای ادامه بدم
خیلی خوب بود خواهشا ادامه بدین
ممنونم
ممنون کارتان را ادامه بدهید و هر وقت مطلب جدید می گذارید خبرمان بدهید با تشکر
مرسی! واقعا مطالبتون کاربرد داره!
متشکریم لطفا ادامه بدهید
سلام خیلی خیلی ممنون بابت راه اندازی این سایت ،موفق باشید
کارتون عالی بود
سلام من می خواهم خیلی کامل باکدنویسی آشناشوم می شودکمکم کنید
لطفابه صورت کامل آموزش دهید
✿✿✿ تقدیم به شما مدیر سایت www.bloghelp.ir ✿✿✿
واقعاًبدون شک میتونم بگم یکی از بهترین سایت های آموزشی هست من خیلی وقته دنبال این کد ها میگشتم وآخر پیدا کردم الان شاید باور نکنید دوستان عزیز من با کمک این دوستان ویادگیری بهتر اینا الان میتونم به راحتی قالب وبلاگ طراحی کن البته در حد آماتور اما یواش یواش دارم پیشرفت میکنم بچه ها شما هم به این مطالب ها ادامه بدین
واز مدیر این سایت هم میخوام مطالبشسو بیشترو بیشتر کنه ممنون ازتون
موفق پیروز باشید
یاحق…
عالی بود ایول
مطلب بسیار خوبی بود ممنونم
این اموزش رو با منبع بزارم تو سایتم ؟؟
عالییییی بود
ولی ادامش کو؟؟
قشنگ بود …لطفا ادامه بدین…
وای خیلی ممنووووووووووووووووووووووووووووووووووووووووووووووون!
سلام وقت بخیر
بنده فارغ التحصیل ارشد مهندسی معماری هستم و کارشناس نظام مهندسی…حضور شما عرض شود قصد دارم یک وبلاگ ایجاد کنم از طریق همین کدنویسی و.. اما هیچ گونه اطلاعاتی ندارم… سوال بنده این هستش که این کد هارو باید کجا و چه برنامه ایی وارد کنیم؟اگر راهنمایی بفرمایید ممنون میشم
لطفا به صورت ویدیو آموزش بدید خیلی ممنون
عالی ممنون بقیه اش کو
بخش کد نویسی وب سایت شامل میشه
پس باقیش کو؟؟؟؟؟؟
سلام واقعا ممنون مرسی من خیلی به کد نویسی وبلاگ علاقه دارم
اگه میشه بیشتر توضیح بدین
ببخشید کلاسی هم برای اموزش هست؟
لطفا اگر در مورد شبیه سازی و کد نویسی مرجع و کتاب خوبی می شناسید معرفی نمائید
با تشکر
تیمور محمدی