وبلاگ چیتا وب


blog post
در این بخش به کدهایی که مربوط به لیست ها و لینک ها هست میپردازیم، تگ های ul, li, a تگ های بسیار پرکاربرد هستند و در بحش های مختلف وب سایت از آنها استفاده میشود. این بخش داری تمرین است که فایل آن برای دانلود در اختیارتان قرار داده شده است.

در بخش های قبلی ، تگ های h1 , … h6 ، p و br را با هم بررسی کردیم. و حالا میخواهیم تگ های بشتری را معرفی کنیم.

تگ <a></a>:

از این تگ زمانی استفاده میشود که بخواهیم به صفحه ی دیگری لینک کنیم و آن را به شکل <a></a> مینویسیم ،این تگ از ویژگی href استفاده میکند:

<!DOCTYPE html>
<html lang="en">
    <head>
         <meta charset="UTF-8">
         <title>Document</title>
    </head>
    <body>
       
       <a href="google.com"></a>
        
    </body>
 </html>

ویژگی href آدرس صفحه ای را که میخواهیم با کلیک کردن به آنجا رجوع کنیم را دربر میگیرد، می توانیم بین دو تگ باز و بسته a جمله ای را بنویسیم مثلا:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
       
       <h1> This is my first Link </h1>
       <a href="https://www.google.com/">Click Here</a>
        
    </body>
 </html>
my first link result

همانطور که در تصویر بالا میبینید، جمله ی click here آبی رنگ شده و زیر آن خطی کشیده شده است؛ به این دلیل است که مرورگر به طور پیش فرض برای تگ a این استایل ها را قرار میدهد( که مربوط به بخش CSS است و در بخش های بعدی به آن میرسیم)
و حالا اگر به تگ a ویژگی ( attribute ) target="_blank" اضافه کنید می بینید که با کلیک بر روی لینک، صفحه ی گوگل در تب جدید باز میشود:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
       
       <h1> This is my first Link </h1>
       <a href="https://www.google.com/" target="_blank">click here</a>
        
    </body>
 </html>
goole page

اگر جلوی href علامت # را بگذاریم به معنی همین صفحه ای است که درونش قرار داریم؛ یعنی به همان صفحه ای که طراحی کرده ایم رجوع میکنیم.

تگ <ol></ol> :

تگ ol مخفف Ordered List است برای لیست های ترتیبی کاربرد دارد؛ به طور مثال لیست هایی که شماره گذاری میشوند و میخواهیم به ترتیب شماره ها پشت سر هم قرار بگیرند.
بهتر است که بدانید در بین این تگ، تگ های "li" قرار میگیرند که مربوط به هر ردیف از این لیست میباشد، به کد زیر توجه کنید:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
       
       <h1> this is my first Odered List</h1>
       <ol> 
           <li> number one. </li>
           <li> number tow. </li>
           <li> number three. </li>
       </ol>
        
    </body>
 </html>
ordered list

همان طور که در تصویر میبینید، بدون آن که در کدHTML شماره ها را بنویسیم، فقط با گذاشتن تگ ol مرورگر لیست ترتیبی را برایمان ایجاد کرده و به صورت شماره دار آن را نمایش می دهد.

تگ <ul></ul> :

این تگ برخلاف تگ ol یک لیست بدون ترتیب را برایمان ایجاد میکند، و مخفف unordered list است.
منظور از بدون ترتیب این است که لیست ها بدون شماره نمایش داده میشوند، به کد زیر و تفاوت بین این دو تگ دقت کنید:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
       <h1> this is my first Odered List</h1>
       <ol> 
           <li> number One. </li>
           <li> number Tow. </li>
           <li> number Three. </li>
       </ol>
       
       <h1> this is my first Unodered List</h1>
       <ol> 
           <li> This is a list. </li>
           <li> This is another list. </li>
           <li> This is the last list. </li>
       </ol>
        
    </body>
 </html>
ordered list
نکته
گفته شد که تگ li باید درون تگ های ol و یا ul قرار بگیرد؛ یعنی زبان HTML یک زبان تودرتو (nested ) است، و تگ ها میتوانند درون تگ دیگری قرار بگیرند.

تگ های پدر و تگ های فرزند:

تگی که درون تگ دیگری قرار میگیرد تگ فرزند و تگ بیرونی تگ پدر و یا والد گفته میشود، مثلا در کد بالا تگ ol تگ پدر و تگ li تگ فرزند میباشد؛ و همینطور تگ ul تگ پدر و li درون آن، تگ فرزند است، پس میتوان گفت تگ body والد همه ی تگ های درونیش میباشد، و تگ html والد همه ی آن ها چون دربرگیرنده ی همه ی آن ها ست!!

تمرین
یک لیست بدون ترتیب از لینک هایی که در تب های جداگانه باز میشوند ایجاد کنید؛ و در بالای صفحه یک لیست ترتیبی از عنوان های دلخواه تان بسازید. دانلود کد تمرین

این مطلب را به اشتراک بگذارید

about author

ثمین یدالهی

فارغ التحصیل مهندسی IT

دیدگاه ها

دیدگاهی بگذارید: