گروه آموزش طراحی سایت 21 اردیبهشت 1392 بدون نظر 1036 بازدید آموزش HTML

در سلسله آموزشهای قبل آنلاینر به معرفی تگ های عمومی div , span پرداختیم.

در این آموزش قصد بررسی تگ های تو در تو را داریم.

تگ های تو در تو

یکی از ویژگی های خوب HTML همین قابلیت است که میتوان تگ ها را بصورت تو در تو نوشت ولی باید این نکته را مد نظر داشت که این روش از قوانینی پیروی میکند که با ید آنها را رعایت کنید.

به عنوان مثال :

اگر ما بخواهیم نوشته ای را هم کج کنیم و هم درشت کنیم هیچ تگی را نمیشناسیم که این دو کار را باهم انجام دهد.پس راه حل چیست؟

بله باید از تگ های تو در تو استفاده کنیم، بدین ترتیب میتوانیم هر ویژگی که مد نظر هست را با ترکیب تگ های مختلف ایجاد کنیم. خب جواب مثال بالا بدین ترتیب است


<b>

<i>

این متن هم درشت و هم کج خواهد شد.

</i>

</b>

قانونی که در بالا از آن یاد کردیم همین است که باید در استفاده از تگ های تو در تو اولین تگی که باز شده است باید آخرین تگی باشد که بسته میشود و آخرین تگی که باز میشود اولین تگی باشد که بسته میشود. پس این ترتیب را در استفاده تگ های تو در تو در طراحی وب حفظ کنید. چون در صورت عدم رعایت این قانون مطمئنا نتیجه مورد نظر شما حاصل نخواهد شد.

مثالی دیگر شاید به درک بهتر این درس کمک کند، دو تگ small و large در HTML باعث بزرگ تر و کوچک تر شدن متن مورد نظر شما خواهد شد. به دو تکه کد زیر دقت کنید:

1-


<small>

این متن یک واحد کوچکتر خواهد شد.

</small>

2-


<large>

<large>

این متن دو واحد درشت تر خواهد شد.

</large>

</large>

نتیجه کد اول که مشخص است متن مورد نظر را 1 واحد کوچکتر خواهد کرد و کد شماره دو متن مورد نظر شما را تا دو واحد بزرگ تر خواهد کرد. این مثالی بسیار ساده از تگ های تو در تو است.

حال اگر کمی بخواهیم کمی جدی تر این بحث را پیگیری کنیم با مثالی کاربردی شروع میکنیم. میخواهیم در بین پاراگراف های متن صفحه وب سایت مان کلمه onliner را به صورت درشت و زیر خط دار نشان دهیم.برای این کار 2 راه پیش روی ماست:

1- استفاده از تگ span  و استایل بر خط inline css برای تغییر شکل کلمه لورم که در آموزش قبل ( معرفی تگ های عمومی div , span) توضیح داده شد.

2- استفاده از تگ های تو در تو بدین شکل


<p>

this is the test for  <b> <u> onliner </b> </u> and your lesson of <b> <u>onliner</b> </u>.

</p>

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


<h1>
این مقاله برای آموزش طراحی وب شما کاربران عزیز در سایت <a href="http://www.onliner.ir> <strong>آنلاینر</strong> </a> آماده شده است
</h1>

میبینید که قانونی که در ابتدای آموزش مطرح شد در تمامی مثال ها بخوبی رعایت شده است.

در آموزش بعد به مبحث توضیحات در HTML میپردازیم.
با آنلاینر همراه شوید …

دیدگاه ها بسته شده اند.