روش قرار دادن متن و عکس کنار هم در html را یاد بگیرید
خانه » بلاگ » css » روش قرار دادن متن و عکس کنار هم در html را یاد بگیرید
شاید یکی از اولین چیزهایی که می خواهید در طراحی سایت از آن استفاده کنید ، تصاویر باشد. اما نه فقط یک تصویر ساده ای که در جای خود محصور شده است. بلکه می خواهید ایده های خلاقانه خود در طراحی سایت بکار ببرید و اما مشکل قرار دادن متن و عکس کنار هم در html را دارید. در صورتی که می خواهید طریقه قرار دادن متن در اطراف تصاویربا استفاده از 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>
سمت راست تصویر (آموزش قرار دادن متن و عکس کنار هم در 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 پیکسل در اطراف تصویر تولید می نماید.
مشکل استفاده از HSPACE این است که یک بافر در هر دو طرف تصاویر قرار می دهد و اگر بخواهیم تصویر در حاشیه قرار داده شود و با حاشیه سمت چپ صفحه و یا سمت راست صفحه فاصله نداشته باشد با مشکل روبرو می شویم.
برای مطالعه آموزشهای بیشتر در مورد کدنویسی و چگونگی طراحی سایت می توانید به Webyar.net مراجعه فرمایید.
