جلسه هفتم : آشنایی با تگ های کاربردی HTML – قسمت دوم

جلسه هفتم : آشنایی با تگ های کاربردی HTML – قسمت دوم

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

تگ اول : <a>

بعد از تگ div یکی دیگر از تگ های کاربردی که در html مورد استفاده قرار گرفته می شود همان تگ مربوطه یعنی تگ <a> می باشد و شما می توانید خیلی راحت با استفاده از این تگ یک لینک در سایت خود ایجاد کنیم و منو های لینک دار یا به تصاویر های سایت خود لینک دهیم و یا دکمه های دانلود بسازیم و آن را لینک دهی کنیم و دیگر موارد …

نکته : تگ لینک یا همان تگ مربوط به لینک دادن تگ a یک تگ inline می باشد که شما می توانید به راحتی با استفاده از این تگ یک عالمه لینک بسازید و راستی این تگ یک نوع تگ Inline می باشد و شما می توانید آنها را در کنار یک دیگر نمایش دهید و راستی تگ لینک یک نوع تگ بسته می باشد

حالت کلی تگ a به شکل کد نویسی زیر می باشد که به شما پیشنهاد می دهم تا این کد را به ذهن بسپارید و تمرین کنید :

<a href="http://google.com" target="_blank" rel="nofollow">وبسایت گوگل</a>

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

تگ دوم : <ul>

برای ساخت منو از این تگ استفاده می شود و اکثریت منو ای سایت ها با این تگ ul ساخته می شود و این کد مانند زیر می باشد

<ul>
<li/>شماره یک<li>
<li/>شماره دو<li>
<li/>شماره سه<li>
</ul>

تگ سوم : <ol>

برای ساخت لیست اعدادی یا شمارشی از این تگ برای ساخت منو های خود استفاده می کنیم و شما می توانید مانند کد زیر را در سایت خود بنویسید و از لیست اعدادی یا شمارشی خود لذت ببرید

<ol>
<li/>شماره یک<li>
<li/>شماره دو<li>
<li/>شماره سه<li>
<ol/>

تگ چهارم : <span>

خیلی وقت ها می خواهیم در سایت خود یک متن یا چند کلمه را از بقیه متمایز کنیم و برای این موضوع از تگ به نام تگ span باید استفاده کنیم و این تگ یک نوع تگ inline می باشد و از این تگ به خودی خودی هیچ تغییری نمی کند و فقط با استایل دادن به این Span می توانیم تغییراتی را که دوست داریم در آن اعمال کنیم مانند کد زیر که مشاهده می کنید

<div class="box">
این یک متن تستی است که <span>میهن آکادمی </span> قرار گرفته است.
</div>
<style>
.box span {
  color: red;
}

خب در این کد بالا متن ( این یک متن تستی است که اینجا قرار گرفته است ) را نمایش می دهد و رنگ میهن آکادمی هم قرمز می باشد و در این جلسه تا همین قسمت برای شما کافیست در جلسه بعدی می بینمتون و راستی این چند خط کد را تمرین کنید تا یاد بگیرید که چطور از هر کدام استفاده کنید ، موفق و پیروز باشید