آموزش کدنویسی شماره ۱
از این به بعد قصد داریم طی چندین مطلب نکات اولیه و به مرور زمان نکات کلیدی در رابطه با آموزش کدنویسی قالب وب سایت که شامل کدنویسی قالب های وبلاگ هم می شود را آموزش دهیم. هدف ما آموزش تمامی مباحث کدنویسی نیست چرا که آموزش طراحی صفحات وب در مباحث کدنویسی ممکن است بسیار مفصل و شاید خسته کننده باشد یا در مقالات آموزشی نتوان تمام مطالب را گنجاند و آموزش داد ، بلکه ۸۰% نکات کاربردی و مطالبی که برای ویرایش قالب سایت و وبلاگ نیاز دارید بدانید ارائه خواهد شد.
ابتدا از کد های مبتدی و پرکاربرد تر شروع می کنیم. در کدنویسی صفحات وب با نوشتن عبارت هایی ، محل قرار گیری یک جدول یا متن یا تصویر را با مشخصات خاص خود در صفحه معرفی می کنیم تا یک طرح گرافیکی را به یک صفحه وب تبدیل کنیم.
تذکر : هرگونه ایراد در کد قالب سایت یا وبلاگ شما باعث عدم نمایش صحیح سایت و عدم دسترسی مطلوب موتورهای جستجو به سایت خواهد شد.
توجه داشته باشید در کد نویسی صفحات وب هر عبارت با یک شروع و پایان همراه است پس دقت کنید هر کد که باز می شود باید در جایی بسته شود در غیر اینصورت صفحه ممکن است با مشکل نمایش داده شود.
کد های اولیه صفحات وب بدین صورت می باشد:
<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 استفاده کنید.
در مطالب آینده به توضیحات بیشتری در مورد کدنویسی قالب ها اشاره خواهیم کرد.
سلام
بالاخره آپ دیت شدید !
من همیشه منتظر مطالب آموزنده شما هستم
مطالبتون خیلی ساده و مفیده و برای کسی که تازه کاره خیلی پر فایده هستش
ممنون
خوب است
ممنون که دوباره آپ شدین.
مطلب جالبی رو شروع کردین.
بدرد همه ی بلاگر ها می خوره
مرسی. موفق باشین
دستتون درد نکنه بالاخره آموزش کد نویسی رو تو سایت قرارکردین
تو رو خدا زود به زود آپ بشید
سلام.
۲باره شروع بکار کردین !!!
خیلی وقت بود منتظر بودم !
راستش چند وقته که دارم دنبال کدهای قالب و جزئیاتشون میگردم ( البته خودم قالبمو با کمک یکی از دوستان یه تغییراتی درش ایجاد کردم مثل بنر و …) ولی کلا میگم. میبینم که قالب های حرفه ای یا قالب های بروز از کدهای html سایت هایی مانند www.w3.org شروع و نوشته میشن !
میخواستم بپرسم از این کدها در چه زمینه هایی استفاده میشه ؟
هم چنین میخواستم بپرسم اگر بخواهیم یه بنر یا لوگو یا … هر چیز دیگه ای رو بخوایم تو وبلاگ بذاریم که شخص باز دید کننده با کلیک کردن روی اون متن خاصی رو ببینه یا صفحه ای برای اون باز شه از چه نوع کد هایی باید استفاده کنیم که قابل تغییر دادن هم باشند به طور مثال همین کد “گالری تصاویر” ای که گذاشتین .با کلیک کردن بر روی اون یه صفحه روی پیج اصلی باز میشه و عکسارو نشون میده ! مثلا الان من تونستم با عوض کردن اسم و عکس buttonیه گزینه ی دیگه با عکس دلخواه برای گالری انتخاب کنم !
هم چنین میخواستم بپرسم این کدهای متن و عکس برای چه عکسها ونوشته هایی است ؟ برای نوشته های پستهامونه ؟
با تشکر
————————————
پاسخ شما : توضیحات مربوط به کدنویسی که نیاز دارید در مطالب آینده ارائه میدیم. فقط جهت اطلاع سایت W3 سایت معیار ها و استانداردهای کدنویسی صفحات وب هست.اون دستور نمایش متن بعد از کلیک روی دکمه یا تصویر هم باید از برنامه نویسی جاوا اسکریپت کمک گرفت.
کدهای متن و عکس برای استفاده در محیط کدنویسی قالب هست، حتی در قسمت ارسال مطلب یا پست ها می تونید وارد محیط HTML اون پست بشید و ازین کدها هم اونجا استفاده کنید.
سلام
چه عجب آپ کردید. مطالب قبلی شما رو با دقت خونده بودم وبسیار مفید بود.
این مطلب رو هم واقعاً ساده توضیح دادید.بی صبرانه منتظر ادامه مطلب هستم.
ممنون
لینکتون کردم وبلاگم تو گوگل اوله شما هم منو لینک کنید ممنون
درود
اگه کاربرا آشنایی کوچیکی با این کدها داشته باشند خیلی جاها می‌تونه کمکشون کنه
ممنونم
با سلام. خسته نباشید.
می خواستم محل قرار دادن هیدر یا همون سربرگ رو در قالب شماره ۳۶ در بلاگفا برام بنویسید. من که هر چقدر گشتم راهنمایی هایی که نوشته بود و دستورات رو نتونستم پیداکنم. بسیار ممنون میشم زود پاسخ دهید.
با سلام
خواهشا کد منو برای نظر سنجی و آمار سایت و ساعت را لطف فرمایید . آمار سایت و نظر سنجی مهم ترند خیلی عجله دارم لطفا کمک کنید
با تشکر
—————————-
پاسخ شما : کد اون بخش ها برای هر قالب تفاوت داره ، منتظر آموزش کدنویسی بعدی باشید
سلام
قالب جدیدتون خیلی زیباست؟
یک سوال داشتم
چه طور میشه ۲قالب روبرای یک وبلاگ میهن بلاگ انتخاب کردمثل سایتp30temp.com می خوام یک قالب سنگین ویک قالب سبک بذارم لطفاًبه من پاسخ بدید
—————————-
پاسخ شما : امکان استفاده از دو قالب برای یک وبلاگ نیست ، سیستم سایت با سیستم وبلاگ خیلی فرق داره
با سلام،
می خواستم بدونم شما چطوری قالب وبلاگ طراحی می کنین؟ آیا نرم افزار خاصی هست؟ یا باید آموزش ببیینم؟لطفا هر چه سریع تر جواب بدید ممنون میشم با تشکر
———————————
پاسخ شما : طراحی قالب سایت شامل طراحی گرافیک با نرم افزارهایی مثل فتوشاپ و کدنویسی با نرم افزارهایی مثل فرانت پیج کار میشه . می تونید از مقالات طراحی وب و کدنویسی موجود در اینترنت استفاده کنید.
سلام
میخواستم بدونم میشه فونت و اندازه عنوان وبلاگ رو در قسمت کد نویسی تغییر داد یا نه؟
با تشکر از آموزشهای خوبتون
سلام یه وب پیج با دیریم ساختم می خوام بریزمش تو سی دی …
ولی بعد ریختن تو سی دی لینکاش کار نمیکنه ؟
چی کار کنم
ممنونم یشم زود جواب بدید
واقعاً دست گلتون درد نکه
از آموزش کدنویسی شما بهره بردم سری هم به وبلاگ ما بزینید و نظر خودتونا بگذارید
thanks for you
سایت مفیدی راه انداختید.مرسی.یک سؤال داشتم.برای upload کردن یک فایل و گذاشتن لینک دانلود در وبلاگ چه راه حلی پیشنهاد می کنید؟
—————————
پاسخ شما : کافیه فایل مورد نظرتون رو در یکجا مثل http://blogskin.gigfa.com آپلود کنید و بعد لینک اون رو بصورتی که آموزش داده شده در وبلاگتون قرار بدید.
سلام به شما رفقای باحال.خداییش عجب کاری کردینا!
هر کی هم بخواد بره سراغ وبلاگ نویسی باید مستقیم بیاد سراغ شما.
غرض از مزاحمت اینکه من یه قالب بلاگفا گرفتم از اینترنت ولی مشکلش اینه که یه اسکرول بار میاد پایین صفحه هر کاری هم میکنم نمیره.(خیلی کنه س!)اگه بتونین کمکم کنین واقعا ممنون میشم.
سلام ازتوم ممنونیم موفق باشی
واقعا خیلی مفید بود.
ممنون
ببخشید برای چپ چین و راست چین کردن این دستور برای من عمل نمی کنه. منظورتون از متن شما همون کد های اون ابزار است؟
——————————–
پاسخ شما : اون کد برای متن بیشتر کاربرد داره ولی برای ۳۰درصد کد ابزارها معمولا جواب میده
چجوری میشه تکست قسمت درباره بلاگ رو از راست نویس به center تبدیل کرد ..
—————————–
پاسخ شما : کافیه عبارت مربوط به متن درباره وبلاگ رو (از طریق راهنمای کد های سیستم وبلاگ خود عبارت مربوطه رو پیدا کنید) داخل کدی که در مطلب آموزش دادیم قرار بدید
خیلی باحالی من می خوام حرفه ای شم اگه میشه اموزشا رو زیاد تر کنین.ممنون از زحماتتون
سلام.میخواستم یه خواهشی ازتون بکنم. اینکه لطفا آموزش قرار دادن فایل های فلش مثل فیلم تصویر موزیک و… که به صورت فلش هستند رو بذارید. خیلی ممنون
بهتون بابت این سایت خوب باس دس مریضاد گفت === بابا ای ول
سلام
واقعا مفیده
با تشکر
عالیههههههههههههههههههههههههه
my id
saeed237650
خیلی مطالب مفیدی بود
واقعا به درد من یکی که خیلی خورد
ممنووووووووووووووووون
خدا خیرت بده
واقاً حرف نداشت
خیلیخیلی ۲۰ بود
سلام
دستتون درد نکنه
عالی بود
توضیحات جامع و کاملتون جای هیچ سوالی رو برای کسی نمیذاره
فقط تشکر
مرسی