اضافه کردن عکس در Html جلسه چهارم

اضافه کردن عکس در html جلسه چهارم

با سلام به همراهان همیشگی، در این قسمت شمارو اشنا می کنیم با تگ img  برای اضافه کردن تصاویر به صفحات و کدهای  html ، برای اینکه بتونیم تصویر به صفحات html  وارد کنیم، باید با برخی تگ ها اشنا بشیم . پس با تمینا همراه باشید.

برای نمایش یک تصویر در یک صفحه، شما نیاز به استفاده از صفت src دارید. src مخفف (source)  یا منبع است.  مقداری که در صفت src قرار می گیرد، آدرس تصویری است که می خواهید به نمایش درآید. url اشاره به آدرس محلی دارد که تصویر در آن ذخیره شده است

اضافه کردن عکس در Html جلسه چهارم اضافه کردن عکس در html جلسه چهارم اضافه کردن عکس در Html جلسه چهارم HTML IMGE

اضافه کردن عکس در Html جلسه چهارم

مرحله اول: برای قرار دادن تصویر در صفحه, در اولین قدم تگ <img> را در ابتدای کد قرار می‌دهیم.

مرحله دوم: در این مرحله ما بعد از کلمه img باید به نوعی به صفحه بگوییم که عکسمان کجا قرار دارد تا مرورگر بتواند آن را پیدا کرده و نمایش دهد. برای این کار ما به یک اتریبیوت نیازمند هستیم که این کار را برای ما انجام دهد. این اتریبیوت src نام دارد که در واقع حاوی آدرس (url) عکس ما در اینترنت است.

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

به مثال‌های زیر توجه نمایید:

و همونطور که می بینیم نتیجه ای که در مرورگر می بینیم به این صورت خواهد بود:

اضافه کردن عکس در Html جلسه چهارم اضافه کردن عکس در html جلسه چهارم اضافه کردن عکس در Html جلسه چهارم Capture 14

اضافه کردن عکس در Html جلسه چهارم

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

Alt:

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

 تنظیم ابعاد تصاویر:

 

 

نکته بسیار مهم: توجه کنید که در هنگام وارد کردن مشخصات در داخل Style، بین هر دو استایل، یک علامت ; قرار دهید. نکته: ابعاد تصاویر بر حسب پیکسل وارد نمایید.

 کد قرار دادن تصویر سمت چپ و راست

 

 

آموزش HTML

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