در حال تکمیل آموزش زبان HTML

[مینا]

تگ های قالب بندی متن

تگ های کد کامپيوتر
از اين گروه تگ برای نمايش نوشته های مورد نظر همانند نمايش در محيط های برنامه نويسی استفاده می شوند . اين حالت برای استفاده در صفحات آموزش کد نويسی و يا شبيه سازی محيط های برنامه نويسی مناسب هستند .

تگ < code > :
اين تگ نوشته را به صورت نوشته های درون محيط های برنامه نويسی قديمی تبديل می کند .

تگ < kbd > :
اين تگ نيز حالت خاصی مثل حروف دستگاه تايپ به متن می دهد .

تگ < samp > :
اين تگ نيز حالت خاصی مثل نوشته های درون محيط های برنامه نويسی به متن می دهد .

تگ < tt > :
اين تگ نيز حالت خاصی از نوشته مثل حروف تلگراف به متن می دهد .

تگ < var > :
اين تگ حالتی برای تعريف متغيرهای برنامه نويسی ايجاد می کند .

[مینا]

تگ های قالب بندی متن

تگ < sub > , < sup > :
از اين تگ ها برای ايجاد نوشته های زير نويس يا انديس دار استفاده می شود .

تگ < abbr > :

از اين تگ معمولا برای نمايش يک متن کوتاه و خلاصه شده برای يک واژه يا عبارت بزرگتر استفاده می شود . به طور مثال در انگليسی به جای عبارت et cetra از واژه etc استفاده می کنند .

ويژگی مهم تگ < abbr  > اين است که می تواند يک مقدار توسط خاصيت title خود گرفته و در هنگام قرار گيری موس بر روی واژه خلاصه شده،آن نوشته در يک کادر زرد رنگ نمايش دهد .

تگ < acronym > :
اين تگ نيز دقيقا عملکردی همانند تگ < abbr > دارد و برای ايجاد يک عنوان مخفف برای يک عبارت بزرگتر استفاده می شود .

تگ < bdo > :

اين تگ مشخص کننده جهت نمايش متن درون خود است . خاصيت dir مشخص کننده جهت نوشته است ، که دو حالت کلی دارد :

1) rtl : راست به چپ

2) ltr : چپ به راست

نکته : برای زبان هايي مثل فارسی يا عربی از جهت راست به چپ و برای زبان های مثل انگليسی از جهت چپ به راست استفاده می شود .

نکته : از اين تگ ديگر استفاده نمی شود و به جای آن از خاصيت direction در style ها استفاده می شود .

[مینا]

تگ های قالب بندی متن

تگ < del > :
اين تگ باعث کشيده شدن يک خط بر روی نوشته های درون خود می شود .

تگ < ins > :
اين تگ برای نشان دادن يک متن جديد وارد شده در صفحه به کار می رود و يک خط زير نوشته های درون خود می کشد .
نکته : از ترکيب تگ های < ins > , < del > می توان برای نشان دادن اصلاحات در نوشته های صفحات وب استفاده کرد .

تگ < blockquote > :
از اين تگ برای نمايش يک متن يا نوشته به صورت نقل قول استفاده می شود . اين تگ معمولا برای نمايش اطلاغاتی همچون معانی لغت در واژه نامه ها استفاده شده و باعث می شود متن درون آن کمی جلوتر و يک خط پايينتر از بقيه نوشته ها قذرار بگيرد .

< q > :
اين تگ نيز همانند تگ < blockquote > برای ايجاد يک نقل قول استفاده می شود با اين تفاوت که حالت اين تگ کوتاه تر بوده و مثل تگ قبلی فاصله ايجاد نمی کند .

[مینا]

ایجاد لينک در HTML

تگ < a > :
از لينک ها در HTML، برای پيوند به يک صفحه ديگر در هر جای وب، پيوند به نقطه يا مکانی در داخل همان صفحه يا صفحه ديگر و يا يک فايل خارجی مثل عکس،موسيقی،فيلم و ... به سند وب استفاده می شود. شکل کلی ايجاد يک پيوند در (HyperLink) در HTML به صورت زير است :

< a href="URL" > متن عنوان پيوند < /a >

خاصيت href که از نوع URL است برای تعيين مقصد پيوند به کار می رود.اين خاصيت شامل آدرس صفحه يا فايلی است که با کليک بر روی آن پيوند باز خواهد شد. متن عنوان، متنی است رنگی و خط زير دار که نشان دهنده پيوند است .

ايجاد يک لنگر با استفاده از < a > :
تعريف لنگر: لنگر نقطه ای از يک صفحه است که با تگ < a > مشخص می شود که می توان به وسيله کليک بر روی يک پيوند، مستقيما به آن نقطه پرش کرد.
با استفاده از تگ < a > می توان هر نقطه ای از صفحه را به صورت يک لنگر مشخص کرد و سپس با کليک برروی يک پيوند مستقيما به آن نقطه در صفحه پرش کرد.
برای اين منظور در هر نقطه ای از صفحه که می خواهيم به صورت لنگر در بيايد، يک تگ < a > قرار می دهيم. سپس به وسيله خاصيت Name،يک نام به آن لنگر اختصاص داده که به اين کار در اصطلاح (Bookmark) می گويند. سپس در خاصيت Href يک پيوند ديگر آدرس لنگر مورد نظر را داده، که از اين به بعد با کليک بروی آن پيوند، مستقيما به مکان آن لنگر در صفحه پرش می کنيم.
نحوه آدرس دهی درِيک لنگر به صورت زير است:
 

" نام لنگر مورد نظر در صفحه # نام صفحه مورد نظر "=href

مثال:

< a href="http://www.site.com/HTML/Base_Tag1.html#ptag >

تگ < link > :

تگ لينک برای برقراری ارتباط بين صفحه جاری و يک صفحه يا فايل خارجی مورد استفاده قرار می گيرد. تگ لينک تگ پايانی ندارد و با علامت / در همان تگ ابتدايی بسته می شود.اين تگ می تواند به دفعات دلخواه و برای مقاصد مختلف، در قسمت Head مورد استفاده قرار بگيرد.

برای مثال از تگ link می توان برای اتصال صفحه به يک فايل قالب دهی ( Style Sheet CSS ) ، فايل حاوی دستورات اسکريپتی مثل js و ... استفاده کرد.

مثال : استفاده از تگ لينک برای برقراری ارتباط بين صفحه جاری و يک فايل CSS :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تگ < Object > :
اين تگ برای پيوند يک شی خارجی (مثل فايل های صوتی، تصويری، انواع فايل های برنامه و ...) به صفحه HTML استفاده می شود. اين تگ به برنامه نويس اجازه می دهد که اطلاعات و پارامترهای لازم را برای عناصر وارد شده به صفحه HTML تعيين کرده و کد مورد نظر را برای نمايش و مديريت استفاده از فايل در صفحه درج نمايد . اين اطلاعات پيش گفته به مرورگر در نمايش بهتر شی خارجی کمک می کند . تگ < param > در درون اين تگ به دفعات دلخواه می تواند استفاده شود که تعيين کننده تنظيمات نمايش شی در هنگام اجرا است.
نکته: يک تگ < object > هم می تواند در قسمت < head > و هم در قسمت < body > قرار بگيرد. متنی که که بين تگ باز و بسته < object > قرار بگيرد، به عنوان يک متن هشدار دهنده در مرورگرهای قديمی که اين تگ را پشتيبانی نمی کنند ، به جای شی مورد نظر نمايش داده خواهد شد.
نکته: برای نمايش تصاوير از تگ < img > به جای < object > استفاده می شود.

تگ < param > :
اين تگ تنظيمات زمان اجرای برنامه را برای استفاده از شی وارد شده در صفحه تعيين می کند. اين تگ به دفعات مورد نياز (هر بار برای تعيين مقدار يک تنظيم يا خاصيت) بايد در درون تگ object استقاده شود.

[مینا]

ساخت جدول در HTML

تگ جدول < table > :
اين تگ برای ايجاد جدول ها در صفحه استفاده می شود . به طور کلی جدول ها به 2 منظور ايجاد می شوند :

1- ايجاد يک جدول معمولی با تعدادی خانه ، برای نمايش مطالب مورد نظر در سطرها و ستون های جدا از هم .
2- تقسيم فضای صفحه با استفاده از چهارچوب جدول ها برای منظم چيدن محتويات صفحه. به طور مثال مطالب اين صفحه در تعدادی خانه جدول مرتب شده است. در اين حالت می توان با عدم تعيين حاشيه ( border ) برای خانه های جدول، از چهارچوب جدول ها استفاده کرد در حالی که آنها عملا از ديد کاربر مخفی هستند.
جدولها برای هر منظوری که بکار روند بايد با استفاده از تگ < table > ايجاد شوند. هر جدول مجموعه ای از سطرها و ستون هاست. برای ايجاد يک سطر جديد از يک تگ < tr > استفاده می شود که هر خانه ( ستون ) درون سطر هم توسط يک تگ < td > مشخص می شود.

الگوريتم طراحی جدول :

در طراحی جدول بايد به نکات زير دقت کرد :

1- در هنگام ايجاد يک سطر یا استفاده از تگ < tr > ، قبل از ايجاد سطر جديد حتما بايد تگ  < tr > قبلی بسته شود و در هر سطر نيز بايد در صورت ايجاد هر خانه با تگ  < td > قبل از ايجاد يک خانه جديد بايد تگ < td > قبلی بسته شود .
2- درون تگ < table > فقط می توان تگ < tr > و درون تگ < tr > نيز فقط می توان از تگ < td > استفاده کرد .
3- خانه ها و سطرهای يک جدول منظم و مرتب هستند. به عبارت ديگر به طور مثال نمی توان  در يک سطر جدول 3 خانه و در سطر پايينی آن 2 خانه با پهناهای متفاوت ايجاد کرد. در چنين مواردی بايد با استفاده از خاصيت colspan در تگ < td > سطر با خانه کمتر و استفاده از تکنيک جدول های تو در تو اين مسئله را بر طرف کرد.

جدول های تو در تو : می توان در درون يک جدول، جدول های ديگری نيز ايجاد کرد. در اين حالت جدول درونی همانند يک خانه جدول بيرونی خواهد بود. جدول درونی را بايد در يک تگ < td > جدول بيرونی ايجاد کرد. در اين حالت چيدمان خانه های جدول درونی به چيدمان خانه های جدول بيرونی ارتباطی ندارند.

مثال : تمام موارد ذکر شده را در مثال زير بررسی می کنيم :

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

تگ < tr > :
از اين تگ برای ايجاد يک سطر در جدول استفاده می شود. در درون هر سطر به تعداد دلخواه می توان ستون ( خانه جدول ) به وسيله تگ < td >  ايجاد کرد.
نکته : از تگ < tr > فقط برای ايجاد يک سطر جدول استفاده می شود نه ستون . تگ < tr >  بدون تگ < td > در درون آن خروجی ندارد.

مثال : ايجاد يک جدول با دو سطر :