تنظیم تصویر در صفحه وب (راهنمای html)
تنظیم تصویر در صفحه وب (راهنمای html)
پس از اینکه چگونگی قراردادن تصویر را در صفحه وب آموختید، احتمالاً در مرحله بعدی میخواهید بدانید که چگونه باید موقعیت تصویر را در متن مشخص کنید. با صفت ALIGN می توان تصویر را در بالا، پایین یا وسط قرار داد
پس از اینکه چگونگی قراردادن تصویر را در صفحه وب آموختید، احتمالاً در مرحله بعدی میخواهید بدانید که چگونه باید موقعیت تصویر را در متن مشخص کنید. با صفت ALIGN می توان تصویر را در بالا، پایین یا وسط قرار داد. مقادیر صفت ALIGN عبارتند از: TOP (بالا)، BOTTOM (پایین) و MIDDLE(وسط). وقتی تصویری در بلوکی از متن قرار گرفت، خط بعدی متن، در بالا، وسط یا پایین تصویر قرار می گیرد و این به مقدار صفت ALIGN بستگی دارد. اگر صفت ALIGN به کار گرفته نشود، حالت پیش فرض آن BOTTOM است.
مثالی ۱ - ۶ .برنامه ای که چگونگی کاربرد صفت ALIGN را برای تنظیم تصویر نشان می دهد.نتیجه اجرای این برنامه در شکل ۱-۶ آمده است
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Basic Image Aigment </TITLE>
</HEAD>
<BODY>
<P>IMG SRC="a:\about 1.gif" ALIGN="TOP" BORDER="1">
Text at the top of the image. </P>
<P>IMG SRC="a:\abouti.gif" ALIGN="MIDDLE" BORDER="1">
Text at the middle of the image, </P>
<P--IMG SRC="a:abouti.gif" ALIGN="BOTTOM" BORDER="1">
Text at the bottom of the image. </P>
</BODY >
</HTML>
یکی از مشکلات تنظیم تصویر در HTML قدیمی این بود که متن موجود در صفحه، در اطراف تصویر جریان نداشت. در واقع، فقط یک خط از متن در کنار تصویر قرار میگرفت. بدین ترتیب یا تصویر می بایست خیلی کوچک بود تا صفحه وب چندان زیبا نبود.
نت اسکیپ مقادیر LEFT و RIGHT را برای صفت ALIGN معرفی کرد تا متن در اطراف شکل جریان یابد. دستور زیر موجب میشود تا تصویر به سمت چپ و متن به سمت راست برود:
<IMG SRC = "arm.gif. ALIGN = "RIGHT">
حتی می توان متنها را بین دو تصویر قرار داد.
مثالی ۲-۶ تنظیم تصویر با صفت ALIGN * همراه با مقادیر g|2-14-3. LEFT RIGHT این برنامه در شکل ۲-۶ آمده است.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Improved Text Flow<TITLE>
</HEAD>
<BODY >
<IMG SRC-"a:\about1.gif. ALIGN="LEFT">
The top image has its ALIGN attribute set to "left," so the text flows around it to the right. The top image has its ALIGN attribute see to "left," so the text flows around it to the right. The top image has its ALIGN attribute set to "left," so the text flows around it to the right. <BR CLEAR="LEFT"> <BR-> <BR>
<IMG SRC-"a:\abouti.gif". ALIGN="right">
The top image has its ALIGN attribute set to "right," so the text flows around it to the left. The top image has its ALIGN attribute set to "right," so the text flows around it to the left. The top
image has its ALIGN attribute set to "right," so the text flows around it to the left.
</BODY>
</HTML>
هنوز جنبه های دیگری از ALIGN وجود دارند که باید مورد بحث قرار گیرد. مقدار CENTER از صفت هنوز جنبه های دیگری از ALIGN مثل مقدار MIDDLE عمل میکند. نت اسکیپ و مایکروسافت، چهار مقدار دیگر برای ALIGN مطرح کردند که عبارت اند از ;ABSMIDDLE BASELINE, TEXTTOP,ABSBOTTOM. این مقادیر هنوز استاندارد نشده اند و توسط اغلب مرورگرها شناخته شده نیستند.
اگر مقدار ALIGN برابر با TEXTTOP باشد، بالای یک تصویر با بالای بلندترین کاراکتر موجود در خط فعلی تنظیم میشود. این مقدار، در اغلب مرورگرها با خطا مواجه می شود. مقدار BASELINE پایین تصویر را با خط پایه متن در خط فعلی تنظیم می کند. (خط پایه خطی نامرئی است که کاراکترها بر روی آن قرار می گیرند). مقدار ABSMIDDLE وسط یک تصویر را با وسط متن در خط تنظیم می کند. این مقدار، کاراکترهایی مثل y و g را که به طرف پایین خط ادامه دارند در نظر می گیرد. اما، مقدار BASELINE این نوع کاراکترها را شامل نمی شود. به عنوان مثال، در حرف g، نیمه پایین این حرف، در زیر خط پایه قرار می گیرد.
صفات HSPASE و VSPACE. فقط از اینکه متن بتواند در اطراف شکل قرار گیرد، کافی نیست. باید بتوان تصویر را دقیقاً همراه با متن به کار برد و مطمئن شد که در صورت لزوم، متن شکسته می شود و تصویر جاسازی می گردد. صفت HSPACE بافری از فضای افقی را در سمت چپ و راست تصویر و سایر اشیاء قرار می دهد و صفت VSPACE بافری از فضای عمودی را بین بالا و پایین تصویر و سایر اشیاء قرار می دهد. مقادیر هر دو صفت باید به صورت پیکسل بیان شود که با یک عدد مثبت مشخص می گردد. گرچه در بعضی از مرورگرها مقادیر این صفات را
می توان بر حسب درصد بیان کرد، ولی این کار پیشنهاد نمیشود، زیرا دقیق نخواهد بود.
مثال ۳- ۶ برنامه ای که کاربرد صفات VSPACE -3 HSPACE را نشان میدهد. نتیجه اجرای برنامه در شکل ۳- ۶ آمده است.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML
<ΗΕΑD>
<TITLE-HSPACE and VSPACE Example.</TITLE
</HEAD>
<BODY<P>The image below has its <TT> <B> <HSPACE></B> </TT> and <TT><B><\/SPACE>
</B></TT- attributes set to 10 pixels, so the text will flow around it at a distance of 10 pixels. The rest of this text is dummy text.
<IMG SRC–"a:\about1.gif. ALIGN="LEFT" HSPACE="10" VSPACE="10"> This is dummy text
. If it said anything interesting you would certainly be the first to know.
There's really no point in reading the rest of it.
This is dummy text. -
If it said anything interesting you would certainly be the first to know.
There's really no point in reading the rest of it.
This is dummy text.</P>
</BODY>
</HTML>
مقالات مرتبط به طراحی سایت :
تنظیم تصویر در صفحه وب (راهنمای html)
چند رسانه ای در وب ( راهنمای html)
خواص لیستها(راهنمای html)
خواص فاصله گذاری(راهنمای html)
خواص مرز کادرها (راهنمای html)
خواص شیوه نامه ها (راهنمای html)
شیوه نامه ها (راهنمای html)
اسکریپت و نقشه های تصویری(راهنمای html)
ایجاد نقشه تصویری کاربر(راهنمای html)
تصاویر و پیوند(راهنمای html)
قرار دادن تصویر در صفحه وب(راهنمای html)
پیوند در HTML (راهنمای جامع html)