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

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

اضافه کردن متن و تصاویر به وب سایت آسان است. متن با تگ های استاندارد HTML مانند پاراگراف ها، عنوان ها و لیست ها اضافه می شود، در حالی که تصاویر روی یک صفحه با عنصر قرار می گیرند. با این حال، هنگامی که یک تصویر را به صفحه وب خود اضافه کرده اید، ممکن است بخواهید جریان متن را در کنار تصویر قرار دهید، نه اینکه در زیر آن قرار بگیرید (به طور پیشفرض تصویری که به کد HTML افزوده شده در مرورگر نمایش داده می شود). از لحاظ فنی، دو روش برای دستیابی به این نگاه وجود دارد: یا با استفاده از CSS (توصیه می شود) و یا با اضافه کردن دستورالعمل های تصویری به طور مستقیم به HTML (توصیه نمی شود، زیرا شما می خواهید جدایی سبک و ساختار وب سایت خود را حفظ کنید).

با استفاده از CSS

روش صحیح تغییر شیوه نوشتن متن و تصاویر صفحه و نحوه نمایش بصری آنها در مرورگر با CSS است . فقط به یاد داشته باشید، از آنجا که ما در مورد تغییر بصری در صفحه (ایجاد جریان متن در اطراف تصویر) صحبت می کنیم، این به این معنی است که دامنه Cascading Style Sheets است.

1. اول، تصویر خود را به صفحه وب خود اضافه کنید. به خاطر داشته باشید که هر ویژگی دیداری (مانند مقادیر عرض و ارتفاع) را از آن HTML حذف کنید. این مهم است، به ویژه برای وب سایت پاسخگو که در آن اندازه تصویر بر اساس مرورگر متفاوت است. بعضی از نرم افزارها، مانند Adobe Dreamweaver، اطلاعات تصویر عرض و ارتفاع را به تصاویری که با آن ابزار وارد شده اضافه می کنند، بنابراین اطمینان حاصل کنید که این اطلاعات را از کد HTML حذف کنید! با این وجود، مطمئن باشید که متن مناسب متن زیر را وارد کنید . در اینجا یک مثال از نحوه کد HTML شما ممکن است:
2. برای اهداف یک ظاهر طراحی شده، می توانید یک کلاس را به یک تصویر اضافه کنید. این مقدار کلاس چیزی است که ما در فایل CSS ما استفاده می کنیم. توجه داشته باشید که ارزش ما از اینجا استفاده می کنیم خودسرانه است، گرچه برای این سبک خاص ما تمایل داریم از مقادیر "سمت چپ" یا "راست" استفاده کنیم، بسته به اینکه ما می خواهیم تصویر ما را هماهنگ کنیم. ما می بینیم که نحو ساده برای کار خوب و آسان برای دیگران که ممکن است برای مدیریت یک سایت در آینده برای درک، اما شما می توانید هر گونه ارزش کلاس شما می خواهید را به شما بدهد.
   2. به خودی خود، ارزش این کلاس هیچ کاری نمی کند. تصویر به طور خودکار به سمت چپ متن متناسب نیست. برای این کار، اکنون ما باید به فایل CSS خود بازگردیم.

1. در سبک خودتان، اکنون می توانید سبک زیر را اضافه کنید:
   1. .ترک کرد {
   2. شناور به سمت چپ؛
   3. padding: 0 20px 20px 0؛
   4. }
   5. آنچه که شما در اینجا انجام دادید، از ویژگی CSS "شناور" استفاده کنید که تصویر را از جریان سند معمولی (تصویری که به طور معمول نمایش داده می شود، با متن زیر آن ترسیم می کند) بکشید و آن را به سمت چپ کانتینر آن . متن که پس از آن در نشانه گذاری HTML قرار دارد و اکنون در اطراف آن قرار دارد. ما همچنین تعدادی از مقادیر پهنای باند اضافه کردیم تا این متن فقط بر خلاف تصویر باشد. در عوض، فاصله ای زیبا دارد که در طراحی صفحه نمایش بصری جذاب خواهد بود. در اصطلاح CSS برای پهن کردن، ما 0 ارزش را به سمت بالا و چپ تصویر و 20 پیکسل به سمت چپ و پایین آن اضافه کردیم. به یاد داشته باشید، شما نیاز به اضافه کردن برخی از padding سمت راست یک تصویر سمت چپ سمت چپ. یک تصویر راست راست (که ما در یک لحظه به آن نگاه میکنیم) میتواند در قسمت سمت چپ آن قرار داده شود.
2. اگر صفحه وب خود را در یک مرورگر مشاهده میکنید، اکنون باید ببینید که تصویر شما در سمت چپ صفحه قرار گرفته است و متن زیبایی در اطراف آن وجود دارد. راه دیگری برای گفتن این است که تصویر به سمت چپ شناور شده است.

1. اگر می خواستید این تصویر را به سمت راست تنظیم کنید (مانند مثال عکس که این مقاله همراه است)، ساده می شود. ابتدا باید اطمینان حاصل کنید که علاوه بر سبک ما به CSS ما برای ارزش کلاس "سمت چپ" اضافه شده است، ما همچنین برای تنظیم راست هم داریم. این به نظر می رسد:
   1. .درست {
   2. شناور: راست؛
   3. padding: 0 20px 20px؛
   4. }
   5. شما می توانید ببینید که این تقریبا با اولین CSS ما نوشته شده است. تنها تفاوت این ارزش است که ما برای مالکیت "شناور" و مقادیر پلاگین استفاده می کنیم (اضافه کردن برخی به سمت چپ تصویر ما به جای حق).
2. در نهایت، شما می توانید مقدار کلاس تصویر را از سمت چپ به سمت راست در HTML تغییر دهید:
3. حالا به صفحه خود در مرورگر نگاه کنید و تصویرتان را به سمت راست با متن به طور مرتب بر روی آن قرار دهید. ما تمایل به اضافه کردن هر دو این سبکها، «چپ» و «راست» به تمام شیوهنامههایمان داریم تا بتوانیم از این سبکهای بصری به عنوان مورد نیاز در هنگام ایجاد صفحات وب استفاده کنیم. این دو سبک، ویژگی های قابل استفاده مجدد هستند که ما می توانیم هر زمان که بخواهیم تصاویر را با متنی که در اطراف آنها قرار دارد، سبک کنیم.

استفاده از HTML به جای CSS (و چرا شما نباید این کار را انجام دهید)

اگر چه امکان دارد متن را در اطراف یک تصویر با HTML قرار دهیم، استانداردهای وب dictate که CSS (و مراحل ارائه شده در بالا) راهی برای رفتن است تا بتوانیم جدایی ساختار (HTML) و سبک (CSS) را حفظ کنیم. این به ویژه هنگامی که شما در نظر دارید، برای برخی از دستگاه ها و پوسته ها مهم است، این متن ممکن است در اطراف تصویر جریان نداشته باشد. برای صفحه نمایش های کوچکتر، یک طرح وب سایت پاسخگو ممکن است نیاز داشته باشد که متن درست زیر تصویر قرار بگیرد و تصویر تمام عرض صفحه را بسط دهد. اگر سبک های خود را از نشانه گذاری HTML خود جدا می شوند، این به راحتی با استفاده از پرس و جو های رسانه ای انجام می شود. در دنیای چند دستگاهی امروز، که تصاویر و متن برای بازدیدکنندگان مختلف و در صفحه های مختلف متفاوت است، این تفکیک برای موفقیت درازمدت و مدیریت یک صفحه وب ضروری است.