نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 3526
تاریخ بروزرسانی ۲۴ فروردین ۱۴۰۱

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

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

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

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

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

 

کد 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>

 

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

حال اگر به جای مقدار 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">

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

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

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

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

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

 

مقالات مرتبط
بهترین راهکار برای رفع محدودیت فالو در اینستاگرام

انواع محدودیت های حال حاضر در اینستاگرام • محدودیت فالوو کردن سایر کاربران اینستاگرام: • محدودیت لایک کردن پست‌های مختلف کاربران اینستاگرام: • محدودیت کامنت گذاشتن برای پست‌های مختلف شبکه اینستاگرام: • محدودیت به کار بردن هشتگ در پست‌های مختلف شبکه اینستاگرام: • محدودیت تعداد کلمات متن (کپشن) پست اینستاگرام: • محدودیت تعداد کاراکترهای Biography کاربران اینستاگرام: هدف از فالو و آنفالو کردن در اینستاگرام…

شرکت های طراحی اپلیکیشن

“اگه برنامه تون درست کار نمی‌کنه اصلاً نگران نشید چرا که اگر همه‌چیز درست کار کنه، شما بیکار می‌شید.” قانون موشر چرا این مقاله را با این جمله معروف از موشر بزرگ شروع کردیم؟ شرکت های طراحی اپلیکیشن ، در بین همه شرکت ها و مجموعه هایی که در زمینه برنامه نویسی فعالیت می کنند ، خدمات بزرگی را به جوامع و کسب و کار…