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

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

برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.webyar.net/

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

 

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

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

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

 

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

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

نوشته طریقه ی قرار دادن متن در اطراف تصاویر اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.

طراحی سایت اصفهان | سئو سایت اصفهان

پربازدیدترین اخبار
طراحی سایت

طراحی سایت در اصفهان   طراحی سایت و سئو سایت در اصفهان   تیم طراحی سایت و سئو سایت وب یار به آدرس ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت , سئو سایت در گوگل ، ارسال […]

دانلود رام رسمی هواوی وای ۶ (Huawei Y6) مدل SCl-U31 و SCL-L21 با لینک مستقیم دانلود و آموزش اختصاصی نصب در این پست ارائه میشود. هواوی Y6 محصول ۲۰۱۵ کمپانی چینی در ادامه مسیر سری Y پا به بازار گذاشت و توانست فروش خوبی را نیز تجربه کنید. این گوشی با صفحه نمایش ۵ اینچی […]

واحد خبر mobile.ir : شرکت سامسونگ الکترونیکس در روز چهارشنبه ۲۴ می ۲۰۱۷ (۳ خرداد ۱۳۹۶) در جریان نشست سالانه نیمه‌رساناهای سامسونگ (Samsung Foundry Forum) نقشه راه جامع خود را در زمینه نیمه‌رساناها برای چند سال آینده با مشتریان و شرکای تجاری در میان گذاشت. به گفته سامسونگ این برنامه در راستای طراحی و … […]

دانلود رام رسمی و فایل فلش برای تبلت گلکسی تب اس ۲ نسخه ۹٫۷ (Galaxy Tab s2 9.7) اینچی مدل  SM-T815 LTE 4G با اندروید ۷ نوقا + آموزش نصب گلکسی tab s2 ورژن ۹٫۷ اینچی ازتبلت های قدرتمند بازار است که هنوز هم که هنوزه پشتیبانی سامسونگ را به خود میبیند و از این رو هنوز […]

اخیرا شایعاتی درباره عرضه نسخه جدیدی از سری بازی ها بسیار پر طرفدار Assassins Creed به بیرون نشت کرده است. این شایعات در خلال کنفرانس E3 بسیار شدت گرفت چرا که جزئیات بیشتری از بازی های مختلف عرضه شد. یکی از جذابیت های نسخه جدید این بازی به نام Assassins Creed Origins این مبحث است که اعضای تیم […]