در ادامه برخی از تگ های متداول 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" >