استارتاپی برای آموزش برنامه نویسی با استفاده از موسیقی

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

نتایج تحقیقاتی که در سال ۲۰۱۶ توسط موسسه‌ی Erikson انجام شده، نشان می‌دهد که والدین با وجود اعلام رضایت از تکنولوژی‌های جدید، نگرانی‌هایی را نیز در مورد استفاده‌ی فرزندانشان از این فناوری‌ها دارند. ۷۲ درصد از این والدین معتقد بودند که زمان نگاه کردن کودکان به صفحات نمایش بسیار زیاد است. نگرانی ۶۹ درصد از آنها در ارتباط با محتوای غیراخلاقی و نامناسب برای کودکشان بوده است و ۶۶ درصد نیز از پیام‌های تبلیغاتی با هدف کودکان و نوجوانان، ابراز نارضایتی کرده‌اند.

تنها والدین نیستند که همیشه در حال سبک و سنگین کردن مزایا و معایب فناوری برای کودکان خود هستند. فعالان دنیای فناوری و جوانان فعال در اکوسیستم‌های استارتاپی، برای حل این چالش دست به کار شده‌اند. موسسان استارتاپTangible Play که در پالو آلتو واقع است، از سال ۲۰۱۳ پروژه‌ای را شروع کرده‌اند تا در هدف نهایی، به بیان خودشان چیزی تولید کنند که «جوان‌ترین نسل را به وجد بیاورد» و در عین حال، نگرانی‌های والدین از نوع ارتباط فرزندانشان با فناوری را برطرف کند.

آخرین تلاش این استارتاپ برای تولید اسباب‌بازی‌هایی با محوریت فناوری، دستگاهی فوق‌‌العاده با نام Osmo Coding Jam است.

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

اسباب‌بازی‌های Osmo در حال حاضر نیز توسط والدین، معلمان و افراد بسیار دیگری که در پی بهبود ارتباط کودکان با فناوری‌هایی مانند آیپد هستند، شناخته‌شده‌اند. بعلاوه، این تولیدات توسط موسسه‌های مختلفی از جمله Good Design، Time و Fast Company جایزه‌های متعددی را به خاطر فناوری‌های به‌روز و ترکیب بازی و آموزش دریافت کرده‌اند.

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

یکی از کارشناسان اوسمو در ویدیویی تبلیغاتی از این دستگاه می‌گوید که کودکان با استفاده از بلوک‌ها، موسیقی می‌سازند و در کنار آن، نحوه‌ی ترکیب این بلوک‌ها برای برنامه‌نویسی را نیز می‌آموزند.

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

ترکیب با واقعیت افزوده

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

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

وقتی هریک از بلوک‌ها بر روی مکان خود قرار بگیرند، شخصیت‌های بازی بر روی تبلت آهنگ مخصوص بلوک را پخش می‌کنند. این نرم‌افزار ۲۱ شخصیت موزیسین دارد که هر کدام ساز مخصوص خود را دارند. بعلاوه، قابلیت ذخیره‌ی کدها و بخش‌های کوچک آهنگ برای ترکیب و ساختن موسیقی جدید،‌ قابلیت ساخت بی‌نهایت موسیقی را به کودکان می‌دهد.

اسباب‌بازی‌های Osmo و محصول جدید آنها تنها برای استفاده در خانه فروخته نمی‌شوند. جالب است بدانید بیش از ۲۲ هزار مدرسه در ۴۲ کشور جهان، از محصولات این شرکت استفاده می‌کنند. آموزگاران متعدد ابراز رضایت بسیار زیادی از استفاده‌ی کودکان از این اسباب‌بازی‌ها دارند.

قیمت دستگاه کدینگ جم که در می ۲۰۱۷ به بازار عرضه خواهد شد، ۵۹ دلار در نظر گرفته شده است. والدینی که تاکنون هیچ اسباب‌بازی از نوع Osmo خریداری نکرده‌اند نیز باید ۱۹ دلار دیگر برای پایه‌ی این اسباب‌بازی پرداخت کنند. می‌توان گفت که این قیمت‌ها برای والدینی که علاقه دارند کودکانشان علاوه بر یادگیری هنر، استفاده‌ی مفیدی از فناوری داشته باشند، ناچیز است.

علاوه بر آن، کدینگ جم دستگاهی است که با روشی سرگرم کننده، مهارت کدنویسی را به کودکان آموزش می‌دهد. طبق مقالات و بررسی‌های منتشر شده، مهارت کدنویسی به مهارتی اساسی و نیازی پایه برای کودکان تبدیل شده است.

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

نظر شما چیست؟ آیا در کشور ما نیز می‌توان ایده‌هایی این‌چنینی را اجرا کرد و استارتاپی موفق داشت؟ آیا این استارتاپ خواهد توانست با واردکنندگان اساب‌بازی رقابت کند؟

آموزش ویندوز 10: چگونه Ink Workspace را فعال کنیم؟

مایکروسافت در ویندوز ۱۰ ویژگی جدیدی به نام Windows Ink Workspace برای طرفداران قلم‌های دیجیتال فراهم کرده است. با این ویژگی می‌توانید نقطه مبتنی بر ویندوز ۱۰ را برای اپ‌های سازگار با قلم سیستم خود متمرکز کنید.

بسیاری از کاربران اگر هیچ‌وقت از قلم دیجیتال همراه کامپیوترشان استفاده نکنند، گزینه Ink Workspace را نمی‌بینند و اساسا نیازی به آن نخواهند داشت. با این وجود، شرکت مایکروسافت برای کاربرانی که از قلم استفاده نمی‌کنند امکان فعال کردن گزینه Ink Workspace را در ویندوز ۱۰ فراهم کرده است.

در هر قسمتی از taskbar کلیک راست و از منوی زمینه، گزینه Show Windows Ink Workspace button را انتخاب کنید. یک آیکون به شکل قلمی در حال نوشتن حرف S، در قسمت نوتیفیکیشن‌ها در سمت راست صفحه ظاهر می‌شود، روی آن کلیک کنید تا محیط Ink Workspace نمایان شود. در حالت پیش‌فرض این محیط شامل Sticky Notes است؛ برنامه‌ای که در خارج از فضای کاری قابل دستیابی است. علاوه بر این، بعضی برنامه‌های دیگر همچون Sketchpad یا Screen Sketchh در این بخش هستند که شاید شما آشنایی چندانی با آن‌ها نداشته باشید.

Sketchpad اپلیکیشن نقاشی است که حتی اگر قلم دیجیتال نداشته باشید، می‌توانید با آن بازی و نقاشی کنید. روی Screen Sketch ضربه‌ای بزنید و به‌سرعت اسکرین‌شاتی از دسکتاپ خود بگیرید، از اینجا می‌توانید مستقیما در اسکرین‌شات خود با استفاده از ابزارهای قلمی که در داخل اپ فراهم شده است، نقاشی کنید.

در صورتی که تنها می‌خواهید از Screen Sketch استفاده کنید، اسکرین‌شات بگیرید اما روی آن نقاشی نکنید، بعد آیکون save را انتخاب و آن را روی هارد درایو ذخیره کنید. Screen Sketch شامل گزینه‌های به اشتراک‌گذاری فوری برای اسکرین‌شات‌های شما بر اساس اپ‌های نصب‌شده روی سیستمتان مانند توییتر، فیس‌بوک، Mail و OneNote است.

ضمن اینکه Ink Workspace دارای بخشی برای اپ‌های قلمی پیشنهادی از سوی Windows Store است که با انتخاب و استفاده شما از این نوع اپ‌ها به شما توصیه خواهند شد.

آموزش PHP - جلسه ششم: حلقه‌ های While و For

گاهی در برنامه‌نویسی‌ شرایطی پیش می‌آید که نیاز داریم بخش خاصی از کد چندین مرتبه اجرا شود. در این حالت می توانیم از حلقه‌ها بهره ببریم. همانند سایر زبان‌های‌ برنامه نویسی در php هم از چند نوع حلقه پشتیبانی می‌‌شود. حلقه while و for از جمله مهمترین آن‌ها هستند.

حلقه while

با استفاده از این حلقه می‌توان کد مورد نظر را تا زمانی که شرط برقرار باشد اجرا کرد. به مثال زیر که ساده‌ترین حالت استفاده از حلقه while است توجه کنید.

<?php
while ($var < 10)
{
    echo "var is now < 10";
}
?>

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

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

<?php
$i = 1;
while ($i < 7)
{
    echo "$i <br>";
    $i++;
}
?>

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

حلقه Do...While

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

<?php
$i = 8;
do{
    echo "meqdare i aknun $i ast";
    $i++;
}while ($i < 7);
?>

در کد بالا ابتدا مقدار متغیر i را برابر ۸ تعیین می‌کنیم. سپس با دستور Do... while ابتدا یک دستور چاپ echo را وارد کرده‌ایم که مقدار کنونی i را نمایش دهد. (دقت کنید برای اینکه قصد دارید مقدار متغییر در دستور echo چاپ شود از دابل کوتیشن استفاده کرده‌ایم.) سپس با عملگر افزایش ++ یک واحد به مقدار کنونی i اضافه کرده‌ایم. تا زمانیکه شرط داخل While برقرار باشد کد ما نیز اجرا خواهد شد. اما از آنجا که در شرط حلقه فوق برقرار نیست، فقط یک بار شاهد اجرای دستور نوشته شده در این حلقه خواهیم بود.

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

برای درک بهتر به مثال دیگری در این مورد توجه کنید. در کد زیر ابتدا مقدار متغیر i را برابر ۵ تعیین می‌کنیم و سپس با استفاده از حله do...while اعلام می‌کنیم تا هنگامی که شرط ما یعنی کوچک‌تر یا مساوی بودن i با عدد ۷ برقرار است، کد حلقه که اینبار در بخش do نوشته شده، اجرا شود.

<?php
$i = 5;
do {
   echo "number is now $i <br>";
   $i++;
}while($i <= 7);
?>

در کد حلقه باز هم ابتدا مقدار کنونی i را چاپ کرده و سپس به ازای هر بار اجرا حلقه یک واحد به آن اضافه می‌کنیم. پس خروجی کد بالا در مرورگر به صورت زیر خواهد بود:

5
6
7

اما در پی‌اچ‌پی برای استفاده از حلقه‌ها باز هم محدود به این دو روش نیستید. روش بعدی استفاده از حلقه For است.

حلقه For

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

<?php
//using for in php in simplest mode!
for (init; test; incremnet){
   code to run
}
?>

در کد بالا منظور از init در واقع تعریف و مقدار دهی یک شمارشگر است. test شرط حلقه خواهد بود و تا زمانیکه این شرط برقرار باشد (یعنی true را برگرداند) حلقه اجرا خواهد شد و در نهایت incremnet مقدار اضافه شدن یا کاسته شدن شمارشگر حلقه در هربار اجرای حلقه است (دقیقا همان کار عملگر افزایش و کاهشی که در while استفاده کردیم را می‌کند). همچنین به این نکته توجه کنید که بین هر کدام از این موارد باید علامت نقطه ویرگول ; را تایپ کنید. برای درک بهتر اینبار به مثال عملی زیر توجه کنید:

<?php
for ($i = 1; $i < 7; $i++)
{
    echo "$i <br>";
}
?>

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

1
2
3
4
5
6

استفاده از حلقه For نسبت به while باعث می‌شود کدنویسی شما کمتر شود و از نظر بسیاری از توسعه‌دهندگان این حلقه به نوعی حرفه‌ای تر است. ولی نتیجه کار همانطور که متوجه شده‌اید در هر صورت یکی خواهد بود.

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

<table align=”center”>
<?php
for($i=1; $i<=10; $i++){
    for($j=1; $j<=10; $j++){
        echo "$i*$j";
        echo " – ";
    }
echo "</br>";
echo "</br>";
}
?>
</table>

تنها نکته‌ای که در مثال بالا وجود دارد، این است که همانند دستورات تو در توی if در اینجا نیز از حلقه for به صورت تو در تو استفاده کرده ایم. شما می‌توانید همانند IF های تودرتو بی نهایت  حلقه While یا For را هم به همان شکل مورد استفاده قرار دهید. خروجی کد بالا در مرورگر کاربر به صورت زیر خواهد بود:

1*1 – 1*2 – 1*3 – 1*4 – 1*5 – 1*6 – 1*7 – 1*8 – 1*9 – 1*10 – 

2*1 – 2*2 – 2*3 – 2*4 – 2*5 – 2*6 – 2*7 – 2*8 – 2*9 – 2*10 – 

3*1 – 3*2 – 3*3 – 3*4 – 3*5 – 3*6 – 3*7 – 3*8 – 3*9 – 3*10 – 

4*1 – 4*2 – 4*3 – 4*4 – 4*5 – 4*6 – 4*7 – 4*8 – 4*9 – 4*10 – 

5*1 – 5*2 – 5*3 – 5*4 – 5*5 – 5*6 – 5*7 – 5*8 – 5*9 – 5*10 – 

6*1 – 6*2 – 6*3 – 6*4 – 6*5 – 6*6 – 6*7 – 6*8 – 6*9 – 6*10 – 

7*1 – 7*2 – 7*3 – 7*4 – 7*5 – 7*6 – 7*7 – 7*8 – 7*9 – 7*10 – 

8*1 – 8*2 – 8*3 – 8*4 – 8*5 – 8*6 – 8*7 – 8*8 – 8*9 – 8*10 – 

9*1 – 9*2 – 9*3 – 9*4 – 9*5 – 9*6 – 9*7 – 9*8 – 9*9 – 9*10 – 

10*1 – 10*2 – 10*3 – 10*4 – 10*5 – 10*6 – 10*7 – 10*8 – 10*9 – 10*10 – 

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

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

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

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

آموزش HTML - بخش هفتم: انواع لیست

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

لیست‌ها

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

• unorderd list یا لیست بدون نظم که دارای ترتیب دلخواه است.
•  orderd list یا لیست منظم و دارای ترتیب است. مثلا چنین لیستی بر اساس اعداد یا حروف الفبا مرتب می‌شود.
• حالت سوم نیز لیست توضیحات است که در آن ابتدا عنوان و سپس توضیحات وارد می‌شود که چندان مورد استفاده قرار نمی‌گیرد و ما هم بدان نپرداخته‌ایم.

برای مثال به لیست نامنظم زیر توجه نمایید.

<ul>

<li/>متن آیتم اول<li>

<li/> متن آیتم دوم<li>

<li/>متن آیتم سوم<li>

<ul/>

مراحل ایجاد یک لیست بدون نظم و ترتیب:

مرحله اول: برای ساخت یک لیست، باید یک تگ <ul> باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست نامنظم یا همان Unorderd List ایجاد کنیم.

مرحله دوم: سپس  متن هر آیتم لیست را بین <li> متن آیتم <li/> باز  متن مورد نظر را بین آن می‌نویسیم.

مرحله سوم: در آخر <ul/> را می‌نویسیم تا تگ بسته شود.

 اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت list-style-type این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی <ul> این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.

< "آیکون مورد نظر :ul style="list-style-type> 

لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:

•  disc : در واقع همان دایره‌های تو پر پیش فرض هستند. نمونه: <ul style= "list-style-type: disc ">
• circles: در این حالت آیتم‌های لیست شما با دایره به نمایش در خواهد آمد. 
• squares: در این حالت آیتم‌های لیست شما به صورت مربع نشان داده خواهند شد. 
• none: در این حالت در کنار آیتم‌های لیست آیکونی وجود نخواهد داشت. 

لیست منظم و با ترتیب:

لیست منظم با ترتیب مثل لیستی که بر اساس شماره یا حروف الفبا مرتب شده را ordered list یا لیست منظم می‌گویند.

لیست‌های منظم با تگ <ol> نشان داده می‌شوند. باقی موارد در این لیست‌ها مشابه قبل است. 

برای مثال به لیست زیر توجه نمایید.

<ol>

<li/>متن آیتم اول<li>

<li/> متن آیتم دوم<li>

<li/>متن آیتم سوم<li>

<ol/>

مرحله اول: برای ساخت یک لیست، باید یک تگ <ol> باز می‌کنیم. بدین ترتیب اعلام می‌کنیم که می‌خواهیم یک لیست منظم یا همان orderd List ایجاد کنیم.

مرحله دوم: سپس  متن هر آیتم لیست را بین <li> متن آیتم <li/> باز  متن مورد نظر را بین آن می‌نویسیم.

مرحله سوم: در آخر <ol/> را می‌نویسیم تا تگ بسته شود.

 اگر لیست‌های اچ تی ام ال را دیده باشید, خواهید دید که در این لیست‌ها یک علامت(معمولا دایره تو پر) قرار می‌گیرد.در لیست‌ها امکان تغییر آیکونی که در کنار هر آیتم قرار می‌گیرد وجود دارد. اتریبیوت استایل را اضافه کرده و صفت list-style-type در این اتریبیوت این کار را برای شما انجام می‌دهد. برای اینکار باید به تگ ابتدایی ul این اتریبیوت را اضافه کنید و آیکون مورد نظر را بنویسید.

< "آیکون مورد نظر :ol style ="list-style-type> 

لیست موارد قابل استفاده به عنوان آیکون در لیست‌ها به ترتیب زیر است:

• type="1" : در این حالت آیتم‌های لیست بر حسب اعداد مرتب خواهند شد.  مانند <"ol list-style-type: "1> 
• type="A": در این حالت آیتم‌های لیست با حروف بزرگ الفبا به نمایش خواهد آمد. 
• type="a": در این حالت آیتم‌های لیست شما با حروف کوچک الفبا نشان داده خواهند شد. 
• type="I": در این حالت در کنار آیتم‌های لیست اعداد یونانی I و II نمایش داده خواهد شد. 
• type="i": در این حالت در کنار آیتم‌های لیست اعداد یونانی با حروف کوچک i و ii نمایش داده خواهد شد. 

نمونه کد

<ol>

<li/>متن آیتم اول<li>

<li/> متن آیتم دوم<li>

<li/>متن آیتم سوم<li>

</ol>

نتیجه‌ای که مرورگر نمایش خواهد داد

• متن آیتم اول
• متن آیتم دوم
• متن آیتم سوم

 خلاصه قسمت هفتم:

در این قسمت چیزهایی که یادگرفته‌ایم را به صورت کاملا خلاصه مرور می‌کنیم.

• در هفتمین قسمت از سری آموزش HTML و سی‌اس‌اس با لیست‌ها آشنا شده‌ایم. 
• لیست‌ها سه نوع هستند:‌ لیست‌های نامنظم یا unordered list(با ترتیب دلخواه)، لیست‌های دارای ترتیب ordered list (بر اساس شماره یا حروف الفبا و ...) و لیست‌های توضیحی
• لیست‌های نامنظم و بدون ترتیب با تگ <ul> آیتم‌های لیست<ul/> نوشته می‌شوند.
• لیست‌های منظم و دارای ترتیب با تگ <ol> آیتم‌های لیست<ol/> نوشته می‌شوند.

نوبت شما

خب نوبتی هم که باشد، دیگر نوبت شماست. پس همین حالا دست به کار شوید و به ما نشان دهید که همه چیزهایی که گفته‌ایم را آموخته‌اید. این شما و ادیتور آنلاین. برای تمرین یک لیست خرید با 5 آیتم ایجاد کنید. این لیست خرید را یک بار به صورت نامنظم بچینید و یک بار آیتم‌های آن را به ترتیب از 1 تا 5 شماره‌گذاری نمایید.

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

آموزش HTML - بخش دهم: جدول‌ها

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

مرحله اول: در مرحله اول تنها این جمله را می‌نویسیم: <table> این مرحله می‌گوید که ما به دنبال ایجاد یک جدول هستیم.  

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

 مرحله دوم: حالا بیایید یک جدول خیلی ساده و ابتدایی درست کنیم! جدولی که تنها یک سطر و یک ستون دارد! برای ساخت یک سطر در جدول بعد از تگ <table> کلمه <tr> را می‌نویسیم ( اگر هم به زبان نیاورید، می‌دانیم که خودتان فهمیده‌اید این کلمه مخفف table row است و نیازی به حفظ کردن نیست.) . این کار در واقع همانند آن است که ما با خودکار یک خط افقی در صفحه کاغذ کشیده باشیم. 

مرحله سوم: حالا که جدول ما یک خط افقی (یک سطر) دارد وقت آن است تا در این سطر ایجاد شده، تعدادی اطلاعات بنویسیم.

این اطلاعات در واقع به صورت افقی در کنار هم نوشته می‌شوند و اولین پایه‌های ستون جدول ما را تشکیل می‌دهند. برای نوشتن این اطلاعات تگ table Data یا <td> را به کار می‌بریم. 

نمونه کد

<table>

<tr>

<td>اولین ستون جدول</td>

</tr>

</table>

نتیجه‌ای که مرورگر نمایش خواهد داد

اولین ستون جدول

خب! حالا که با پایه کار آشنا شدید، کمی به سمت جلو می‌رویم. در واقع برای ساختن جدول در اچ تی ام ال ابتدا باید تگ <tr> را به تعداد سطرهای افقی که میخواهیم جدول داشته باشد می‌نویسیم. سپس در داخل این سطرهای افقی، داده‌های جدول را که در یک سطر در کنار هم قرار می‌گیرند در داخل تگ‌های <td>، وارد می‌کنیم. با یک مثال این موضوع را برای شما بیشتر روشن خواهیم کرد.

جدولی با چهار ستون ولی بدون اطلاعات ,و ستونی که در آن اطلاعات وارد کنیم!

<table>

    <tr>سطر افقی اول</tr>

    <tr>سطر افقی دوم</tr>

    <tr>سطر افقی سوم</tr>

     <tr><سطر افقی چهارم/tr>

</table>

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

برای هر سطر می‌توان به تعداد دلخواه ستون تعیین کرد. یعنی خط افقیمان را که کشیدیم، میتوانیم بالای آن خط افقی به تعداد دلخواه اطلاعات وارد کنیم. پس در واقع تعداد ستون‌های بسته به سلیقه شماست. مثلا ما در سطر اول سه ستون قرار می‌دهیم. در خط دوم  سوم هم سه ستون قرار داده‌ایم. 

نمونه کد

<table>

    <tr><!-- شروع خط اول  -->

          <td>خط اول - ستون اول </td>          

          <td>خط اول - ستون دوم</td>  

         <td>خط اول - ستون سوم</td>       

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم- ستون دوم</td>        

            <td>خط دوم - ستون سوم</td>    

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

</tr><!-- پایان خط سوم-->

</table>

نتیجه‌ای که مرورگر نمایش خواهد داد

خط اول - ستون اول	خط اول - ستون دوم	خط اول - ستون سوم
خط دوم - ستون اول	خط دوم - ستون دوم	خط دوم - ستون سوم
خط سوم - ستون اول	خط سوم - ستون دوم	خط سوم - ستون سوم

نکته: در تمرین بالا ما در کنار سطرها <-- حرف مورد نظر --!> نوشته‌ایم. این علامت <--  --!> به معنای کامنت در اچ تی ام ال است و در واقع هر چه بین این دو علامت قرار بگیرد توسط مرورگر نمایش داده نمی‌شود. از کامنتها برای توضیح ,و تشریح در رابطه با کد یا مرتب و مشخص کردن بخش‌های مختلف صفحه می‌توان استفاده کرد. 

برای درک بهتر شما، مثال‌های دیگری را در پایین ایجاد کرده‌ایم. 

نمونه کد

<table>

    <tr><!-- شروع خط اول  -->

          <td>  خط اول - ستون اول</td>          

          <td> خط اول - ستون دوم</td>          

   </tr><!-- پایان خط اول  -->

    <tr> <!-- شروع خط دوم -->

            <td>خط دوم - ستون اول </td>      

           <td>خط دوم - ستون دوم </td>        

   </tr><!-- پایان خط دوم -->

 <tr> <!-- شروع خط سوم-->

            <td>خط سوم - ستون اول </td>      

           <td>خط سوم - ستون دوم</td> 

           <td>خط سوم - ستون سوم</td>

           <td>خط سوم - ستون چهارم</td> 

</tr><!-- پایان خط سوم-->

</table>

نتیجه‌ای که مرورگر نمایش خواهد داد

خط اول - ستون اول	خط اول - ستون دوم
خط دوم - ستون اول	خط دوم - ستون دوم
خط سوم - ستون اول	خط سوم - ستون دوم	خط سوم - ستون سوم	خط سوم - ستون چهارم

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

تمرین: 

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

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