جستجو برای:
سبد خرید 0
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان

برای یاد گیری طراحی سایت از اینجا شروع کن

روز
ساعت
دقیقه
ثانیه
جشنواره فروش ویژه دوره ی html css به پایان رسید
مشاهده ی دوره

ورود

گذرواژه خود را فراموش کرده اید؟

ارسال مجدد رمز عبور یکبار مصرف (00:30)

ثبت نام

یک رمز به نشانی ایمیل شما فرستاده خواهد شد.

داده های شخصی شما برای پشتیبانی از تجربه شما در این وب سایت، برای مدیریت دسترسی به حساب کاربری شما و برای اهداف دیگری که در سیاست حفظ حریم خصوصی ما شرح داده می شود مورد استفاده قرار می گیرد.

ارسال مجدد رمز عبور یکبار مصرف (00:30)
  • 09338776735
  • info@wppush.ir
0
آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdf
  • خانه
  • دوره هاداغ
    • آموزش صفر تا صد html css
    • هوش برنامه نویسی نوین
    • آموزش تدوین ویدیو
    • همه ی محصولات
  • دوره ی حضوری
    • آموزش وردپرس
    • آموزش html css
    • آموزش php
    • آموزش جاوا اسکریپت
  • ویدیو های آموزشی
  • تماس با ما
    • تبریز - نصف راه روبروی شهرداری جنب نمایندگی ایران خودرو ساختمان مهدیه طبقه ی 6 واحد B (ملاقات حضوری فقط با هماهنگی قبلی)

      09338776735

      info@wppush.ir

      اینستاگرام
      کانال آپارات
  • آموزش رایگان
آخرین اطلاعیه ها
جهت نمایش اطلاعیه باید وارد سایت شوید
عضویت و وورد

وبلاگ

آموزش طراحی سایت در تبریز | آموزش وردپرس در تبریز | 09141107278 | آموزش وردپرس pdfوبلاگآموزش html cssآموزش تگ picture در HTML

آموزش تگ picture در HTML

2 شهریور 1401
ارسال شده توسط کامران علیایی
آموزش html css

آموزش تگ picture در HTML

دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ picture در HTML به صورت کامل آشنا بشید.

تگ picture در HTML

تگ picture مثل یک تگ کانتینر ( Container ) یا یک ظرف، برای نگهداری ۱ یا چندین عکس استفاده میشود ، که با استفاده از آن میتوانیم یک یا چند عکس را در اندازه های مختلف صفحه نمایش به نمایش در بیاوریم.

توضیحات بالا به این معنی هستند که مثلا به سیستم دستور داده میشود. اگر اندازه صفحه فلان بود، عکس شماره 1 را نمایش بده و اگه اندازه صفحه بهمان بود شماره 2 را نشان بده. اصطلاحا در حوضه طراحی سایت به این موضوع واکتش گرایی یا رسپانسیو میگویند که برای نمابش درست آینم ها و مهم تر از آن، برای سئوی سایت بسیار ضروری و حائز اهمیت است.

مثال از تگ picture در HTML

در ادامه دوره آموزشی html css پروژه محور به یک مثال از تگ picture میپردازیم تا بیشتر و بهتر با کارایی این تگ آشنا شوید…

مثال  : استفاده کردن از تگ Picture برای نمایش چندین عکس در اندازه های مختلف در صفحه نمایش
در رابطه با توضیحات مثال زیر، لارم به ذکر است که ما با استفاده از کد های CSS به سیستم دستور میدهیم وقتی اندازه صفحه نمایش بزرگتر از ۶۵۰ پیکسل شد، عکس pic-1.jpg را نشان داده شود و در صورت کاهش اندازه صفحه نمایش به کمتر از ۴۶۵ پیکسل ، عکس pic-3.jpg ، و وقتی اندازه صفحه نمایش بین ۴۶۵ تا ۶۵۰ بود عکس pic-2.jpg نشان داده شود…

<body> 
  <picture>
     <source media="(min-width: 650px)" srcset="files/pic-1.jpg">
     <source media="(min-width: 465px)" srcset="files/pic-2.jpg">
     <img src="files/pic-3.jpg">
  </picture> 
</body>

راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید

پشتیبانی مرورگرها از تگ Picture

در جدول زیر میتوانید مرورگرهای اینترنتی که از تگ picture در HTML پشتیبانی میکنند را مشاهده نمایید و بدانید که آیا از مروگر مورد استفاده شما هم پشتیبانی میکنند یا خیر…

پشتیبانی مرورگر هار از تگ table

پشتیبانی تگ picture از صفات و رویدادهای عمومی

تگ picture قابلیت پشتیبانی از تمام صفات عمومی و رویدادهای عمومی در HTML دارد.

نکات و توضیحات

  • بهتر است برای مشخص نمودن چندین عکس در اندازه های مختلف از تگ source استفاده کنیم.
  • منظق مرورگر ها بدین شکل است که اول عکس های داخل تگ source را نشان میدهند ، و در صورت اینکه بنا به هر دلیلی عکس ها نمایش داده نشوند ، عکس ها موجود در تگ img جایگرین آنها میشود.
برای امتیاز به این نوشته کلیک کنید!
[کل: 0 میانگین: 0]

در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید

فرم درخواست پشتیبانی (فرم زیر پست ها)

برچسب ها: HTML CSSآموزش cssآموزش css3آموزش htmlآموزش html cssآموزش html css پروژه محورآموزش html و cssآموزش html و css رایگانآموزش html5آموزش تگ picture در HTMLتگ pictureتگ picture در HTML
قبلی آموزش تگ progress در HTML
بعدی آموزش تگ param در HTML

دیدگاهتان را بنویسید لغو پاسخ

تمامی حقوق این وبسایت متعلق به وردپرس پوش می باشد.
اشتراک گذاری در شبکه های اجتماعی
ارسال به ایمیل
https://wppush.ir/?p=10207
ورود ×
کد تأیید
لطفا کد تأیید ارسال شده به را وارد کنید
ثبت
ورود با رمز عبور یکبار مصرف
ارسال مجدد رمز عبور یکبار مصرف(00:30)
حساب کاربری ندارید؟
ثبت نام

ارسال مجدد رمز عبور یکبار مصرف (00:30)
بازگشت به ورود
  • (+93) Afghanistan
  • (+355) Albania
  • (+213) Algeria
  • (+1) American Samoa
  • (+376) Andorra
  • (+244) Angola
  • (+1) Anguilla
  • (+1) Antigua
  • (+54) Argentina
  • (+374) Armenia
  • (+297) Aruba
  • (+61) Australia
  • (+43) Austria
  • (+994) Azerbaijan
  • (+973) Bahrain
  • (+880) Bangladesh
  • (+1) Barbados
  • (+375) Belarus
  • (+32) Belgium
  • (+501) Belize
  • (+229) Benin
  • (+1) Bermuda
  • (+975) Bhutan
  • (+591) Bolivia
  • (+599) Bonaire, Sint Eustatius and Saba
  • (+387) Bosnia and Herzegovina
  • (+267) Botswana
  • (+55) Brazil
  • (+246) British Indian Ocean Territory
  • (+1) British Virgin Islands
  • (+673) Brunei
  • (+359) Bulgaria
  • (+226) Burkina Faso
  • (+257) Burundi
  • (+855) Cambodia
  • (+237) Cameroon
  • (+1) Canada
  • (+238) Cape Verde
  • (+1) Cayman Islands
  • (+236) Central African Republic
  • (+235) Chad
  • (+56) Chile
  • (+86) China
  • (+57) Colombia
  • (+269) Comoros
  • (+682) Cook Islands
  • (+225) Côte d'Ivoire
  • (+506) Costa Rica
  • (+385) Croatia
  • (+53) Cuba
  • (+599) Curaçao
  • (+357) Cyprus
  • (+420) Czech Republic
  • (+243) Democratic Republic of the Congo
  • (+45) Denmark
  • (+253) Djibouti
  • (+1) Dominica
  • (+1) Dominican Republic
  • (+593) Ecuador
  • (+20) Egypt
  • (+503) El Salvador
  • (+240) Equatorial Guinea
  • (+291) Eritrea
  • (+372) Estonia
  • (+251) Ethiopia
  • (+500) Falkland Islands
  • (+298) Faroe Islands
  • (+691) Federated States of Micronesia
  • (+679) Fiji
  • (+358) Finland
  • (+33) France
  • (+594) French Guiana
  • (+689) French Polynesia
  • (+241) Gabon
  • (+995) Georgia
  • (+49) Germany
  • (+233) Ghana
  • (+350) Gibraltar
  • (+30) Greece
  • (+299) Greenland
  • (+1) Grenada
  • (+590) Guadeloupe
  • (+1) Guam
  • (+502) Guatemala
  • (+44) Guernsey
  • (+224) Guinea
  • (+245) Guinea-Bissau
  • (+592) Guyana
  • (+509) Haiti
  • (+504) Honduras
  • (+852) Hong Kong
  • (+36) Hungary
  • (+354) Iceland
  • (+91) India
  • (+62) Indonesia
  • (+98) Iran
  • (+964) Iraq
  • (+353) Ireland
  • (+44) Isle Of Man
  • (+972) Israel
  • (+39) Italy
  • (+1) Jamaica
  • (+81) Japan
  • (+44) Jersey
  • (+962) Jordan
  • (+7) Kazakhstan
  • (+254) Kenya
  • (+686) Kiribati
  • (+965) Kuwait
  • (+996) Kyrgyzstan
  • (+856) Laos
  • (+371) Latvia
  • (+961) Lebanon
  • (+266) Lesotho
  • (+231) Liberia
  • (+218) Libya
  • (+423) Liechtenstein
  • (+370) Lithuania
  • (+352) Luxembourg
  • (+853) Macau
  • (+389) Macedonia
  • (+261) Madagascar
  • (+265) Malawi
  • (+60) Malaysia
  • (+960) Maldives
  • (+223) Mali
  • (+356) Malta
  • (+692) Marshall Islands
  • (+596) Martinique
  • (+222) Mauritania
  • (+230) Mauritius
  • (+262) Mayotte
  • (+52) Mexico
  • (+373) Moldova
  • (+377) Monaco
  • (+976) Mongolia
  • (+382) Montenegro
  • (+1) Montserrat
  • (+212) Morocco
  • (+258) Mozambique
  • (+95) Myanmar
  • (+264) Namibia
  • (+674) Nauru
  • (+977) Nepal
  • (+31) Netherlands
  • (+687) New Caledonia
  • (+64) New Zealand
  • (+505) Nicaragua
  • (+227) Niger
  • (+234) Nigeria
  • (+683) Niue
  • (+672) Norfolk Island
  • (+850) North Korea
  • (+1) Northern Mariana Islands
  • (+47) Norway
  • (+968) Oman
  • (+92) Pakistan
  • (+680) Palau
  • (+970) Palestine
  • (+507) Panama
  • (+675) Papua New Guinea
  • (+595) Paraguay
  • (+51) Peru
  • (+63) Philippines
  • (+48) Poland
  • (+351) Portugal
  • (+1) Puerto Rico
  • (+974) Qatar
  • (+242) Republic of the Congo
  • (+40) Romania
  • (+262) Runion
  • (+7) Russia
  • (+250) Rwanda
  • (+290) Saint Helena
  • (+1) Saint Kitts and Nevis
  • (+508) Saint Pierre and Miquelon
  • (+1) Saint Vincent and the Grenadines
  • (+685) Samoa
  • (+378) San Marino
  • (+239) Sao Tome and Principe
  • (+966) Saudi Arabia
  • (+221) Senegal
  • (+381) Serbia
  • (+248) Seychelles
  • (+232) Sierra Leone
  • (+65) Singapore
  • (+1) Sint Maarten
  • (+421) Slovakia
  • (+386) Slovenia
  • (+677) Solomon Islands
  • (+252) Somalia
  • (+27) South Africa
  • (+82) South Korea
  • (+211) South Sudan
  • (+34) Spain
  • (+94) Sri Lanka
  • (+1) St. Lucia
  • (+249) Sudan
  • (+597) Suriname
  • (+268) Swaziland
  • (+46) Sweden
  • (+41) Switzerland
  • (+963) Syria
  • (+886) Taiwan
  • (+992) Tajikistan
  • (+255) Tanzania
  • (+66) Thailand
  • (+1) The Bahamas
  • (+220) The Gambia
  • (+670) Timor-Leste
  • (+228) Togo
  • (+690) Tokelau
  • (+676) Tonga
  • (+1) Trinidad and Tobago
  • (+216) Tunisia
  • (+90) Turkey
  • (+993) Turkmenistan
  • (+1) Turks and Caicos Islands
  • (+688) Tuvalu
  • (+1) U.S. Virgin Islands
  • (+256) Uganda
  • (+380) Ukraine
  • (+971) United Arab Emirates
  • (+44) United Kingdom
  • (+1) United States
  • (+598) Uruguay
  • (+998) Uzbekistan
  • (+678) Vanuatu
  • (+58) Venezuela
  • (+84) Vietnam
  • (+681) Wallis and Futuna
  • (+212) Western Sahara
  • (+967) Yemen
  • (+260) Zambia
  • (+263) Zimbabwe
مرورگر شما از HTML5 پشتیبانی نمی کند.

سوالی دارید؟ از ما بپرسید، کارشناسان ما همین حالا با شما تماس می گیرند.

تماس با ما

پاسخگوی شما هستیم

  • 09338776735
  • همه روزه از ساعت 9 صبح تا 12 شب
  • info@wppush.ir
question