مقالات مرتبط
در این جلسه از آموزش تگ های HTML به معرفی تعداد دیگری از تگ های پرکاربرد و ویژگی های (attribute) آن ها می پردازیم.
ol & ul & li Tags
در صفحات Html ، می توان با استفاده از تگ های مشخص لیست های ترتیبی و بدون ترتیب ( نشانه ای) را ایجاد کرد .
لیست های ترتیبی – Ordered List – ol
یک لیست ترتیبی ، مجموعه ای از موارد و آیتم های متفاوت در مورد یک موضوع خاص است که در ابتدای خط تعریف هر آیتم ، یک شماره یا حرف ( نماد نشانه گذاری ) قرار گرفته ، که با معرفی هر آیتم جدید شمارنده یا حرف یک واحد افزایش می یابد .
برای ایجاد لیست های ترتیبی از تگ < ol > مخفف عبارت ( Ordered List ) به معنای لیست های ترتیبی استفاده می شود . هر یک از آیتم های لیست توسط یک تگ درونی < li > در تگ< ol > تعریف می شود . متن بین تگ باز و بسته < li > ، عنوان یا متن آن آیتم است .
نمونه کد و خروجی
ویژگی های تگ ol
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| compact | compact | در HTML5 پشتیبانی نمی شود. مشخص می کند که لیست باید کوچکتر از حد نرمال نمایش داده شود. |
| reversed | reversed | مشخص می کند که لیست به صورت نزولی مرتب شود.(۹ و ۸ و ۷ و…) |
| start | number | مقدار شروع لیست مرتب را مشخص می کند. |
| type | ۱ A a I i |
مشخص می کند که از چه نوع نشانگری در لیست استفاده شود. |
نمونه کد و خروجی
لیست های بدون ترتیب – Unordered List – ul
یک لیست بدون ترتیب (نشانه ای) ، مجموعه ای از موارد و آیتم های متفاوت در مورد یک موضوع خاص است که در ابتدای خط تعریف هر آیتم ، یک نشانه ( Bullet ) قرار می گیرد .
برای ایجاد لیست های نشانه ای از تگ < ul > مخفف عبارت ( Unordered List ) به معنای لیست های بدون ترتیب استفاده می شود . هر یک از آیتم های لیست توسط یک تگ درونی < li > در تگ< ol > تعریف می شود . متن بین تگ باز و بسته < li > ، عنوان یا متن آن آیتم است .
نمونه کد و خروجی
ویژگی های تگ ul
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| type | disc circle square none |
مشخص می کند که از چه نوع نشانگری در لیست استفاده شود. disc : دایره های توپر circle : دایره های توخالی square : مربع توپر none : نشانه ای نمایش داده نشود |
نمونه کد و خروجی
تگ li
تگ <li> آیتم های یک لیست را تعریف می کند که در لیست های ترتیبی <ol> و لیست های غیر ترتیبی <ul>، و در فهرست منو <menu> استفاده می شود که در نمونه کدهای توضیح داده شده با نحوه به کارگیری آن آشنا گردیدید.
Br & P Tags
تگ های پاراگراف P , Br برای تراز بندی متون و جملات درون صفحات کاربرد زیادی دارند.
تگ P یا پاراگراف :
متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید و یا نوشتن متنی بیرون از تگ P، پاراگراف بعدی به سطر بعد می رود.
نمونه کد و خروجی
ویژگی های تگ P
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| align | left right center justify |
در HTML5 پشتیبانی نمی شود. مشخص می کند که متن داخل پاراگراف در چه جهتی تراز شود. |
نمونه کد و خروجی
تگ Br :
تگ Br در نقش enter در Word می باشد بدین صورت که خط جدیدی درون پاراگراف ایجاد میکند و نوشته ی بعد از آن را به سطر جدید می برد .
نکته ۱ : استفاده ی زیاد از این تگ مناسب نیست و بهتر است با استفاده از تگ P عمل انتقال به خط جدید انجام گردد ، دلیل اصلی آن کند نمودن سایت در استفاده های زیاد از این تگ می باشد.
نکته ۲ : این تگ، تگ پایانی ندارد.
تگ img
این تگ نیز از مهمترین تگ ها در طراحی وب سایت می باشد.با استفاده از این تگ شما می توانید عکس دلخواه را به وب سایت خود اضافه کنید.توجه داشته باشید که سایز عکس نباید زیاد باشد.
ویژگی های تگ img
| خصوصیت | مقدار | توضیحات |
|---|---|---|
| align | top bottom middle left right |
در HTML5 پشتیبانی نمی شود. نحوه تراز بندی <img> نسبت به عناصر اطراف را مشخص می کند. |
| alt | text | خصوصیت alt یک alternate text یا “متن جایگزین” را برای یک تصویر مشخص می کند. |
| border | pixels | در HTML5 پشتیبانی نمی شود. ضخامت (border) اطراف عکس را مشخص می کند. |
| crossorigin | anonymous use-credentials |
اجازه می دهد با استفاده از canvas که تصاویری که متعلق به سایت های سوم شخص است و اجازه دسترسی متقابل به مبدا را می دهند، نمایش داده شود. |
| height | pixels | برای مشخص کردن طول یک عکس استفاده می شود. |
| hspace | pixels | در HTML5 پشتیبانی نمی شود. فضای خالی طرف راست و چپ تصویر را مشخص می کند. |
| ismap | ismap | تصویر را به عنوان یک image-map سمت سرور مشخص می کند. |
| longdesc | URL | در HTML5 پشتیبانی نمی شود. مسیر فایلی که اطلاعات کاملی در رابطه با عکس مورد نظر نگهداری می کند را مشخص می کند. |
| src | URL | URL تصویر را مشخص می کند. |
| usemap | #mapname | یک تصویر را به عنوان یک image-map سمت کاربر مشخص می کند. |
| vspace | pixels | در HTML5 پشتیبانی نمی شود. فضای خالی بالا و پایین یک تصویر را مشخص می کند. |
| width | pixels | برای مشخص کردن عرض یک عکس استفاده می شود. |
نمونه کد و خروجی
تگ a
تگ برای پیوند (لینک ) یک صفحه به صفحه ای دیگر استفاده می شود. از لینک ها در HTML ، برای پیوند به یک صفحه دیگر در هر جای وب ، پیوند به نقطه یا مکانی در داخل همان صفحه یا صفحه دیگر و یا یک فایل خارجی مثل عکس ،موسیقی ، فیلم و … به سند وب استفاده می شود . شکل کلی ایجاد یک پیوند در (HyperLink) در HTML به صورت زیر است :
< a href=”URL” > متن عنوان پیوند < /a >
به طور پیش فرض، لینک ها در مرورگرها به یکی از روش های زیر، ظاهر می شوند:
- لینک مشاهده نشده، زیر خط دار و آبی است
- لینک بازدید، زیر خط دار و بنفش است
- لینک فعال، زیر خط دار و به رنگ قرمز است
ویژگی های تگ a
در تگ <a> مهم ترین ویژگی href است که نشان می دهد مقصد لینک کجاست.
خاصیت href که از نوع URL است برای تعیین مقصد پیوند به کار می رود .این خاصیت شامل آدرس صفحه یا فایلی است که با کلیک بر روی آن پیوند باز خواهد شد . متن عنوان ، متنی است رنگی و خط زیر دار که نشان دهنده پیوند است .
| خواص مهم | ||
| نام خاصیت | نوع خاصیت | شرح |
| Charset | Charset – encoding | مشخص کننده نوع کدینگ کاراکترهای صفحه مقصد است . |
| Coords | ابتدا به خاصیت shape توجه کنید . مشخص کننده مختصات نقاط مختلف یک چند ضلعی (مربع ، مستطیل و … ) برای تعیین قسمتی از یک عکس یا نقشه به عنوان ناحیه ای قابل کلیک شدن برای ایجاد پیوند است که دارای حالت های زیر است :rect : مربع . تعیین کننده مختصات چهار نقطه مختلف یک مربع یا مستطیلcoords =left,top,right,bottom circ : دایره . مشخص کننده نقطه مرکز و شعاع یک دایرهcoords=center X, center Y ,radius poly : چند ضلعی مشخص کننده مختصات انواع نقاط مختلف یک چند ضلعیcoords = X1 Y1, X2 Y2, … , Xn Yn |
|
| href | URL
مسیر و نام فایل |
برای تعیین آدرس کامل صفحه یا فایل مقصد پیوند به کار می رود . |
| hreflang | language نام زبان |
مشخص کننده زبان اصلی و پیش فرض صفحه مقصد پیوند است . |
| name | text
نام منحصر به فرد |
برای تعیین یک نام برای ایجاد لنگر به کار می رود . |
| rel | alternate designates stylesheet start next prev contents index glossary chapter section appendix help bookmark |
تعیین کننده نوع ارتباط بین صفحه جاری و صفحه مقصد پیوند است که می تواند یکی از حالت های زیر باشد :alternate : یک در میانdesignates : انتخاب شدهstylesheet : صفحه قالب دهی (CSS)start : ابتداnext : بعدیpre : صفحه قبلی
contents : صفحه محتویات index : صفحه آغازین chapter : بخش section : بخشی از برنامه appendix : ضمیمه help : صفحه یا فایل راهنما bookmark : یک لنگر در همان صفحه یا صفحه ای دیگر |
| rev | تعیین کننده نوع ارتباط بین صفحه مقصد پیوند و صفحه جاری است (بر عکس rel ) و دارای همان مقادیر است. |
|
| shape | rect rectangle circ circle poly polygon |
چنانچه پیوند ناحیه ای از یک عکس یا نقشه تصویری باشد که قابل کلیک شدن است ، نوع شکل ناحیه قابل کلیک شدن را مشخص می کند ، که مختصات آن توسط خاصیت coords در همین تگ مقدار دهی می شود . انواع اشکال ممکن عبارتند از : rect , rectangle : مربع یا مستطیلcirc , circle : دایره یا بیضیpoly , polygon : چند ضلعی |
| target | _blank _parent _self _top |
نحوه باز شدن و نمایش پنجره صفحه مقصد را تعیین می کند که دارای حالت های زیر است : – blank : لینک در یک پنجره جدید باز خواهد شد .- self : لینک در همان پنجره یا قابی که کلیک شده است باز خواهد شد .-parent : لینک در قاب اصلی یا مادر باز خواهد شد .-top : لینک در همان پنجره ای که کلیک شده است به طور کامل باز خواهد شد . |
نکته ۱: اگر ویژگی href تنظیم نشده باشد، هیچ کدام از ویژگی های زیر اثری نخواهند داشت:
download
hreflang
media
rel
target
type
نکته ۲: صفحه لینک شده به طور معمول در پنجره جاری مرورگر نمایش داده می شود، مگر اینکه شما خصوصیت target را برای لینک مذکور تنظیم نمایید.
نکته ۳: برای style دادن به لینک ها از CSS استفاده کنید.
