آموزش کدنویسی شماره ۱

موضوع : کدهای کاربردی   |  بازدید : 150908 مرتبه

از این به بعد قصد داریم طی چندین مطلب نکات اولیه و به مرور زمان نکات کلیدی در رابطه با آموزش کدنویسی قالب وب سایت که شامل کدنویسی قالب های وبلاگ هم می شود را آموزش دهیم. هدف ما آموزش تمامی مباحث کدنویسی نیست چرا که آموزش طراحی صفحات وب در مباحث کدنویسی ممکن است بسیار مفصل و شاید خسته کننده باشد یا در مقالات آموزشی نتوان تمام مطالب را گنجاند و آموزش داد ، بلکه ۸۰% نکات کاربردی و مطالبی که برای ویرایش قالب سایت و وبلاگ نیاز دارید بدانید ارائه خواهد شد.

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

توجه داشته باشید در کد نویسی صفحات وب هر عبارت با یک شروع و پایان همراه است پس دقت کنید هر کد که باز می شود باید در جایی بسته شود در غیر اینصورت صفحه ممکن است با مشکل نمایش داده شود.
کد های اولیه صفحات وب بدین صورت می باشد:

<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 استفاده کنید.

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

نظرات دوستان درمورد بخش پشتیبانی قالب ها و یا سوالات متفرقه پس از پاسخ به آدرس ایمیل شما ، از سایت حذف خواهند شد و ارتباط شما با سایت تنها از طریق آدرس ایمیل امکان پذیر است !

۸۹ نظر به آموزش کدنویسی شماره ۱

  1. صدیقه کیانی گفت:

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

  2. صدیقه کیانی گفت:

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

  3. محمود گفت:

    سلام دوست عزیز!
    خیلی کمکم کرد ممنون
    موفق باشی

  4. MHD Etlaat 1 گفت:

    Salam! sitet kheili khoobe.

  5. جواد گفت:

    خیلی سایت خوبی دارید

  6. ALI گفت:

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

  7. طراحی وب سایت گفت:

    ممنون . امیدوارم .مطالب زیباتون همچنان ادامه پیدا کنه:)

  8. امیر حسن گفت:

    سلام وبلاگ زیبایی دارید خیلی بدردم خورد

  9. Elena گفت:

    سایتتون خیلی خوبه.نسبت به سایت های دیگه هم روان تر توضیح داده شده.مرسی:*

  10. بهمن محمدلاوی گفت:

    ایول به مرامت داداش دست گلت درد نکنه الهی چشم حسود ازت دورشه به حق علی

  11. فروشگاه اینترنتی هنر ایرانی گفت:

    دست شما درد نکنه

  12. بهزاد گفت:

    ممنون
    خیلی آموزنده بود.

  13. مرتضی گفت:

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

  14. ارشیا گفت:

    عالی دمت گرم داداش

  15. شاهین گفت:

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

  16. یاس گفت:

    سلام مرسی خیلی کمکم کرد.
    اگه میشه چگونگی تغییر تصاویر جداکننده متن در قالب های میهن بلاگ بگیین خیلی عالی میشه.
    مر۳۰

  17. Goshboyt گفت:

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

  18. سی دی هنری دات کام گفت:

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

  19. پویا گفت:

    خیلی ممنون خیلی خوب بود میشه آموزش کدنویسی شماره ۳و۴و.. رو هم بزارید ؟؟؟؟؟؟؟؟؟؟؟؟؟
    mer30

  20. anita گفت:

    راستش رو بخواین خیلی پیشرفته توضیح داده بودین. ما مبتدی ها متوجه نمیشیم…

  21. مهدی یگانه گفت:

    سلام.بابت همه ی توضیحات ممنونم.موفق باشید

  22. مهدی یگانه گفت:

    سلام>خسته نباشید.ممنونم ازتوضیحات شما دوست عزیز.

  23. نوید گفت:

    سلام.از توضیحاتت ممنون حالا بد نبود ولی خیلی سخته فهمیدنش .

  24. میلاد گفت:

    سلام،خیلی خوب توضیح دادبن

  25. میلاد گفت:

    سلام،خیلی خوب بود استفاده کردم

  26. sabamarhamati گفت:

    یه سوال دارم! من نمیدونم کجا باید این کد ها رو وارد کنیم؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

  27. glk گفت:

    salam kheyli khusham omad yek mah bod dashtam ino migashtam ke az inja peyda kardam mer30 admin fagat ye soal age mishe yadam bedin chetori behesh link ezafe konim rosh kilik kardan bere be safe dige

  28. نیلوفر گفت:

    واقعا سایت مفیدیه. امیدوارم همیشه همینطوری بمونه و خراب و مسدود نشه.

  29. حامد گفت:

    سایت خوبی هست نه وبلاگ خوبی امید وارم پیروز و سر بلند باشین

» ارسال نظرات

تمام حقوق این سایت و مطالب منتشر شده در آن برای مرجع راهنمای وبلاگ نویسان محفوظ است.
پیش بینی فوتبال