HTML உடன் ஒரு படத்தைச் சேர்க்கவும்

நூலாசிரியர்: Christy White
உருவாக்கிய தேதி: 4 மே 2021
புதுப்பிப்பு தேதி: 1 ஜூலை 2024
Anonim
15: HTML மற்றும் CSS ஐப் பயன்படுத்தி படங்களை எவ்வாறு செருகுவது | HTML மற்றும் CSS கற்றுக்கொள்ளுங்கள் | HTML டுடோரியல் | CSS இன் அடிப்படைகள்
காணொளி: 15: HTML மற்றும் CSS ஐப் பயன்படுத்தி படங்களை எவ்வாறு செருகுவது | HTML மற்றும் CSS கற்றுக்கொள்ளுங்கள் | HTML டுடோரியல் | CSS இன் அடிப்படைகள்

உள்ளடக்கம்

உங்கள் வலைத்தளம் அல்லது சமூக வலைப்பின்னல் சுயவிவரத்தில் படங்களைச் சேர்ப்பது உங்கள் வலைப்பக்கத்தை அலங்கரிப்பதற்கான சிறந்த வழியாகும். HTML (ஹைபர்டெக்ஸ்ட் மார்க்அப் லாங்வேஜ்) வலைப்பக்கங்களை உருவாக்குவதற்கு பல செயல்பாடுகளைக் கொண்டுள்ளது, ஆனால் அதிர்ஷ்டவசமாக நீங்கள் படங்களைச் சேர்க்க வேண்டிய குறியீடு மிகவும் கடினம் அல்ல.

அடியெடுத்து வைக்க

1 இன் முறை 1: HTML உடன் படங்களைச் செருகுவது

  1. சூடான இணைப்பை அனுமதிக்கும் ஃபோட்டோபக்கெட் அல்லது டைனிபிக் போன்ற இலவச ஹோஸ்டிங் வலைத்தளத்திற்கு உங்கள் படத்தை பதிவேற்றவும். வலைத்தள சேவையகத்துடன் ஒரு படத்தை நேரடியாக இணைக்க ஹாட்-லிங்கிங் அனுமதிக்கிறது; சில வழங்குநர்கள் இதைத் தடைசெய்துள்ளனர், ஏனெனில் சூடான-இணைப்பு அவர்களின் அலைவரிசையைப் பயன்படுத்துகிறது மற்றும் அவற்றின் சேவையகங்களில் இடத்தைப் பிடிக்கும்.
    • உங்களிடம் கட்டண ஹோஸ்டிங் கணக்கு இருந்தால், உங்கள் வலைத்தளம் வைக்கப்பட்டுள்ள சேவையகத்தில் படங்களை நேரடியாக பதிவேற்றவும். இது எப்போதும் ஒரு இலவச தளத்தை விட நம்பகமானது மற்றும் விலை உயர்ந்ததாக இருக்க வேண்டியதில்லை.
  2. உரை திருத்தியில் புதிய ஆவணத்தைத் திறக்கவும் (எ.கா., நோட்பேட் / நோட்பேட்) அல்லது உங்கள் வலைத்தளம் / சுயவிவரத்தில் பக்கத்தைத் திறக்கவும், அங்கு நீங்கள் HTML குறியீட்டை நேரடியாக மாற்றலாம்.
  3. உடன் தொடங்குங்கள் img குறிச்சொல். தி img குறிச்சொல் காலியாக உள்ளது, அதாவது இறுதி குறிச்சொல் தேவையில்லை. இருப்பினும், XHTML சரிபார்ப்புக்கு நீங்கள் இன்னும் ஒரு இடத்தையும் அதன் முன் ஒரு சாய்வையும் வைக்கலாம் விட பெரியது அடையாளம்.
    • img />
  4. கிடைக்கக்கூடிய பல பண்புக்கூறுகள் உள்ளன, ஆனால் ஒன்று மட்டுமே அவசியம்:src. இது உங்கள் படத்தின் இருப்பிடம் / முகவரி அல்லது URL ஆகும்.
    • img src = "படத்தின் URL" />
  5. அடுத்து நீங்கள் வேண்டும் alt பண்புக்கூறு சேர்க்கவும். படம் ஏற்றத் தவறினால், இது ஒரு மாற்று உரையைக் காட்டுகிறது. திரை வாசகர்களைப் பயன்படுத்தும் பார்வையற்றோருக்கான சேவையும் இதுவாகும்.
    • நீங்கள் ஒரு படத்தின் மீது கர்சரை நகர்த்தினால், இந்த உரை ஒரு உதவிக்குறிப்பாகவும் காட்டப்படுகிறது, ஆனால் இது இன்டர்நெட் எக்ஸ்ப்ளோரரில் மட்டுமே உள்ளது. அனைத்து உலாவிகளுடனும் (ஃபயர்பாக்ஸ்) வேலை செய்யும் தீர்வு மற்றும் பலர்.) அது தலைப்பு கூடுதலாக பயன்படுத்த பண்பு alt. (படத்திற்கு ஒரு உதவிக்குறிப்பு இருக்க விரும்பவில்லை என்றால் பிந்தையதை நீங்கள் தவிர்க்கலாம்.)

எடுத்துக்காட்டாக:img src = "படத்தின் URL" alt = "வழக்கில்" title = "Tooltip" />


  1. இப்போது நீங்கள் படத்தின் அளவைக் குறிக்கலாம் உயரம் மற்றும் அகலம் பண்புக்கூறு, மற்றும் பிக்சல்கள் அல்லது சதவீதத்தைக் குறிப்பிடுவதன் மூலம். இந்த வழியில் மறுஅளவிடுவது பார்வையின் அளவை மட்டுமே மாற்றுகிறது என்பதை நினைவில் கொள்க, படத்தின் அளவு அல்ல. ஒரு படத்தின் ஏற்றுதல் நேரத்தைக் குறைக்க, குறிப்பாக பெரிய படங்களுடன், புகைப்பட எடிட்டிங் மென்பொருளுடன் அல்லது PicResize.com போன்ற ஆன்லைன் சேவையுடன் முன்கூட்டியே அளவை மாற்றுவது நல்லது.
    • img src = "படத்தின் URL" alt = "வழக்கில்" தலைப்பு = "கருவிப்பட்டி" உயரம் = "50%" அகலம் = "50%" />
    • img src = "படத்தின் URL" alt = "வழக்கில்" தலைப்பு = "கருவிப்பட்டி" உயரம் = "25px" அகலம் = "50px" />

உதவிக்குறிப்புகள்

  • இந்த பண்புகளுக்கான மதிப்பு 1-100% முதல் பிக்சல்களில் அல்லது ஒரு சதவீதமாக வழங்கப்படுகிறது.
  • மேல், கீழ், நடுத்தர, வலது, இடது போன்ற பல்வேறு வடிவமைப்பு பண்புகளைப் பயன்படுத்தி படத்தை வலைப்பக்கத்தில் எங்கும் வைக்கலாம்.
  • ஒரு படத்தின் இடது மற்றும் வலதுபுறத்தில் கிடைமட்ட இடத்தை செருக ஹெஸ்பேஸ் பண்புக்கூறு பயன்படுத்தப்படுகிறது, அதே நேரத்தில் படங்கள் மற்றும் பிற பொருட்களின் மேல் மற்றும் கீழ் அறைகளை உருவாக்க vspace பண்புக்கூறு பயன்படுத்தப்படுகிறது.
  • படங்களுடன் அதிகமாக ஈடுபட வேண்டாம். அது குழப்பமானதாகவும், தொழில்சார்ந்ததாகவும் தெரிகிறது.
  • லோகோக்கள் அல்லது கார்ட்டூன்களுக்கு GIF படங்கள் நன்றாக உள்ளன, ஆனால் இந்த கோப்பு வகை புகைப்படங்கள் மற்றும் பல வண்ணங்களைக் கொண்ட பிற படங்களுக்கு குறைவாக பொருத்தமானது.
    • ஒரு படத்திற்கு அதிகபட்சம் 256 வண்ணங்களுடன் 8-பிட் வண்ணத்தை மட்டுமே GIF படங்கள் ஆதரிக்கின்றன. எனவே 16 அல்லது 24 பிட் வண்ண விளக்கம் அல்லது புகைப்படத்தின் இனப்பெருக்கம் அவ்வளவு சிறப்பாக இருக்காது என்று எதிர்பார்க்க வேண்டும்.
    • GIF படங்களும் வெளிப்படைத்தன்மையை ஆதரிக்கின்றன. ஒரு பிட் வெளிப்படைத்தன்மை சாத்தியமாகும், அதாவது ஒரு வண்ணத்தை வெளிப்படையானதாக மாற்ற முடியும்.
    • இன்டர்லேசிங் GIF படங்களால் ஆதரிக்கப்படுகிறது, அதாவது தள பார்வையாளருக்கு படம் முழுமையாக ஏற்றப்படுவதற்கு முன்பு எப்படி இருக்கும் என்பதைப் பற்றிய ஒரு யோசனை கிடைக்கும்.
    • GIF வடிவம் அனிமேஷனையும் ஆதரிக்கிறது.
  • படத்தின் கோப்பு வடிவத்தை (.webp .gif போன்றவை) URL கூறுகிறது என்பதை உறுதிப்படுத்தவும்.

எச்சரிக்கைகள்

  • ஹாட்லிங்க் வேண்டாம்!