برنامه نویسی کلاینت ساید (بخش اول قسمت دوم)

برنامه نویسی کلاینت ساید

برای مطالعه بخش اول برنامه نویسی کلاینت سایاینجا کیلیک کنید.

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

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

بهترین روشی که تمام اساتید این حوضه توصیه می کنند یادگیری از روی سورس های آماده توام با تمرین و خواندن رفرنس ها می باشد.

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

به طور کلی یاد گیری یک زبان برنامه نویسی به جند مرحله تقسیم می شود:

  1. یادگیری مفاهیم زبان
  2. یادگیری دستور زبان یا سینتکس آن زبان
  3. یادگیری و درک الگوریتم ها
  4. عیین هدف و طراحی مسیر برای نوشتن یک برنامه.

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

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

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

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

در ادامه به بررسی چند تگ پر کاربرد و خواص آنها خواهیم پرداخت و روش فوق را بکار خواهیم بست.

تگ های پر کاربرد دربرنامه نویسی کلاینت ساید:

تگ <div>:  این تگ یکی از مهم ترین تگ های زبان html میباشد که می توان به وسیله آن صفحات html را لایه بندی کرد.

تا قبل از ورود این تگ به زبان HTML از تگ Table  برای قسمت بندی و مدیریت بخش های صفحه استفاده می شد. این تگ خواصی همچون (class , id , style, hidden,…) را دارا می باشد. این خواص از دسته خواص عمومی هستند که کاربرد آنها را هم بررسی می کنیم.

اما قبل از طرح مثال باید گریزی به زبان CSS بزنیم زیرا بیشتر مثال هایی که می توانیم برای تگ ها و خواص class   و style  و id بزنیم با CSS  سرو کار دارند.

همانطور که درقسمت قبلی اشاره شد زبان CSS برای برطرف کردن نواقص و حفره های زبان html  پیشنهاد شد. علاوه بر آن برای طراحی صفحات زیبا ، داینامیک وریسپانسیو ما نیازمند CSS هستیم.

ما در این مجموعه به صورت مستقیم از CSS استفاده نمی کنیم بلکه از فریمورک های آماده و حرفه ای مانند bootstrap استفاده می کنیم که به مراتب فرایند طراحی صفحه را راحت تر می سازند.

و اما ساختار تگ های CSS:

در CSS می توان برای تمام المان های html استایل نوشت . این استایل ها می توانند بر اساس class ها ، id  ها و یا خود تگ ها باشد.

یک کلاس در CSS به صورت زیر تعریف می شود:

Class

درصورتی که بخواهید از id  استفاده کنید می توانید به جای “.” از “#” قبل از اسم کلاس و در تگ html به جای خاصیت class از id استفاده استفاده بکنید.

دستورات درون آکولاد تگ های زبان CSS هستند. این تگ ها را می توانید بصورت اختصاصی درون خاصیت style در بدنه تگ html بنویسید و یا در کلاس مورد نظر در یک فایل استایل شیت و یا تگ <style> در داخل تگ head بنویسید. به مثال زیر توجه کنید:

Style-Tag

همانطور که مشاهده می کنید برای دسترسی به کلاس های CSS باید از خاصیت class استفاده کرد.

نحوه استفاده از فایل های استایل شیت:

این فایل ها با پسوند .css با استفاده از تگ link  در داخل تگ head  به صفحه اضافه می شوند و خود فایل استایل شیت فایلی است که تمام کد های css  ما درون آن قرار می گیرید. به مثال زیر توجه کنید:

Stylesheet

تگ لینک با صفت rel  و ارزش stylesheet مربوط به خواندن فایل استایل شماست و href هم معرف مسیر فایل است.

اما خاصیت style درون خود تگ:

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

In-Tag-Style

همانطور که در مثال بالا مشاهده می کنید تگ border در کلاس Test جا افتاده است و با استفاده از  خاصیت  style  آن را به تگ اعمال کرده ایم.

واما معرفی bootstrap  :

Bootstrap یک کتابخانه و یا فریمورک CSS بوده که توسط توییتر تولید و منتشر شده است. این کتابخانه رایگان می باشد و امکانات زیادی را در اختیار طراحان قرار می دهد. شما می توانید با مراجعه به سایت https://getbootstrap.com  این فریمورک را دانلود کرده و کامپوننت های آن را مشاهده کنید.

در صورتی که از Visual Studio Code استفاده می کنید می توانید با نصب Snippet این فریمورک به راحتی هرچه تمام تر قطعات کدی که لازم دارید را در صفحه ایجاد کنید. برای کسب اطلاعات بیشتر می توانید به آدرس زیر مراجعه نمایید:

https://marketplace.visualstudio.com/items?itemName=wcwhitehead.bootstrap-3-snippets

اما در ادامه معرفی تگ های html، لیستی از این تگ ها را به همراه توضیح مختصر آن ها قرار می دهم تا بتوانید به راحتی از آنها استفاده کنید:

نام تگ توضيح مختصر
< a > برای ايجاد يک لنگر به کار می رود .
< abbr > برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود .
< acronym > برای ايجاد يک مخفف برای يک عبارت بزرگتر به کار می رود .
< address > برای نوشتن يک آدرس در متن به کار می رود .
< area > مشخص کننده يک ناحيه در نقشه های تصويری است .
< b > برای توپر کردن نوشته ( Bold ) به کار می رود .
< base > برای تعيين خواص پايه در يک صفحه به کار می رود .
< bdo > قلم نوشته را به صورت نوشته های محيط های کدنويسی کامپيوتر در می آورد .
< big > باعث بزرگتر نمايش داده شدن نوشته در يک متن می شود .
< blockquote> برای ايجاد يک نقل قول به کار می رود .
< body > بدنه اصلی محتويات صفحه وب را تشکيل می دهد .
< br > برای ايجاد يک خط جديد به کار می رود .
< button > برای ايجاد دکمه های وب به کار می رود .
< caption > برای تعيين عنوان يک جدول به کار می رود .
< cite > باعث نمايش کج نوشته به کار می رود .
< code > برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
< col > برای دسته بندی گروهی از ستون های يک جدول به کار می رود .
< colgroup > برای دسته بندی گروهی از ستون های يک جدول به کار می رود .
< dd > برای ايجاد ليست های معنی به کار می رود .
< del > برای نمايش متن حذف شده درصفحه به کار می رود .
< div > برای تقسيم فضا در صفحات وب به کار می رود .
< dl > برای ايجاد ليست های معنی به کار می رود .
< dt > برای ايجاد ليست های معنی به کار می رود .
< em > برای نمايش نوشته به صورت کج به کار می رود .
< fieldset > برای ايجاد يک کادر به دور محتويات خود به کار می رود .
< form > برای ايجاد يک فرم در صفحه به کار می رود .
< h1 > تا < h6 > برای ايجاد انواع تيترها در نوشته به کار می رود .
< head > در برگيرنه اطلاعات کلی درباره سند وب است .
< hr > برای ايجاد يک خط در عرض صفحه به کار می رود .
< html > محدوده اصلی کد HTML يک صفحه را تعيين می کند .
< i > برای نمايش نوشته به صورت کج به کار می رود .
< img > برای قرار دادن تصوير در صفحه به کار می رود .
< input > برای ساختن انواع کتنرل های HTML به کار می رود .
< ins > برای مشخص کردن متن های جديد وارد شده در يک صفحه به کار می رود .
< kbd > برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
< label > برای ايجاد يک عنوان ( نماد متنی ) در صفحه به کار می رود .
< legend > برای ايجاد عنوان يک کادر fieldset به کار می رود .
< li > برای تعريف يک آيتم در ليست به کار می رود .
< link > برای برقراری ارتباط بين صفحه با يک فايل خارجي به کار می رود .
< map > برای ايجاد يک نقشه تصويری به کار می رود .
< meta > در بر گيرنده اطلاعات کلی درباره محتويات يک صفحه جهت استفاده موتورهای جستجو است .
< noscript > برای تعيين جايگزين يک اسکريپت در يک صفحه به کار می رود .
< object > برای پيوند يک شی خارجی با صفحه به کار می رود .
< ol > برای ايجاد ليست های ترتيبی به کار می رود .
< optgroup > برای دسته بندی گزينه های يک ليست به کار می رود .
< option > برای ايجاد يک ليست در صفحه به کار می رود .
< p > برای ايجاد يک پاراگراف در صفحه به کار می رود .
< param > برای تعيين تنظيمات زمان اجرای يک شی خارجی در صفحه به کار می رود .
< pre > برای نمايش متن به همان صورت اوليه به کار می رود .
< q > برای ايجاد يک نقل قول به کار می رود .
< samp > برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
< script > برای تعيين يک اسکريپت در صفحه به کار می رود .
< select > برای ايجاد يک ليست باز شو به کار می رود .
< small > برای نمايش متن به صورت کوچکتر به کار می رود .
< span > برای تقسيم متن به کار می رود .
< strong > برای نمايش درشتر متن به کار می رود .
< style > برای قالب بندی تگ های HTML و صفحات به کار می رود .
< sub > برای ايجاد يک زير نويس به کار می رود .
< sup > برای ايجاد يک انديس به کار می رود .
< table > برای ايجاد جداول به کار می رود .
< tbody > شامل محتويات و بدنه اصلی يک جدول می شود .
< td > برای ايجاد يک خانه جدول به کار می رود .
< textarea > برای ايجاد يک کادر متن به کار می رود .
< tfoot > برای تعيين عنوان انتهای يک جدول به کار می رود .
< th > برای ايجاد يک سر عنوان برای جدول به کار می رود .
< thead > برای ايجاد يک سر عنوان برای جدول به کار می رود .
< title > برای ايجاد متن tooltip درباره عناصر به کار می رود .
< tr > برای ايجاد يک سطر جدول به کار می رود .
< tt > باعث نمايش متن به صورت نوشته های تلگراف به کار می رود .
< u > برای خط زيردار کردن نوشته به کار می رود .
< ul > برای ايجاد ليست های نشانه ای به کار می رود .
< var > برای نمايش متن همانند محيط های برنامه نويسی به کار می رود .
< !– … — > برای ارائه توضيحات دلخواه در صفحه HTML به کار می رود .
< !DOCTYPE > نوع و نسخه زبان برنامه نويسی مورد استفاده در صفحه وب را مشخص می کند .
 

 

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

پیدا کردن سورس برای تمرین:

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

شما می توانید سورس هر سایتی را که می خواهید ببنید! فقط کافی است روی صفحه سایت موردنظر درمرورگر خود راست کلیک کرده و گزینه inspect  یا در کروم علاوه بر آن View Page Source را بزنید. سورس صفحه مورد نظر برای شما نمایش داده می شود.

توجه داشته با شید که در حالت inspect شما می توانید المان به المان صفحه را بررسی نمایید و استایل های اعمال شده به آن المان را هم بررسی کنید ولی اگر از View Page Sourceاستفاده می کنید استایل های صفحه را باید از داخل تگ های link  پیدا کنید.

درصورتی که به دنبال سورس های حرفه ای هستید می توانید از demo  های سایتhttps://wrapbootstrap.com   استفاده کنید

 

 

 

 

Capture

 

 

Capture1

 

شما می توانید با توجه به توضیحات ابتدای این قسمت و منابع معرفی شده برای خود طرح مسئله نموده و با استفاده از رفرنس های موجود مباحث و مفاهیم زبان HTML را فرابگیرید.

با ما همراه باشید!

برای مطالعه ادامه  این بخش اینجا کیلیک کنید.

نویسنده : مهندس علیرضا دادرس

 

برگرفته از وب سایت تخصصی ادمین پرو   https://www.adminpro.ir

لینک مستقیم مقاله  https://goo.gl/c5jYgs

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *