آموزش 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”    />

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

مثالهایی در این زمینه + فایل pdf  این خود آموز برای شما دوستان اضافه شده.

منتظر دریافت پیشنهادات و نظرات شما هستیم.

Be Sociable, Share!


۱۳ دیدگاه


  1. سعید
    ۱۹ مرداد ۱۳۸۸

    فاصله انتشار بین قسمت ۴ و ۵ خیلی زیاد شد
    دست شما درد نکنه




  2. علی
    ۲۷ مرداد ۱۳۸۸

    سلام واقعا عالیه . فقط من قسمت چهارم آموزش htmlرو پیدا نمی کنم لطفا اون رو در قسمت آموزشی قرار بدید . ممنونم




  3. امیر
    ۲۷ مرداد ۱۳۸۸

    با تشکر از شما دوستان.
    همه مطالب در قسمت آرشیو موجوده.
    من لینک قسمت چهارم رو اینجا قرار میدم.
    http://www.ittutorial.ir/?p=894




  4. Heidi
    ۱۹ آبان ۱۳۸۸

    in ghesmat vaghean kheily kamel tozih dadeh shodeh bood ba arze tashakor va khasteh nabashid




  5. کامران
    ۱۹ آبان ۱۳۸۸

    هدیه جان میبینم که داری تمام قسمتها رو پشت سر هم میخونی
    امیدوارم که حسابی پیشرفت کنی




  6. Heidi
    ۲۰ آبان ۱۳۸۸

    mamnoon areh man daram doreh kamele tarahie web ro migzaroonam vali tazeh shoroo kardam va moshkeli ke hast ine ke be zabane almani mikhoonam bad kheily jaha dochareh moshkel misham vali in khod amooz shoma kheily behem komak mikoneh




  7. امیر
    ۲۰ آبان ۱۳۸۸

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




  8. ریحانه
    ۱۵ آذر ۱۳۸۸

    ممنون از سایت خیلی خوبتان. مطالبتون عالیه




  9. موني
    ۸ اسفند ۱۳۸۸

    خیلی عالیه ممنونم




  10. امیر
    ۲۰ مرداد ۱۳۸۹

    با تشکر از سایت بسیار خوبتان




  11. آرشام
    ۲۴ مرداد ۱۳۹۰

    عالی




  12. masih
    ۴ فروردین ۱۳۹۱

    عالی و بسیار قابل فهم و تشکر




  13. مهدی
    ۱۸ مرداد ۱۳۹۱

    دمتون گرم…من یک هفته ای هست که دارم اموزش های شما رو میخونم و تا قسمت ۵ خوب پیش اومدم و امیدوارم گام های بعدی رو هم خوب پیش برم….

    با این اموزش هایی که شما میدین محاله کسی متوجه مطالب نشه…مرسی



دیدگاه خود را بنویسید