காணப்படுகிறது தளம்: பின்னணி படம் எப்படி HTML

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

அடிப்படை HTML குறிச்சொற்களை பின்னணி உருவாக்க

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

1. டேக் பண்பு எழுது.
2. HTML குறியீட்டை உள்ள CSS பாணி மூலம்.
3. ஒரு தனி கோப்பில் CSS நடைகளை எழுது.

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

1. index.htm கோப்பில் டேக் பண்பு (உடல்) மூலம் முதல் பதிவு முறை. (உடல் பின்னணி = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ உடல்): இது இந்த வடிவத்தில் சேமிக்கப்படுகிறது. நாங்கள் தலைப்பு «படம்» மற்றும் நீட்டிப்பு JPG மற்றும் நாங்கள் என்ற «படங்களை», பின்னர் HTML குறியீடு நுழைவு இது போன்று தோற்றமளிக்கும் கோப்புறையுடனான ஒரு படம் இருந்தால் அதாவது,: (உடல் பின்னணி = "படங்களை / Picture.jpg") ... (/ உடல்) .
2. இரண்டாவது முறை ஒரு CSS பாணி பதிவு ஈடுபடுத்துகிறது, ஆனால் அது பெயர் index.htm அதே கோப்பில் எழுதப்படுகிறது. (உடல் பாணி = "பின்னணி: URL ( '../ படங்களை / Picture.jpg')").
3. பதிவு மூன்றாவது முறை இரண்டு கோப்புகளை செய்யப்படுகிறது. (தலைவர்) (இணைப்பு ரெல் = "நடைதாளுடன்" வகை = "உரை / CSS" href = "http: // தளத்தில் / கட்டுரை / 193110 /% D0 அமைப்பின்% 9F பெயர் index.htm டேக் (தலைவர்) மூலம் ஆவணத்தை போன்ற ஒரு வரி எழுதப்பட்ட % டி 1% 83% டி 1% 82% டி 1% 8C_% D0 அமைப்பின்% பி.ஏ. CSS_faylu ") (/ தலைவர்). ஒரு கோப்பை என்று அழைக்கப்படும் மார்ச் நடை ஏற்கனவே எழுத: உடல் {பின்னணி: இணைய முகவரிக்கு (படங்கள் / Picture.jpg ')}.

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

வழிகள் சாளரத்தின் அகலம் பின்னணி விரிவாக்க படத்தைத்

நாம் ஒரு சதவீதம் வடிவில் எங்கள் திரை பிரதிநிதித்துவம். அது திரையின் முழு அகலம் மற்றும் நீளம் × 100% 100% இருக்கும் என்று மாறிவிடும். நாம் இந்த அகலத்திற்கு விரிவாக்க படத்தைத் வேண்டும். படத்தை கோப்பு பதிவு மார்ச் வரி மானிட்டர் முழு அகலம் மற்றும் நீளம் பிம்பத்தின் நீட்டி என்று சேர்க்கவும். அதை CSS பாணியில் எழுதப்பட்ட போல? இது மிகவும் எளிது!

உடல்

{

பின்னணி: இணைய முகவரிக்கு (படங்கள் / Picture.jpg ')

பின்னணி-அளவு: 100%; / * இந்த இடுகையில் அதிகபட்சம் நவீன உலாவிகளில் ஏற்றது * /

}

எனவே நாம் திரையில் html ல் ஒரு படம் பின்னணி எப்படி வெளியே வந்தார். index.htm கோப்பில் பதிவு செய்வதில் உள்ள ஒரு முறை உள்ளது. இந்த முறை மற்றும் காலாவதியான என்றாலும், ஆனால் ஆரம்ப அது தேவையான தெரியும் புரிந்து கொள்ளுதல் ஆகும். டேக் (தலைவர்) (பாணி) கிராம {பின்னணி அளவு: கவர்; } (/ உடை) (/ தலை), இந்த சாதனையை நாங்கள் சாளரத்தின் முழு அகலம் மேலாக அமைக்கப்பட்டன வேண்டிய பின்னணி, ஒரு சிறப்பு அலகு ஒதுக்க என்று அர்த்தம். நாம் என்று படத்தை நவீன ஏதேனும் உலாவிகளின் திரையில் முழு அகலம் நிலைக்கு தள்ளப்பட்டுள்ளது, ஒரு பின்னணி படத்தை HTML தளம் எப்படி இரண்டு வழிகளில், சிந்தித்தோம்.

ஒரு நிலையான பின்னணி எப்படி

நீங்கள் எதிர்காலத்தில் வலை வள பின்புலமாக ஒரு படத்தை பயன்படுத்த முடிவு செய்தால், நீங்கள் அதை சரி செய்ய எப்படி தெரிந்து கொள்ள, அதை இல்லை நீளம் நீட்டிக்கப்படும் மற்றும் அழகியல் தோற்றம் கெடுக்க வில்லை வேண்டும். வெறுமனே HTML குறியீட்டை பயன்படுத்தி ஒரு சிறிய கூடுதலாக பதிவு செய்வதற்கு இந்த. நீங்கள் பின்னணி பிறகு ஒரு சொற்றொடர் சேர்க்க மார்ச் தாக்கல் செய்ய வேண்டும்: இணைய முகவரிக்கு (படங்கள் / Picture.jpg ') சரி; அல்லது அதற்கு பதிலாக பிறகு அரைப்புள்ளி தனி வரி சேர்க்கப்பட்டது - நிலை: நிலையான. இவ்வாறு, உங்கள் வால்பேப்பர் சரி செய்யப்படும். தளத்தில் உள்ளடக்கத்தை உருட்டுதல் போது, இந்தக் உரை வரிகளை நகரும் காண்பீர்கள், ஆனால் பின்னணி இடத்தில் உள்ளது. எனவே நீங்கள் எப்படி பல வழிகளில், HTML பின்னணி படத்தை செய்ய கற்றுக்கொண்டேன்.

HTML இல் அட்டவணைகள் வேலை

பல அனுபவமற்ற வலை டெவலப்பர்கள், மேசைகள் மற்றும் தொகுதிகள் எதிர்நோக்கும், அடிக்கடி HTML படத்தை பின்னணி அட்டவணை எப்படி புரியவில்லை. அனைத்து போல் அணிகள், HTML மற்றும் CSS பாணிகள், இணையதள நிரலாக்க மொழி மிகவும் எளிது. இந்த பிரச்சினைக்கு தீர்வு குறியீட்டு வரிகள் ஒரு ஜோடி எழுத இருக்கிறார். நீங்கள் ஏற்கனவே குறிச்சொற்களை (TR) மற்றும் (TD) மூலம் சுட்டிக் முறையே வரிசைகள் மற்றும் பத்திகள், ஒரு அட்டவணை எழுதி என்று தெரிந்து கொள்ள வேண்டும். பின்னணி = URL ஐ படங்கள்: ஒரு படத்தை வடிவில் அட்டவணை பின்னணி செய்ய, அது டேக் (மேசை) (TR) அல்லது (TD) குறிப்பு படம் தொடர்பானது ஒரு எளிய சொற்றொடர் சேர்க்க அவசியம். தெளிவாகச் சொல்வதென்றால், நாங்கள் உதாரணங்கள் ஒரு ஜோடி கொடுக்க.

பதிலாக பின்னணி ஒரு படம் அட்டவணை: HTML உதாரணங்கள்

ஒரு 2x3 அட்டவணை வரைந்து அது பின்னணி படத்தை கோப்புறை "படங்கள்" சேமிக்கப்படும் செய்ய: (அட்டவணை பின்னணி = "படங்களை / Picture.jpg") (TR) (TD) 1 (/ TD) (TD) 2 (/ TD) (TD) 3) (/ TD) (/ TR) (TR) (TD) 4 (/ TD) (TD) 5 (/ TD) (TD) 6 (/ TD) (/ TR) (/ அட்டவணை). எனவே எங்கள் அட்டவணை படத்தின் பின்னணியில் எடுக்கப்படும்.

இப்போது 2x3 அதே தட்டில் அளவுகள் வரைகின்றனர், ஆனால் எண் 1, 4, 5 மற்றும் 6 (அட்டவணை) பத்திகள் (TR) ஒரு படம் (TD பின்னணி = "படங்களை / Picture.jpg") 1 (/ TD) (TD) 2 நுழைக்க (/ TD) (TD) 3 (/ TD) (/ TR) (TR) (TD பின்னணி = "படங்களை / Picture.jpg") 4 (/ TD) (TD பின்னணி = "படங்களை / Picture.jpg") 5 ( / TD) (TD பின்னணி = "படங்களை / Picture.jpg") 6 (/ TD) (/ TR) (/ அட்டவணை). நாங்கள் பின்னணி மட்டுமே இதில் நாங்கள் பதிவு, மற்றும் முழு அட்டவணையையும் அந்த உயிரணுக்களில் தோன்றும் பார்க்க முடியும் பார்த்த பிறகு.

குறுக்கு உலாவி இணக்கத்தன்மை தளத்தில்

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