URL இலிருந்து படத்தைச் சேர்ப்பதற்கான முறையை இந்த இடுகை சுருக்கமாக விளக்குகிறது.
HTML/CSS இல் உள்ள URL இலிருந்து படத்தை எவ்வாறு சேர்ப்பது?
HTML/CSS இல், URL ஐப் பயன்படுத்தி ஒரு படத்தைச் சேர்க்க இரண்டு முறைகள் உள்ளன, அவை கீழே பட்டியலிடப்பட்டுள்ளன:
- முறை 1: HTML இல்
உறுப்பைப் பயன்படுத்தி படத்தைச் சேர்க்கவும்
- முறை 2: HTML இல் CSS பண்புகளைப் பயன்படுத்தி படத்தைச் சேர்க்கவும்
முறை 1: ![]()
உறுப்பைப் பயன்படுத்தி படத்தைச் சேர்க்கவும்
' 'உறுப்பு என்பது குழந்தை உள்ளடக்கம் மற்றும் முடிவு குறிச்சொல் இல்லாத ஒற்றை வெற்றிட உறுப்பு ஆகும். ' src 'மற்றும்' எல்லாம் ” என்பது “
” குறிச்சொல்லின் உள்ளே பயன்படுத்தப்படும் இரண்டு முக்கிய பண்புக்கூறுகள்.
உறுப்பைப் பயன்படுத்தி படத்தைச் சேர்க்க கீழே கொடுக்கப்பட்டுள்ள வழிமுறைகளைப் பார்ப்போம்!
படி 1: ஒரு div கொள்கலனை உருவாக்கவும்
முதலில், '' ஐப் பயன்படுத்தி ஒரு div கொள்கலனை உருவாக்கவும் அடுத்து, '' இலிருந்து தேவையான தலைப்பு குறிச்சொல்லைப் பயன்படுத்தவும் ” முதல் ” ” குறிச்சொல். உதாரணமாக, நாங்கள் அதன் பிறகு, '' சேர்க்கவும் கீழே கொடுக்கப்பட்டுள்ள வெளியீட்டின் படி, குறிப்பிடப்பட்ட படம் வெற்றிகரமாக சேர்க்கப்பட்டது: டெவலப்பர்கள் CSS ஐப் பயன்படுத்தி URL இலிருந்து படத்தையும் சேர்க்கலாம். பின்னணி படம் ” CSS. இந்த நோக்கத்திற்காக, கீழே கொடுக்கப்பட்டுள்ள படிகளைப் பின்பற்றவும். முதலில், அடுத்து, இப்போது, புள்ளி தேர்வி மூலம் வகுப்பை அணுகவும் ' . ” மற்றும் முன்பு உருவாக்கப்பட்ட வகுப்பின் பெயர். அதன் பிறகு, வகுப்பிற்குள் உள்ள URL இலிருந்து படத்தைச் சேர்க்க, கீழே பட்டியலிடப்பட்டுள்ள CSS பண்புகளைப் பயன்படுத்தவும்: மேலே வழங்கப்பட்ட குறியீட்டில்: வெளியீடு URL இலிருந்து படங்களைச் சேர்ப்பதற்கான பல்வேறு முறைகளைப் பற்றி நீங்கள் கற்றுக்கொண்டீர்கள். URL இலிருந்து ஒரு படத்தைச் சேர்க்க, டெவலப்பர்கள் '
படி 2: தலைப்பைச் செருகவும்
குறிச்சொல்லைப் பயன்படுத்துவோம் மற்றும் குறிப்பிட்ட உரையை தொடக்க மற்றும் மூடும் குறிச்சொற்களுக்குள் ஒரு தலைப்பாகச் சேர்ப்போம்.
படி 3: URL ஐப் பயன்படுத்தி ஒரு படத்தைச் சேர்க்கவும் ” என்று குறியிட்டு, கீழே பட்டியலிடப்பட்டுள்ள பண்புக்கூறுகளை படக் குறிச்சொல்லின் உள்ளே செருகவும்:
< div வர்க்கம் = 'img-conatiner' >
< h2 > URL உடன் படத்தைச் சேர்க்கவும் < / h2 >
< img src = 'https://images.pexels.com/photos/2260800/pexels-photo-2260800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' எல்லாம் = 'படம்!' உயரம் = '400px' அகலம் = '300px' / >
< / div >
முறை 2: HTML இல் CSS பண்புகளைப் பயன்படுத்தி படத்தைச் சேர்க்கவும்
படி 1: தலைப்பைச் செருகவும்
திறப்பு மற்றும் மூடுதல் குறிச்சொல்லின் உதவியுடன் தலைப்பு உரையைச் செருகவும்.
படி 2: div கொள்கலனை உருவாக்கவும்
<டிவி வகுப்பு = 'img-கொள்கலன்' > >
படி 3: அணுகல் கொள்கலன்
படி 4: 'பின்னணி-படம்' CSS பண்பைப் பயன்படுத்தி படத்தைச் சேர்க்கவும்
உயரம் : 400px ;
அகலம் : 250px ;
பின்னணி அளவு : கொண்டிருக்கும் ;
பின்னணி-படம் : url ( https : //படங்கள் .பெக்சல்கள் .com/photos/ 2260800 /pexels-photo- 2260800 .jpeg? ஆட்டோ = சுருக்க&cs = tinysrgb&w = 1260 &h = 750 &dpr = ஒன்று )
}
முடிவுரை
” குறிச்சொல். பின்னர், செருகவும் ' src ” பண்புக்கூறு மற்றும் URL ஐ “src” மதிப்பாக ஒதுக்கவும். மேலும், CSS ஐப் பயன்படுத்தி பயனர் URL இலிருந்து ஒரு படத்தைச் சேர்க்கலாம். பின்னணி படம் ”சொத்து. HTML/CSS இல் உள்ள URL இலிருந்து படத்தைச் சேர்ப்பதற்கான முறைகளை இந்த எழுதுதல் கூறியுள்ளது.