در ادامه برخی از تگ های متداول Html ØªÙˆØ¶ÙŠØ Ø¯Ø§Ø¯Ù‡ Ù…ÛŒ شود.
◠تگ های Bold,Italic,Underline
برای پررنگ نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <B> و <B/> قرار داد.
خروجی |
تگ Html |
اين قسمت پر رنگ است |
اين قسمت <B> پر رنگ <B/> است. |
برای ايتاليک نمودن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <I> و <I/> قرار داد.
خروجی |
تگ Html |
اين قسمت ايتاليک است |
اين قسمت <I> ايتاليک <I/> است. |
برای زيرخط داشتن هر قسمت از متن دلخواه می توان ، آن را بين تگ های <U> و <U/> قرار داد.
خروجی |
تگ Html |
اين قسمت زيرخط دارد |
اين قسمت <U> زيرخط <U/> دارد |
◠تگ های پاراگرا٠و خط Ùاصله
با استÙاده از <BR> Ù…ÛŒ توان بين خطوط Ùاصله ( خط خالی ) ايجاد کرد.
خروجی |
تگ Html |
اين قسمت خط دوم نمايش داده می شود |
اين قسمت <BR> خط دوم نمايش داده می شود |
تگ <P> ØŒ باعث ايجاد ÙŠÚ© پاراگرا٠می گردد. در اين Øالت بين خطوط ØŒ Ùواصل بيشتری بوجود Ù…ÛŒ آيد.
خروجی |
تگ Html |
اين قسمت
خط دوم نمايش داده می شود |
اين قسمت <P> خط دوم نمايش داده می شود |
تگ <hr> باعث ايجاد ÙŠÚ© خط اÙÙ‚ÛŒ Ù…ÛŒ شود.
خروجی |
تگ Html |
اين ÙŠÚ© خط اÙÙ‚ÛŒ است.
|
اين ÙŠÚ© خط اÙÙ‚ÛŒ است. <hr> |
◠تگ های نوع ØŒ اندازه Ùˆ رنگ Ùونت
بمنظور تغيير رنگ متن دلخواه از تگ <Font color="color"> ... </Font> استÙاده Ù…ÛŒ شود.
خروجی |
تگ Html |
اين قسمت آبی است |
اين قسمت <" Font color="Blue> آبی<Font/> است |
برای تعيين رنگ Ù…ÛŒ توان از کد معادل آن ( بصورت مبنای شانزده ) نيز استÙاده کرد :
<font color= "#FDFD00">
در صورتيکه قصد اختصاص ÙŠÚ© رنگ برای تمام نوشته های موجود در ÙŠÚ© صÙØÙ‡ وب را داشته باشيد ØŒ Ù…ÛŒ توان در بخش <Body> از text=color بصورت زير استÙاده کرد.
<Body text="blue" >
برای تغيير نوع Ùونت از تگ <font face="fonttype"> ...</font> استÙاده Ù…ÛŒ گردد.
خروجی |
تگ Html |
اين قسمت با Ùونت تيتر نوشته شده است |
اين قسمت با <" Font face="Titr> Ùونت تيتر<Font/> نوشته شده است |
برای تغيير اندازه Ùونت از تگ <font size="value"> ...</font> استÙاده Ù…ÛŒ گردد. اندازه Ùوتت پيش Ùرض سه است . در صورت تمايل Ù…ÛŒ توان در بخش value از مقاديری بصورت 2 + ( اÙزايش به اندازه دو ) Ùˆ يا 2 - ( کاهش به اندازه دو ) نيز استÙاده کرد.
خروجی |
تگ Html |
اين قسمت با اندازه Ùونت نوشته شده است |
اين قسمت با <" Font size="4> اندازه Ùونت<Font/> نوشته شده است |
اين قسمت با اندازه Ùونت نوشته شده است |
اين قسمت با < Font size=+2> اندازه Ùونت<Font/> نوشته شده است |
اين قسمت با اندازه Ùونت نوشته شده است |
اين قسمت با <Font size= -2> اندازه Ùونت<Font/> نوشته شده است |
برای تغييراندازه ÙŠÚ© Ùونت Ù…ÛŒ توان از تگ های <small> Ùˆ يا <big> نيز استÙاده کرد.
خروجی |
تگ Html |
اين قسمت کوچک است |
اين قسمت <small> کوچک <small/> است. |
اين قسمت بزرگ است |
اين قسمت <big> بزرگ <big/> است. |
با استÙاده از تگ های هدينگ ØŒ نيز Ù…ÛŒ توان اندازه ÙŠÚ© Ùونت را تغيير داد. ( متن مورد نظر بصورت پررنگ نيز نوشته Ù…ÛŒ شود)
خروجی |
تگ Html |
اين عنوان يک است |
<H1>اين عنوان يک است<H1/> |
اين عنوان دو است |
<H2>اين عنوان دو است<H2/> |
اين عنوان سه است |
<H3>اين عنوان سه است<H3/> |
◠تغيير رنگ زمينه ÙŠÚ© صÙØÙ‡
برای تغيير رنگ زمينه ÙŠÚ© صÙØÙ‡ بهمراه تگ <Body> از bgcolo=color استÙاده Ù…ÛŒ شود.
خروجی |
تگ Html |
|
<body bgcolor="Red"> |
â—ايجاد ليست
سه نوع ليست وجود دارد : Unordered ,Ordered,Descriptive در ادامه به Ù†Øوه استÙاده از هر ÙŠÚ© اشاره Ù…ÛŒ گردد.
- يک ليست Unordered بصورت زير است :
Unordered list |
- مورد يک
- مورد دوم
- مورد سوم
|
برای ايجاد ÙŠÚ© ليست unordered ØŒ از تگ <ul> Ùˆ برای مشخص نمودن هر آيتم ليست از تگ <li> استÙاده Ù…ÛŒ شود. نوع bullet ( قبل هر آيتم قرار Ù…ÛŒ گيرد) Ù…ÛŒ تواند Circle , square , disc باشد . بمنظور تغيير نوع bullet Ù…ÛŒ توان بهمراه تگ <ul> از type استÙاده کرد.
خروجی |
تگ Html |
- مورد يک
- مورد دوم
- مورد سوم
|
<UL> <li> مورد يک <li> مورد دوم <li> مورد سوم </UL> |
- يک ليست ordered بصورت زير است :
Ordered list |
- مورد يک
- مورد دوم
- مورد سوم
|
برای ايجاد ÙŠÚ© ليست ordered ØŒ از تگ <ol> Ùˆ برای مشخص نمودن هر آيتم ليست از تگ <li> استÙاده Ù…ÛŒ شود.
خروجی |
تگ Html |
- مورد يک
- مورد دوم
- مورد سوم
|
<OL> <li> مورد يک <li> مورد دوم <li> مورد سوم </OL> |
Ù†Øوه مرتب سازی ليست ( قبل هر هر آيتم قرار Ù…ÛŒ گيرد) Ù…ÛŒ تواند تغيير داده شود . بمنظور تغيير نوع ليست Ù…ÛŒ توان بهمراه تگ <ol> از type استÙاده کرد. در اين Øالت Ù…ÛŒ توان از "A" بمنظور مرتب سازی ليست بر اساس Øرو٠بزرگ ØŒ از Øر٠"a" برای مرتب سازی ليست بر اساس Øرو٠کوچک ØŒ از Øر٠"I" برای مرتب سازی ليست بر اساس Øرو٠بزرگ رومی Ùˆ از Øر٠"i" برای مرتب سازی ليست بر اساس Øرو٠رومی Ú©ÙˆÚ†Ú© استÙاده کرد. مثلا" دستور زير باعث نمايش ليست با استÙاده از Øرو٠رومی Ù…ÛŒ گردد:
<OL type="I" >
ÙŠÚ© ليست Descriptive ØŒ ليستی از آيتم ها را ايجاد Ú©Ù‡ در سطر دوم متن مورد نظر دارای تورÙتگی است.
Descriptive list |
مورد يک
مورد مربوط به يک
مورد دوم |
از تگ <dl> برای تعري٠ليست استÙاده Ù…ÛŒ شود. تگ <dt> برای سطرهای معمولی Ùˆ از تگ <dd> برای سطرهائی شامل تورÙتگی استÙاده Ù…ÛŒ شود.
خروجی |
تگ Html |
مورد يک
مورد مربوط به يک
مورد دوم
|
<DL > <dt> مورد يک <dd>مورد مربوط به يک <dt> مورد دوم </DL> |
◠لينک به ساير سايت ها Ùˆ صÙØات
ÙŠÚ©ÛŒ از ويژگی های جالب صÙØات وب ØŒ امکان ايجاد لينک ( پيوند ) به ساير صÙØات Ùˆ سايت ها است . بدين منظور از تگ <a> بهمراه href Ú©Ù‡ آدرس مورد نظر را مشخص Ù…ÛŒ کند در ابتدای عنوان مورد نظر استÙاده شده Ùˆ در انتهای عنوان نيز از تگ </a> استÙاده Ù…ÛŒ شود.
<a href = "http://www.oursite.com"> برای ورود به سايت در اين Ù…ØÙ„ کليک نمائيد </a>
برای ورود به سايت در اين Ù…ØÙ„ کليک نمائيد
◠پنجره جديد
در صورتيکه قصد داشته باشيم ØŒ کاربران سايت پس از اينکه بر روی ÙŠÚ© لينک ØŒ کليک Ù…ÛŒ نمايند ØŒ صÙØÙ‡ Øاوی لينک را کماکن در اختيار داشته باشند ØŒ Ù…ÛŒ توان از تگ <target=_Blank> همراه تگ <a> استÙاده کرد. در چنين Øالتی ØŒ پس از اينکه کاربران بر روی لينک مورد نظر ØŒ کليک نمودند ØŒ ÙŠÚ© پنجره خالی Øديد Ùعال Ùˆ Ù…Øتويات سايت Ùˆ يا صÙØÙ‡ لينک شده در آن نمايش داده خواهد .
<a href = "http://www.oursite.com" target="_Blank" > برای ورود به سايت در اين Ù…ØÙ„ کليک نمائيد </a>
برای ورود به سايت در اين Ù…ØÙ„ کليک نمائيد
◠رنگ لينک ها
رنگ آبی بعنوان رنگ پيش Ùرض برای لينک ها در نظر گرÙته شده است . بمنظور تغيير رنگ لينک ( قبل از مشاهده صÙØÙ‡ لينک شده ) Ùˆ رنگ لينک ملاقات شده ( مشاهده شده ) Ù…ÛŒ توان از تگ های <link> Ùˆ <vlink> استÙاده کرد . مثال زير Ù†Øوه عمليات Ùوق را نشان Ù…ÛŒ دهد:
<body link = "Red" vlink = "gray" >
◠لينک درياÙت نامه الکترونيکی
در صورتيکه بخواهيم بر روی صÙØÙ‡ ÙŠÚ© لينک بمنظور درياÙت E-mail داشته باشيم ØŒ بهمراه تگ <a> ØŒ آدرس E-mail مربوطه را نيز مشخص نمود.
<a href = "mailto:Test@Test.com"> برای ارسال نامه الکترونيکی در اين Ù…ØÙ„ کليک نمائيد </a>
برای ارسال نامه الکترونيکی در اين Ù…ØÙ„ کليک نمائيد
◠اضاÙÙ‡ کردن تصوير Ùˆ گراÙÙŠÚ©
برای اضاÙÙ‡ نمودن تصوير در ÙŠÚ© صÙØÙ‡ وب از تگ زير استÙاده Ù…ÛŒ شود.
<img src= " نام Ùايل گراÙÙŠÚ©ÛŒ مورد نظر " >
◠تراز متن
متن Ùˆ تصاوير استÙاده شده در ÙŠÚ© صÙØÙ‡ وب ØŒ بصورت پيش Ùرض " تراز از سمت Ú†Ù¾ " Ù…ÛŒ گردند. در صورتيکه بخواهيم بخش های خاص از صÙØÙ‡ در وسط قرار بگيرد ØŒ از تگ <center> در ابتدای بخش مورد نظر Ùˆ از تگ <center/> در انتهای بخش ØŒ استÙاده Ù…ÛŒ شود.
◠ايجاد جدول
برای ايجاد جدول از تگ <table> ØŒ سطر از تگ <tr> ،هر بخش داده از <td> استÙاده Ù…ÛŒ شود. Ùرض کنيد ،قصد ايجاد ÙŠÚ© جدول مشابه Ø´Ú©Ù„ زير را داشته باشيم :
جدول Ùوق دارای سه سطر Ùˆ دو ستون است . برای ايجاد جدول Ùوق از تگ های زير استÙاده Ù…ÛŒ شود:
<table> |
شروع جدول |
<tr> |
شروع سطر اول |
<td> |
شروع اولين سلول سطر اول (A1) |
</td> |
پايان اولين سلول (A1) |
<td> |
شروع دومين سلول (A2) |
</td> |
پايان دومين سلول (A2) |
</tr> |
پايان سطر اول |
<tr> |
شروع سطر دوم |
<td> |
شروع اولين سلول سطر دوم (B1) |
</td> |
پايان دومين سلول (B1) |
<td> |
شروع دومين سلول (B2) |
</td> |
پايان دومين سلول (B2) |
</tr> |
پايان سطر دوم |
<tr> |
شروع سطر سوم |
<td> |
شروع اولين سلول سطر سوم (C1) |
</td> |
پايان اولين سلول (C1) |
<td> |
شروع دومين سلول (C2) |
</td> |
پايان دومين سلول (C2) |
</tr> |
پايان سطر سوم |
</table> |
پايان جدول |
برای تعري٠رنگ زمينه برای هر سطر Ùˆ يا سلول Ù…ÛŒ توان بهمراه تگ های <tr> Ùˆ يا <td> از bgcolor="Color استÙاده کرد.
<tr bgcolor = "red" >
برای تعري٠اندازه طول Ùˆ عرض ÙŠÚ© جدول ØŒ در زمان تعري٠جدول Ù…ÛŒ توان از width Ùˆ height بمنظور مشخص نمودن اندازه جدول ( بر Øسب پيکسل Ùˆ يا درصد ) استÙاده کرد.
<table width=250 height=300 >
برای مشخص نمودن طول Ùˆ عرض هر سطر Ùˆ يا سلول نيز Ù…ÛŒ توان از width Ùˆ يا height استÙاده کرد.
Cellpading ØŒ تگ Ùوق Ùضای خالی بين هر ÙŠÚ© از گوشه های سلول با داده های موجود در سلول را مشخص Ù…ÛŒ نمايد.
<table borde = 1 cellpadding = 3 >
Cellspacing ØŒ تگ Ùوق تعداد Ùضای خالی ( بر Øسب پيکسل ) بين هر ÙŠÚ© سلول ها را مشخص Ù…ÛŒ نمايد.
<table borde = 1 cellspacing =13 >
Alignment ØŒ تمام سلول ها ÛŒ موجود در ÙŠÚ© جدول بصورت پيش Ùرض "تراز از Ú†Ù¾ " Ù…ÛŒ گردند. برای تراز ÙŠÚ© سلول Ù…ÛŒ توان هر ÙŠÚ© از تگ های <td> ØŒ <tr> را بهمراه align = direction استÙاده کرد.
<td align = "Right" >