آموزش HTML (قسمت چهارم) : تگ های قالب بندی متن 2

 در بخش اول این قسمت به معرفی 10 تگ مهم در قالب بندی متن اشاره کردیم در اینجا به معرفی 4 تگ دیگر خواهیم پرداخت.

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

<h1>mksgraphic</h1>

<h2>mksgraphic</h2>

<h3>mksgraphic</h3>

<h4>mksgraphic</h4>

<h5>mksgraphic</h5>

<h6>mksgraphic</h6>

نتیجه ی این کد در مرورگر به صورت زیر است:

نکته: توجه کنید در بالا منظور از(number 1-6)  شماره های یک تا شش است وگرنه این تگ به صورتی که در مثال نوشته شده نوشته می شود.

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

Left : تیتر در سمت چپ صفحه قرار میگیرد.

Center : تیتر در وسط صفحه قرار میگیرد.

Right : تیتر در سمت راست صفحه قرار میگیرد.

Justify : متن داخل heading را از هر دو طرف تراز میکند.

برای یاد آوری نحوه استفاده از صفات در تگ ها و آشنایی با طرز استفاده از این صفت در تگ <h> به مثال زیر دقت کنید:

<h1 align="left">سرصفحه ی چپ چین</h1>

<p>این پاراگراف به صورت چپ چین است</p>

<h1 align="center">سرصفحه ی وسطی</h1>

<p>این پاراگراف وسط است</p>

<h1 align="right">سرصفحه ی راست چین</h1>

<p>این پاراگراف  به صورت راست چین است</p>

این کد را بنویسید و ذخیره کنید صفحه ی ذخیره شده به شکل زیر است:

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

<p>ام کی اس گرافیک:<br />دانلود بهترین ابزار گرافیکی</p>

صفحه دارای این کد به شکل زیر است:

 

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

<p><nobr>این یک پاراگراف بلند است این یک پاراگراف بلند است

این یک پاراگراف بلند است این یک پاراگراف بلند است این یک پاراگراف

بلند است این یک پاراگراف بلند است این یک پاراگراف بلند است این یک

پاراگراف بلند است</nobr></p>

کد ذخیره شده به شکل زیر است:

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

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

کد بدون حذف فاصله ها به نمایش در می آید:

<code>

            <pre>

         function testFunction(strText) {

          alert (strText)

         }

            </pre>

</code>

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

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

<p>mksgraphic : download the newest graphic

tools<hr /></p>

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

این عنصر دارای 5 صفت مهم است:

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

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

*استفاده از نام رنگ ها : ما از نام 16 رنگ استاندارد میتوانیم برای مقداردهی به صفت ها استفاده کنیم. این رنگ ها به شرح زیر هستند :

Black, Silver, Gray, White, Maroon, Red, Purple, Fushia

Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aque

*استفاده از تابع rgb: در HTML تابعی با نام (Red,Green,Blue) rgb وجود دارد که به ترتیب سه رنگ قرمز، سبز و آبی را به عنوان مقدار میپذیرد. این مقادیر یا اعداد صحیح هستند یا به صورت درصد بیان می شوند. به طور مثال:

rgb(0,160,255) یا rgb(0%,63%,100%)

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

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

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

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

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

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

noshade="noshade"

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

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

                                                                                    با آرزوی موفقیت برای شما، ام کی اس گرافیک