HTML இல் ஒரு படத்தை எப்படி மையப்படுத்துவது

நூலாசிரியர்: Mark Sanchez
உருவாக்கிய தேதி: 6 ஜனவரி 2021
புதுப்பிப்பு தேதி: 1 ஜூலை 2024
Anonim
ஒரு படத்தை கிடைமட்டமாக மையப்படுத்துவது எப்படி (CSS & HTML டுடோரியல்)
காணொளி: ஒரு படத்தை கிடைமட்டமாக மையப்படுத்துவது எப்படி (CSS & HTML டுடோரியல்)

உள்ளடக்கம்

பண்பு சீரமை குறிச்சொல் html> HTML5 முதல் விலக்கப்பட்டுள்ளது. இந்த பண்புக்கூறு இன்னும் பெரும்பாலான இணைய உலாவிகளில் வேலை செய்யும் போது, ​​அடுக்குத் தாள்களை (CSS) பயன்படுத்தி படங்களை சீரமைக்க பரிந்துரைக்கப்படுகிறது. இந்த கட்டுரையில், CSS மற்றும் விலக்கப்பட்ட குறிச்சொல்லைப் பயன்படுத்தி படங்களை எப்படி மையமாக்குவது என்பதை நாங்கள் உங்களுக்குக் காண்பிக்கப் போகிறோம். சீரமை.

படிகள்

முறை 2 இல் 1: CSS (பரிந்துரைக்கப்படுகிறது)

  1. 1 படத்திற்கு HTML குறியீட்டைச் சேர்க்கவும். படத்தை சீரமைக்க நீங்கள் கேஸ்கேடிங் ஸ்டைல் ​​ஷீட்களை (CSS) பயன்படுத்துவீர்கள், ஆனால் நீங்கள் அதை HTML ஐப் பயன்படுத்தி பக்கத்தில் வைக்க வேண்டும். குறிச்சொல்லைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு பின்வருமாறு img> உங்கள் குறியீட்டில் ஒரு படத்தை செருக:

    img src = "dog.webp" alt = "இது ஒரு நாயின் படம்">

    • அதற்கு பதிலாக நாய். jpg படக் கோப்பின் பெயரை மாற்றவும், "alt" க்குப் பிறகு படத்தின் விளக்கத்தை உள்ளிடவும். பொருள் மையம் "வர்க்கம்" மாறாது, ஏனென்றால் நீங்கள் அந்த பெயரில் ஒரு CSS வகுப்பை உருவாக்குவீர்கள்.
  2. 2 CSS குறியீட்டைக் கண்டறியவும். உங்கள் தளத்தில் தனி CSS கோப்பு இருந்தால், அதைத் திறக்கவும். இல்லையெனில், சிஎஸ்எஸ் பெரும்பாலும் HTML கோப்பின் மேல், குறிச்சொற்களுக்குள் இருக்கும் தலை>... குறிச்சொற்களைக் கண்டுபிடிக்க கோப்பின் மேல் உருட்டவும் பாணி> / பாணி>.
    • குறிச்சொற்கள் என்றால் பாணி> / பாணி> இல்லை, அவற்றைச் சேர்க்கவும். மேலும் தகவலுக்கு இந்த கட்டுரையைப் படியுங்கள்.
  3. 3 படத்தை சீரமைக்க CSS ஐச் சேர்க்கவும். "50%" என்பதற்கு பதிலாக, படத்தை பக்கத்தில் காண்பிக்க நீங்கள் வேறு மதிப்பை உள்ளிடலாம். "100%" மதிப்புடன் நீங்கள் படத்தை மையப்படுத்த முடியாது, எனவே இந்த எண் வித்தியாசமாக இருக்க வேண்டும்.

    மையம் {காட்சி: தொகுதி; விளிம்பு-இடது: தானாக; விளிம்பு-வலது: தானாக; அகலம்: 50%; }

  4. 4 உங்கள் மாற்றங்களைச் சேமிக்கவும். HTML கோப்பு மற்றும் CSS கோப்பை சேமிக்கவும் (ஏதேனும் இருந்தால்). இது படத்தை மையமாக்கும்.
    • மேலும் உள்ளே குறிச்சொற்கள் img> சேர்க்க முடியும் மற்ற படங்களை மையப்படுத்த.

முறை 2 இல் 2: HTML இல் "சீரமை" பண்பு

  1. 1 ஒரு புதிய பத்தியை உருவாக்கவும். படங்களை மையப்படுத்தும் இந்த முறை விலக்கப்பட்டிருந்தாலும், அது இன்னும் பல உலாவிகளில் வேலை செய்கிறது. இருப்பினும், உலாவிகள் குறிப்பிட்ட பண்புகளை ஆதரிப்பதை நிறுத்தும்போது தளத்தை செயல்பட வைக்க CSS ஐப் பயன்படுத்த பரிந்துரைக்கிறோம். பண்பு என்பதை நினைவில் கொள்ளுங்கள் சீரமை அதைச் சுற்றியுள்ள தனிமத்தின் உள்ளே மட்டுமே படத்தை மையமாக்கும் (எடுத்துக்காட்டாக, குறிச்சொற்களுக்குள் p> / p> அல்லது div> / div>) உதாரணமாக, HTML கோப்பில், சேர்ப்பதன் மூலம் ஒரு புதிய பத்தியை உருவாக்குவோம் ப> ஒரு தனி வரியில்.
  2. 2 படத்திற்கு HTML குறியீட்டைச் சேர்க்கவும். குறிச்சொல்லுக்குப் பிறகு பின்வரும் குறியீட்டை உள்ளிடவும் ப>... வழிகாட்டியாக இந்த உதாரணத்தைப் பயன்படுத்தவும்:

    p> img src = "dog.webp" alt = "picture" align = "medium">

    • அதற்கு பதிலாக நாய். jpg படக் கோப்பின் பெயரை மாற்றவும், "alt" க்குப் பிறகு படத்தின் விளக்கத்தை உள்ளிடவும்.
    • நடுத்தர பண்பு உலாவிக்கு பக்கத்தின் மையத்தில் படத்தை காட்டச் சொல்கிறது.
  3. 3 பத்தி குறிச்சொல்லை மூடு. இதைச் செய்ய, சேர்க்கவும் / p> படக் குறிக்கு பிறகு. முடிக்கப்பட்ட குறியீடு இப்படி இருக்க வேண்டும்:

    p> img src = "dog.webp" alt = "picture" align = "Middle"> / p>

  4. 4 உங்கள் மாற்றங்களைச் சேமிக்கவும். இது படத்தை மையமாக்கும்.