031- 344 500 60

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

صفحه نخست » بلاگ » css » طریقه ی قرار دادن متن در اطراف تصاویر

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

۲۳ام بهمن ۱۳۹۶
شیما قطره سامانی
72

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

شاید یکی از اولین چیز­هایی که می­خواهید در طراحی سایت از آن­ استفاده کنید ، تصاویر ­باشد. اما نه فقط یک تصویر ساده ای که در جای خود محصور شده است. بلکه می خواهید ایده های خلاقانه خود در طراحی سایت بکار ببرید و متون سایت را در اطراف تصاویر قرار دهید. در صورتی که می خواهید طریقه ی قرار دادن متن در اطراف تصاویر با استفاده از 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>

 

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

حال اگر به جای مقدار 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 این است که یک بافر در هر دو طرف تصاویر قرار می­دهد و اگر بخواهیم تصویر در حاشیه قرار داده شود و با حاشیه­ ی سمت چپ صفحه  و یا سمت راست صفحه فاصله نداشته باشد با مشکل روبرو می­شویم.

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

طریقه ی قرار دادن متن در اطراف تصاویر
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
درباره نویسنده :
شیما قطره سامانی

عاشق طراحی سایت هستم. جدی ، مصمم و پر تلاش.

مطالب مرتبط

آموزش زبان جاوا اسکریپت

آموزش زبان جاوا اسکریپتjava script

آموزش زبان جاوا اسکریپتjava script زبان جاوا اسکریپت javaScript با سلام خدمت تمامی دوستان با دانش و همراهان عزیز طراحی سایت وب یار. مجموعه آموزش های طراحی سایت با عنوان آموزش جاوا اسکریپت توسط تیم طراحی سایت وب یار برای شما عزیزان آماده شده است که از امروز به صورت  آموزش های گام به گام […]

آموزش دستورات hml5

آموزش طراحی سایت Html5

آموزش طراحی سایت Html5 امروزه اهمیت طراحی سایت و رقابت بر سر داشتن بهترین رتبه سایت در میان سایت های موجود بر کسی پوشیده نیست، اما طراحی سایت حرفه ای رمز و رموزی دارد که طراحان سایت باید به آن ها آگاهی داشته باشند تا بتوانند در میان طراحان سایت ها به جایگاه بالایی برسند،اما […]

طراحی سایت اختصاصی هدایای تبلیغاتی

طراحی سایت اختصاصی هدایای تبلیغاتی

طراحی سایت اختصاصی هدایای تبلیغاتی طراحی سایت اختصاصی هدایای تبلیغاتی چاپگران از نمونه کارهای طراحی سایت تیم طراحی سایت و سئو وب یار میباشد که ویژگی این نمونه طراحی سایت ها،طراحی  فوق العاده حرفه ای با امکانات بسیار بالا میباشد . طراحی سایت تبلیغاتی برای مشتریان عزیزی که کسب و کارشان در حوزه های چاپ،تبلیغات،هدایای […]

آموزش دستوراتhtml5

آموزش دستوراتhtml5 در اولین جلسه آموزش html 5 به معرفی html 5  و مزایای کدنویسی با html5 ‌و حل مشکل ناسازگاری مرورگرها با دستورات html5  پرداختیم. با آموزش دستورات html5 جهت بهینه سازی گام به گام طراحی صفحات وب سایت همراه شما هستیم. دستورات html5 شامل یک سری تگ است که هر کدام کاربرد ویژه […]

ارسال دیدگاه

*    

*    

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

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

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

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