در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

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

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

لیست نامرتب: برای ساخت این لیست ما به دو تگ 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> 

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

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

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

#آموزش_قدم_به_قدم_html #لیست_ها_در_html #آموزش_تگ_ها_در_html #آموزش_html #آموزش_گام_به_گام_html #استفاده_از_تگ_های_html #آموزش_مقدماتی_html
عنوان
1 آموزش HTML گام به گام قسمت 1 : معرفی و آشنایی کلی رایگان
2 آموزش HTML گام به گام قسمت 2 : دستورات مقدماتی و معرفی ساختار رایگان
3 آموزش HTML گام به گام قسمت 3 : صفحات یا Attributes و نکات مربوطه رایگان
4 آموزش HTML گام به گام قسمت 4 : عنوان بندی و تگ های جدید رایگان
5 آموزش HTML گام به گام قسمت 5 : استایل و فرمت متن ها رایگان
6 آموزش HTML گام به گام قسمت 6 : نقل قول و درج توضیحات رایگان
7 آموزش HTML گام به گام قسمت 7 : استفاده از رنگ رایگان
8 آموزش HTML گام به گام قسمت 8 : CSS چیست و مقدمات آن رایگان
9 آموزش HTML گام به گام قسمت 9 : لینک ها رایگان
10 آموزش HTML گام به گام قسمت 10 : تصاویر رایگان
11 آموزش HTML گام به گام قسمت 11 : جداول رایگان
12 آموزش HTML گام به گام قسمت 12 : لیست ها رایگان
13 آموزش HTML گام به گام قسمت 13 : بلاک و کلاس ها رایگان
14 آموزش HTML گام به گام قسمت 14 : قاب بندی رایگان
15 آموزش HTML گام به گام قسمت 15 : تگ عنوان یا Head رایگان
16 آموزش HTML گام به گام قسمت 16 : چند قانون ساده رایگان
17 آموزش HTML گام به گام قسمت 18 : فرم ها رایگان
18 آموزش HTML گام به گام قسمت 19 : کنترل ها و اجزای فرم رایگان
19 آموزش HTML گام به گام قسمت 20 : انواع ورودی رایگان
20 آموزش HTML گام به گام قسمت 21 : خاصیت های تگ input رایگان
21 آموزش HTML گام به گام قسمت 22 : چندرسانه/ویدیو و صدا رایگان
22 آموزش HTML گام به گام قسمت 23 : مدیریت بهتر لایه های وب رایگان
زمان و قیمت کل 0″ 0
2 نظر
sinaasadollah

سلام ببخشید برای من یه سئوالی پیش اومده اینکه مقادیر 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>
نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....