آموزش HTML – قسمت پنجم

وارد کردن تصاویر در صفحات HTML

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

این تگ img نشانه قرار گرفتن تصویر در صفحه و خصوصیت Src آدرس محل قرار گرفتن فایل تصویر است.
اگر
صفحه ای که عکس باید در آن قرار گیرد و خود تصویر در یک پوشه قرار داشته
باشند شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید.
مثلاً اگر تصویر شما در این آدرس قرار دارد http://www.example.com/images/image.gif
و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما
باید تگ زیر را برای اضافه کردن تصویر به صفحه خود به کار ببرید:

اگر فایل html و تصویر هر دو در یک پوشه باشند می توانید از این تگ استفاده کنید:

و در اینجا به دلیل اینکه تصویر ما داخل پوشه Images قرار دارد آدرس دهی ما به صورت زیر انجام می گیرد.

پسوند
فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز
استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما تصویری با
فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از
قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.
در مورد فرمت تصویرهای مورد استفاده در وب و استانداردهای آن در خودآموزهای بعدی توضیح خواهم داد.
برای
نمونه من می خواهم یک عکس را با نام Ittutorial.gif را که در پوشه Images
قرار دارد در صفحه وب اضافه کنم . در اینجا از این تگ استفاده کرده ام:

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

مقدار align می تواند center , right , left , top و ….. باشد که در قسمتهای آینده توضیحات بیشتری خواهیم داد.
Align ها کاربر بسیاری در صفحات وب دارن و خصوصیت بسیار مهمی در نحوه نمایش یک صفحه وب هستند.
به
خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ و فاصله
ها حساس هستند. پس ممکن است اگر به جای image.jpg از IMAGE.JPG استفاده
کنید مرورگر شما تصویری را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.
Alt چیست ؟
Alt مخفف کلمه Alternate text می باشد که برای اضافه کردن توضیحی کوتاه در مورد تصویر مورد استفاده قرار می گیرد.
طریقه نمایش این توضیح در مثالها موجود می باشد.

در
مورد اضافه کردن تصاویر به صفحه بعداً با جزئیات بیشتری توضیح می دهیم.
تا اینجا یاد گرفتیم چگونه یک تصویر را به صفحه اضافه کنیم و نحوه قرار
گیری آنرا در صفحه تعیین کنیم.
مثالهایی در این زمینه + فایل pdf این خود آموز برای شما دوستان اضافه شده.
منتظر دریافت پیشنهادات و نظرات شما هستیم.