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

یادآوری : در آموزش های قبل با 10 تگ از تگ های قالب بندی متن آشنا شدید که عبارتند از :

1 <b> </b>
2 <i> </i>
3 <u> </u>
4 <s> </s> یا <strike> </strike>
5 <sup> </sup>
6 <sub> </sub>
7 <big> </big>
8 <small> </small>
9 <del> </del> و <ins> </ins>
10 <abbr> </abbr> و <acronym> </acronym>

در ادامه شما را با بقیه تگ های قالب بندی متن آشنا خواهیم کرد:

تگ <hn>: زبان HTML از شش سطح تیتر (Heading) ها پشتیبانی میکند. این 6 سطح با تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6> ایجاد می شوند. مرورگرها عنصر <h1> را در بزرگترین و عنصر <h6>  را در کوچکترین اندازه از بین این 6 سطح نمایش می دهند. به مثال زیر دقت کنید:

1 <h1>7 Learn</h1>
2 <h2>7 Learn</h2>
3 <h3>7 Learn</h3>
4 <h4>7 Learn</h4>
5 <h5>7 Learn</h5>
6 <h6>7 Learn</h6>

نتیجه کد در مرورگر:

hn tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="382" height="370" />

نکته : توجه داشته باشید که منظور ما از تگ <hn>، حرف n عدد متغییری است بین 1 تا 6 .

هر شش عنصر فوق دارای صفت های زیر هستند که در ادمه بررسی خواهیم کرد:

1 align  class  id  style  title  dir  lang

align: این صفت نحوه چینش متن داخل heading را کنترل میکند، و چهار مقدار زیر را می پذیرد:

  • left: تیتر در سمت چپ صفحه قرار میگیرد.
  • center: تیتر در وسط صفحه قرار میگیرد.
  • right: تیتر در سمت راست صفحه قرار میگیرد.
  • justify: متن داخل heading را از هر دو طرف تراز میکند.

مثال:

1 <h1 align="left">Left-Aligned Heading</h1>
2 <p>This heading uses the align attribute with a value of left.</p>
3 <h1 align="center">Centered Heading</h1>
4 <p>This heading uses the align attribute with a value of center.</p>
5 <h1 align="right">Right-Aligned Heading</h1>
6 <p>This heading uses the align attribute with a value of right.</p>

نتیجه در مرورگر:

align tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="551" height="391" />

بقیه صفت ها نیز جزء صفات عمومی هستند که قبلا آنها را معرفی کرده ایم.


تگ <p> : از تگ <p> برای ایجاد پاراگراف ها در صفحه استفاده می شود. معمولا همیشه پاراگراف ها از خط جدید شروع می شوند و یک فضای خالی قبل و بعد از خود ایجاد می کنند:

1 <p>This is a Paragraph</p>
2 <p>This is Another Paragraph</p>

نتیجه در مرورگر:

p tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="378" height="174" />

تگ </ br>: برای ایجاد شکست در خط و رفتن به خط جدید از این تگ استفاده میکنیم.این عنصر جزء عناصر تهی بوده و به تگ پایانی احتیاج ندارد. شما از این عنصر می توانید به شکل <br> نیز استفاده کنید که مخصوص نسخه های قدیمی HTML بوده. اما در نسخه XHTML می بایست بعد از br> یک فاصله خالی، و سپس / و در انتها یک علامت < قرار گیرد.

1 <p>7Learn.com :<br />Web Design and Javascript Tutorials</p>

نتیجه در مرورگر:

br tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="378" height="174" />

تگ <nobr>: این تگ نوعی در مقابل </ br> قرار دارد. به دلیل که متن داخل این تگ به هیچ عنوان شکسته نخواهد شد مگر اینکه تگ </ br> داخل آن قرار گیرد. استفاده از این تگ باید با احتیاط انجام شود زیرا ممکن است موجب ایجاد اسکرول افقی در پنجره مرورگر شود که معمولا حالتی عذاب آور برای کاربر خواهد بود!

1 <p><nobr>7Learn.com : Web Design and Javascript Tutorials</nobr></p>

نتیجه در مرورگر:

nobr tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="305" height="166" />

می بینید که متن ما شکسته نمی شود، و پنجره مرورگر به حال اسکرول در آمده است.

تگهای <pre> و <code>: گاهی اوقات می خواهیم متنمان دقیقا به همان شکلی که نوشته می شود در نمایش داده شود و از فاصله های خالی، فاصله های Tab و شکست های خط چشم پوشی نشود. هر آنچه که بین تگ <pre> و <pre/> قرار می گیرد دقیقا به همان شکلی که در source صفحه نوشته شده است در صفحه نشان داده خواهد شد. این تگ معمولا به همراه تگی با نام <code> که متن داخل آن به یکی از فونت های از نوع monospace همانند courier new نشان داده می شود به کار می رود. (فونت های نوع monospace فونت هایی هستند که هر کاراکتر آن ها به یک اندازه فضا اشغال می کنند.)

بیشترین استفاده از این تگ ها در نمایش کدهای کامپیوتری و برنامه نویسی است. در مثال زیر نمونه کدی به زبان جاوا اسکریپت در داخل تگ <pre> و <code> قرار گرفته است که در صفحه دقیقا به همان شکل نمایش داده خواهد شد:

1 <code>
2       <pre>
3          function testFunction(strText) {
4           alert (strText)
5          }
6       </pre>
7 </code>

نتیجه در مرورگر:

code tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="380" height="175" />

 


 

تگ </ hr>: از این تگ برای ایجاد خطوط افقی در صفحات استفاده میشود. این تگ جزء تگ های تهی بوده و باید به همین شکل استفاده شود و به تگ پایانی احتیاج ندارد البته می توان از این عنصر به صورت <hr> نیز استفاده کرد که مربوط به نسخه های قدیمی HTML می باشد:

1 <p>7Learn.com : Web Design and Javascript Tutorials <hr /> </p>

نتیجه در مرورگر:

hr tag <a  style=آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم)" title="آموزش HTML (قسمت 4) : تگ های قالب بندی متن (جلسه دوم) 7learn.com" width="380" height="201" />

 

این عنصر دارای صفات زیر است:

Width: با این صفت می توان عرض عنصر </ hr> را کنترل کرد. به دو طریق می توان به این صفت مقدار دهی کرد. یکی برحسب px و دیگری بر حسب درصد که نسبت به پهنای کل صفحه (یا عنصری که hr درآن قرار دارد) سنجیده میشود:

Color : این صفت رنگ خط را مشخص میکند. صفاتی از این دست در HTML که یک رنگ را به عنوان مقدار می پذیرند را می توان به سه روش مقدار دهی نمود.:

  • استفاده از نام رنگ ها : ما از نام 16 رنگ استاندارد میتوانیم برای مقداردهی به صفت ها استفاده کنیم. این رنگ ها به شرح زیر هستند:
1 Black, Silver, Gray, White, Maroon, Red, Purple, Fushia
2 Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aque
  • استفاده از تابع rgb: در HTML تابعی با نام rgb وجود دارد که به ترتیب سه رنگ قرمز، سبز و آبی را به عنوان مقدار میپذیرد. این مقادیر یا اعداد صحیح هستند یا به صورت درصد بیان می شوند. به طور مثال:
1 rgb(0,160,255) یا rgb(0%,63%,100%)

در اولین عبارت عدد 255 معادل %100 است. در مد رنگ RGB محدوده اعداد صحیح بین 0 تا 255 است.

  • استفاده از مبنای هگزا دسیمال (مبنای 16) رنگ ها:رنگ ها را می توان بر مبنای عبارت متناظر آن ها در مبنای 16 به کار برد. در این عبارت میتوان سه عدد در مبنای را نوشت. عدد اول معرف رنگ قرمز، عدد دوم معرف رنگ سبز و عدد سوم معرف رنگ آبی است. دقت کنید که این اعداد می توانند. از دو حرف تشکیل شده باشند. زیرا اعداد در مبنای 16 از حروف A تا F نیز میتوانند تشکیل شوند. فرم کلی این نوع عبارت ها. به شکل rrggbb# است مثال عبارت 000000# lمعرف رنگ سیاه  و 0000ff# معرف رنگ آبی است

Size :این صفت ارتفاع یک خط را کنترل می کند و می تواند یک عدد بر حسب px را به عنوان مقدار می پذیرد.

noshadow :خط هایی که در صفحه ایجاد کرده ایم به صورت پیش فرض دارای خطی در زیر خود به عنوان سایه هستند ا میتونیم از این صفت بولین برای حذف این سایه استفاده کنیم.

نکته : صفت های Boolean به صفت هایی گفته می شود که در نسخه های قدیمی HTML (نسخه های قبل از XHTML) مقداری را نمی پذیرند و ذکر نام آنها برای استفاده از آن ها کافی است مثلا: noshade

اما در نسخه XHTML می بایست این گونه صفت ها را نیز مقدار دهی کنیم. و مقدار آن ها نام خود آنها خواهد بود مثلا:

1 noshade="noshade"

align: محل قرار گیری خط در صفحه را کنترل می کند و میتواند یکی از مواد right, center و left را به عنوان مقدار بپذیرد.

تا اینجا با پنج تگ دیگر از تگ های قالب بندی متن آشنا شدید. در جلسه سوم و آخر تگ های قالب بندی متن شما را با پنج تگ دیگر آشنا خواهیم کرد.

ارسال نظر