لیست ها در HTML5

  • لیست های عددی (numbered)
  • لیست های گلوگه ای (bullet)
  • لیست های تعریفی (definition)

در این مقاله در مورد انواع لیست ها در HTML5 و استفاده از آن ها در طراحی سایت بحث خواهیم کرد.

موارد زیادی وجود دارد که ما نیاز به استفاده از لیست ها داریم. HTML سه نوع مختلف از لیست ها را برای ما فراهم می کند:

لیست ترتیبی: لیستی است که در آن هر آیتم شماره گذاری می شود. به عنوان مثال، ممکن است لیستی از مراحل دستورالعمل هایی که باید انجام شود را داشته باشیم، و یا یک قرارداد حقوقی که هر نکته در آن باید با یک شماره شناسایی شود.

لیست غیرترتیبی: لیست هایی هستند که با گلوله ها یا دایره های توپر شروع می شوند (بجای عددهایی که ترتیب را نشان می دهند)

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

لیست های ترتیبی

<ol>

لیست های ترتیبی با المان <ol> ایجاد می شوند. (ordered list)

<li>

هر آیتم از لیست بین تگ آغازین <li> و تگ پایانی </li> قرار می گیرد. (li نشان دهنده list item می باشد)

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

<ol>

<li>Chop potatoes into quarters</li>

<li>Simmer in salted water for 15-20 minutes until tender</li>

<li>Heat milk, butter and nutmeg</li>

<li>Drain potatoes and mash</li>

<li>Mix in the milk mixture</li>

</ol>

html 5 list

لیست های غیرترتیبی

<ul>

لیست های غیرترتیبی با المان <ul> ایجاد می شوند (unordered list)

هر آیتم از لیست بین تگ آغازین <li> و تگ پایانی </li> قرار می گیرد.

گاهی اوقات ممکن است شما بخواهید بجای گلوله ها از دایره توخالی، مربع ها و غیره استفاده کنید. که برای این کار باید از CSS کمک بگیرید.

<ul>

<li>1kg King Edward potatoes</li>

<li>100ml milk</li>

<li>50g salted butter</li>

<li>Freshly grated nutmeg</li>

<li>Salt and pepper to taste</li>

</ul>

html 5 list

لیست های تعریفی در طراحی وب سایت

<dl>

لیست های تعریفی با المان <dl> ایجاد می شوند، که معمولاً شامل مجموعه ای از اصطلاحات و تعاریف آن ها می شود.

  بهترین شرکت طراحی سایت در شیراز

در داخل عنصر <dl>شما معمولاً هر دو المان <dt> و <dd>را خواهید دید.

<dt>

برای بیان اصطلاحات استفاده می شود.

<dd>

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

برای درک بهتر توضیحات بالا به مثال زیر دقت کنید:

 <dl>

<dt>Sashimi</dt>

<dd>Sliced raw fish that is served with condiments such as shredded daikon radish or ginger root, wasabi and soy sauce</dd>

<dt>Scale</dt>

<dd>A device used to accurately measure the weight of ingredients</dd>

<dd>A technique by which the scales are removed from the skin of a fish</dd>

<dt>Scamorze</dt>

<dt>Scamorzo</dt>

<dd>An Italian cheese usually made from whole cow's milk (although it was traditionally made from buffalo milk) </dd>

</dl>

html 5 list

لیست های تو در تو (nested lists)

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

مرورگرها در نمایش لیست تو در تو، فرورفتگی بیشتری نسبت به لیست والد به آن می دهند. در لیست های غیرترتیبی تو در تو معمولاً سبک گلوله ها هم تغییر خواهد کرد.

 <ul>

<li>Mousses</li>

<li>Pastries

<ul>

<li>Croissant</li>

<li>Mille-feuille</li>

<li>Palmier</li>

<li>Profiterole</li>

</ul>

</li>

<li>Tarts</li>

</ul>

html 5 list

لینک ها

  • ایجاد لینک ها بین صفحات
  • لینک دادن به سایت های دیگر
  • لینک های ایمیل

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

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

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

نوشتن لینک ها

لینک ها با استفاده از عنصر <a> ایجاد می شوند. کاربران می توانند بر روی هر چیزی بین تگ آغازین <a> و تگ پایانی </a> کلیک کنند. شما با استفاده از ویژگی href مشخص می کنید که به چه صفحه ای می خواهید پیوند دهید. اگر برای ویژگی href مقداری تعیین نشود سایت صفحه اصلی را نمایش می دهد.

  طراحی سایت را چگونه آغاز کنیم

<a href=”http://www.sitedevelops.com”> sitedevelops </a>

href=”http://www.sitedevelops.com”: این قسمت آدرس صفحه ای است که شما به آن لینک می دهید. که همان URL است (مخفف عبارت Uniform Resource Locator)

Espinas Web: این قسمت متنی است که کاربر روی آن کلیک می کند، و به آن متن پیوند گفته می شود. در صورت امکان متن پیوند باید توضیح دهد که کاربر با کلیک روی آن به چه آدرسی می رود (به جای اینکه نوشته شود «اینجا کلیک کنید»). مرورگرها بطور پیش فرض لینک ها را آبی رنگ و به صورت خط زیر نشان می دهند که می توان با CSS این ویژگی ها را تغییر داد.

نتیجه کد بالا در مرورگر به صورت زیر است:

html 5 list

که در صورت کلیک روی متن پیوند، کاربر به سایت خواهد رفت:

 

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

لینک به صفحات دیگر همان سایت

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

اگرهمه صفحات سایت در همان پوشه قرار داشته باشند، مقدار href فقط نام فایل است.

به مثال زیر توجه کنید:

<p>

<ul>

<li><a href="index.html">Home</a></li>

<li><a href="about-us.html">About</a></li>

<li><a href="movies.html">Movies</a></li>

<li><a href="contact.html">Contact</a></li>

</ul>

</p>

html 5 list

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

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

به وبلاگ توسعه دهندگان وب خوش آمدید .

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