تصاویر و css

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

در html5، تراز کردن عناصر با استفاده از Css صورت می گیرد. چنانچه فقط به تراز چپ، راست و یا مرکز احتیاج دارید، استفاده از تگ div بسیار کمک کننده می باشد. تگ div یک تگ همه منظوره است. از یک جهت این تگ مانند تگ  p  عمل می کند، به طوریکه بعد از آن شکست خط اتفاق می افتد. برای مشاهده عملی تگ div ، کد html خود را به صورت زیر اصلاح نمایید: (تگ  Doctype نوشته نشده است ).

در اینجا، از یک جفت تگ div استفاده شده است:

<div> <\div>، بعد از یک فاصله، ویژگی "ALIGN="right استفاده شده است. این ویژگی بر تمام عناصر داخل تگ  div تاثیر می گذارد که در مثال فوق  دومین عکس York Minster  می باشد. تغییرات را ذخیره و صفحه مرورگر را به روزرسانی نمایید. آنچه که مشاهده می شود به صورت زیر است:

دو مقدار دیگر برای ویژگی ALIGN عبارتند از را حذف کرده left و center. مقدار right را حذف کرده و مقادیر دیگر را تمرین نمایید.

تغییرات را ذخیره و نتیجه را در مرورگر مشاهده نمایید. لازم به ذکر است که در صورت نیاز به تراز  چپ (DIV ALIGN="left") احتیاجی به نوشتن این ویژگی نمی باشد، تراز پیش فرض، تراز چپ می باشد.

ویژگی align همچنین می تواند در تگ p بکار برده شود:

<P ALIGN ="center">

<IMG SRC="york_images/york_minster.jpg">

</P>

مجددا این ویژگی بر تمام عناصر داخل تگ p تاثیر گذار خواهد بود. حال کمی متن به بالا و پائین تگ div اضافه می کنیم:

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

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

در درس بعدی با نحوه چیدمان متن و تصویر در کنار هم آشنا خواهیم شد.