آموزش 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 شماره‌گذاری نمایید.

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

تصویری از آمازون اکو با صفحه نمایش لمسی فاش شد

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

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

این مدل ارتقاء یافته آمازون اکو، اسپیکرهای بزرگ‌تری نسبت به مدل‌های موجود خواهد داشت. به نظر می‌رسد آمازون علاوه بر اضافه کردن صفحه‌نمایش ۷ اینچی به فکر ارتقاء تجربه صوتی در محصول جدیدش نیز بوده است. مدل ارتقاء یافته اکو احتمالا همچون اکو لوک (Echo Look) به دوربین نیز مجهز خواهد شد. مایکروسافت با اینوک (Invoke) و اپل با اسپیکر مبتنی بر سیری به‌زودی از راه خواهند رسید و چاره‌ای جز تغییر برای آمازون باقی نگذاشته‌اند. انتظارات شما از یک اسپیکر هوشمند چیست؟ آیا اضافه کردن صفحه نمایش کار هوشمندانه‌ای از طرف آمازون محسوب می‌شود؟

جک صوتی ۳.۵ میلی متری به نفع ایرپاد بی سیم از آیفون 7 حذف شد

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

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

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

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

درنهایت باید اظهار کنیم که حرکت به سمت هدفون‌های بی‌سیم دو مورد را هدف قرار داده است: فناوری اتصال و کیفیت صدا.

تعداد اپلیکیشن‌های فروشگاه ویندوز به 100 هزار رسید

فروشگاه ویندوز که میزبان اپلیکیشن‌های سازگار با ویندوز 8 و ویندوز RT است، توانسته پذیرای بیش از 100 هزار اپلیکیشن باشد. این بدین معناست که توسعه دهندگان با سرعتی بیش از 2 برابر سریعتر از ویندوز فون برای ویندوز 8، اپلیکیشن تولید کرده‌اند تا در حدود 7 ماه پس از تاریخ عرضه ویندوز 8، به این آمار دست یابند.

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

امروز در اکانت توییتر توسعه دهندگان ویندوز اعلام شد که ویندوز استور توانسته در طول 7 ماه به آمار 100 هزار اپلیکیشن دست یابد که این آمار بیش از دو برابر ویندوز فون است. ویندوز فون این تعداد اپلیکیشن را در حدود 18 ماه جذب کرده بود.

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

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

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

نرم‌افزار Google Earth Pro مجانی شد

احتمالا شما هم از نرم‌افزار Google Earth روی گوشی هوشمند، تبلت یا کامپیوتر شخصی خود استفاده کرده‌اید. گوگل تصمیم گرفته تا نسخه‌ی حرفه‌ای این اپلیکیشن که پیش از این برای تهیه‌ی آن باید پول پرداخت می‌کردیم را مجانی ارائه کند.

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

برای استفاده از نرم‌افزار Google Earth Pro ابتدا آن را از این آدرس دریافت کرده و سپس کد مربوط به لایسنس آن را از این آدرس بدست آورید. پس از اجرای نرم‌افزار کد مربوط به آن را در نرم‌افزار وارد کنید تا به کلیه‌ی امکانات آن دسترسی پیدا کنید.

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