طراحی سایت

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

در سلسله آموزشهای طراحی سایت آنلاینر به لیست های ترتیبی و غیر ترتیبی پرداختیم.

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

لیستی از لینک ها در HTML

میخواهیم در این آموزش مثال های قبل را کمی حرفه ای تر دنبال کنیم. برای اینکه هر کدام از گزینه های لیست را به لینک تبدیل کنیم تنها کاری که لازم است انجام دهیم اینست که متن مورد نظر را در تگ <a> قرار دهید. به مثال زیر توجه کنید.

[html]

<html>

<head>

</head>

<body>
فهرست
<ul>
<li>متن شماره 1</li>
<li>متن شماره 2</li>
<li>لیست سایت ها
<ol>
<li><a href="http://www.google.com">گوگل</a></li>
<li><a href="http://www.yahoo.com">یاهو </a></li>
<li><a href="http://www.msn.com">مایکروسافت </a></li>
<li><a href="http://www.bbc.com"> بی بی سی</a></li>
<li><a href="http://www.mamma.com"> ماما</a></li>
</ol>
</li>
<li>متن شماره 4</li>
<li>متن شماره 5</li>
</ul>

</body>

</html>

[/html]

خروجی کد بالا بصورت زیر است:
فهرست

متن شماره 1
متن شماره 2
لیست سایت ها
متن شماره 4
متن شماره 5

لیست های اختصاصی در HTML

بنا به نیاز کاربر میتوان درون تگ li هر عامل دیگری را قرار داد. ولی نکته هایی هست که باید به خوبی رعایت کنید در غیر اینصورت ممکن است نتیجه مورد نظر خود را در صفحه وب کسب نکنید. نکته ای که در این مورد بسیار حائز اهمیت است این است که اگر میخواهید در تگ li از عاملی استفاده کنید که دارای عرض و ارتفاع است باید خصوصیتی را به تگ li بدهید تا li نیز دارای عرض و ارتفاع گردد زیرا این تگ بصورت پیش فرض جزو تگ های همسطح میباشد و فاقد عرض و ارتفاع میباشد.

کد زیر تگ li را غیر همسطح و دارای عرض و ارتفاع می کند.

[html]

این یک متن تست است.

</li>

[/html]

حال میتوانید به جای متن در تگ li از عکس و یا عامل های غیر همسطحی که مد نظر دارید استفاده نمایید.

برای اینکه یک عامل همسطح را به بک عامل غیر همسطح تبدیل کنید، تنها کاری که لازم است انجام دهید این است که صفت display:block را به عامل همسطح اضافه کنید.

در آموزش بعد به فرم ها در html میپردازیم.

با آنلاینر همراه شوید …