آموزش جامع html --قرار دادن تصاویر در اسناد html

 

 

سرپرست تالار نرم افزار وآموزش ها

 

 

 

 

 

 

 

  آموزش جامع html - قسمت دهم - چگونگی قرار دادن تصاویر در صفحات وب

 

--------------------------------------------------------------------------------

 

اهداف این درس

 

1- قرار دادن تصاویر در اسناد html

2-چگونه می توان دور تا دور تصاویر متن قرار داد

3- مشخص کردن ابعاد تصاویر

4- ویرایش عکس و اضافه کردن خصلتی در آن بطوریکه بتواند در مرورگرهایی که از عکس پشتیبانی نمی کنند کارآیی داشته باشند .

 

شروع درس :

 

تگ های HTML برای تصاویر گرافیکی خطی

 

 

 

وقتی که نام فایل gif مانند همان نامی باشد که اسم آن فایل است و در شاخه خاصی قرار گرفته ، در اینصورت مرورگر می تواند آن تصویر را مابین متن ها نشان دهد .

برای اینکه تصویر در خط دیگری وارد شود می توان قبل از تگ تصویر یک تگ پاراگراف قرارداد .

 

 

 

تنظیم محل عکس به وسیله صفتی آورده می شود < IMG > شما می توانید در همجواری عکس و متن کنترل داشته باشید صفت align در تگ < IMG > این امکان را برای شما ایجاد می کند

 

 

 

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

 

1- باز کردن محیط کاری

2- باز کردن فایل Lesson1 .html

3- در بالای < h1 / > آموزش از راه دور < h1 > تگ زیر را قرار دهید .

 

 

این قالب HTML در بالای صفحه قرار خواهد گرفت .

4- ذخیره کردن صفحه و بار گزاری مجدد .

تذکر ) در هنگام جاگذاری عکس ممکن است تعجب کنید که چرا در اینجا برای شکسته شدن پاراگراف نیاز به تگ < p > نداشتید . دلیل آن این است که مرورگر در صورت برخورد به تگ < h1 > و < h2 > و ... خود خط ایجاد می کند .

 

صفتALT

 

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

 

 

امکان دیگری که شما می توانید در تگ < img > داشته باشید صفات Height و Width می باشد با این دو صفت می توانید ابعاد یک تصویر را مشخص کنید .

< Img src=" filename.gif" width=X height=Y >

X - طول و Y عرض تصویر را مشخص می کند.

شما می توانید از یکسری از برنامه های گرافیکی سودمند برای اینکه این اعداد را تخمین بزنید استفاده کنید. روش دیگر برای پیدا کردن ابعاد عکس این است که شما می توانید آیکون مورد نظر را با Drag and Drap به پنجره مرورگر بکشید و طول و عرض تصویر در Titlebar مرورگر نشان داده می شود .

 

تذکر : ترتیب صفات در تگ < Img > مهم نیست .

 

مروری بر مطالب

 

1- قالب HTML برای تصاویر چیست ؟

2- برای اینکه عکس در یک پاراگراف جداگانه ظاهر شود از چه تگی استفاده می شود ؟

3- چگونه یک عکس را به صفحه خود اضافه می کنید ؟

4- صفات تگ < Img > چیست ؟

 

تمرین

 

در صفحات خود از تصویر استفاده کنید .

 --------------------------------------------------

آیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید:

 

<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">

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

 

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

 

 <img src="learn_html.gif">

با نوشتن این تگ، این تصور را در صفحه نهایی می بینیم:

 

 

 

به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ <CENTER> در اطراف تگ تصویر استفاده کنید. مانند زیر:

 

<center>

<img src="learn_html.gif">

</center>

تصویر به دست آمده به صورت زیر است:

 

 

 

روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود دارد که با توجه به کم کاربرد شدن تگ <center> در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ <div> با شناسه "align="center استفاده کرد.

 

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

 

 

 

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

 

--------------------------------------------------

--------------------------------------------------

 

Free Web Hosting | free host | Free Web Space | BlueHost Review

 

 Online Stock Trading!

Need help trading? Tips and Tricks for online stock trading - Click Here

 

    

 

 

 

HTML

 

تاریخچه

 

--------------------------------------------------------------------------------

 

در سال 1992 در دانشگاه مینه سوتا سیستمی به نام web به وجود آمد که دارای دو ویژگی خاص بود.

 

Graphic, Multi Media

 

Hyper Text (فقط کلیک کردن و در سایت حرکت کردن )

 

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

 

همچنین برای رد و بدل کردن اطلاعات:

 

(HTTP(Hyper Text Transfer Protocol

 

HTML Web page

 

HTML یک text عادی و در حقیقت زبانی برای مارک کردن فایلهای text به یکدیگر می باشد که آن را با TAG مشخص کرده و به صورت &l

/ 0 نظر / 205 بازدید