طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

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

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

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

لیست ها در HTML

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

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
			
	</head>
	<body>

		<p> لیست نا مرتب به صورت زیر است </p>	
		<ul>
			<li> آیتم 1 </li>
			<li> آیتم 2 </li>
			<li> آیتم 3 </li>
			<li> آیتم 4 </li>
		</ul>
			
	</body>
</html>

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

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
			
	</head>
	<body>

		<p> در لیست زیر نشانه گذاری آتمها به صورت دایره تو پر است که این حالت دیفالت است. یعنی می توان استایلی به آن اعمال نکرد. </p>
		<ul style="list-style-type: disc;">
			<li> آیتم 1 </li>
			<li> آیتم 2 </li>
			<li> آیتم 3 </li>
			<li> آیتم 4 </li>
		</ul>
		<br>
		<hr>
		<p> در لیست زیر نشانه گذاری آیتمها به صورت دایره تو خالی است. </p>
		<ul style="list-style-type: circle;">
			<li> آیتم 1 </li>
			<li> آیتم 2 </li>
			<li> آیتم 3 </li>
			<li> آیتم 4 </li>
		</ul>
		<br>
		<hr>
		<p> در لیست زیر نشانه گذاری آیتمها به صورت مربع است. </p>
		<ul style="list-style-type: square;">
			<li> آیتم 1 </li>
			<li> آیتم 2 </li>
			<li> آیتم 3 </li>
			<li> آیتم 4 </li>
		</ul>
		<br>
		<hr>
		<p> در لیست زیر آیتمها بدون نشانه هستند. </p>
		<ul style="list-style-type: none;">
			<li> آیتم 1 </li>
			<li> آیتم 2 </li>
			<li> آیتم 3 </li>
			<li> آیتم 4 </li>
		</ul>

	</body>
</html>

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

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

لیست های مرتب

این لیست ها با تگ <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 نوع نشانه گذاری را تغییر داد. مقادیری که این خصیصه می تواند بگیرد به صورت زیر است:

  • 1: با این مقدار، آیتم ها با اعداد معمولی شماره گذاری می شوند.
  • 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 ) می نامیم.

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

  • تگ <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> لغت 1 </dt>
			<dd> -توضیحات لغت اول </dd>
			<dt> لغت 2 </dt>
			<dd> -توضیحات لغت دوم </dd>
		</dl>

	</body>
</html>

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
			
	</head>
	<body>

		<h2> لیست زیر یک لیست تو در تو است </h2>
		<ul>
			<li> آیتم اول </li>
			<li>
				<ol type="a">
					<li> آیتم 1 </li>
					<li> آیتم 2 </li>
				</ol>
			</li>
			<li> آیتم دوم </li>
			<li> آیتم سوم </li>
		</ul>
	</body>
</html>

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

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

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

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

<!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 به زبان ساده

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

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

بلوک ها

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

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

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

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

تگ <div>

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

<!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>

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

<!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 در HTML

خصیصه 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 به زبان ساده

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

<!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>

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

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

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