آموزش HTML بخش پنجم

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

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

برای شروع یک folder به نام وب سایت خود بسازید و درون آن فولدری با نام Images قرار دهید.

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

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

<img src=”image.gif”>

این تگ img نشانه قرار گرفتن تصویر در صفحه و خصوصیت Src آدرس محل قرار گرفتن فایل تصویر است.

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

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

<img src=”http://www.example.com/images/image.gif”>

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

<img src=”image.gif”>

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

<img src=”Images/image.gif”>

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

در مورد فرمت تصویرهای مورد استفاده در وب و استانداردهای آن در خودآموزهای بعدی توضیح خواهم داد.

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

<img src=”Images/Ittutorial.gif "/>

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

Align چیست ؟

با قرار دادن این کد درون تگ html شما می توانید چینش تصویر را تعیین کنید.

<img src=” Ittutorial.gif " align=”center” />

مقدار align می تواند center , right , left , top و ….. باشد که در قسمتهای آینده توضیحات بیشتری خواهیم داد.

Align ها کاربر بسیاری در صفحات وب دارند و خصوصیت بسیار مهمی در نحوه نمایش یک صفحه وب هستند.

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

Alt چیست ؟

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

طریقه نمایش این توضیح در مثالها موجود می باشد.

<img src=” Ittutorial.gif ” alt=”ittutorial.ir” align=”center” />

در مورد اضافه کردن تصاویر به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک تصویر را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.