درخواست های ارتباط
جستجو تنظیمات
لیست دوستان من

آموزش گام به گام HTML قسمت دوازدهم: لیست ها در HTML

2 نظرات

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


لیست نامرتب: برای ساخت این لیست ما به دو تگ Ul و li احتیاج داریم، تگ li داخل تگ ul قرار می گیرد. به مثال زیر توجه کنید:


<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>

تگ ul مشخص کننده نوع لیست (مرتب / نامرتب) بودن آن می باشد. Ul مخفف Unordered List می باشد. این تگ دارای یک استایل مهم به نام List-Style-type می باشد که دارای چهار مقدار است.


Disc: حالت پیش فرض لیست است، آیتم های لیست با یک توپ پررنگ مشخص می شود.


Circle: دایره توخالی


Square: مربع


None: بدون هیچ علامتی


برای استفاده از این استایل ها کافی است که دستورات زیر استفاده کنید.


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

لیست مرتب: ساختار کد نویسی این لیست ها کاملا شبیه لیست قبلی می باشد با این تفاوت که بجای تگ آغازین ul از تگ ol استفاده می شود. در ظاهر نیز تفاوت در آن است که لیست بندی با شکلهای دایره و مربع نمایان نمی شود بلکه از اعداد و حروف استفاده می کند.


تگ ol دارای خاصیتی به اسم type می باشد که نوع لیست بندی را مشخص می کند، این خاصیت دارای 5 مقدار (1 ، A ، a ، I ، i) می باشد.


<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

لیست های توضیحی: این نوع لیست برای توضیح درباره ی یک آیتم خاص مورد استفاده قرار می گیرد. برای مثال شما یک عنوان دارید و در زیر آن عنوان می خواهید توضیحاتی درباره آن عنوان بنویسید برای این کار کافی است از تگ های dl بهره ببرید. تگ dl دارای تگ های dt برای عنوان نوشته و dd برای توضیح درباره عنوان می باشد. به مثال زیر توجه کنید:


<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl> 

لیست ها تودرتو: همانطور که می دانید در اچ تی ام ال تگ ها می توانند در داخل هم قرار بگیرند، برای مثال متنی در عین آن که از تگ b استفاده می کند از تگ i نیز می تواند بهره مند باشد. لیست های تودرتو نیز می توانند این خاصیت را داشته باشند، برای این کار کافی است که از تگ ul یا ol دو بار استفاده شود. به مثال زیر توجه کنید.


<!Doctype HTML>
<html>
	<body>
		<ul>
			<li>Home</li>
			<li>Blog
				<ul>
					<li>Sport</li>
					<li>Music</li>
					<li>Movie</li>
				</ul>
			</li>
			<li>Contact us</li>
	</body>
</html>

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


<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333333;
}

li {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html> 

نویسنده : ارسطو عباسی


منبع : انجمن تخصصی فناوری اطلاعات ایران


هرگونه نشر و کپی برداری بدون ذکر منبع و نام نویسنده دارای اشکال اخلاقی می باشد


آیا این مطلب را پسندیدید؟
ردیف عنوان قیمت
1 آموزش گام به گام HTML قسمت اول : معرفی HTML و آشنایی کلی رایگان
2 آموزش گام به گام HTML قسمت دوم : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش گام به گام HTML قسمت سوم : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش گام به گام HTML قسمت چهارم : عنوان بندی و تگ های جدید رایگان
5 آموزش گام به گام HTML قسمت پنجم : استایل و فرمت متن ها رایگان
6 آموزش گام به گام HTML قسمت ششم : نقل قول و درج توضیحات رایگان
7 آموزش گام به گام HTML قسمت هفتم : استفاده از رنگ ها در HTML رایگان
8 آموزش گام به گام HTML قسمت هشتم : CSS چیست و چگونه بصورت مقدماتی با آن کار کنیم ؟ رایگان
9 آموزش گام به گام HTML قسمت نهم : لینک ها در HTML رایگان
10 آموزش گام به گام HTML قسمت دهم: تصاویر در HTML رایگان
11 آموزش گام به گام HTML قسمت یازدهم: جداول در HTML رایگان
12 آموزش گام به گام HTML قسمت دوازدهم: لیست ها در HTML رایگان
13 آموزش گام به گام HTML قسمت سیزدهم: بلاک و کلاس ها در HTML رایگان
14 آموزش گام به گام HTML قسمت چهاردهم: قاب بندی در HTML رایگان
15 آموزش گام به گام HTML قسمت پانزدهم: Head در HTML رایگان
16 آموزش گام به گام HTML قسمت هفدهم: چند قانون ساده در HTML رایگان
17 آموزش گام به گام HTML قسمت هجدهم: فرم ها در HTML رایگان
18 آموزش گام به گام HTML قسمت نوزدهم: کنترل ها و (اجزای فرم در HTML5) رایگان
19 آموزش گام به گام HTML قسمت بیستم: انواع ورودی ها در html رایگان
20 آموزش گام به گام HTML قسمت بیست و یک: خاصیت های تگ input در HTML رایگان
21 آموزش گام به گام HTML قسمت بیست و دوم: چندرسانه/ویدیو و صدا رایگان
22 آموزش گام به گام HTML قسمت بیست و سوم (پایانی) - مدیریت بهتر لایه های وب رایگان
  • سلام ببخشید برای من یه سئوالی پیش اومده اینکه مقادیر Square در مقدار پایین جواب نمی دهد؟



    
    <ul style="list-style-type=Square;">
    <li>home</li>
    <li>blog</li>
    <li>aabout</li>
    </ul>
    
  • خیلی متاسفم بابت دیر جواب دادنم. بجای استفاده از علامت = باید از : استفاده کنید به صورت زیر:


    <ul style="list-style-type=Square;">
    <li>home</li>
    <li>blog</li>
    <li>aabout</li>
    </ul>
    

برای ارسال نظر ابتدا به سایت وارد شوید

arrow