کدها رو درست و خوانا بنویسید!

سلام خدمت همه دوستان عزیز
چند مدت پیش یه مقاله بسیار مفید رو با عنوان “+15 تکنیک برای نوشتن کد خوانا” رو ترجمه کردم که خوندن این کتاب به همه برنامه نویسان خصوصا برنامه نویسان وب شدیدا پیشنهاد میشه. خوندنش کمتر از ۱۰ دقیقه طول میکشه از دست ندید.

ادامه

آموزش HTML – اسکریپت

ما دو زبان اسکریپتی خیلی محبوب داریم که در HTML مورد استفاده قرار میگیرن، جاوا اسکریپت (Javascript) و وی بی اسکریپت (VBscript). این زبان ها به ما کمک میکنن تا صفحات HTML رو داینامیک یا پویا کنیم و همچنین تعامل بهتری با کاربر برقرار کنیم. اما باز جاوا اسکریپت محبوبتر از وی بی اسکریپت هستش و ما هم بیشترروی جاوا اسکریپت زوم میکنیم.

ادامه

آموزش HTML – فرم ها

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

ادامه

آموزش HTML – گروه بندی المنتها

ما تو HTML همیشه نیاز داریم که المنت ها رو گروه بندی کنیم تا روی اون گروه از المنتها کار خاصی انجام بدیم. این کار خاص میتونه اسایل بندی CSS مثل تغییر رنگ المنت ها یا تعیین مکان اونها در صفحه یا دستکاری اونها با جاوا اسکریپت باشه.

برای اینکار ما از دو تگ <div> (مخفف Division) و <span> استفاده میکنیم. همونطورکه تو درس قبلی گفتیم <div> یک المنت Block-level و <span> یک المنت Inline-level هست.  توجه کنید که منظور ما گروه بندی تو پشت صحنه است نه در ظاهر! برای اینکه گروه المنتها رو در ظاهر گروه بندی کنیم از المنت <fieldset> استفاده میکنیم.

 

گروه بندی با <span>

این المنت بصورت پیشفرض هیچ تغییری در صفحه ایجاد نمیکنه اما وقتی با استفاده از مشخصه(attribute) های class و id استفاده کنیم میتونیم با استفاده از CSS برای اونها استایلی تعیین کنیم.

مثالی از گروه بندی با <span>

<!DOCTYPE html>
<html>
<head>
<title>Softafzar.net | Grouping elements with span</title>
<style type="text/css">
span.benefit {
	color:green;
}
</style>
</head>
<body>
<p>Early to bed and early to rise makes a man 
  <span class="benefit">healthy</span>,
  <span class="benefit">wealthy</span> and 
  <span class="benefit">wise</span>.
</p>
</body>
</html>

خروجی:

Early to bed and early to rise makes a man healthy, wealthy and wise.

همونطور که میبینید ما در اینجا یکجور گروه بندی انجام دادیم و رنگ فواید رو با رنگ سبز مشخص کردیم توجه میکنید که ما نام کلاس همه <span> ها رو benefit گذاشتیم تا بتونیم با CSS همه اونها رو به رنگ سبز در بیاریم. در واقع در کد CSS گفتیم رنگ همه <span> هایی که کلاسی با نام benefit دارن رو سبز کن.

 

ادامه

آموزش HTML – المنتهای Block-level و Inline-level

برای اهدافی مثل استایل بندی، خیلی از المنتهای HTML به دو گروه Block-level elements و Inline-level elements تقسیم میشن. معمولا المنتهای Block-level المنتهای ساختاری هستند و میتونن شامل گروه بزرگی از المنتها بشن اما المنتهای Inline-level المنتهای بر پایه متن(Text-base) هستند.

ادامه

آموزش HTML – استایلینگ(CSS)

CSS یک زبان Style Sheet (به فارسی “زبان شیوه نامه”) است که با استفاده از این زبان میشه ظاهر یک صفحه وب رو تعریف کرد که باید به چه شکلی باشه. حالا CSS همه جا وجود داره! رنگ بندی صفحات وب و چیدمان اونها، رنگ و اندازه فونت ها و … همه با CSS انجام میشه.

ما الان نمیخوایم CSS درس بدیم و فرض میکنیم که شما تا حدی بلدید، اگر هم بلد نیستید نحوه استفاده از اون رو یاد میگیرید. در این درس فقط میخوایم نحوه استفاده از CSS رو در HTML رو آموزش بدیم.

ادامه

آموزش HTML – المنت head

المنت <head> یک مکان برای اعلان اسکریپتها،استایل ها،اطلاعات meta و .. است.

المنتهایی که میتونندر قسمت <head> قرار بگیرن:

<title>, <style>, <meta>, <link>, <script>, <noscript> , <base>

با همه این تگها در ادامه آشنا میشید اما اینجا چند تا مثال براتون میزنم.

ادامه

آموزش HTML – لینکها

امروزه لینکها شبکه جهانی وب رو به هم متصل کردن، شما وارد هر سایتی بشید تعداد زیادی لینک میبینید که شما رو به صفحه ای دیگه میبرن و همه به هم متصل هستن.

برای ایجاد لینک از تگ  (<anchor (<a  استفاده میکنیم و برای مشخص کردن آدرس مقصد باید اون رو در مشخصه  (href (Hypertext Reference بذاریم.

شما میتونید یک متن و یا تصویر رو با این روش به یک هایپرلینک (یا لینک) تبدیل کنید.

شکل کلی

<a href="url">Link text</a>

بجای Link text متنی که باید بصورت لینک دار نمایش داده بشه و بجای url آدرس مقصد رو وارد میکنیم.

ادامه