آموزش طراحی سایت | آموزش html به زبان ساده

آموزش HTML – بخش هشتم

ساخت فهرست‌ با زبان HTML

این قسمت از آموزش HTML و آموزش طراحی سایت  را به فهرست‌ها اختصاص داده‌ایم و با انواع آن آشنا می‌شویم و باهم یاد می‌گیرم که چگونه فهرستمان را ویرایش کنیم. در ادامه به سراغ اجزا inline و block می‌روم و با تگ‌های <div> و <span> آشنا می‌شویم. بعدازاینکه با این دو جزء آشنا شدیم نحوه استفاده از اتریبیوت class در این اجزاء را یادمیگیرم.

فهرست‌ها به سه دسته تقسیم می‌شوند:

۱- unordered ( نامرتب )

۲- ordered ( مرتب )

۳- description list ( فهرست‌های توضیحی )

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

فهرست‌های unordered

تگ <ul> که از عبارت Unordered List گرفته‌شده است، یک لیست نامرتب را ایجاد می‌کند. منظور از نامرتب این است که آیتم‌هایی که در این دسته از فهرست‌ها قرار می‌گیرند شماره ندارند و ترتیب آن‌ها مهم نیست. در این نوع از فهرست‌ها، آیتم‌ها به‌صورت دیفالت با یک دایره توپر سیاه از هم جدا می‌شوند که می‌توان آن را به هر شکل دلخواهی تغییر داد. (به این دایره‌های توپر bullet میگویم.)

وقتی‌که تگ <ul> را نوشتیم، آیتم‌ها را با استفاده از تگ <li> (که از List Item گرفته‌شده است) درون لیست می‌ریزیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <p> لیست نامرتب به‌صورت زیر است </p>        

                   <ul>

                             <li> آیتم ۱ </li>

                             <li> آیتم ۲ </li>

                             <li> آیتم ۳ </li>

                             <li> آیتم ۴ </li>

                   </ul>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

گفتیم که می‌توان bullet ها را به شکل دلخواه تغییر داد. حتی می‌توان عکس کوچکی را جایگزین آن کرد. برای تغییر بولت ها از پراپرتی list-style-type استفاده می‌کنیم و مقدار آن را یکی از مقادیر زیر می‌دهیم:

  • Circle: نشانه آیتم را به دایره‌ای توخالی تغییر می‌دهد.
  • Disc: نشانه آیتم‌ها به‌صورت دایره توپر است که این حالت دیفالت مرورگرهاست.
  • Squere: نشانه آیتم‌ها را به مربع تغییر می‌دهد.
  • None: آیتم‌ها را بدون نشانه نمایش می‌دهد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <p> در لیست زیر نشانه‌گذاری آیتم‌ها به‌صورت دایره تو پر است که این حالت دیفالت است. یعنی می‌توان استایلی به آن اعمال نکرد. </p>

                   <ul style="list-style-type: disc;">

                             <li> آیتم ۱ </li>

                             <li> آیتم ۲ </li>

                             <li> آیتم ۳ </li>

                             <li> آیتم ۴ </li>

                   </ul>

                   <br>

                   <hr>

                   <p> در لیست زیر نشانه‌گذاری آیتم‌ها به‌صورت دایره توخالی است. </p>

                   <ul style="list-style-type: circle;">

                             <li> آیتم ۱ </li>

                             <li> آیتم ۲ </li>

                             <li> آیتم ۳ </li>

                             <li> آیتم ۴ </li>

                   </ul>

                   <br>

                   <hr>

                   <p> در لیست زیر نشانه‌گذاری آیتم‌ها به‌صورت مربع است. </p>

                   <ul style="list-style-type: square;">

                             <li> آیتم ۱ </li>

                             <li> آیتم ۲ </li>

                             <li> آیتم ۳ </li>

                             <li> آیتم ۴ </li>

                   </ul>

                   <br>

                   <hr>

                   <p> در لیست زیر آیتم‌ها بدون نشانه هستند. </p>

                   <ul style="list-style-type: none;">

                             <li> آیتم ۱ </li>

                             <li> آیتم ۲ </li>

                             <li> آیتم ۳ </li>

                             <li> آیتم ۴ </li>

                   </ul>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده
آموزش طراحی سایت | آموزش html به زبان ساده

فهرست‌های ordered

این فهرست‌ها با تگ <ol> ( مخفف عبارت Ordered List ) ساخته می‌شوند. آیتم‌ها هم با استفاده از تگ <li> در آن قرار می‌گیرند. نشانه‌گذاری در این فهرست‌ها به‌صورت دیفالت عدد می‌باشد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <p> لیست زیر یک لیست ترتیبی است </p>

                   <ol>

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

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

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

                             <li> آیتم چهارم </li>

                   </ol>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

همان‌طور که برای فهرست‌های نامرتب می‌توانستیم بولت ها را تغییر دهیم، برای فهرست‌های مرتب می‌توان با اتریبیوت type نوع نشانه‌گذاری را تغییر داد. مقادیری که این اتریبیوت می‌تواند بگیرد به‌صورت زیر است:

  • ۱: با این مقدار، آیتم‌ها با اعداد معمولی شماره‌گذاری می‌شوند.
  • A: در این حالت آیتم‌ها با حروف بزرگ نشانه‌گذاری می‌شوند.
  • a: در این حالت آیتم‌ها با حروف کوچک شماره‌گذاری می‌شوند.
  • I: در این حالت شماره‌گذاری به‌صورت اعداد رومی خواهد بود.
  • i: شماره‌گذاری آیتم‌ها به‌صورت اعداد رومی خواهد بود.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <p> در لیست زیر شماره‌گذاری آیتم‌ها به‌صورت عدد است که این حالت به‌صورت دیفالت است و نیازی به نوشتن استایل نیست </p>

                   <ol type="1">

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

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

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

                             <li> آیتم چهارم </li>

                   </ol>

                   <br>

                   <hr>

                   <p> در لیست زیر شماره‌گذاری آیتم‌ها به‌صورت حروف بزرگ انگلیسی است </p>

                   <ol type="A">

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

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

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

                             <li> آیتم چهارم </li>

                   </ol>

                   <br>

                   <hr>

                   <p> در لیست زیر شماره‌گذاری آیتم‌ها به‌صورت حروف کوچک انگلیسی است </p>

                   <ol type="a">

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

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

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

                             <li> آیتم چهارم </li>

                   </ol>

                   <br>

                   <hr>

                   <p> در لیست زیر شماره‌گذاری آیتم‌ها به‌صورت اعداد رومی است </p>

                   <ol type="I">

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

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

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

                             <li> آیتم چهارم </li>

                   </ol>

                   <br>

                   <hr>

                   <p> در لیست زیر شماره‌گذاری آیتم‌ها به‌صورت اعداد رومی است </p>

                   <ol type="i">

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

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

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

                             <li> آیتم چهارم </li>

                   </ol>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده
آموزش طراحی سایت | آموزش html به زبان ساده

توجه: همان‌طور که در مثال‌های بالا مشاهده کردید برای تغییر بولت ها در فهرست‌های نامرتب از اتریبیوت style و پراپرتی list-style-type استفاده کردیم و برای تغییر نحوه شماره‌گذاری آیتم‌ها در فهرست‌های منظم از اتریبیوت type استفاده کردیم.

فهرست‌های توضیحی

نوع دیگری از فهرست‌ها در طراحی وب سایت هستند که برای ارائه توضیحاتی در مورد لغاتی استفاده می‌شوند. این فهرست‌ها را فهرست‌های Description ( توضیحی و یا توصیفی ) می‌نامیم.

برای ایجاد این فهرست‌ها از ۳ تگ به شرح زیر استفاده می‌کنیم:

  • تگ <dl> که مخفف عبارت Description List است و برای ایجاد لیست توضیحی کاربرد دارد.
  • تگ <dt> که مخفف عبارت Description Term است و برای تعیین کردن لغت و یا عبارتی که می‌خواهیم در مورد آن توضیحاتی ارائه دهیم استفاده می‌شود.
  • تگ <dd> که در آن توضیحات کلمه و یا عبارت موردنظر، قرار می‌گیرد.

پس برای هر عبارت یک تگ <dt> و یک تگ <dd> داریم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <h2> لیست زیر یک لیست توضیحی است </h2>

                   <dl>

                             <dt> لغت ۱ </dt>

                             <dd> -توضیحات لغت اول </dd>

                             <dt> لغات ۲ </dt>

                             <dd> -توضیحات لغت دوم </dd>

                   </dl>

 

          </body>

</htm

sitesazan-8-14

فهرست‌های تودرتو

فهرست‌های تودرتو فهرست‌هایی هستند که در یک لیست، لیست دیگری قرار داشته باشد. درواقع یک و یا چند آیتم از لیست، لیست دیگری با تعداد آیتم دلخواه است. برای این کار باید یک لیست ( یا منظم و یا نامنظم. که انتخاب آن بستگی به خود شما دارد. ) ایجاد نمایید. در ادامه دریکی از <li> ها لیست دیگری قرار می‌دهیم. مثلا در مثال زیر یک لیست نامنظم ایجاد کرده‌ایم که در آن‌یک لیست منظم قرار داده‌ایم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <h2> لیست زیر یک لیست تو در تو است </h2>

                   <ul>

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

                             <li>

                                      <ol type="a">

                                                <li> آیتم ۱ </li>

                                                <li> آیتم ۲ </li>

                                      </ol>

                             </li>

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

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

                   </ul>

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

توجه داشته باشید که آیتم‌های فهرست‌ها هر المنتی یا جزء دلخواهی از سند HTML می‌تواند باشد.

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

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                      ul {

                             list-style-type: none;

                             margin: 0;

                             padding: 0;

                             overflow: hidden;

                             background-color: #99ff99;

                      }

                      li {

                             float: right; 

                             margin: 3px; 

                             padding: 3px;

 

                      }

 

                      li a {

                             display: block;

                             color: blue;

                             margin: 3px;

                             text-align: center;

                             text-decoration: none;

 

                      }

                      li a:hover {

                             background-color: #99ad83;

                             color: white;

                      }

                   </style>

 

          </head>

          <body>

                   <ul>

                             <li> <a href="#"> صفحه اصلی </a> </li>

                             <li> <a href="#"> آموزش </a> </li>

                             <li> <a href="#"> درباره ما </a> </li>

                             <li> <a href="#"> ارتباط با ما </a> </li>

 

                   </ul>

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

آشنایی با اجزاء Inline و Block در HTML

کلا اجزاء هر سند HTML بسته به نوع آن‌ها، به دو صورت block و inline نمایش داده می‌شوند. این شیوه نمایش به‌صورت دیفالت بوده و می‌توان با استفاده از CSS این صورت نمایش را به‌دلخواه تغییر داد.

اجزاء block-level

منظور از جزء block-level این است که وقتی این جزء را در صفحه قراردادیم، اجزاء بعدی که وارد شوند در خط بعد قرار می‌گیرند و در ادامه این اجزاء چیزی قرار نمی‌گیرد. همچنین اجزاء block-level از سمت چپ تا سمت راست صفحه را پوشش می‌دهند و به عبارتی تمام عرض صفحه را اشغال می‌کنند. برخی از اجزاء بلاک لول عبارت‌اند از <div> ، تگ‌های هدینگ ( تگ‌های عنوان ) ، تگ <p> و خیلی از تگ‌های دیگر.

اجزاء inline

جزء inline جزئی است که وقتی در صفحه قرار گیرد، می‌توان در ادامه آن اجزاء دیگری قرارداد و اجزاء جدید به خط بعدی نمی‌روند. تگ‌های <span> و <a> و <img> نمونه‌ای از این اجزاء هستند.

تاکنون صحبتی از تگ‌های <div>  و <span> به میان نیامده است. در ادامه همین مقاله با این دو تگ مهم نیز آشنا می‌شویم.

آشنایی با تگ <div>

درواقع div جزئی از یک سند HTML است که می‌توان اجزاء دیگر HTML را در آن قرارداد ( که اصطلاحا به این نوع اجزاء container میگوییم. به‌عبارت‌دیگر container جزئی است که اجزا دیگر را دربر می‌گیرد. ) و به این مجموعه تغییرات دلخواهی را اعمال کرد. این تغییرات را معمولا با style وارد کرده و یا کلاسی را برای دایو تعریف کرده و سپس با انتخاب آن، تغییراتی که می‌خواهی را به آن اعمال می‌کنیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>      

          </head>

          <body>

                   <!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>      

          </head>

          <body>

                   <div style="background-color: cyan; color: blue; padding: 15px;">

                             <h1> یک عنوان دلخواه </h1>

                             <p> فرض کنید این‌یک پاراگراف طولانی در صفحه است. عنوان و پاراگراف در یک دایو قرار داده‌شده‌اند. وقتی‌که تغییراتی را با سی اس اس به دایو اعمال کنیم، این تغییرات به هر دو جزء یعنی پاراگراف و عنوان، اعمال می‌شود. </p>

 

                   </div>

                   <p> حال این پاراگراف را بعد از دایو قرار می‌دهیم، مشاهده می‌کنیم که این پاراگراف دقیقا از خط بعد از دایو نمایش داده می‌شود و در ادامه آن قرار نمی‌گیرد </p>

          </body>

</html>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

آشنایی با تگ <span>

همانند div، span نیز یک جزء است که می‌تواند در یک پاراگراف برای انتخاب متن استفاده شود. درواقع این جزء نیز یک container است که می‌تواند قسمت‌هایی از متن پاراگراف‌ها را در بربگیرد و به این متن‌هایی که درون این جزء قرار می‌گیرند با استفاده از style و یا تعریف یک کلاس، تغییراتی را اعمال کرد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>      

          </head>

          <body>

                   <p> اگر این‌یک پاراگراف در صفحه باشد، و می‌خواهید به‌عنوان‌مثال <span style="color: blue;"> این لغت را انتخاب کرده و به آن‌ها تغییراتی را اعمال کنید </span> ، این لغات را درون تگ اسپن قرار می‌دهید و با استفاده از استایل و یا تعریف کلاس، هر سی اس اس را که بخواهید به آن اعمال می‌کنید. </p>

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

آشنایی با اتریبیوت class

اتریبیوت class را زمانی استفاده می‌کنیم که می‌خواهیم چند جزء از صفحه را انتخاب کنیم و برای آن‌ها CSS های خاصی را اعمال کنیم. فرق اتریبیوت class با id در این است که id فقط و فقط برای انتخاب یک جزء از همه‌ی اجزاء صفحه استفاده می‌شود ولی یک class یکسان را می‌توان برای چندین جزء به کاربرد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                             div.art1 { background-color: #ccff66;

                                      color: blue;

                                      padding: 20px;

                                                 }

                   </style>     

          </head>

          <body>

                   <!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>      

          </head>

          <body>

                   <p> فرض کنید که دایوهایی که در ادامه می‌بینید، سه مقاله مختلف باشند. می‌خواهیم سی اس اس هایی را به دایو اول و دایو سوم اعمال کنیم. برای این دو دایو کلاس یکسانی را تعیین می‌کنم. </p>

                   <hr>

                   <div class="art1">

                             <h1> عنوان اول </h1>

                             <p> پاراگرافی که در دایو اول قرار گرفته است </p>

                   </div>

                   <hr>

                   <div>

                             <h1> عنوان دوم </h1>

                             <p> پاراگرافی که در دایو دوم قرار گرفته است </p>

                   </div>

                   <hr>

                   <div class="art1">

                             <h1> عنوان سوم </h1>

                             <p> پاراگرافی که در دایو سوم قرار گرفته است </p>

                   </div>

          </body>

</html>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

اتریبیوت کلاس را می‌توان برای اجزاء inline هم به کاربرد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

                             span.imp { font-size: 200%;

                                       color: blue;

                                                 }

                   </style>     

          </head>

          <body>

                   <!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>      

          </head>

          <body>

                   <p> فرض کنیم که این جمله یک خط از یک پاراگراف است و می‌خواهیم <span class="imp"> این قسمت از جمله را انتخاب کنیم و به آن تغییراتی را اعمال کنیم. </span> برای این کار <span class="imp"> متن دلخواه را درون تگ اسپن قرار می‌دهیم </span> و برای آن کلاس دلخواهی را تعریف می‌کنیم. </p>

          </body>

</html>

 

          </body>

</html>

آموزش طراحی سایت | آموزش html به زبان ساده

[rating itemreviewed=” آموزش html – بخش ۸″ rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”22/11/2016″ best=”10″ worst=”0″]در این بخش از آموزش طراحی سایت و آموزش html به زبان ساده به ساخت لیست با زبان HTML و فهرست‌های unordered در html5 مپردازیم و….[/rating]

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

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