img குறிச்சொல்லின் விருப்பப் பண்புகளில் பின்வருவன அடங்கும்: HTML இல் படங்கள், படங்களைச் செருகுவதற்கான HTML குறிச்சொற்கள்

குறியிடவும் ஐ.எம்.ஜிஒரு வலைப்பக்கத்தில் படங்களை வரைகலை வடிவில் காண்பிக்க வடிவமைக்கப்பட்டுள்ளது GIF வடிவம், JPEG அல்லது PNG. இந்தக் குறிச்சொல்லில் தேவையான ஒற்றை அளவுரு உள்ளது, src , இது படக் கோப்பின் முகவரியைக் குறிப்பிடுகிறது. தேவைப்பட்டால், A கொள்கலனில் IMG குறிச்சொல்லை வைப்பதன் மூலம் வரைபடத்தை மற்றொரு கோப்பிற்கான இணைப்பாக மாற்றலாம். அதே நேரத்தில், படத்தைச் சுற்றி ஒரு பார்டர் காட்டப்படும், IMG குறிச்சொல்லில் எல்லை=0 அளவுருவைச் சேர்ப்பதன் மூலம் அதை அகற்றலாம்.

படங்களை பட வரைபடங்களாகவும் பயன்படுத்தலாம், அங்கு படத்தில் இணைப்புகளாக செயல்படும் ஹாட்ஸ்பாட்கள் உள்ளன. அத்தகைய வரைபடம் தோற்றம்வழக்கமான படத்திலிருந்து வேறுபட்டதல்ல, ஆனால் அதே நேரத்தில் வெவ்வேறு வடிவங்களின் கண்ணுக்கு தெரியாத மண்டலங்களாக பிரிக்கலாம், அங்கு ஒவ்வொரு பகுதியும் ஒரு இணைப்பாக செயல்படுகிறது.

தொடரியல்

மூடும் குறிச்சொல்
தேவையில்லை.

விருப்பங்கள்
align - படம் எப்படி விளிம்பில் சீரமைக்கப்படும் மற்றும் உரை எவ்வாறு சுற்றியிருக்கும் என்பதை தீர்மானிக்கிறது.
alt - படத்திற்கான மாற்று உரை.
எல்லை - படத்தைச் சுற்றியுள்ள சட்டத்தின் தடிமன்.
உயரம் - பட உயரம்.
hspace - படத்திலிருந்து சுற்றியுள்ள உள்ளடக்கத்திற்கு கிடைமட்ட இடைவெளி.
ismap - படம் சர்வர் பக்க பட வரைபடம் என்று உலாவிக்கு சொல்கிறது.
lowsrc - ஆரம்ப காட்சிக்கான குறைந்த தெளிவுத்திறன் கொண்ட கிராஃபிக் கோப்பிற்கான பாதை.
src - கிராஃபிக் கோப்பிற்கான பாதை.
vspace - படத்திலிருந்து சுற்றியுள்ள உள்ளடக்கத்திற்கு செங்குத்து இடம்.
அகலம் - பட அகலம்.
usemap - கிளையன்ட் பட வரைபடத்திற்கான ஆயத்தொலைவுகளைக் கொண்ட MAP குறிச்சொல்லுக்கான இணைப்பு.

எடுத்துக்காட்டு 1: IMG குறிச்சொல்லைப் பயன்படுத்துதல்

Lorem ipsum dolor sit amet...

IMG டேக் அளவுருக்களின் விளக்கம்

ALIGN அளவுரு

விளக்கம்
படங்களைப் பொறுத்தவரை, வலைப்பக்கத்தில் உள்ள உரை அல்லது பிற படங்களுடன் ஒப்பிடும்போது அவற்றின் நிலையை நீங்கள் குறிப்பிடலாம். படங்கள் சீரமைக்கப்படும் விதம் IMG குறிச்சொல்லின் align அளவுருவால் குறிப்பிடப்படுகிறது.

தொடரியல்

வாதங்கள்
அட்டவணை 1 align அளவுருவின் சாத்தியமான மதிப்புகள் மற்றும் அதைப் பயன்படுத்துவதன் விளைவாக பட்டியலிடுகிறது.

மிகவும் பிரபலமான விருப்பங்கள் இடது மற்றும் வலது , இது படத்தைச் சுற்றி உரையை உருவாக்குகிறது. படத்துடன் உரையை இறுக்கமாகப் பொருத்துவதைத் தடுக்க, IMG குறிச்சொல்லில் hspace மற்றும் vspace அளவுருக்களைச் சேர்க்க பரிந்துரைக்கப்படுகிறது, இது உரைக்கான தூரத்தை பிக்சல்களில் குறிப்பிடுகிறது.

align அளவுருவின் அனைத்து மதிப்புகளும் உலாவிகளால் ஆதரிக்கப்பட்டாலும், வாதங்கள் absbottom , absmiddle , baseline , and texttop ஆகியவை HTML 4 விவரக்குறிப்பில் விவரிக்கப்படவில்லை.

இயல்புநிலை மதிப்பு
கீழே

எடுத்துக்காட்டு 2: ஒரு படத்தை சீரமைத்தல்

Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

ALT அளவுரு

விளக்கம்
Alt அளவுரு படங்களுக்கான மாற்று உரையை அமைக்கிறது. இந்த உரை நீங்கள் பெற அனுமதிக்கிறது உரை தகவல்உலாவியில் படத்தை ஏற்றுவது முடக்கப்பட்டிருக்கும் போது வரைதல் பற்றி. உலாவி அவற்றைப் பற்றிய தகவலைப் பெற்ற பிறகு படங்கள் ஏற்றப்படுவதால், படத்தின் மாற்று உரை முன்னதாகவே தோன்றும். அது ஏற்றப்படும் போது, ​​உரை ஒரு படத்தால் மாற்றப்படும்.

ஒரு படத்தின் மேல் உங்கள் சுட்டியை நகர்த்தும்போது உலாவிகள் மாற்று உரையையும் ஒரு உதவிக்குறிப்பாகக் காண்பிக்கும்.

தொடரியல்

வாதங்கள்
ஏதேனும் பொருத்தமான உரைச் சரம். இது இரட்டை அல்லது ஒற்றை மேற்கோள்களில் இணைக்கப்பட வேண்டும்.

இயல்புநிலை மதிப்பு
இல்லை

எடுத்துக்காட்டு 3: மாற்று உரையைச் சேர்த்தல்

alt="முதன்மைப் பக்கத்திற்குத் திரும்பு" !}>

BORDER அளவுரு

விளக்கம்
ஒரு வலைப்பக்கத்தில் வைக்கப்படும் ஒரு படத்தை வெவ்வேறு அகலங்களின் சட்டத்தில் வைக்கலாம். IMG குறிச்சொல்லின் எல்லை அளவுருவைப் பயன்படுத்தி இது செய்யப்படுகிறது. இயல்பாக, படம் ஒரு இணைப்பாக இல்லாவிட்டால் படத்தைச் சுற்றி எந்த எல்லையும் இல்லை. இந்த வழக்கில் உள்ள பார்டர் வண்ணம், BODY டேக்கின் நடை அல்லது உரை அளவுருவைப் பயன்படுத்தி குறிப்பிடப்பட்ட உரை நிறத்துடன் பொருந்துகிறது.

தொடரியல்

வாதங்கள்

இயல்புநிலை மதிப்பு
0

எடுத்துக்காட்டு 3. படத்தைச் சுற்றி ஃபிரேம்

பச்சை சட்டகம் 2 பிக்சல்கள் தடிமன்

உயரம் மற்றும் அகலம் அளவுரு

விளக்கம்
HTML ஐப் பயன்படுத்தி படத்தின் அளவை மாற்ற, அகலம் மற்றும் உயர அளவுருக்கள் வழங்கப்படுகின்றன. நீங்கள் மதிப்புகளை பிக்சல்கள் அல்லது சதவீதங்களில் பயன்படுத்தலாம். சதவீத உள்ளீடு அமைக்கப்பட்டால், படத்தின் பரிமாணங்கள் பெற்றோர் உறுப்புடன் ஒப்பிடப்படுகின்றன - IMG குறிச்சொல் அமைந்துள்ள கொள்கலன். பெற்றோர் கொள்கலன் இல்லை என்றால், உலாவி சாளரம் அது செயல்படுகிறது. வேறு வார்த்தைகளில் கூறுவதானால், அகலம் = 100% என்பது வலைப்பக்கத்தின் முழு அகலத்திலும் படம் நீட்டிக்கப்படும். ஒரு அகலம் அல்லது உயர அளவுருவைச் சேர்ப்பது படத்தின் விகிதாச்சாரத்தையும் விகிதத்தையும் பாதுகாக்கிறது. அதன் அசல் உயரம் மற்றும் அகலத்தை தீர்மானிக்க, படம் முழுமையாக ஏற்றப்படும் வரை உலாவி காத்திருக்கிறது.

இணையப் பக்கத்தில் உள்ள அனைத்து படங்களின் பரிமாணங்களையும் அமைக்க மறக்காதீர்கள். ஒவ்வொரு படத்தைப் பெற்ற பிறகு அதன் அளவை உலாவி கணக்கிட வேண்டியதில்லை என்பதால் இது பக்கத்தை ஓரளவு வேகமாக ஏற்றுகிறது. அட்டவணையில் வைக்கப்பட்டுள்ள படங்களுக்கு இந்த அறிக்கை மிகவும் முக்கியமானது.

படத்தின் அகலம் மற்றும் உயரம் சிறியதாகவோ அல்லது பெரியதாகவோ மாற்றப்படலாம். இருப்பினும், கோப்பு அளவு மாறாமல் இருப்பதால், படத்தின் ஏற்றுதல் வேகத்தை இது எந்த வகையிலும் பாதிக்காது. எனவே, எச்சரிக்கையுடன் பெரிதாக்கவும்... இவ்வளவு சிறிய படம் ஏற்றப்படுவதற்கு ஏன் இவ்வளவு நேரம் எடுக்கிறது என்று வாசகர்களிடையே குழப்பத்தை ஏற்படுத்தலாம். ஆனால் அளவை அதிகரிப்பது எதிர் விளைவுக்கு வழிவகுக்கிறது - படத்தின் அளவு பெரியது, ஆனால் அதே அளவிலான படத்துடன் ஒப்பிடும்போது கோப்பு வேகமாக ஏற்றப்படுகிறது. ஆனால் வரைபடத்தின் தரம் மோசமடைகிறது.

தொடரியல்

வாதங்கள்
பிக்சல்கள் அல்லது சதவீதத்தில் ஏதேனும் நேர்மறை முழு எண்.

இயல்புநிலை மதிப்பு
படத்தின் அசல் அகலம் அல்லது உயரம்.

எடுத்துக்காட்டு 4: பட அளவுகள்

HSPACE மற்றும் VSPACE அளவுரு

விளக்கம்
எந்தவொரு படத்திற்கும், hspace மற்றும் vspace அளவுருக்களைப் பயன்படுத்தி கண்ணுக்குத் தெரியாத கிடைமட்ட மற்றும் செங்குத்து விளிம்புகளை அமைக்கலாம். ஒரு படத்தைச் சுற்றி உரை சுற்றும்போது இது குறிப்பாக உண்மை. இந்த வழக்கில், உரை படத்தின் மீது இறுக்கமாக "இயங்க" இல்லை, அதைச் சுற்றி வெற்று இடத்தைச் சேர்க்க வேண்டியது அவசியம்.

தொடரியல்

வாதங்கள்
பிக்சல்களில் ஏதேனும் நேர்மறை முழு எண்.

இயல்புநிலை மதிப்பு
0

எடுத்துக்காட்டு 5. படத்திலிருந்து உள்தள்ளல்கள்

ISMAP அளவுரு

விளக்கம்
இஸ்மாப் அளவுரு படம் ஒரு சர்வர் பக்க பட வரைபடம் என்று உலாவிக்கு சொல்கிறது. ஒரே படத்தின் வெவ்வேறு பகுதிகளுக்கு இணைப்புகளை இணைக்க பட வரைபடங்கள் உங்களை அனுமதிக்கின்றன. இரண்டாக செயல்படுத்தப்படுகிறது பல்வேறு விருப்பங்கள்- சேவையகம் மற்றும் கிளையன்ட். சேவையக விருப்பத்தைப் பயன்படுத்தும் போது, ​​உலாவி தேர்ந்தெடுக்கப்பட்ட இணைப்பின் முகவரியைப் பெற சேவையகத்திற்கு கோரிக்கையை அனுப்புகிறது மற்றும் தேவையான தகவலுடன் பதிலுக்காக காத்திருக்கிறது. இந்த அணுகுமுறை முடிவுக்காக காத்திருக்க கூடுதல் நேரம் தேவைப்படுகிறது மற்றும் தனி கோப்புகள்ஒவ்வொரு பட அட்டைக்கும்.

சேவையகத்திற்கு தரவை அனுப்புவது பின்வருமாறு நிகழ்கிறது. நீங்கள் IMG குறிச்சொல்லை கொள்கலன் A இல் வைக்க வேண்டும், அங்கு நீங்கள் CGI நிரலின் முகவரியை href அளவுருவின் மதிப்பாகக் குறிப்பிட வேண்டும். பெறப்பட்ட மவுஸ் கிளிக் ஆயங்களை நிரல் பகுப்பாய்வு செய்கிறது, அவை படத்தின் மேல் இடது மூலையில் இருந்து கணக்கிடப்பட்டு, தேவையான வலைப்பக்கத்தை வழங்கும்.

தொடரியல்

வாதங்கள்
இல்லை

இயல்புநிலை மதிப்பு
இயல்பாக, இந்த விருப்பம் முடக்கப்பட்டுள்ளது.

எடுத்துக்காட்டு 6. பட வரைபடமாக வரைதல்

பயனர் படத்தின் மவுஸ் ஆயங்களை 100, 50 என அமைத்திருந்தால், இணைப்பைக் கிளிக் செய்த பிறகு கோப்பு http://www.htmlbook.ru/cgi-bin/map.cgi?100,50 இல் திறக்கப்படும். கடைசி இலக்கங்கள் GET முறையைப் பயன்படுத்தி CGI நிரலுக்கு மாற்றப்பட்டு சேவையகத்தில் விளக்கப்படும்.

LOWSRC அளவுரு

விளக்கம்
இறுதிப் படம் முழுமையாக ஏற்றப்படும் முன் குறைந்த தரப் படத்தைக் காட்ட lowsrc அளவுரு பயன்படுத்தப்படுகிறது. இந்த அணுகுமுறை பயனர் காத்திருப்பு நேரத்தை குறைக்கும் நோக்கம் கொண்டது. அவருக்கு முதலில் குறைந்த தெளிவுத்திறன் கொண்ட படம் அல்லது கருப்பு மற்றும் வெள்ளை வரைதல் காட்டப்படுகிறது, இது சிறிய ஆரம்ப கோப்பு அளவு காரணமாக விரைவாக ஏற்றப்படும். பயனர் அதைப் பார்க்கும்போது, ​​படம் ஏற்றப்படுகிறது நல்ல தரம், இது படிப்படியாக அசல் ஒன்றை மாற்றுகிறது. இந்தப் படங்களின் அளவுகள் ஒரே மாதிரியாக இருக்க வேண்டும்.

தொடரியல்

வாதங்கள்

இயல்புநிலை மதிப்பு
இல்லை

எடுத்துக்காட்டு 7. குறைந்த தரம் வரைவதற்கு பாதை

SRC அளவுரு

விளக்கம்
முகவரி வரைகலை கோப்பு, இது வலைப்பக்கத்தில் காட்டப்படும். மிகவும் பிரபலமான கோப்புகள் GIF மற்றும் JPEG வடிவத்தில் உள்ளன.

தொடரியல்

வாதங்கள்
மதிப்பு என்பது கோப்பிற்கான முழு அல்லது தொடர்புடைய பாதையாகும்.

இயல்புநிலை மதிப்பு
இல்லை

எடுத்துக்காட்டு 8. கிராஃபிக் கோப்பிற்கான பாதை

விளக்கம்

குறியிடவும் வலைப்பக்கத்தில் GIF, JPEG அல்லது PNG கிராஃபிக் வடிவத்தில் படங்களைக் காண்பிக்க வடிவமைக்கப்பட்டுள்ளது. படக் கோப்பின் முகவரி src பண்புக்கூறு மூலம் குறிப்பிடப்படுகிறது. தேவைப்பட்டால், குறிச்சொல்லை வைப்பதன் மூலம் வரைபடத்தை மற்றொரு கோப்பிற்கான இணைப்பாக மாற்றலாம் ஒரு கொள்கலனில் . .

உங்களுக்கு ஏற்கனவே தெரிந்த ஒரு பண்புக்கூறைப் பயன்படுத்துதல் சீரமைக்க html பக்கத்தின் மற்ற உறுப்புகளுடன் தொடர்புடைய படங்களின் சீரமைப்பை நீங்கள் கட்டுப்படுத்தலாம். பண்புக்கூறில் சீரமைக்கபல அர்த்தங்கள் உள்ளன, ஆனால் நாம் தான் அதிகம் இந்த நேரத்தில்நான் இரண்டில் ஆர்வமாக உள்ளேன்:

• விட்டு- படம் பக்கத்தின் இடது விளிம்பில் அமைந்துள்ளது, மேலும் உரை வலதுபுறத்தில் படத்தைச் சுற்றி பாய்கிறது;


• சரி- படம் பக்கத்தின் வலது விளிம்பில் அமைந்துள்ளது, மேலும் உரை மற்றும் பிற கூறுகள் இடதுபுறத்தில் படத்தைச் சுற்றி வருகின்றன.

எடுத்துக்காட்டாக, HTML குறியீடு

உலாவி இப்படி காண்பிக்கும்

இந்த HTML குறியீடு:

இப்படி இருக்கும்:

ஒரு படத்தைச் சுற்றி உரைச் சுற்றப்படுவதை நிறுத்த, நீங்கள் குறிச்சொல்லைப் பயன்படுத்தலாம் பி.ஆர்(முந்தைய பகுதியில் இருந்து எங்களுக்கு நன்கு தெரிந்தது). குறிச்சொல்லில் பி.ஆர்ஒரு பண்பு உள்ளது தெளிவானது, இது மூன்று மதிப்புகளை எடுக்கலாம்:

• விட்டு- இடது-சீரமைக்கப்பட்ட படங்களைச் சுற்றி உரையை மூடுவதை நிறுத்துங்கள்;


• சரி- வலது சீரமைக்கப்பட்ட படங்களைச் சுற்றி உரைச் சுற்றுதலை நிறுத்துங்கள்;


• அனைத்து- இடது மற்றும் வலதுபுறம் சீரமைக்கப்பட்ட படங்களைச் சுற்றி உரைச் சுற்றுதலை நிறுத்தவும்.

ஒரு படத்தைச் செருகவும்:

விளக்கம் மற்றும் பயன்பாடு

குறியிடவும் ஒரு படத்தை HTML ஆவணத்தில் செருகுகிறது.

படங்கள் தொழில்நுட்ப ரீதியாக பக்கத்தில் செருகப்படவில்லை என்பதை நினைவில் கொள்க. உண்மையில், படங்கள் HTML பக்கங்களுடன் இணைக்கப்படுகின்றன. குறியிடவும் படத்திற்கான கொள்கலனை உருவாக்குகிறது.

குறிச்சொல்லில் இரண்டு தேவையான பண்புக்கூறுகள்: src மற்றும் alt.

HTML மற்றும் XHTML இடையே உள்ள வேறுபாடு

HTML குறிச்சொல்லில் மூடும் குறிச்சொல்லைக் கொண்டிருக்கவில்லை.

XHTML குறிச்சொல்லில் சரியாக மூடப்பட வேண்டும்.

img உறுப்பின் "align", "border", "hspace" மற்றும் "vspace" பண்புக்கூறுகள் நிறுத்தப்பட்டன மற்றும் XHTML 1.0 Strict இல் ஆதரிக்கப்படவில்லை.

அறிவுரை:ஆல்ட் பண்புக்கூறு படம் இல்லாத போது மாற்று உரையாக பயன்படுத்தப்படுகிறது, மாறாக மவுஸ்ஓவர் உரையாக பயன்படுத்தப்படுகிறது. படத்தின் மேல் வட்டமிடும்போது உரையைக் காட்ட, தலைப்புப் பண்புக்கூறைப் பயன்படுத்தவும். இது போல்: .

தேவையான பண்புக்கூறுகள்

விருப்பப் பண்புக்கூறுகள்

நிலையான பண்புக்கூறுகள்

நிகழ்வு பண்புக்கூறுகள்

இப்போதெல்லாம், HTML பக்கங்களில் படங்களைப் பயன்படுத்தாமல் கிட்டத்தட்ட எந்த வலைத்தளமும் செய்ய முடியாது, ஏனென்றால் பிரபலமான ஞானம் சொல்வது போல்: "நூறு முறை கேட்பதை விட ஒரு முறை பார்ப்பது நல்லது." இந்தக் கட்டுரையைப் படித்த பிறகு, இணையதளப் பக்கங்களில் படங்களைச் சேர்க்கப் பயன்படும் IMG குறிச்சொல்லை எவ்வாறு பயன்படுத்துவது என்பதை நீங்கள் கற்றுக் கொள்வீர்கள். HTML 5 க்கான எடுத்துக்காட்டுகளை நாங்கள் கருத்தில் கொள்வோம், ஆனால் அவை ஹைபர்டெக்ஸ்ட் மார்க்அப் மொழியின் முந்தைய பதிப்புகளுக்கும் வேலை செய்யும்.

HTML பக்கத்தில் ஒரு படத்தை எவ்வாறு செருகுவது

ஒரு பக்கத்தில் படத்தைச் செருக, IMG HTML குறிச்சொல்லைப் பயன்படுத்தவும். ஒரு படத்திற்கு, குறைந்தது இரண்டு பண்புக்கூறுகள் குறிப்பிடப்பட வேண்டும்: src (படத்துடன் கூடிய கோப்பிற்கான பாதை) மற்றும் alt (படம் ஏற்றப்படவில்லை என்றால் பயனர் பார்க்கும் மாற்று உரை). Alt பண்புக்கூறு காலியாக இருக்கலாம், ஆனால் இருக்க வேண்டும். நீங்கள் தலைப்பு பண்புக்கூறையும் அமைக்கலாம், பின்னர் நீங்கள் படத்தின் மீது வட்டமிடும்போது, ​​இந்த பண்புக்கூறில் குறிப்பிடப்பட்ட உரை காட்டப்படும்.

படத்துடன் கூடிய கோப்பு அது ஏற்றப்பட்ட பக்கத்தின் அதே கோப்புறையில் இருந்தால், பின்னர் src பண்புநீங்கள் கோப்பு பெயரை மட்டுமே குறிப்பிட முடியும், எடுத்துக்காட்டாக:

பக்கம் http://www..html இல் அமைந்திருந்தால் மற்றும் படம் http://www..jpg என இருந்தால், படத்திற்கான பாதை பின்வருமாறு குறிப்பிடப்படுகிறது:

பக்கம் http://www..site/logo.jpg கோப்புறையில் இருந்தால், பாதை இப்படி இருக்கும்:

படம் http://www.site/images/ கோப்புறையில் இருந்தால், படம் செருகப்பட்ட அதே தளத்தில் உள்ள பக்கம் எந்த கோப்புறையில் இருந்தாலும், கோப்பிற்கான பாதையை பின்வருமாறு குறிப்பிடலாம்:

அல்லது படக் கோப்பு வேறொரு தளத்தில் இருந்தால் அதற்கான முழுப் பாதையையும் குறிப்பிடலாம்:

படத்தின் அகலம் மற்றும் உயரம்

HTML இன் முந்தைய பதிப்புகளில், உயரம் மற்றும் அகலம் அகலம் மற்றும் உயர பண்புகளைப் பயன்படுத்தி அமைக்கப்பட்டன, ஆனால் இப்போது படத்தின் காட்சியைப் பாதிக்கும் அனைத்தும் அமைக்கப்பட்டுள்ளன CSS ஐப் பயன்படுத்துகிறதுபாணி பண்புக்கூறில். பெரும்பாலும், அகலம் மற்றும் உயரம் பிக்சல்களில் குறிப்பிடப்படுகின்றன:

அகலம் மற்றும் உயரம் குறிப்பிடப்படவில்லை என்றால், படம் அதன் அசல் அளவில் காட்டப்படும். அசல் பரிமாணங்களை விட மதிப்புகள் சிறியதாக இருந்தால், மதிப்புகள் பெரியதாக இருந்தால், உலாவி படத்தை குறைக்கப்பட்ட வடிவத்தில் காண்பிக்கும், பின்னர் உலாவி குறிப்பிட்ட பரிமாணங்களுக்கு படத்தை நீட்டிக்கும் இந்த வழக்கில்படம் குறைவாக தெளிவாக இருக்கும். தற்செயலாக படத்தை சிதைக்காமல் இருக்க, நீங்கள் அமைக்கலாம், எடுத்துக்காட்டாக, உயரம் மட்டுமே, பின்னர் குறிப்பிட்ட உயர மதிப்புக்கு விகிதத்தில் அகலம் குறைக்கப்படும் அல்லது அதிகரிக்கப்படும்.

மேலும், அகலம் மற்றும் உயரத்தை உலாவி சாளரத்தின் அகலம் அல்லது உயரம் அல்லது படம் அமைந்துள்ள எந்த தொகுதி உறுப்புகளின் சதவீதமாக குறிப்பிடலாம்:

உரை மற்றும் உள்தள்ளலில் படம் மூடுதல்

இயல்பாக, உரை படத்தின் கீழே காட்டப்படும். படத்தைச் சுற்றி உரைச் சுற்றலுக்காக, மிதவை CSS பண்பு பயன்படுத்தப்படுகிறது, இது align பண்புக்கூறை மாற்றுகிறது. படம் உரையின் இடதுபுறமாகவும், அதைச் சுற்றி வலப்புறமாகவும் கீழாகவும் உரை ஓட வேண்டும் என விரும்பினால், இடதுபுறத்தில் உள்ள மதிப்பை அமைக்கவும். CSS பண்புகள்மிதவை, மற்றும் படம் வலதுபுறத்தில் இருக்க வேண்டும் என்றால், மதிப்பு வலது குறிக்கப்படுகிறது:

படத்தின் மேல், வலது, கீழ் மற்றும் இடது பக்கங்களிலும் உள்தள்ளல்களை அமைக்கலாம்:

இதையே சுருக்கமான வடிவத்தில் கூறலாம்:

மாற்றாக, நீங்கள் மரபு vspace மற்றும் hspace பண்புக்கூறுகளுக்குப் பதிலாக இரண்டு விளிம்பு சொத்து மதிப்புகளைப் பயன்படுத்தி செங்குத்து மற்றும் கிடைமட்ட விளிம்புகளை அமைக்கலாம். மேல் மற்றும் கீழ் 10 பிக்சல்கள் மற்றும் இடது மற்றும் வலதுபுறத்தில் 8 பிக்சல்களின் விளிம்பு தேவை என்று வைத்துக்கொள்வோம்:

ஒரு படத்தை ஒரு பக்கத்திற்கான இணைப்பாக மாற்றுவது எப்படி

அல்லது படச்சட்டத்தின் நிறம், வகை மற்றும் தடிமன் ஆகியவற்றை நாமே அமைக்கலாம்:

இணையத்திற்கான பட வடிவங்கள்

பொதுவாக, இணையதளங்கள் பல பட வடிவங்களைப் பயன்படுத்துகின்றன. புகைப்படங்களுக்குப் பயன்படுகிறது JPEG வடிவம், படத்துடன் இருக்க வேண்டும் என்றால் வெளிப்படையான பின்னணி, பின்னர் PNG வடிவம் பயன்படுத்தப்படுகிறது. முன்னதாக, PNG வடிவத்திற்கு பதிலாக GIF பயன்படுத்தப்பட்டது, ஆனால் அது ஏற்கனவே காலாவதியானது - அதன் ஒரே நன்மை அனிமேஷன் படங்களை உருவாக்கும் திறன் ஆகும். பொதுவாக, PNG மற்றும் GIF ஆகியவை வடிவமைப்பு கூறுகளாக மட்டுமே பயன்படுத்தப்படுகின்றன, மேலும் படம் வெளிப்படையான பகுதிகள் அல்லது ஒளிஊடுருவக்கூடியதாக இருக்கும் சந்தர்ப்பங்களில் மட்டுமே. இந்த வடிவங்களில் உள்ள கோப்புகள் அளவு மிகப் பெரியதாக இருப்பதால், அவை வழக்கமான புகைப்படங்களைப் பயன்படுத்த பரிந்துரைக்கப்படவில்லை - இதற்கு ஒரு JPEG வடிவம் உள்ளது. தளத்தில் படங்களைப் பதிவேற்றும் முன், அவற்றின் அகலத்தையும் உயரத்தையும் தளத்தில் காட்டப்படும் அளவிற்குக் குறைப்பது மதிப்பு, இதனால் அவை பயனர்களுக்கு வேகமாக ஏற்றப்படும்.

கட்டுரையை நகலெடுப்பது தடைசெய்யப்பட்டுள்ளது.