loading...
پله پله
MahdiHD بازدید : 129 چهارشنبه 24 تیر 1394 نظرات (0)

حرف p مخفف واژه paragraph به معنی "پاراگراف" است. در واقع هر محتوایی که داخل تگ های <p> و </p> قرار گیرد در قالب یک پاراگرف در صفحه مرورگر نمایش داده می شود. حال کدی که در آموزش قبل نوشتیم را به صورت زیر بازنویسی می کنیم (لازم به ذکر است در ادامه فقط بخش body را ویرایش کرده و مابقی کدهای دست نخورده باقی خواهند ماند):

?
1
2
3
4
   <body>
       <p>In the Name of the Most High</p>
       <p>Hello World!</p>
   </body>

همانطور که در کد فوق ملاحظه می شود، عبارت اول را داخل یک تگ پاراگراف قرار داده و عبارت Hello World! را هم داخل یک تگ دیگر پاراگراف قرار داده ایم. در این مرحله فایل خود را Save کرده و اما نیازی نیست تا مجدد فایل خود را در فایرفاکس باز کنیم بلکه وارد مرورگر شده و دکمه های Ctrl + R را به صورت هم زمان فشار می دهیم (لازم به ذکر است از آن جهت دکمه R برای این کار انتخاب شده است که حرف R مخفف کلمه Refresh است):

استفاده از تگ پاراگراف

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

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

MahdiHD بازدید : 220 چهارشنبه 24 تیر 1394 نظرات (0)

پس از مطالعه تئوری های مرتبط با زبان اچ تی ام ال در آموزش های قبل، در این آموزش می خواهیم اولین صفحه وب سایت خود را بسازیم. برای این منظور یک ویرایشگر متن مورد علاقه را انتخاب کرده و شروع به کدنویسی می کنیم (لازم به ذکر است که توصیه می شود به هیچ وجه از نرم افزارهایی مثل Dreamweaver و Microsoft Expression و ... استفاده نشود. در واقع از آنجا که قرار است با تکرار و تمرین کدهای اچ تی ام ال آن ها را ملکه ذهن خود کنیم پس یک نرم افزار ویرایشگر متن مثل Notepad یا Notepad++ یا Brackets از شرکت ادوبی را مورد استفاده قرار می دهیم).
پیش از شروع کدنویسی دانستن این نکته ضروری است که همان طور که ما با یکدیگر به زبان فارسی صحبت می کنیم، زبان اچ تی ام ال هم با مرورگر صحبت می کند اما طرز صحبت کردن اچ تی ام ال متفاوت از شیوه ای است که با یکدیگر صحبت می کنیم. در واقع یک مرورگر کدهای اچ تی ام ال را از بالا به پایین و از چپ به سایت می خواند. به عبارت دیگر کدهایی که بالاتر نوشته شوند نسبت به کدهایی که پایین تر نوشته شود زودتر نمایش داده می شوند. برای روش شدن مطلب فوق می توان تصویر زیر را مد نظر قرار داد:

نحوه-اجرای-تگ-های-اچ-تی-ام-ال

همانطور که در تصویر فوق می بینیم، کدها ابتدا از بالا توسط مرورگر تفسیر می شوند. اگر به بخش body توجه کنیم می بینیم که یک تگ <h1> و یک تگ <p> قرار دارد. حال از آنجا که تگ های بالاتر زودتر به نمایش در می آید پس می توان این انتظار را داشت که اول عبارت Heading سپس عبارت Paragraph در صفحه مرورگر نمایش داده شود. اکنون با دانستن این نکات می توانیم با دید بهتری اقدام به نوشتن اولین صفحه وب سایت خود نماییم.
پس از باز کردن نرم افزار Notepad یا Notepad++ شروع به نوشتن کدهای زیر می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
     
<!DOCTYPE html>
<html>
     
    <head>
        <title>Netshahr</title>
    </head>
     
    <body>In the Name of the Most High
            Hello World!
   </body>
     
</html>

همانطور که در کد فوق ملاحظه می شود، ابتدا دستور <!DOCTYPE html> را نوشته ایم تا به مروگر ها این پیغام را برسانیم که نسخه اچ تی ام ال استفاده شده در این صفحه وب سایت نسخه 5 است. عنوانی که برای این صفحه در نظر گرفته ایم Netshahr است. سپس در بخش body سایت ابتدا  عبارت In the Name of the Most High به معنی "به نام خدا" را نوشته سپس در خط بعد عبارت Hello World! را به معنی "سلام دنیا" نوشته ایم.
حال زمان آن فرا رسیده تا این فایل را Save کنیم. نکته ای که در مورد ذخیره سازی این فایل همواره می بایست مد نظر قرار دهیم این است که پسوند فایل مد نظر می بایست حتما html یا htm باشد (لازم به ذکر است که این دو پسوند هیچ فرقی با یکدیگر نمی کنند و بنا به سلیقه خود می توانید یکی را در همین ابتدای راه انتخاب کرده و همواره در ساخت صفحات وب خود آن را مورد استفاده قرار دهید).
برای این صفحه نام index.html را در نظر می گیریم. علت انتخاب نام index برای این صفحه این است که معمولاً نرم افزارهای  وب سروری که روی هاست شرکت میزبانی خدمات وب نصب هستند که این وظیفه دارند تا فایل های وب سایت ما را برای مرورگر کاربران اینترنتی ارسال کنند به صورت پیش فرض نام index را برای صفحه اصلی سایت مبنا قرار می دهند. به طور مثال زمانیکه شما آدرس www.netshahr.com را در مرورگر خود تایپ می کنید، نرم افزار وب سرور می گردد روی سرور تا فایلی با نام index را بیابد و به محض یافتن آن را برای مرورگر شما ارسال می کند. لازم به ذکر است گاهی اوقات به جای نام index از default هم استفاده می شود که این بستگی به شرکت خدمات میزبانی وب دارد (به طور کلی منظور از وب سرور، نرم افزاری است که روی سرور شرکت میزبانی خدمات وب نصب است که این وظیفه را دارا است تا مابین مرورگر کاربر و سرور هاست ارتباط برقرار سازد).
به عنوان یک قرارداد بین المللی، برنامه نویسان مبتدی اولین برنامه ای که در هر زبان برنامه نویسی می نویسند را با عبارت Hello World به معنی "سلام دنیا" شروع می کنند. تاریخچه این عبارت به سال 1972 بر می گردد که در آن سال آقای Brian Kernighan یک کتابچه آموزش زبان برنامه نویسی B تالیف کرد که در آن اولین برنامه ای که آموزش داده شد این بود که عبارت Hello World روی صفحه به نمایش در آید. بنابراین از آن تاریخ تاکنون برنامه نویسان به احترام این برنامه نویس، اولین برنامه خود را با این عبارت آغاز می کنند.
پس از بررسی نکاتی تکمیلی، حال قصد داریم تا اولین صفحه از وب سایت خود را در یک مرورگر مثل فایرفاکس به نمایش در آوریم. برای این منظور سه راه کار وجود دارد. راه کار اول اینکه به مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده رفته و روی نام فایل کلیک راست کرده و گزینه Open را انتخاب می کنیم:

نحوه-اجرای-یک-فایل-اچ-تی-ام-ال-در-فایرفاکس

سپس خواهیم دید که این صفحه از سایت مان در مرورگر پیش فرض باز خواهد شد.
راه کار دوم این است که مرورگر مد نظر خود را باز نموده سپس از منوی اصلی وارد منوی Open File شده و مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده ایم را وارد می کنیم (لازم به ذکر است که بسته به نوع مرورگر ممکن است این روش باز کردن فایل اچ تی ام ال متفاوت باشد. این آموزش در مورد مرورگر فایرفاکس است):

نحوه-باز-کردن-یک-فایل-از-داخل-فایرفاکس

لازم به ذکر است که برای باز کردن یک فایل داخل مرورگر می توان به جای استفاده از منوی مرورگر دکمه های Ctrl + O را به صورت هم زمان فشار داد. در واقع از آن جهت کلید O برای باز کردن یک فایل جدید انتخاب شده است که حرف O ابتدا کلمه Open به معنی باز کردن می باشد.
و در نهایت راه کار سوم این است که به صورت Drag and Drop فایل مد نظر خود را گرفته و روی نرم افزار فایرفاکس که از قبل آن را باز کرده ایم رها می سازیم.
با اتخاذ هر کدام از رویکردهای فوق، صفحه وب سایت ما به صورت زیر نمایش داده خواهد شد:

اولین صفحه اچ تی ام ال خود

می بینیم که با موفقیت توانستیم اولین صفحه از وب سایت خود را در یک مرورگر به نمایش در آوریم. اما این صفحه دارای دو مشکل است. مشکل اول اینکه این صفحه اصلا زیبا نیست که در آموزش های آتی به این نکته هم خواهیم پرداخت و مشکل دوم اینکه اگر به کد خود توجه کنیم ما عبارت In the Name of the Most High را در یک خط نوشتیم و عبارت hello World را در خط دیگری اما این در حالی است که مرورگر هر دو خط را پشت سر هم قرار داده است.
علت این مسئله این است که مرورگر هر آنچه را که داخل تگ های <body> و </body> باشد را پشت سر هم نمایش داده و هیچ توجهی به فواصلی که مابین کدها قرار دارد نخواهد کرد.
برای رفع این مشکل می بایست هر جمله خود را داخل یک پاراگراف قرار دهیم که در آموزش شانزدهم به تفصیل این موضوع را مورد بررسی قرار خواهیم داد.

MahdiHD بازدید : 148 چهارشنبه 24 تیر 1394 نظرات (0)

تگ های اچ تی ام ال را می توان با حروف بزرگ، کوچک و یا ترکیبی از هر دو نوشت و اکثر مرورگرها می توانند آن ها را تفسیر کنند و بدون هیچ مشکلی نمایش دهند اما این در حالی است که نوشتن کلیه تگ ها با حروف کوچک روشی است که به صورت استاندارد در آمده است و توصیه می شود که کلیه تگ ها با حروف کوچک نوشته شوند.
به طور کلی تگ های اچ تی ام ال به دو دسته کلی تقسیم بندی می شوند. دسته اول تگ هایی هستند که به هیچ وجه به تنهایی مورد استفاده قرار نمی گیرند. به عبارت دیگر زمانیکه تگ آغازین <body> را نوشتیم می بایست حتماً تگ پایانی </body> را نیز بنویسیم. در واقع دلیل استفاده از تگ پایانی این است که پس از تگ آغازین به هر حال محتوایی می بایست قرار گیرند مثل یک پاراگراف. حال اگر تگ پایانی را در کد خود ننویسیم، مرورگر متوجه نخواهد شد که کجا تگ آغازین به اتمام رسیده است.
گروه دوم تگ هایی هستند که نیاز به تگ پایانی ندارند. به عبارت دیگر این گروه از تگ ها خودشان هم تگ آغازین هستند و هم تگ پایانی. علت این مسئله هم آن است که این تگ ها دارای محتوایی نمی باشند تا نیاز باشد به آن خاطر به مرورگر بفهمانیم که تگ که کجا به اتمام می رسد. مثلا تگی در زبان اچ تی ام ال داریم تحت عنوان <br/>. کاری که این تگ انجام می دهد این است که هر کجا آن را استفاده کنیم، از آن نقطه به بعد، به خط بعد انتقال داده خواهد شد (کار Enter در نرم افزار آفیس ورد را انجام می دهد). وظیفه این تگ انتقال محتوا به خط بعد است و خود این تگ حاوی هیچ محتوایی نیست، از اینرو این تگ هم تگ آغازین است و هم تگ پایانی (در ادامه آموزش با عملکرد این تگ بیشتر آشنا خواهیم شد).
نکته دیگری که در مورد کدنویسی با زبان اچ تی ام ال وجود دارد این است که زبان اچ تی ام ال به فاصله به هیچ وجه حساس نیست. برای روش شدن این مسئله کد آموزش سیزدهم را به صورت زیر بازنویسی می کنیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
     
<title>Title of Your Page</title            >
            </head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
               <p>This is another paragraph.</p>
                            </body>
</html            >

همانطور که در کد فوق ملاحظه می شود، فاصله تگ های اچ تی ام ال نسبت به یکدیگر تغییر یافته است اما این در حالی است که مادامیکه علامت های < و > و / حذف نشوند صفحه ما به مشکلی مواجه نخواهد شد. به عبارت دیگر تگ های <body> و <body    > هیچ فرقی با یکدیگر نمی کنند. اما به خاطر داشته باشیم که تگ های <    body> و <bo   dy> تگ های درستی نبوده و صفحه ما با مشکل مواجه خواهد شد.
به عنوان یک قانون کلی می بایست همواره کدهای خود را منظم نوشته و فواصل یکسانی را در کدهای خود رعایت کنیم.

MahdiHD بازدید : 144 چهارشنبه 24 تیر 1394 نظرات (0)

هر زبان برنامه نویسی از تعدادی Keyword یا "کلید واژه" تشکیل شده است که این کلید واژگان توسط طراحان آن زبان برنامه نویسی مشخص شده اند و هر کدام کار خاصی انجام می دهند و غیر قابل تغییر هستند. در زبان اچ تی ام ال این کلید واژگان تحت عنوان Tag یا تگ شناخته می شوند. هر تگ اچ تی ام ال داخل علامت < > قرار می گیرد و این در حالی است که اکثر تگ های اچ تی ام ال به صورت جفت استفاده می شوند. برای روشن شدن مطلب کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
    <body>   
    </body>
</html>

در این کد بعد از تگ مربوط به نسخه اچ تی ام ال که در قسمت قبل توضیح داده شد، می بینیم که تگ <html> نوشته شده است. در واقع این تگ یکی از کلید واژه های زبان اچ تی ام ال است. نکته ای که در مورد این تگ همواره می بایست مد نظر قرار دهیم این است که این تگ هیچ وقت به تنهایی مورد استفاده قرار نمی گیرد. تگ <html> تگ آغازین نامیده می شود و هر تگ آغازین نیازمند یک تگ پایانی می باشد. برای نوشتن تگ های پایانی فقط نیاز است تا یک علامت / قبل از کلید واژه مد نظر داخل علامت های < > قرار دهیم. بنابراین تگ پایانی <html> برابر است با </html> که در کد فوق هم مشاهده می شود.
بعد از تگ آغازین <html> تگی داریم تحت عنوان <head> که این وظیفه را دارا است تا اطلاعاتی در مورد این صفحه از اچ تی ام ال را در خود ذخیره سازد. به عبارت دیگر کلیه چیزهایی که مابین تگ آغازین <head> و تگ پایانی </head> قرار می گیرند از دید کاربر پنهان خواهد بود (لازم به ذکر است که اطلاعاتی که داخل این تگ قرار می گیرند اختیاری بوده و عدم کامل کردن این تگ مشکلی در صفحه وب سایت ما ایجاد نخواهد کرد اما این در حالی است که طراحی حرفه صفحات وب نیازمند برخورداری از این تگ می باشد. علاوه بر این گاهی اوقات نیازمند تگ هایی مثل meta هستیم که حتما بایستی در صفحه خود از آن ها استفاده کنیم که در غیر این صورت به طور مثال صفحه ما از نمایش کاراکترهای فارسی ناتوان خواهد بود).
همانطور که در کد فوق می بینیم داخل تگ های <head> و </head> دو تگ دیگر تحت عنوان <title> و </title> قرار دارند. معنوی لغوی واژه title عبارت است از "لقب، عنوان" و در زبان اچ تی ا ال هم چنین معنایی دارد. زمانی که در دنیای اینترنت گشت می زنیم، می بینیم که هر صفحه دارای یک عنوان است که در Tab مرتبط با آن صفحه در مرورگر به نمایش در می آید:

نمایش عنوان صفحه اصلی سایت آمازون

همانطور که در تصویر فوق می بینیم عنوان Amazon.com: Online Shopping داخل<title> و </title> صفحه اصلی سایت آمازون قرار گرفته است.
تگ <title> از اهمیت بسزایی برخوردار است. به عبارت دیگر عنوان صفحات اچ تی ام ال توسط موتور های جستجو مورد بررسی قرار گرفته و در نتایج جستجوی کاربران اینترنتی به نمایش در می آیند. بنابراین توصیه می شود که هیچ صفحه وب سایت خود را بدون عنوان روی اینترنت قرار ندهید چرا که این کار باعث می شود وب سایت شما از یک سو غیر حرفه به نظر برسد و از سوی دیگر موتورهای جستجویی مثل گوگل و بینگ نخواهند توانست آن صفحه را به راحتی شناسایی کنند بنابراین این صفحه رتبه ای از دید موتورهای جستجو اخذ نخواهد کرد.
چنانچه کد فوق را پس از ذخیره کردن در یک مرورگر به نمایش درآوریم، می بینیم که عنوان Title of your page در بالای مرورگر به نمایش در می آید:

آشنایی با تگ های اصلی یک سند اچ تی ام ال

پس از تگ پایانی </head> تگ آغازین <body> را می بینیم که با تگ پایانی </body> به اتمام می رسد. به طور کلی یک سند اچ تی ام ال را می توان به دو بخش کلی تقسیم بندی کرد: بخش اول که داخل تگ های <head> و </head> قرار می گیرد و بخش دوم که مابین تگ های <body> و </body> قرار می گیرد. هر آنچه که در بخش head قرار گیرد در مرورگر به نمایش در نخواهد آمد اما هر آنچه که در بخش body قرار گیرد در صفحه مرورگر به نمایش در خواهد آمد. به طور مثال هم اکنون که مشغول مطالعه این آموزش هستید، کلیه عکس ها، پاراگراف ها و ... داخل تگ های <body> و </body> این صفحه قرار گرفته اند.

MahdiHD بازدید : 124 چهارشنبه 24 تیر 1394 نظرات (0)

خیلی اوقات یک Element با یک Tag مترادف قلمداد می شود اما این در حالی است که این دو اصطلاح با یکدیگر فرق می کنند. برای روشن شدن این مطلب کد زیر را مد نظر قرار می دهیم:

?
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
     
    <body>
        <h1>This is a heading</h1>
        <p>This is a paragraph.</p>
        <p>This is another paragraph.</p>
    </body>
</html>

همانطور که در کد فوق می بینیم چند خط کد جدید به کدهای قسمت 12 اضافه کرده ایم که <p>This is a paragraph.</p> یکی از آن ها است. اگر فقط <p> را مد نظر قرار دهیم این بخش از کد یک تگ است اما اگر تگ آغازین به علاوه تگ پایانی و هر آنچه مابین آن دو را مد ظنر قرار دهیم یک Element پیش روی ما قرار دارد. برای روشن تر شدن این مطلب تصویر زیر را مد نظر قرار می دهیم:

المنت ها در زبان اچ تی ام ال

همانطور که در تصویر فوق می بینیم <body> یک تگ است اما <p>This is a paragraph.</p> یک Element است. به عبارت دیگر هر Element حاوای یک تگ آغازین، محتوی یا متن و یک تگ پایانی است.

MahdiHD بازدید : 121 چهارشنبه 24 تیر 1394 نظرات (0)

لوگوی-اچ-تی-ام-ال-5

به طور کلی ساختار یک صفحه اچ تی ام ال به صورت زیر است:

?
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
    <body>
    </body>
</html>

در اولین خط از کد دستوری تحت عنوان می بینیم (عبارت DOCTYPE مخفف واژگان Document Type به معنی "نوع سند" است). اگر از این دستور در صفحات خود استفاده نکنیم باز هم صفحه در مرورگر نمایش داده می شود اما این در حالی است که این دستور به مرورگر کمک می کند تا صفحه وب را به طور کامل و بدون هیچ مشکلی نمایش داده و نوع و نسخه مورد استفاده اچ تی ام ال را نیز برای مرورگر مشخص می کند. به طور مثال همانطور که در کد فوق ملاحظه می شود اگر بخواهیم از آخرین نسخه اچ تی ام ال که 5 است استفاده کنیم می بایست این دستور را به صورت بنویسیم. از این پس کلیه مرورگرها متوجه خواهند شد که با یک صفحه ای از وب رو به رو هستند که با زبان اچ تی ام ال 5 نوشته شده است. در اینجا نیاز است تا با مفهوم Parse آشنا شویم. در واقع در برنامه نویسی زمانیکه برنامه، اپلیکیشن و یا حتی مرورگر که این نوع برنامه است چیزی را تجزیه و تحلیل می کند، به این فرایند Parse شدن می گویند (لازم به ذکر است که معنی لغوی این واژه نیز "تجزیه شدن" است). لازم به ذکر است که دستور DOCTYPE را هم می توان با حروف بزرگ و هم با حروف کوچک به صورت doctype نوشت (توجه داشته باشیم که علامت ! را پیش از دستور DOCTYPE به هیچ وجه فراموش نکنیم). حال زمانیکه مرورگری مثل فایرفاکس با صفحه ای از جنس اچ تی ام ال رو به رو شود که حاوی دستور است، متوجه می شود که با یک سندی رو به رو است که با زمان اچ تی ام ال 5 نوشته شده است بنابراین از این پس کلیه تگ ها را بر اساس نسخه 5 اچ تی ام ال اصطلاحاً Parse می کند و سپس به کاربر نمایش می دهد. اگر بخواهیم کد فوق را برای نسخه 4.01 بازنویسی کنیم کدی به شکل زیر خواهیم داشت:

?
1
2
3
4
5
6
7
8
9
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Title of Your Page</title>
    </head>       
    <body>
    </body>
</html>

و اگر بخواهیم مثلاً کد فوق را برای xhtml 1.0 بازنویسی کنیم کد فوق به صورت زیر در خواهد آمد:

?
1
2
3
4
5
6
7
8
9
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Title of Your Page</title>
    </head>
<body>
</body>
</html>

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

از آن جا که آخرین نسخه زبان اچ تی ام ال نسخه 5 است بنابراین در این سری از آموزش ها همواره از دستور استفاده خواهیم کرد زیرا نه تنها نوشتن آن ساده تر است بلکه با استفاده از آن به کلیه امکانات اضافه شدن در نسخه 5 زبان اچ تی ام ال دسترسی خواهیم داشت.

MahdiHD بازدید : 147 چهارشنبه 24 تیر 1394 نظرات (0)

چرا از محیط های یکپارچه برنامه نویسی استفاده نکنیم

به طور کلی از نقطه نظر سهولت در استفاده، سرعت در کدنویسی، خطایابی و ... IDE ها یا همان محیط های برنامه نویسی یکپارچه آنقدر امکانات فراوانی در اختیار برنامه نویسان قرار می دهند که به سختی می توان نقطه ضعفی برای آن ها متصور شد. اما اگر از نقطه نظر اصول برنامه نویسی بخواهیم به این قضیه نگاه کنیم، کلیه IDE ها دارای یک نقطه ضعف بزرگ هستند و آن هم این که برنامه نویسان مبتدی را «تنبل» می کنند.
به عبارت دیگر برنامه نویسان مبتدی شاید در ابتدای راه برنامه نویسی استفاده از IDE هایی همچون دریم ویور را خیلی مفید ببینند، اما این در حالی است که در دراز مدت این گروه از برنامه نویسان آنقدر به نرم افزار مربوطه عادت می کنند که اگر بخواهند روزی بخشی ازکدهای خود را با نرم افزاری همچون Notepad ویرایش کنند از عهده این کار بر نخواهند آمد چرا که بیشتر به یک محیط بصری عادت کرده اند و از ماهیت و ساختار کدها خیلی با خبر نیستند.
طبق گزارش هایی که از برنامه نویسان حرفه ای در سرتاسر دنیا به دست آمده است، مشخص شده است که اکثر ایشان نه تنها در ابتدای راه فراگیری یک زبان برنامه نویسی از نرم افزارهای ویرایش متنی همچون Notepad استفاده کرده اند، بلکه پس از تسلط به زبان مد نظرشان باز هم استفاده از نرم افزارهای ویرایش متن ساده را کاربردی تر دیده اند.
از سوی دیگر با صحبت با شرکت های برنامه نویسی مطرح ایرانی، متوجه شدیم که اکثر ایشان حتی اجازه نصب یک IDE پیشرفته را هم به برنامه نویسان خود در شرکت نمی دهند.
بنابراین در این سری از آموزش ها مبنا را بر یک ویرایشگر متن ساده همچون Notepad++ یا Brackets قرار می دهیم به طوری که مجبور شویم کلیه کدهای مد نظر را به صورتی دستی وارد کنیم.

MahdiHD بازدید : 153 چهارشنبه 24 تیر 1394 نظرات (0)

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

نحوه-اجرای-نوت-پد

همانطور که در تصویر فوق مشخص است، پس از ورود به بخش Start ویندوز وارد All Programs شده سپس گزینه Accessories را انتخاب می کنیم. زیر شاخه این منوی گزینه ای وجود دارد تحت عنوان Notepad که با یک بار کلیک کردن روی آن این برنامه اجرا خواهد شد:

نرم-افزار-نوت-پد

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

MahdiHD بازدید : 108 چهارشنبه 24 تیر 1394 نظرات (0)

معرفی زبان پی اچ پی

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

MahdiHD بازدید : 166 چهارشنبه 24 تیر 1394 نظرات (0)

علاوه بر نرم افزارهای ساده ای که برای کدنویسی صفحات وب می توان مورد استفاده قرار داد، شرکت های مطرح تولید نرم افزار اقدام به طراحی نرم افزارهایی نموده اند که فرایند کدنویسی را بسیار ساده نموده بطوریکه برنامه نویس به هیچ وجه نیاز حفظ کردن کلیه دستوارت ندارد. گاهی اوقات شرایط از این هم به مراتب راحت تر شده بطوری که برنامه نویس به جای آن که کدهای مرتبط با مثلا یک دکمه را وارد کند، به سادگی می تواند به صورت کاملاً «بصری» روی یک دکمه کلید کرده و آن دکمه ایجاد شود.
به طور کلی این دست از نرم افزارها تحت عنوان IDE شناخته می شوند. این اصطلاح مخفف واژگان Integrated Development Environment به معنی "محیط توسعه یکپارچه" است.
از جمله این IDE ها می توان به نرم افزار شرکت معروف ادوبی تحت عنوان Adobe Dreamweaver اشاره کرد که آخرین نسخه آن (در زمان نوشتن این آموزش که سال 1392 است) نسخه CC است و این در حالی است که این نرم افزار غیر رایگان است. در حقیقت با استفاده از این نرم افزار می توان به سرعت یک وب سایت را طرحی نموده و روی شبکه اینترنت قرار داد:

محیط-نرم-افزار-دریم-ویور

این نرم افزار امکان نمایش بصری صفحات اچ تی ام ال را نیز علاوه بر نمایش کدها برای برنامه نویس فراهم آورده است بطوری که بدون نیاز به مرورگر می توان خروجی کدهای اچ تی ام ال را مشاهده کرد (لازم به ذکر است که نتایجی صفحات وب که داخل این نرم افزار مشاهده می کنیم خیلی دقیق نیستند و برای دیدن نتیجه اصلی می بایست از یک مرورگر استفاده کرد).
شرکت مایکروسافت یک IDE قدرتمند تحت عنوان Microsoft Expression Web به دنیا معرفی کرده است که علاوه بر زبان های .NET از زبان های اچ تی ام ال، سی اس اس و پی اچ پی هم پشتیبانی می کند:

محیط-نرم-افزار-مایکروسافت-اکسپرشن

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

محیط-نرم-افزار-برکت-شرکت-ادوبی

علاوه بر این نرم افزار، می توان به نسخه پیشرفته نرم افزار Notepad تحت عنوان Notepad++ اشاره کرد که به صورت رایگان قابل استفاده است:

محیط-نرم-افزار-نوت-پد-پلاس-پلاس

همانطور که می بینیم رابط گرافیکی این نرم افراز بسیار شبیه به نرم افزار Notepad است با این تفاوت که امکانات بیشتری در اختیار برنامه نویس قرار می گیرد (ممکن است که این سوال برای برنامه نویسان مبتدی پیش آید که آیا این نرم افزار نسخه Notepad+ هم دارد یا خیر. در حقیقت در برنامه نویسی زمانیکه بخواهیم یک واحد بیشتر را نمایش دهیم از دو علامت به علاوه پشت سر هم استفاده می کنیم. مثلا زمانیکه زبان برنامه نویسی C تکمیل شد و امکانات بیشتری به آن اضافه شد زبان C++ آمد. این بدان معنی است که زبان C++ نسخه بعدی زبان C است. بنابراین نرم افزار Notepad++ نسخه پیشرفته نرم افزار Notepad است).
از برخی ویژگی های نرم افزار Notepad++ می توان به موارد زیر اشاره کرد:
•    رایگان بودن
•    پشتیبانی از اکثر زبان های برنامه نویسی
•    سهولت در استفاده از آن
•    Code Hinting
•    Code Highlighting
به طور کلی منظور از Code Hinting این است که نرم افزار در حین کدنویسی به برنامه نویس کدهای مرتبط با کدی که می نویسد را نشان می دهد.
منظور از Code Highlighting این است که نرم افزار بخش های مختلف کد را به رنگ های مختلفی نشان می دهد تا برنامه نویس بتواند به سادگی کدهایی را که نوشته را تشخیص دهد.

چرا نمی توان از نرم افزای همچون Word استفاده کرد؟
در کدنویسی ما صرفاً نیاز به متن ساده یا اصطلاحاً Plain Text داریم. در اسنادی که با نرم افزاری همچون Word شرکت مایکروسافت نوشته می شوند اطلاعاتی اضافی همچون Bold, Italic و ... به کدهایی که می نویسیم اضافه می شوند که کاملاً غیر ضروری هستند. بنابراین به هیچ وجه استفاده از این نرم افزار برای کدنویسی استفاده نخواهیم کرد.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

معرفی جاوا اسکریپت

پس از آن که توانستیم با موفقیت زبان اچ تی ام ال و سی اس اس را فرا بگیریم، در واقع توانسته ایم حداقل های طراحی یک سایت استاتیک را فرا بگیریم. در این مرحله اگر بخواهیم عناصر قرار گرفته روی صفحات سایت خود را متحرک ساخته و به نوعی از انیمیشن در صفحات سایت خود استفاده کنیم نیاز به زبانی تحت عنوان JavaScript داریم (به خاطر داشته باشیم که زبان جاوا اسکریپت با زبان جاوا فرق می کند).
در واقع زبان جاوا اسکریپت یک زبان Scripting و یک زبان برنامه نویسی محسوب نمی شود. به طور کلی منظور از زبان های Scripting این است که این زبان ها در پاسخ به یک رویداد یا درخواست کاری را انجام می دهند اما این در حالی است که یک زبان برنامه نویسی این امکان را به ما می دهد تا بتوانیم بدون وجود یک درخواست نیز کاری را انجام دهیم. نمونه دیگری از زبان های Scripting زبان پی اچ پی است که در ادامه با آن بیشتر آشنا می شویم.
به طور مثال اگر بخواهیم وب سایتی که در آن از زبان جاوا اسکریپت استفاده شده است را نام ببریم می توان به سایت http://www.howarths.nl اشاره کرد که در آن منوها با استفاده از زبان جاوا اسکریپت به گونه ای زیبا طراحی شده اند.
لازم به ذکر است که تسلط به زبان جاوا اسکریپت نیازمند دوره ای اختصاصی است و مسلماً چنانچه بخواهیم در طول این دوره به آن اشاره کنیم فقط موجبات سر در گمی برنامه نویسان مبتدی را فراهم خواهیم آورد بنابراین در طول این دوره به زبان جاوا اسکریپت نخواهیم پرداخت.

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

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

اچ تی ام ال در قالب تصویر

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

سی اس اس در قالب تصویر

در مورد زبان اچ تی ام ال هم قضیه به همین صورت است. در واقع با استفاده از اچ تی ام ال فقط می توانیم متون را روی یک صفحه مرورگر وب به نمایش در آوریم بدون آنکه رنگ و اندازه و شکل خاصی برای متون، جداول، فرم ها، منوها و ... بتوانیم در نظر بگیریم. چیزی که در اینجا به کمک ما می آید CSS است که مخفف واژگان Cascading Style Sheet است. الگوهای آبشاری یا همان سی اس اس ها در کنار زبان اچ تی ام ال این امکان را به برنامه نویس یا طراح وب می دهند تا بتواند چیدمان، رنگ، اندازه، نوع فونت و بسیاری از امکانات دیگر را در مورد عناصر اچ تی ام ال اعمال کند و بالتبع صفحات به مراتب زیباتری نسبت به صفحاتی که صرفاً با زبان اچ تی ام ال طراحی می شوند را ایجاد کند. برای آنکه به اهمیت سی اس اس در طراحی وب بیشتر پی ببریم در ادامه یک صفحه اچ تی ام ال ساده را خواهیم دید که به هیچ وجه سی اس اس در آن استفاده نشده است:

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

اچ تی ام ال به همراه سی اس اسمی بینیم که فقط با استفاده از 5 دستور ساده سی اس اس صفحه وب ما چقدر زیباتر به نظر می رسد.
لازم به ذکر است که در این دوره آموزشی تکنیک های کاربردی سی اس اس نیز به منظور بهینه کردن ظاهر صفحات وب نیز مورد بررسی دقیق قرار خواهند گرفت.

MahdiHD بازدید : 221 چهارشنبه 24 تیر 1394 نظرات (0)

تیم برنرز لی

 آقای تیم برنرز لی در سال 1989 شبکه جهانی وب را طرح ریزی کرد. در واقع هدف اصلی وی فراهم آوردن ساز و کاری بود که از آن طریق محقیق بتوانند نتایج تحقیقات خود را با یکدیگر به اشتراک بگذارند. سپسزبان نشانه گذاری فرامتنی یا HyperText Markup Language که به صورت مختصر HTML خوانده می شود را طرح ریزی نمود و در نهایت در سال 1991 این زبان به طور رسمی به دنیا معرفی شد و این زبان به جایی رسید که دنیای اینترنت بدون آن بی معنا است.

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

عبارت Hyper در مقابل عبارت Linear قرار دارد. منظور از Linear ساختاری "خطی" است. به عبارت دیگر فرض کنیم یک زبان برنامه نویسی است که ساختاری خطی دارد و در آن کارها یکی پس از دیگری انجام می شوند. فرض کنیم دو دستور داریم: دستور الف و دستور ب. حال مادامیکه دستور الف انجام نشده باشد قادر نخواهیم بود دستور ب را اجرا کنیم. اما قضیه در مورد زبان اچ تی ام ال که یک زبان Hyper است فرق می کند به این شکل که در هر کجای وب و در هر زمانی که باشیم می توانیم به بخش دیگری رفته و به هیچ وجه نیاز نیست تا دستورات یکی پس از دیگری انجام شوند. به طور مثال اصلاً نیازی نیست تا اول به سایت گوگل رفته سپس وارد سایت یاهو شویم (لازم به ذکر است که معنی لغوی Hyper عبارت است از ماوراء، فوق، بالا و ...).

کلمه Text که گویا است و به معنی "متن" است. به طور کلی Hypertext به منزله متنی است که با کلیک روی آن می توان به صفحه دیگری رفت.

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

همانطور که پیش از این توضیح داده شد زبان اچ تی ام ال یک زبان Markup است. به عبارت دیگر برخلاف زبان های Scripting یا Programming که برای انجام کارهای مختلف از دستورات خاصی استفاده می کنند، زبان اچ تی ام ال از تگ ها برای انجام کارهای خود استفاده می کنند (منظور از زبان Scripting زبانی است که اپلیکیشن های نوشته شده با آن فقط در صورت مشاهده یک درخواست کاری را انجام می دهد اما یک زبان Programming زبانی است که برنامه های نوشته شده با آن بدون نیاز به دریافت درخواست از طرف کاربر هم می توانند دستوری را اجرا کنند).

پس از معرفی اولین نسخه این زبان، در هر نسخه جدید قابلیت های فراوانی به این زبان اضافه شد بطوریکه سیر پیشرفت این زبان در جدول زیر نشان داده شده است:

جدول نسخه های مختلف زبان اچ تی ام ال

 همانطور که در جدول فوق مشاهده می شود نسخه ای تحت عنوان XHTML 1.0 و XHTML5 در لیست دیده می شوند. سازمانی به آدرس http://www.w3c.com/ متولی ارتقاء و انتشار زبان اچ تی ام ال است تقریباً در سال 2000 نسخه جدیدی از زبان اچ تی ام ال را تحت عنوان اکس اچ تی ام ال را را منتشر کرد ( لازم به ذکر است که w3c مخفف World Wide Web Consortium به معنی کنسرسیوم شبکه جهانی وب می باشد). به طور کلی منظور از اکس اچ تی ام ال ترکیبی از زبان اچ تی ام ال با زبان اکس ام ال است. در واقع پس از ترکیب دو زبان با یکدیگر زبان اچ تی ام ال توسعه پذیر تر شد و به طور کلی دست برنامه نویسان به مراتب باز تر شد. در نسخه اول این زبان کلیه تگ ها شبیه به تگ های نسخه اچ تی ام ال 4 بود با این تفاوت که یکسری تگ های تکمیلی به آن اضافه شده و یکسری قوانینی هم به آن اضافه شده است که می شود گفت قوانین سخت گیرانه ای بودند.

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

MahdiHD بازدید : 118 چهارشنبه 24 تیر 1394 نظرات (0)

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

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

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

1. تایپ ده انگشتی لاتین: در برنامه نویسی بیش از آنکه با موس سر و کار داشته باشیم، به استفاده از صفحه کلید سیستم خود خواهیم پرداخت و همانگونه که از نام آن پیدا است با کلیدهای صفحه کلید سر و کار داریم. به عبارت دیگر بایستی کدهای خود را «تایپ» کنیم. اگر بخواهیم به صورت دو انگشتی و به عبارت دیگر غیر حرفه ای کدهای خود را وارد نماییم، فرایند برنامه نویسی برای ما کار دشواری خواهد بود و به هیچ وجه از کاری که انجام می دهیم لذت نخواهیم برد و شاید هم انگیزه خود را تا حدی از دست بدهیم و دوره طراحی سایت را در نیمه راه رها کنیم. بنابراین توصیه می شود از ابتدای راه، تایپ ده انگشتی را یا با استفاده از نرم افزارهای موجود در بازار و یا به صورت تمرین آزمون و خطا فرا بگیریم.

2. فراگیری زبان انگلیسی: در واقع از آنجا که کلیه اسناد زبان های برنامه نویسی دنیا از جمله زبان اچ تی ام ال و همچنین واژگان مورد استفاده در زبان های برنامه نویسی به زبان انگلیسی است، توصیه می شود با این زبان بین المللی نه در حد خیلی زیاد بلکه در حدی که بتوانیم متون انگلیسی تخصصی را بخوانیم و متوجه شویم و همچنین به زبان انگلیسی مکاتبه نماییم کفایت می کند. در اینترنت Forum های زیادی هستند که به سادگی می توانیم سوالات خود را در آن ها مطرح کرده و پاسخ مناسب را دریافت کنیم که از مهم ترین آنها می توان به سایت www.stackoverflow.com اشاره کرد. بنابراین برخورداری از دانشی نسبی در زمینه زبان انگلیسی به طرز قابل توجهی می تواند فرایند یادگیری یک زبان برنامه نویسی را تسهیل نماید. از سوی دیگر هر آموزشی مباحث خاصی را پوشش می دهد و بالتبع فراگیری جنبه های مختلف یک زبان برنامه نویسی نیازمند استفاده از کتب و مقالات مرجع است که غالباً به زبان انگلیسی هستند. بنابراین با فراگیری زبان انگلیسی خواهیم توانست دانش برنامه نویسی خود را همواره به روز نگه داشته و مهارت های خود را گسترش دهیم.

MahdiHD بازدید : 125 چهارشنبه 24 تیر 1394 نظرات (0)

دوره آموزش اچ تی ام ال و سی اس اساینترنت علاوه بر خدمات گسترده ای که در اختیار کاربرانش در سرتاسر دنیا قرار داده است، دید کاربران را نیز به مطالعه تغییر داده است. برای روش شدن این مطلب مثالی می زنیم. زمانیکه یک کتاب مثلاً 87 صفحه ای را می خواهیم مطالعه کنیم، این 87 صفحه خیلی زیاد به نظر ما نخواهد آمد اما اگر یک کتاب تحت وب باشد که به همین میزان صفحه داشته باشد احتمال قریب به یقین حوصله خواندن آن را نداشته باشیم.

اگر بخواهیم به دلایل چنین اتفاقی در اینترنت اشاره کنیم، موارد زیادی را می توان برشمرد که به طور حتم یکی از آنها استفاده از خود کامپیوتر است. در حقیقت زمانیکه می خواهیم یک کتاب بخوانیم به سادگی کتاب را باز کرده و شروع به خواندن می کنیم اما این در حالی است که اگر بخواهیم همین کتاب را تحت وب بخواهیم چند چیز نیاز است: اول آنکه کامپیوتر را روشن کنیم، وارد اینترنت شویم، آدرس وب سایت مد نظر را وارد کنیم و در نهایت روی هر فصلی که بخواهیم کلیک کنیم. علاوه بر این اگر از لپ تاپ، موبایل و یا تبلت برای اتصال به اینترنت استفاده نکنیم، نیاز به توضیح ندارد که برای استفاده از کامپیوتر های معمولی در بیشتر مواقع می بایست پشت میز بنشینیم (مگر آنکه کسی کامپیوتر خود را روی زمین قرار دهد!).

همین پشت میز نشستن خود موجب تحلیل رفتن انرژی کاربر می شود بنابراین کاربر در استفاده از کامپیوتر نسبت به خواندن یک کتاب به مراتب بیشتر خسته می شود. اگر بخواهیم دلایل زودتر خسته شدن در استفاده از کامپیوتر را نسبت به کتاب خواندن برشمریم مسلماً به موارد بیشتری نیز خواهیم رسید.

به همین دلیل رویکرد موفقی که در ارتباط با آموزش های اینترنتی می توان اتخاذ کرد این است که آموزش ها کوتاه و کاربردی باشند. منظورمان از کوتاه این است که برای خواندن هر آموزش بیش از 10 دقیقه زمان نیاز نخواهیم داشت و علاوه بر این منظورمان از کاربردی این است که در هر قسمت یک نکته آموزشی مورد بررسی قرار خواهد گرفت که در ادامه نکات آموزشی قبل بوده و در صورتی که نکات آموزشی قبل را به خوبی مطالعه کرده باشیم هیچ نیازی به مرور مطالب دیگر نخواهیم داشت.

بنابراین با اتخاذ چنین رویکردی این انتظار را می توان داشت که کاربر برای مطالعه هر قسمت از آموزش های طراحی سایت فقط نیاز است تا 10 دقیقه پشت میز کامپیوتر خود نشسته و یک نکته جدید را بیاموزد. علاوه بر این شاید شنیده باشید که خیلی ها می گویند زبان فرار است. خب منظور ایشان زبان برنامه نویسی نیست بلکه زبانی است که با آن ارتباط برقرار می سازیم. به عقیده بنده زبان فرار نیست بلکه "زبانی که استفاده نشود" فرار است. فرض کنیم می خواهیم برای ادامه زندگی به کشور آلمان برویم. برای این منظور در کلاس های زبان آلمانی شرکت کرده و این زبان را تا حد متوسطه فرا می گیریم. حال تا ویزای خود را دریافت کنیم تقریباً 18 ماه زمان صرف خواهد شد و ما هم به این امید که زبان آلمانی را تا حد متوسطه بلد هستیم دیگر کلاس های خود را ادامه نمی دهیم. پس از گرفتن ویزای آلمان خود پس از یک سال و نیم، زمانیکه در فرودگاه فرانکفورت از هواپیما پیاده می شویم به خود می آییم که خیلی از چیزها را فراموش کرده ایم. علت این مسئله هم کاملاً واضح است: "تمرین کردن را رها کرده ایم".

در زبان های برنامه نویسی هم قضیه کاملاً به همین صورت است. در واقع با استفاده از زبان های برنامه نویسی ما با کامپیوتر خود به جای آدم ها ارتباط برقرار می سازیم، دستور می دهیم، درخواست می کنیم و ...

بنابراین اگر شروع به فراگیری یک زبان برنامه نویسی نماییم و به طور مداوم آن را تمرین نکنیم به طور حتم آن را فراموش خواهیم کرد. در واقع بایستی آنقدر کدهای زبان مد نظر خود را بنویسیم که ملکه ذهنمان شوند که در آن صورت همچون زبان فارسی، آذری، کردی، گیلکی، مازنی، عربی و ... (قابل توجه تمام اقوام ایرانی) که اگر آن را به مدت یکسال هم مورد استفاده قرار ندهیم فراموش نخواهیم کرد، به زبان برنامه نویسی مد نظر خود کاملاً مسلط خواهیم شد.

با مد نظر قرا دادن موارد فوق الذکر امیدواریم این دوره برای شما کاربر گرامی مفید واقع گردد.

MahdiHD بازدید : 94 چهارشنبه 24 تیر 1394 نظرات (0)

آموزش HTML

زبان HTML پایه و اساس طراحی صفحات وب می باشد. عبارت HTML که مخفف Hyper-Text Markup Language به معنای "زبان علامت گذاري فرا متنی"است، زبان استاندارد طراحی صفحات وب است که از آن طریق می توان وب سایت هایی کاملاً استاتیک طراحی کرد. سایت های دینامیکی هم که با سایر زبان ها من جمله PHP، C Sharp و ... طراحی می شوند در نهایت خروجی کدهای سمت سرور آن ها تگ های اچ تی ام ال را به مرورگر کاربران ارسال خواهند کرد.

اچ تی ام ال یک زبان نشانه گذاری است به اين معنی که بخش های مختلف توسط اجزايی به نام Tag از هم جدا شده که هر کدام دارای کاربرد مخصوص به خود هستند. اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت در معرض دید کاربران قرار گیرند.

تیم تولید محتوای آموزشی نت شهر سعی نموده تا در این سری از آموزش های مقدماتی طراحی سایت، زبان اچ تی ام ال را به زبانی ساده و به صورت کاملاً قابل فهم آموزش دهد تا علاقمندان بتوانند پس از پایان آموزش HTML،با استفاده از تگ هایی من جمله Header، H1، Map، Div، Paragraph، Break و همچنین متاتگ هایی از قبیل title، description، keyword، head و ... سایتی همراه با عناصری از قبیل متن، عکس، تیتر، جدول و... طراحی نمایند که در عین حال از دید موتورهای جتسجویی همچون گوگل، بینگ، یاهو و ... بهینه باشند.

منبع این سری از آموزش ها شهر نت است.

اطلاعات کاربری
  • فراموشی رمز عبور؟
    • آرشیو
  • تير 1394
    • نظرسنجی
    آیا از آموزش های سایت راضی هستید؟
    آمار سایت
  • کل مطالب : 94
  • کل نظرات : 0
  • افراد آنلاین : 9
  • تعداد اعضا : 46
  • آی پی امروز : 21
  • آی پی دیروز : 20
  • بازدید امروز : 53
  • باردید دیروز : 48
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 450
  • بازدید ماه : 450
  • بازدید سال : 23,891
  • بازدید کلی : 122,356

    • صفحه اصلی تالار گفتمان ثبت نام ورود آرشیو تماس با ما
    نیرو گرفته : رزبلاگ