طریقه ی قرار دادن متن در اطراف تصاویر

چگونه می­توان واژه­ ها را در اطراف تصویر قرار داد؟

شاید یکی از اولین چیز­هایی که می­خواهید در طراحی سایت از آن­ استفاده کنید ، تصاویر ­باشد. اما نه فقط یک تصویر ساده ای که در جای خود محصور شده است. بلکه می خواهید ایده های خلاقانه خود در طراحی سایت بکار ببرید و متون سایت را در اطراف تصاویر قرار دهید. در صورتی که می خواهید طریقه ی قرار دادن متن در اطراف تصاویر با استفاده از html را یاد بگیرید ، به خواندن این مطلب ادامه دهید.

همچنین اگر قصد دارید از کد css برای قرار دادن متن در اطراف تصاویر استفاده کنید ، لازمه است که مقاله ی چیدمان مکان عکس در کنار مطلب توسط css را مطالعه فرمایید.

اما چگونه می­توان توسط html تصاویر و کلمات را در کنار یکدیگر به­ کار برد؟

 

نحوه ی چینش متون در اطراف تصویر

شما می­توانید با استفاده از خصوصیت ALIGN تصاویر را در صفحه قرار دهید و این خصوصیت دارای چهار مقدار TOP,LEFT,RIGHTو Bottom می­باشد. مقدار انتخابی شما برای این خصوصیت تعیین خواهد کرد که متن مجاور در اطراف تصویر چگونه قرار گیرد.  اگر تصویر داخل یک تگ<p> یا <h1> قرار داده شده باشد و خاصیت ALIGN تنظیم نشده باشد, مقدار پیش­فرض Bottom می­باشد.

در صورتی که از کد html زیر استفاده کنید و خاصیت ALIGN آن را top قرار دهید ، خط اول متن در بالای تصویر قرار خواهد گرفت و بقیه­ ی متن در زیر تصویر قرار می­گیرد. که باعث ایجاد یک فضای سفید بزرگ در کنار تصویر می­شود.

<p>
<img SRC= " img/apple_brand.jpg " ALIGN="top" />
This text appears to the left of the image.
This text appears to the left of the image.
This text appears to the left of 
</p>

 

قرار دادن متن در سمت راست تصویر

حال اگر به جای مقدار top  از مقدار right یا left استفاده کنید این مشکل نیز حل می­شود. اگر طبق کد زیر مقدار ALIGN را left قرار دهید متن به صورت منظم در سمت راست تصویر قرار می­گیرد.

<p>
<img SRC= " img/apple_brand.jpg " ALIGN="left" /> 
This text appears to the left of the image.
This text appears to the left of the image.
This text appears to the left of 
</p>

 

 

قرار دادن متن در سمت چپ تصویر

و اگر مقدار ALIGN را right قرار دهید متن به­ صورت منظم در سمت چپ تصویر قرار می­گیرد.

<p>
<img SRC= " img/apple_brand.jpg " ALIGN="right" /> 
This text appears to the left of the image.
This text appears to the left of the image.
This text appears to the left of 
</p>

 

قرار دادن متن در اطراف تصویر

شما حتی می­توانید یک متن را در کنار یک تصویر در سمت چپ صفحه قرار دهید و سپس متن را در اطراف تصویر دیگری در سمت راست صفحه نیز قرار دهید. به کدهای زیر توجه کنید

<img src="apple_brand.jpg"  ALIGN="left">
This text appears to the right of the image
<br CLEAR="left">
<img src="apple_brand.jpg"  ALIGN="right">

 

در این مثال از تگ br با خصوصیت clear استفاده شده است ، برای این که خصوصیت”  ALIGN=”left متن قبلی پاک شود و تنظیمات تصویر سمت راست اعمال گردد.  درکد اول تصویر سمت چپ قرار می­گیرد و متن به صورت منظم در سمت راست تصویر قرار می­گیرد سپس در کد دوم تنظیمات تصویر اول متوقف می­شود و با کد سوم تصویر در سمت راست قرار می­گیرد و متن از بالای تصویر شروع می­شود و به­ صورت منظم در سمت چپ تصویر قرار میگیرد.

تا اینجا نحوه ­ی قرار دادن متن در اطراف تصاویر توضیح داده شد. اما اگر دقت کرده باشید با اجرای کدهای زیر ، متن در اطراف تصویر قرار می­گیرد اما ظرافت کافی را ندارد و متن بیش­ از اندازه به تصویر نزدیک شده است برای ایجاد فاصله بین متن و تصویر می­توان از دو خصوصیت HSPACE وVSPACE استفاده کرد .  HSPACEیک بافر در سمت راست و چپ تصویر ایجاد می­کند در حالی­که  VSPACE یک بافر در بالا و پایین تصویر ایجاد می­کند. کد زیر یک بافر به اندازه­ی 50 پیکسل  در اطراف تصویر تولید می نماید.

<img src="apple_brand.jpg"  ALIGN="right" HSPACE = "50" VSPACE = "50>

 

مشکل استفاده از HSPACE این است که یک بافر در هر دو طرف تصاویر قرار می­دهد و اگر بخواهیم تصویر در حاشیه قرار داده شود و با حاشیه­ ی سمت چپ صفحه  و یا سمت راست صفحه فاصله نداشته باشد با مشکل روبرو می­شویم.

برای مطالعه­ ی آموزش­های بیشتر در مورد کدنویسی و چگونگی طراحی سایت می­توانید به وب یار مراجعه فرمایید.