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

آخرین بروز رسانی: بهمن ۲۳, ۱۳۹۶

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

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

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

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

 

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

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

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

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

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

 

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

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

 

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

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

مطالب مرتبط
ارتباط با تیم پشتیبانی وب یار

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

چه کمکی از تیم وب یار بر می آید ، با ما در میان بگذارید

برای گفتگو کلید ENTER را بفشارید

کلیه حقوق مادی و معنوی این اثر متعلق به طراحی سایت اصفهان وب یار می باشد CopyRight 2017

بالا