روش قرار دادن متن و عکس کنار هم در html را یاد بگیرید

خانه » بلاگ » css » روش قرار دادن متن و عکس کنار هم در html را یاد بگیرید

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

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

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

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

 

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

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

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

 

سمت راست تصویر (آموزش قرار دادن متن و عکس کنار هم در html)

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

 

 

سمت چپ تصویر

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

 

چطوری کنار تصویر، نوشته قرار دهیم

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

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

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

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

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