درس18 - Extra Alignment
اهداف این درس
1- ردیف کردن قسمتهای مختلف و مجزا کردن قسمتی از متن
2- بوجود آوردن فضای اضافی در اطراف تصویر
3- بوجود آوردن متنهای توضیحی
شروع درس
به ردیف در آوردن متن
با گسترش روز افزون وب نیاز ما برای کنترل بیشتر طرح و شکل صفحه بیشتر شد . یکی از این نیازها وجود تگهایی برای به ردیف در آوردن متن و یا وسط قرار دادن آن و کنترل آن از بقیه قسمتهای صفحه بود که با Netscape و HTML معرفی شد.
مواردی که بین دو تگ < center > و < center / > قرار می گیرد در وسط صفحه به نمایش گذاشته می شود . اگر بخواهید در این زبان کدگزاری متن یا عکسی را در وسط قرار دهید از صفت align در تگ P و Img استفاده کنید .
1- تمامی سندهای خود را باز کنید .
2- برای هر کدام متنی که بین 2 تگ < h1 > و < h1 / > این صفت را به تگ اضافه کنید .
3- نتایج خود را ذخیره و صفحه را مجددا بارگذاری کنید .
تذکر:
در تگ < hr > صفت alignment نیز برای جای دقیق خط می توان بکار برد
به ردیف در آوردن عکس و متن
در درس( a7 ) آموختیم که چگونه یک عکس را در صفحه قرار می دهیم و چگونه در اطراف عکس متن قرار می دهیم .
با صفت align که در تگ < Img > قرار می گیرد می توانید مشخص کنید که یک عکس در چه موقعیتی از بالا و پایین و کناره های صفحه قرار بگیرد ؟
اینک زمانی رسیده که شما بخواهید قسمتی از متن یا دیگر اقلام بکار رفته شده در صفحه را در زیر عکس بیاورید . ویژگی در تگ
وجود دارد که موقعیت را مشخص می کند .
پیشنهاد ما به شما این است که همیشه از این تگ استفاده کنید . زیرا تراز کردن به فونتی که در مرورگر کاربر وجود دارد و همچنین پهنای پنجره مرورگر وابسته است.
لایه عکس
بعضی اوقات هنگامی که از تراز چپ یا راست در عکس استفاده می کنید متن محاصره می شود ، شما می توانید فضای خالی در اطراف عکس ایجاد کنید.
vspace و hspace که مخفف Vertical space و hovizental space می باشند( فضای عمودی و فضای افقی )، فضایی است بر حسب پیکسل که در بالا ، پایین ، چپ و راست عکس گذاشته می شود. صفت Alignment را در صفحه خود اضافه کنید . سند index.html خود را باز کنید . تصویر قرار داده شده در آن ممکن است زیبا به نظر برسد اما فضای خالی در کناره های عمودی آن زیاد است . سپس دستورات زیر را در آن بکار ببرید . توجه داشته باشید که اندازه واقعی وابسته به نوع متنی که برای مرورگر خود انتخاب کردید شما می توانید سایزی که وابسته به سایز انتخابی کاربران می باشد را تنظیم کنید .
این دستورات عبارتند از
روش دیگر استفاده از تگ فونت
وقتی از علامت منفی استفاده می کنید سایز فونت خیلی بیشتر از حد نرمال و متعارف می شود که در این موارد می توان از تگ فوق نیز استفاده کرد.
< basefont size=5 >
با این تغییرات سایز فونت شما از ابتدا 3 درجه بیشتر می شود شما از این دستور هنگامی باید استفاده کنید که از ابتدا فونتی خارج از استاندارد قرار دهید . اگر بخواهید تنظیمی بین بخشهای کوچکی از صفحه داشته باشید باید از تگ بالا استفاده کنید . با استفاده از تگ فوق برای بالاتر از درجه 5 می توانید به راحتی سایز تمام متن را تغییر دهید
تذکر :
تگ < base font > بسته می شود و تا جایی ادامه دارد که تگ < base font> دیگری استفاده شود .
اگر مرورگر شما از این تگ پشتیبانی کرد شما می توانید از دستورات و تگهای HTML3/0 استفاده کنید.
ابتدا تگ < font size=x > را برای آرایش عنوان صفحه استفاده می کنیم .
1- سند index.html را در ویرایشگر متنی خود را باز کنید .
2- در دروس قبل از قالب
برای نشان دادن عنوان صفحه استفاده می کنیم . حال می توانیم از تگ فونت استفاده کنیم .
به آنچه که ما انجام دادیم دقیق نگاه کنید اول سایز A 4 درجه بیشتر از مبنای اولیه ظاهر شد .
بقیه حروف 3 درجه بیشتر از حالت استاندارد و نیز تگهای < b > و < b / > برای برجسته کردن عنوان استفاده کردیم . در پایان چون از تگهای < h1 > تا < h6 > برای شکستن خط استفاده کردیم مجبور به استفاده از تگ
شدیم که عنوان را مجبور به ظاهر شدن در خط جدید کند.
3- اگر خواستیم در جایی از صفحه نقل قولی از کسی داشته باشیم آن را برجسته نشان می دهیم .
4- نتایج خود را ذخیره کنید .
می توانید تفاوت بین استفاده از تگ < font > و < h1 > .... را ببینید
موضوع مطلب : 
