آموزش HTML قسمت دهم – "HTML Links & HTML Lists"
در قسمت قبلی عناصر نقل قول و استناد در html را توضیح دادیم و در این مطلب قصد دارم تا شما را با لیست ها و لینک ها در html و نحوه ی استفاده و کاربرد آن آشنا کنم پس در ادامه با ما همراه باشید.
HTML Links & HTML Lists
تقریباً در تمام صفحات وب لینک یافت می شوند. لینک ها به کاربران این امکان را می دهند که از صفحه به صفحه دیگر راه خود را کلیک کنند.
توجه: یک لینک لازم نیست متن باشد. یک لینک می تواند یک تصویر یا هر عنصر HTML دیگر باشد!
برای ایجاد یک لینک در HTML ما باید از تگ <a> استفاده نماییم، شکل کلی برای ایجاد یک لینک در HTML بصورت زیر می باشد :
<a href="https://oneclass.ir//">Visit oneclass.ir/!</a>
در دستور بالا کافیست در صفت href بجای url آدرس مقصد را نوشته و بجای متن Text In Here نیز یک متن دلخواه برای اینکه به کاربر نمایش داده شود و کاربر بتواند بروی آن کلیک نماید.
بطور پیش فرض ، پیوندها به صورت زیر در همه مرورگرها ظاهر می شوند:
- یک پیوند ناشناخته تأکید شده و آبی است
- یک پیوند بازدید شده دارای برجسته و بنفش است
- یک لینک فعال تأکید شده و قرمز است
البته پیوندها را می توان با CSS طراحی کرد تا جلوه دیگری به دست آورد!
HTML Links - Use an Image as a Link
برای ایجاد یک تصویر لینک دار یا تصویری که بتوان با کلیک بروی آن به مکانی دیگر منتقل شویم باید از تگ <img> درون تگ <a> استفاده نماییم.
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
از malto در اتربیوت href استفاده کنید برای ایجاد پیوندی که برنامه ایمیل را برای کاربر باز می کند (برای ارسال نامه ای به ایمیل جدید).
<a href="mailto:someone@example.com">Send email</a>
Button as a Link
برای استفاده از دکمه HTMLها در به عنوان پیوند ، باید کد JavaScript استفاده کنید.جاوا اسکریپت به شما امکان می دهد آنچه را که در رویدادهای خاص مانند کلیک یک دکمه اتفاق می افتد ،مشخص کنید.
<button onclick="document.location='default.asp'">HTML Tutorial</button>
HTML Lists
در این قسمت از آموزش HTML میخواهیم با لیست ها در این زبان آشنا شویم، لیست یا List در HTML به سه دسته تقسیم می شوند،
- لیست نامرتب یا Unordered list
- لیست مرتب یا Ordered List
- لیست دارای توضیحات یا Description List
Unordered HTML List
یک لیست نامرتب با تگ <ul> شروع می شود. هر مورد لیست با تگ <li> شروع می شود.موارد لیست به طور پیش فرض با گلوله (دایره های سیاه سیاه) مشخص می شوند.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered HTML List
لیست مرتب شده با تگ <ol> شروع می شود. هر مورد لیست با تگ <li> شروع می شود.موارد لیست به طور پیش فرض با شماره مشخص می شوند.
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML Description Lists
HTML همچنین از لیست هایی که دارای توضیحات می باشند نیز پشتیبانی میکند، برای ایجاد یک لیست با توضیحات در HTML باید از تگ <dl> و برای ایجاد آیتم ها از تگ <dt> و برای ایجاد توضیحات از تگ <dd> استفاده کرد.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
ممنون از اینکه با ما همراه بودید ،اگر سوال یا پیشنهاد خاصی دارید می توانید از قسمت نظرات آنها را با ما در میان بگذارید.