طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

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

آموزش HTML | آموزش HTML5

در بخش  هشتم آموزش HTML با مباحث زیر آشنا خواهیم شد:

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

لیست ها در HTML

لیست ها به سه دسته تقسیم می شوند که عبارتند از: لیست های نامرتب ( unordered )، لیست های مرتب ( ordered ) و لیست های تشریحی ( description ) که در ادامه به بررسی این لیست ها می پردازیم.

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

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

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

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

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

  • circle: نشانه آیتم را به دایره ای تو خالی تغییر می دهد.
  • disc: نشانه آیتم ها به صورت دایره توپر است که این حالت پیش فرض مرورگرهاست.
  • square: نشانه آیتم ها را به مربع تغییر می دهد.
  • none: آیتم ها را بدون نشانه نمایش می دهد.

یک مثال ساده را با هم بررسی می نماییم:

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

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

لیست های مرتب

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

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

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

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

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

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

همانطور که در مثال های بالا مشاهده کردید برای تغییر بولت ها در لیست های نامرتب از خصیصه style و ویژگی list-style-type استفاده کردیم و برای تغییر نحوه شماره گذاری آیتم ها در لیست های مرتب از خصیصه type استفاده کردیم.

لیست های تشریحی

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

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

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

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

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

لیست های تودرتو

لیست های تودرتو زمانی ایجاد می شوند که یک و یا چند آیتم از یک لیست، لیست دیگری باشد. در مثال زیر یک لیست تودرتو را خواهید دید:

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

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

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

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

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

بلوک ها و المان های درون خطی در HTML

کلا المان های هر سند HTML بسته به نوع آنها، به دو صورت بلوک ( block ) و درون خطی ( inline ) نمایش داده می شوند. این شیوه نمایش به صورت پیش فرض بوده و می توان با استفاده از CSS این نحوه نمایش را به دلخواه تغییر داد.

بلوک ها

منظور از بلوک این است که وقتی این المان را در صفحه قرار دادیم، المان های بعدی که وارد شوند در خط بعد قرار می گیرند و در ادامه این المان ها چیزی قرار نمی گیرد یعنی از سمت چپ تا سمت راست صفحه را پوشش می دهند و به عبارتی تمام عرض صفحه را اشغال می کنند. برخی از المان های این دسته عبارتند از <div>  ، تگ های سر صفحه ، تگ <p>  و … .

المان های درون خطی

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

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

تگ <div>

در واقع دیو ( div ) المانی از یک سند HTML است که می توان المان های دیگر را در آن قرار داد ( که اصطلاحا به این نوع المان ها، در برگیرنده ( container ) می گوییم. ). دیو ها در حالت عادی به خصیصه ای نیاز ندارند ولی معمولا از خصیصه های style و class برای انتخاب و سبک دهی به آنها استفاده می شود. زمانی که به یک دیو سبک دهی می کنیم، آن سبک ها برای المان های درون دیو نیز تعریف می شوند:

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

تگ <span>

span نیز یکی از المان های HTML است و می تواند متن و محتوایی را در بربگیرد. برای سبک دهی به این المان نیز، از خصیصه های style و برای انتخاب آن از خصیصه class می توانیم استفاده کنیم. به این ترتیب می توان بخش هایی از محتوای متنی را انتخاب و سبک دهی کرد.

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

خصیصه class در HTML

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

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

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

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

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

نوشته های مرتبط

دیدگاه ‏خود را بنویسید