HTML இல் உரையை எவ்வாறு சீரமைப்பது

கருவிகள் தேவை

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

HTML வடிவம்

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

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

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

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

உரையின் இன்லைன் ஸ்டைலிங்

உதாரணம் 1

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

இந்த உரை மையத்தில் காட்டப்பட வேண்டுமெனில், குறிச்சொல்லை மாற்றுவோம்.

இந்த டேக் ஒரு இன்லைன் டேக். நாம் இந்த குறிச்சொல்லை html உடலில் பத்தி குறிச்சொல்லை அறிமுகப்படுத்தும்போது எழுதுவோம். உரைக்குப் பிறகு, பத்தி குறிச்சொல்லை மூடவும். சேமித்து பின்னர் உலாவியில் கோப்பைத் திறக்கவும்.

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

மையக் குறி உரைக்கு முன்னும் பின்னும் பயன்படுத்தப்படுகிறது. இது முந்தைய உதாரணத்தின் அதே முடிவைக் காண்பிக்கும்.

உதாரணம் 2

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

வெளியீடு உலாவியில் காட்டப்பட்டுள்ளது. தலைப்பு டேக் வெற்று உரையை ஒரு தலைப்பாக மாற்றியுள்ளது, மேலும் டேக் அதை மையத்தில் சீரமைத்துள்ளது.

உதாரணம் 3

மையத்தில் உரையை சீரமைக்கவும்

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

நாங்கள் இந்த கோப்பை நோட்பேடில் திறந்து பின்னர் டேக் பயன்படுத்தி மைய நிலையில் சீரமைப்போம்.

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

உரையை வலது பக்கம் சீரமைக்கவும்

உரையை வலது பக்கம் சாய்ப்பது பக்கத்தின் மையத்தில் வைப்பதற்கு ஒத்ததாகும். பத்தி குறிச்சொல்லில் மைய வார்த்தை மாற்றப்பட்டது.

கீழே சேர்க்கப்பட்டுள்ள படத்தின் மூலம் மாற்றங்களைக் காணலாம்.

உலாவியில் வலைப்பக்கத்தை சேமித்து புதுப்பிக்கவும். உரை இப்போது பக்கத்தின் வலது பக்கம் நகர்த்தப்பட்டது.

உரையின் உள் ஸ்டைலிங்

உதாரணம் 1

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

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

இந்த டேக் தலை பகுதியில் உள்ள ஸ்டைல் ​​டேக்கில் எழுதப்பட்டுள்ளது. இப்போது உலாவியில் குறியீட்டை இயக்கவும்.

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

உதாரணம் 2

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

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

உதாரணம் 3

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

வர்க்கம் =மையம்> ……</ ப >

முதல் மூன்று பத்திகளில் வகுப்பைச் சேர்த்துள்ளோம். இப்போது குறியீட்டை இயக்கவும். வெளியீட்டில் முதல் மூன்று பத்திகள் மையத்தில் சீரமைக்கப்பட்டுள்ளன, மற்றவை இல்லை.

முடிவுரை

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