افزودن صوت و تصویر به صفحات وب

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

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

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

فرمتهای صوتی در وب

افزودن صوت و تصویر به در طراحی صفحه های وب غالبا با دو هدف زیر صورت می گیرد:

اول؛ افزایش جذابیت در وبسایت با اضافه کردن یک فایل صوتی مانند یک قطعه موسیقی به صفحات

دوم؛ ایجاد امکان پخش یک فایل صوتی در صفحه وب برای اطلاع رسانی به مخاطبین مانند پخش زنده شبکه های رادیویی

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

اما به عنوان نمونه در مورد پخش یک قطعه موسیقی، با استفاده از این روش می توان از کپی شدن فایل بر روی رایانه مرورگر به دلایلی مانند حق تکثیر (Copyright) جلوگیری نمود.

در میان فرمت هایی که برای پخش صدا در صفحات وب مورد استفاده قرار می گیرند، موارد زیر کاربرد گسترده تری دارند:

wav

در مبحث افزودن صوت و تصویر باید اشاره نمود که فـرمت صوتی Wav توسط شرکت Microsoft ارائه شده به دلیل پخش در نرم افزار Windows Media Player  که همراه با سیستم عامل ویندوز عرضه می شود از محبوبیت بالایی برخوردار است؛ چرا که به راحتی در مرورگر وب رایانه هایی که ویندوز بر روی آنها نصب شده پخش می گردد. حجم فایل هایwav  با مشخصات فنی فایل مانند نرخ بیت (Bit Rate) و تعداد کانال های پخش، ارتباط مستقیمی دارد اما به دلیل عدم استفاده از الگوریتم های فشرده سازی، نسبتا بالا است.

mp3

فرمت mp3 از جمله فرمت های پرطرفدار در وب و نیز سایر رسانه های دیجیتال محسوب می شود که با استفاده از یک الگوریتم قدرتمند برای فشرده سازی فایل های صوتی توانسته نسبت خوبی میان حجم و کیفیت فایل ها ایجاد نماید. این فرمت عمدتا برای پخش موسیقی مورد استفاده قرار می گیرد و توسط اغلب مرورگرها پشتیبانی می شود.

wma

از عبارت Windows Media Audio گرفته شده و فـرمتی است کـه توسط شرکت Microsotf عرضه گردیده اما بر خلاف wav  از الگوریتم های فشرده سازی استفاده می کند و لذا حجم پایینتری دارد. برای پخش این فرمت روی مرورگر، باید نرم افزار رمزگشای (Decoder) آن بر روی رایانه موجود باشد.

mid

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

ra و ram

این فرم تها که اعضای خانواده فرمت های قابل پخش در نرم افزار RealPlayerمحسوب می شوند. برای پخش زنده فایل های صوتی کاربرد دارند اما پخش آن ها در مرورگر مشروط به وجود نرم افزار Player Real روی رایانه یا نصب افزونه مورد نیاز روی مرورگر است.

aif

در مبحث افزودن صوت و تصویر لازم به ذکر است که فرمت AIFF (Audio Interchange File Format) که محصولی از شرکت Apple است برای ذخیره سازی صدا های دیجیتال با کیفیت بالا ایجاد شده و غالبا بر روی سیستم های مکینتاش (Macintosh) مورد استفاده قرار می گیرد.

افزودن صوت به صفحه

در بخش دیگر بحث افزودن صوت و تصویر ، برای اضافه کردن صدا به صفحه وب نیز روش های متعددی وجود دارد. اما متأسفانه همه مرورگرها از آنها پشتیبانی نمی کنند لذا تنها به ذکر مواردی می پردازیم که توسط اغلب مرورگرها قابل اجرا هستند.

استفاده از برچسب <a>

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

منظور از نشانی نسبی این است که مشخص شود فایل یا صفحه مورد نظر فارغ از محل ذخیره سازی روی رایانه، نسبت به صفحه ای که برچسب <a> در آن وجود دارد در چه محلی قرار گرفته است. برای مثال فرض کنید فایل صوتی همان جایی ذخیره شده که صفحه وب قرار دارد بنابراین مقدار مشخصه href  به صورت زیر تنظیم می شود.

<a href=”Song.wav”>برای شنیدن موسیقی کلیک کنید  </a>

حال اگر در کنار صفحه وب مورد نظر یک پوشه با نام Sounds ایجاد نموده و فایل صوتی را درون آن قرار دهیم، مقدار href به صورت زیر اصلاح می شود:

<a href=””Sounds/Song.wav”>برای شنیدن موسیقی کلیک کنید  </a>

محل فایل تصویر

برای ایجاد یک وبسایت، معمولا صفحات ساخته شده را درون پوشه My Web Sites که درون پوشه My Documents ویندوز قرار دارد کپی نموده و برای فایل های صوتی، تصویری و … پوشه های مجزا تعریف می کنند.

کد فوق را درون ویرایشگر متن وارد و صفحه وب ساخته شده را درون مرورگرIE  باز کنید. با کلیک روی پیوند، نرم افزار Windows Media Player  باز شده و فایل صوتی را پخش می کند.

اگر فایل های صوتی را به صورت پیوندی بر روی صفحه قرار دهید، در برخی مرورگرها مثل فایر فاکس با کلیک روی پیوند، ابتدا پیغامی ظاهر می شود و می پرسد که آیا می خواهید فایل را ابتدا روی رایانه خود ذخیره و سپس اجرا کنید یا ترجیح می دهید فایل همزمان با دانلود پخش شود.

فرمتهای تصویری در وب

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

GIF

Graphic Interchange Format یا  GIFیک فرمت تصویری بسیار پرکاربرد و کم حجم است که طراحان وب ترجیح می دهند برای ایجاد تصاویر مورد نظر در محیط وب از آن استفاده کنند. در تصاویرGIF ، هر نقطه یا پیکسل توسط یکی از 256 رنگ قابل ارائه توسط این فرمت پوشش داده می شود.

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

مزیت فایل های چند فریمی GIF در این است که می توانید یک انیمیشن ساده و کم حجم را درون صفحه وب بگنجانید تا بدون نیاز به افزونه خاصی درون مرورگر نمایش داده شود.

فرمت GIF دو ویژگی مهم دیگر هم دارد که Transparency و Interlacing نامیده می شوند. Transparency  یا پشت‌نمایی خاصیتی در تصاویر GIF است که به کمک آن می توانید بخشی از تصویر را بدون رنگ کنید تا وقتی تصویر روی یک صفحه وب قرار گرفت، رنگ موجود در پس زمینه را بپذیرد. همان طور که در تصویر زیر می بینید، رنگ سفید یکبار به صورت عادی و یکبار به صورت پشت‌نما روی صفحه وب قرار گرفته است.

ویژگی دوم یا Interlacing باعث می شود تصویر به صورت تدریجی درون صفحه بارگذاری گردد و بیننده بتواند تا بارگذاری کامل آن، بخش هایی از تصویر را مشاهده کند.

JPG

Joint Photographic Experts Group یا JPG یکی دیگر از فرمت های پرکاربرد در دنیای چند رسانه ای و وب است که توسط اکثر قریب به اتفاق نرم افزارهای گرافیکی و نمایش تصویر و حتی دستگاه های سخت افزاری مانند دوربین های دیجیتال پشتیبانی می شود و به دلیل نسبت مناسبی که میان حجم تصاویر و کیفیت نمایش آن ها برقرار می کند محبوبیت خاصی دارد. این فرمت قادر است بیش از 16 میلیون رنگ را پشتیبانی نماید به همین دلیل در مقایسه با تصاویر GIF از کیفیت و حجم بالاتری برخوردار است.

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

فایلهای JPG بر خلاف تصاویر GIF از حالت پشت‌نمایی پشتیبانی نمی‌کنند. اما هنگام ایجاد آن ها می توان با فعال نموده گزینه Progressive  که مانند Interlacing عمل می کند، امکان نمایش تدریجی آ نها را همزمان با بارگذاری بخشی از اطلاعات تصویر فراهم آورد.

PNG

Protable Network Graphic یا PNG یکی از جدیدترین فرمت های تصویری است که برای انتقال و نمایش تصاویر در بستر شبکه ایجاد شده است. سازندگان این فرمت با ترکیب مزیت های موجود در فرمت های JPG و GIF در تلاش هستند آن را جایگزین تصاویر GIF کنند و هر چند توانسته اند آن را به تأیید انجمن وب برسانند با این حال رشد استفاده از این فرمت در صفحات وب چندان رضایت بخش نیست. فرمت PNG از قابلیت پشتن مایی پشتیبانی می کند اما برخالف GIF اجازه ایجاد تصاویر چند فریمی را نمی دهد. ضمنا امکان نمایش تدریجی تصاویر در آن پیشبینی شده است.

فـرمت هـای تصویری فـوق را مـی تـوان تـوسط نـرم افزارهـای طراحـی و ویرایش تصویر مـانند Fireworks،Photoshop ،CorelDeaw ،ImageReady  و غیره ایجاد و ویرایش نمود. برای ساخت برخی تصاویر مانند تصاویر چند فـریمیGIF   هم نرم افزارهـای جداگـانه کـوچکـی طراحـی شده است. وجـه مشترک همه این نرم افزارها امکان بهینه سازی یا Optimization تصاویر است. یعنی اینکه مشخصات فنی نظیر تعداد رنگها، ابعاد، تراکم نقاط را به گونه ای تغییر داد تا تصویر به حجم و کیفیت مورد نظر طراح نزدیک شود. در تصویر زیر تنظیمات ذخیره سازی فایل های GIF را در محیط نرم افزار فتوشاپ می بینید که در آن امکان بهینه سازی تصویر از طریق تغییر تعداد رنگ ها وجود دارد.

 چینش تصاویر در صفحه

در افزودن صوت و تصویر و خصوصا برای افزودن تصاویر به صفحه وب از برچسب <img> استفاده می شود که دارای دو مشخصه  اجباری و چندین مشخصه اختیاری است. مشخصه های اجباری این برچسب عبارتند از:

1.      src

Src از عبارت Source به معنی منبع گرفته شده و نام و نشانی محل قرارگیری تصویر را مشخص می کند. این تصویر می تواند در کنار صفحه وب، درون پوشه ای در وبسایت یا محلی دیگر از اینترنت قرار داشته باشد.

2.      alt

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

در کنار صفحه وبی که تمرین ها را بر روی آن اجرا می کنید، یک فایل تصویری از نوع JPG و با نام Logo  ذخیره کنید. حال کد زیر را در ویرایشگر متنی وارد نموده و تغییرات را ذخیره کنید. صفحه ساخته شده را درون مرورگر IE باز کنید.

<img src=”Logo.jpg” alt=”وبسایت لوگوی”/>

حال در کنار صفحه وب یک پوشه با نام images ایجاد و فایل تصویری را به درون آن منتقل کنید.

سپس به پنجره مرورگر بازگشته و با فشار دادن کلید F5 صفحه را تازه سازی (Refresh)نمایید.

به دلیل تغییر محل قرارگیری فایل تصویری، این بار تصویر نشان داده نمی شود و به جای آن متنی که در مشخصه  alt درج شده ظاهر می گردد. نشانی را به صورت زیر اصلاح کنید تا تصویر نشان داده شود.

<img src=””images/Logo.jpg” alt=”وبسایت لوگوی”/>

نکته

برخی از کاربران گمان می کنند مشخصه alt برای ایجاد یک راهنما (Tip) برای تصویر کاربرد دارد. تا با قرار گرفتن اشاره گر ماوس روی تصویر به عنوان توضیح نشان داده شود. اما این وظیفه بر عهده مشخصه اختیاری title است و اگر این مشخصه را صریحا مقداردهی نکنید، از مقدار در نظر گرفته شده برای مشخصه  alt استفاده می کند.

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

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

<img src=””images/Logo.jpg” alt=” لوگوی وبسایت” title=”لوگوی اندیشه نگاران شیز “width=”100” height=”100”/>

برای مقداردهی به ابعاد تصویر باید نسبت میان ابعاد را رعایت کنید، برای مثال اگر طول تصویر نصف می شود باید عرض آن هم نصف شود تا حالت طبیعی تصویر مانند شکل رو به رو به هم نخورد.

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

گاهی اوقات لازم است محل ذخیره سازی یک تصویر را درون صفحه وب به دست آورده و از نشانی آن استفاده کنید. برای انجام این کار باید روی تصویر راست کلیک نموده و گزینه Properties  را انتخاب کنید. یدین ترتیب پنجرهای ظاهر شده و در مقابل عبارت (URL Address) نشانی فایل تصویری را درج می کند.

تمرین

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

این نشانی را در مشخصه src از برچسب <img> قرار دهید.

<img src=”http://www.google.com/intl/en_ALL/images/srpr/logo1w.png” alt=” ” گوگل سایت لوگوی

</

برای رسم کادر در اطراف تصویر می توانید از خصوصیات موجود در مشخصه style استفاده نمایید. این کار سابقا توسط مشخصه border  انجام می گرفت که در زبان XHTML منسوخ شده است.

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

<img src=”http://www.google.com/intl/en_ALL/images/srpr/logo1w.png” alt=” ” گوگل سایت لوگوی

style=”border-style:solid;border-width:thin;border-color:Teal”</

در این کد، خصوصیت های زیر را برای مشخصه style مورد استفاده قرار دادیم:

• border style نحوه رسم کادر در اطراف تصویر را مشخص می کند.solid  حالت خط صاف است و می توانید برای رسم نقطه چین از مقدار dotted استفاده کنید.
• border width برای تعیین ضخامت کادر کاربرد دارد و سه حالت thin ،medium  و thick به ترتیب برای کادرهایی با ضخامت کم، متوسط و زیاد استفاده می شوند.
• border color این خصوصیت رنگ کادر را تعیین می کند و می تواند نام یا کد یکی از رنگ های قابل استفاده در وب باشد.

کد فوق در مرورگر به صورت رو به رو نشان داده می شود.

چینش چند تصویر در صفحه

در مبحث افزودن صوت و تصویر از جمله موارد قابل توجه چینش چند تصویر در صفحه است. اگر کد درج شده برای قرار گیری لوگوی سایت گوگل در صفحه وب را یک بار دیگر تکرار نمایید، تصویر جدید در سمت راست لوگوی قبلی قرار می گیرد. اگر این کار را چند بار دیگر تکرار کنید و برای نمونه پنج بار برچسب <img> حاوی لوگوی سایت گوگل را درون کد قرار دهید با صفحه ای مانند تصویر زیر روبرو خواهید شد.

توجه داشته باشید که تعداد تصاویری که در یک سطر قرار می گیرد بستگی به ابعاد تصاویر و نیز عرض پنجره مرورگر دارد. یعنی اگر عرض پنجره مرورگر را کم کنید، تصاویر با آرایش جدیدی در کنار یکدیگر قرار می گیرند.

چنانچه تمایل دارید تعداد تصاویری که در هر سطر قرار داده می شود ثابت باشد می توانید از برچسب هایی مانند <p >و </br> استفاده نمایید که البته یک راه حل ابتدایی محسوب می شود. به عنوان نمونه، کد زیر در هر سطر دو تصویر قرار می دهد و تصاویر بعدی را به سطر بعد منتقل می کند (در کد زیر برای حفظ اختصار، محتویات برچسب <img > حذف شده اند).

<img … /><img … /><br/><img … /><img … /><br/><img … />

مشخصه style در برچسب  <img>

در مشخصه style از برچسب  <img>خصوصیت هایی برای تعیین حاشیه سفید اطراف تصویر وجود دارد. که می تواند برای تنظیم فاصله میان تصاویر برحسب نقطه مورد استفاده قرار گیرد. در جدول زیر این خصوصیت ها و کاربرد هر یک را مشاهده می کنید.

فرض کنید تصویری با نام jpg.earth را درون پوشه images ذخیره نموده و کد زیر را برای قرار گرفتن سه نمونه از این تصویر روی صفحه وب در ویرایشگر متنی وارد کرده ایم.

<img src=””images/ earth.jpg” alt=”کره زمین”/>

<img src=””images/ earth.jpg” alt=”کره زمین” style=” margin-left:20”/> <br/>

<img src=””images/ earth.jpg” alt=”کره زمین” style=” margin-left:30;margin-top:30”/>

همان طور که در تصویر می بینید، وقتی خصوصیت margin-leftبرای عکس دوم با عدد 20 مقدار دهی می شود، لبه سمت چپ این عکس نسبت به کناره صفحه به میزان 20 نقطه فاصله می گیرد. همچنین عکس سوم ضمن اینکه از کناره صفحه به میزان 30 نقطه فاصله گرفته، از عکس بالایی خود هم 30 نقطه دور شده است.

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

تصویر پس زمینه

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

<body style=”background-image:url(images/logo.jpg);” >

این کار با استفاده از مشخصه style  در برچسب <body> انجام می گیرد. پیش از این یاد گرفتید که برچسب <body> حاوی مشخصه ها و تنظیماتی است که بر روی تمام صفحه وب تأثیرگذار است. برای تنظیم یک تصویر به عنوان پس زمینه صفحه باید در مشخصۀ style خصوصیت image-background با عبارتی به صورت url (نشانی تصویر) مقداردهی کنید. نتیجه کار چیزی شبیه به پنجره بعد است:

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

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

<body style=”background-color:Silver“>

قرار دادن تصویر و متن در کنار هم

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

کد زیر را درون ویرایشگر متنی وارد نموده و تغییرات ایجاد شده در کد XHTML را ذخیره کنید.

<body style=”background-color:#CCCC66”>

Earth

<img src=”images/earth.jpg” alt=” کره زمین” />

figure-1

</body>

صفحه به صورت زیر درون مرورگر نشان داده می شود. در واقع مرورگر نوشته های موجود و برچسب <img > را به ترتیبی که در کد درج شده اند درون صفحه می چیند.

حال عبارت Earth را به یک سرفصل تبدیل کنید.

<h3>Earth</h3>

<img src=”images/earth.jpg” alt=” کره زمین” />

figure-1

عبارتی که درون برچسب <h3 > قرار دارد به بالایی تصویر منتقل می شود.

به برچسب <img> مشخصه  style را اضافه نموده و خصوصیت vertical-align را روی top تنظیم کنید.

<img src=”images/earth.jpg” alt=” کره زمین” style=”vertical-align:top” />

صفحه وب به صورت زیر درمی آید.

این خصوصیت، ترازبندی عمودی تصویر و نیز همه عناصری را که در کنار آن قرار میگیرند (در ینجا متن) مشخص می کند و غالبا یکی از مقادیر زیر را می پذیرد:

حال به جای عبارت figure-1  یک متن طولانی قرار داده و ضمنا با استفاده از خصوصیت حاشیه دهی به تصویر، فاصله متن را از تصویر روی مقدار دلخواه تنظیم نمایید.

<img src=”images/earth.jpg” alt=” ” کره زمین style=”vertical-align:top; margin-right:20” />

همان طور که در تصویر زیر می بینید سطر دوم و ادامه متن به زیر تصویر منتقل می شود.

برچسب float

برای رفع چنین مشکلی در متنهای طولانی، به جای خصوصیت align-vertical باید از خصوصیتfloat  استفاده کنید تا متن را در اطراف تصویر بچیند.

<img src=”images/earth.jpg” alt=” ” کره زمین style=”float:left; margin-right:20” />

برای متنهای فارسی می توانید جهت صفحه را در برچسب <body > روی مقدار rtl تنظیم نموده و خصوصیت float با right مقداردهی کنید. این روش یک راه حل موقت محسوب می شود. چون محل قرارگیری نوار پیمایش را هم به سمت چپ پنجره می برد که ممکن است برای برخی کاربران خوشایند نباشد. در بخش های آینده با روش اصولی فارسی نویسی در صفحات وب آشنا خواهید شد.

<body dir=”rtl” style=”background-color:#CCCC66”>

<h3>زمین/>h3>

<img src=”images/earth.jpg” alt=” ” کره زمین style=”float:left; margin-right:20” />

برای مطالعه در مورد ایجاد متن و پاراگراف بندی (افزودن متن به صفحه وب) به لینک های مربوط مراجعه نمایید.