ஹைபர்டெக்ஸ்ட் மார்க்அப் லாங்குவேஜ் (HTML) என்பது ஒரு வலைத்தளத்தை வடிவமைத்து உருவாக்க பயன்படும் ஒரு முன் மொழி. HTML என்பது நிலையான அல்லது மாறும் வலைப்பக்கங்களை வடிவமைக்கப் பயன்படுத்தப்படும் அனைத்து மொழிகளின் அடிப்படை மொழியாகும். Html வடிவமைப்பில் தேவைப்படும் பல செயல்பாடுகளைக் கொண்டுள்ளது. குறிச்சொற்களின் உதவியுடன், கோண அடைப்புக்குறிக்குள் எழுதப்பட்ட கட்டளைகள், ஒரு வலைப்பக்கம் வடிவமைக்கப்பட்டுள்ளது. HTML, உரை, படம் அல்லது எந்த உரை எடிட்டர் போன்ற வேறு எந்த உறுப்புகளையும் உருவாக்க அல்லது திருத்த பயனரை அனுமதிக்கிறது, அதாவது, Microsoft Word. HTML இன் உள்ளடக்கங்கள் உரை, படம், நிறம், வடிவமைப்பு போன்றவை வடிவமைப்பை வடிவமைப்பது மிக முக்கியமான பகுதியாகும். உரையை வடிவமைப்பதற்கான ஒரு எடுத்துக்காட்டு உரை சாய்வை உருவாக்குதல். இந்த உறுப்பு பயனரின் கவனத்தை வலியுறுத்துவதில் அல்லது ஓட்டுவதில் முக்கியமானது. இந்த டுடோரியலில் சில எடுத்துக்காட்டுகள் முன்னிலைப்படுத்தப்பட்டுள்ளன.
தேவையான அத்தியாவசியங்கள்
ஒரு வலைத்தளத்தை வடிவமைப்பதற்கும் மேம்படுத்துவதற்கும் HTML க்கு இரண்டு கருவிகள் தேவை. ஒன்று HTML குறியீட்டை எழுத தேவையான ஒரு உரை எடிட்டர். இது உங்கள் அணுகலில் எந்த உரை எடிட்டராகவும் இருக்கலாம், அதாவது, நோட்பேட், நோட்பேட் ++, கம்பீரமான, விஷுவல் ஸ்டுடியோ, முதலியன. கூகிள் குரோம். நிலையான பக்கத்தை வடிவமைக்க, உங்களுக்கு HTML மற்றும் CSS பாணி தாளை வடிவமைக்க வேண்டும். அவை ஒவ்வொன்றும் இந்த வழிகாட்டியில் எடுத்துக்காட்டுகளுடன் பயன்படுத்தப்படுகின்றன.
HTML வடிவம்
சாய்வு உரையின் வடிவமைப்பை விளக்க, நாம் முதலில் html குறியீட்டைப் புரிந்துகொள்கிறோம். Html குறியீடு இரண்டு பகுதிகளைக் கொண்டுள்ளது. ஒன்று தலை பகுதி, மற்றொன்று உடலில். தலைப் பகுதியில் தலைப்பைச் சேர்த்துள்ளோம்; இந்த தலைப்பு பெயர் உண்மையில் பக்கத்தின் தலைப்பு. உட்புற ஸ்டைலிங் தலையின் உடலுக்குள் செய்யப்படுகிறது. அதேசமயம் உடலில் உரை, படம் மற்றும் நிறம் போன்ற மற்ற எல்லா குறிச்சொற்களும் உள்ளன, தவிர, நீங்கள் html பக்கத்தில் சேர்க்க விரும்புவது HTML குறியீட்டின் உடல் பகுதியில் எழுதப்பட்டுள்ளது.
< html >
< தலை >...</ தலை >
< உடல் >….</ உடல் >
</ html >
கீழே உள்ள படம் HTML இன் மாதிரி குறியீடு. தலைப்பகுதி தலைப்பகுதிக்குள் எழுதப்பட்டிருப்பதைக் காணலாம். அதே நேரத்தில், குறிச்சொல்லைப் பயன்படுத்தி html இன் உடலில் ஒரு பத்தியைச் சேர்த்துள்ளோம்
. பின்னர் உடல் குறிச்சொல் மற்றும் HTML குறிச்சொற்கள் மூடப்படும்.
இந்த மாதிரியின் வெளியீடு உலாவியில் காணப்படுகிறது. தலைப்புப் பெயர் தாவல் பெயரில் காட்டப்பட்டுள்ளதை நீங்கள் காணலாம், அதை நாங்கள் HTML குறியீட்டின் தலையில் அறிவித்துள்ளோம்.
HTML அதன் உடலுக்குள் எழுதப்பட்ட அனைத்து குறிச்சொற்களுக்கும் திறக்கும் மற்றும் மூடும் குறிச்சொற்களைக் கொண்டுள்ளது. குறியீட்டைத் திறந்தவுடன், அதன் இடையே உரை எழுதிய பிறகு மூடப்பட வேண்டும். டேக் அதில் உள்ள சாய்வுடன் மூடப்பட்டுள்ளது. குறியீடு பின்னர் நோட்பேட் கோப்பில் சேமிக்கப்படும். நினைவில் கொள்ள வேண்டிய ஒரு விஷயம் என்னவென்றால், குறியீட்டைச் சேமிக்கும்போது, உரை எடிட்டரின் கோப்பு html நீட்டிப்புடன் சேமிக்கப்பட வேண்டும். உதாரணமாக, மாதிரி. Html. இந்த நோக்கத்திற்காக நீங்கள் பயன்படுத்தும் தற்போதைய உலாவியின் ஐகானுடன் கோப்பு சேமிக்கப்படுவதை நீங்கள் காண்பீர்கள்.
இது html இல் வடிவமைப்பின் பின்னணி. இப்போது உரையை சாய்வாக மாற்ற ஒரு எளிய உதாரணத்தைப் பயன்படுத்துவோம்.
உதாரணம் 1
இந்த வழிகாட்டியில் முன்பு விவரிக்கப்பட்டுள்ளபடி ஒரு நோட்பேட் கோப்பை எடுத்து எளிய HTML குறியீட்டை எழுதவும். உடல் பகுதியில் இரண்டு வரிகளின் பத்தியைச் சேர்க்கவும். உரையை சாய்வாக மாற்ற. குறிச்சொல்லைப் பயன்படுத்தவும் வார்த்தைகளின் தொடக்கத்தில் நீங்கள் சாய்ந்த வடிவத்தில் இருக்க விரும்புகிறீர்கள்
< நான் > ……</ நான் >இது உரையை சாய்வதற்கான குறிச்சொல். கீழே உள்ள படத்தில் நீங்கள் பார்க்க முடியும் என, தி தொடக்கத்தில் எழுதப்பட்ட தொடக்கக் குறி மற்றும் நிறைவு குறி. உடலை மூடி html.
இப்போது கோப்பைச் சேமித்து கோப்பின் வெளியீட்டைப் பார்க்க உலாவியில் இயக்கவும்.
வெளியீட்டில் இருந்து, குறியீட்டில் நாங்கள் சாய்ந்த வாக்கியம் சாய்ந்த வடிவத்தில் இருப்பதை நீங்கள் அவதானிக்கலாம், அதேசமயம் முதல் வாக்கியம் சாதாரண வடிவத்தில் தோன்றியது.
உதாரணம் 2
இந்த எடுத்துக்காட்டில், உரையின் முழு வாக்கியத்திற்கும் பதிலாக ஒரு குறிப்பிட்ட வார்த்தையை சாய்வு வடிவத்தில் உருவாக்குவோம். வாக்கியத்தில் உரையை சாய்வு செய்ய விரும்பும் எல்லா இடங்களிலும் திறக்கும் மற்றும் மூடும் குறிச்சொற்கள் முழு பத்தியிலும் பயன்படுத்தப்படுகின்றன.
இப்போது மீண்டும், கோப்பைச் சேமித்து, பின்னர் உலாவியில் இயக்கவும். உரையின் சில குறிப்பிட்ட பகுதி சாய்வு வடிவத்தில் இருப்பதை நீங்கள் குறியீட்டில் சாய்வு செய்ய விரும்புகிறீர்கள் என்பதை நீங்கள் காணலாம்.
உதாரணம் 3
பயன்படுத்துவதைத் தவிர உரையில் குறிச்சொல், உரையை சாய்வு வடிவத்தில் உருவாக்க மற்றொரு முறை உள்ளது. உரையின் சில பகுதியை வலியுறுத்துவதற்கான அணுகுமுறை இது. இந்த குறிச்சொல் திறக்கும் மற்றும் மூடும் குறிச்சொற்களையும் கொண்டுள்ளது. இதற்கு பயன்படுத்தப்படும் தொடரியல்;
< இல் >….</ இல் >இரண்டு குறிச்சொற்களுக்கு இடையில் உரை எழுதப்பட்டுள்ளது; இந்த எடுத்துக்காட்டில், இந்த குறிச்சொல்லை பத்தியில் இரண்டு முறை பயன்படுத்தியுள்ளோம். கீழே வைக்கப்பட்டுள்ள குறியீட்டின் படத்தைப் பார்ப்போம்.
இரண்டு வாக்கியங்களிலும், நாங்கள் பயன்படுத்தினோம் பத்தியில் ஒரு முறை. உலாவி வடிவத்தில் html கோப்பை இயக்குவதன் மூலம் வெளியீடு பெறப்படுகிறது.
உதாரணம் 4
சொற்களை சாய்வு வடிவத்தில் காட்ட மற்றொரு அணுகுமுறையைப் பயன்படுத்திய உதாரணம் இது. இது உரையில் பயன்படுத்துவதைக் குறிக்கிறது. இந்த எடுத்துக்காட்டில், html உடலில் எழுதப்பட்ட முழு உரையிலும் இந்த குறிச்சொல்லைப் பயன்படுத்தியுள்ளோம்.
< மேற்கோள் > ……</ மேற்கோள் > 
அனைத்து குறிச்சொற்களையும் மூடிய பிறகு, உலாவியில் கோப்பை இயக்கவும்.
உதாரணம் 5
இப்போது வரை, உரையின் இன்லைன் ஸ்டைலிங் பற்றி நாங்கள் விவாதித்தோம். உரையின் சாய்வு வடிவத்தை உருவாக்குவது உரையின் ஸ்டைலிங் மற்றும் வடிவமைப்பையும் குறிக்கிறது. ஸ்டைலிங் மூன்று வகைகள். ஒன்று இன்லைன், இரண்டாவது அகம், மூன்றாவது வெளி. குறிச்சொல்லுக்குள் இன்லைன் ஸ்டைலிங் செய்யப்படுகிறது. உட்புறம் தலையின் உடலுக்குள் எழுதப்பட்டுள்ளது. மற்றும் வெளிப்புற ஸ்டைலிங் .css நீட்டிப்புடன் மற்றொரு கோப்பில் செய்யப்படுகிறது.
இது இன்லைன் css க்கு ஒரு எடுத்துக்காட்டு; இங்கே, பத்தியின் குறிச்சொற்களுக்குள் குறியீட்டை எழுதியுள்ளோம். எழுத்து வடிவ பாணியிலான பாணி அறிக்கையை சாய்வாக அறிவித்துள்ளோம். இந்த அறிக்கை குறிச்சொல்லுக்குள் எழுதப்பட்டுள்ளது, எனவே மேலே உள்ள படத்தில் நீங்கள் காணக்கூடியபடி, அது எந்த மூடும் குறிச்சொல்லையும் கொண்டிருக்காது. இப்போது அனைத்து குறிச்சொற்களையும் மூடி, அவற்றை உலாவியில் இயக்கவும். நாம் விரும்பிய அதே முடிவுகளை அது காட்டுகிறது.
< ப பாணி=செய்ய-பாணி: சாய்வு;> 
உதாரணம் 6
இன்லைனுக்குப் பிறகு, இப்போது உள் ஸ்டைலிங்கின் உதாரணத்தைச் சேர்ப்போம். இங்கே தலை பகுதிக்குள் ஒரு வகுப்பு சேர்க்கப்பட்டுள்ளது. வகுப்பின் பெயர் html இன் உடலில் பத்தி குறிச்சொல்லுக்குள் அறிவிக்கப்படுகிறது. அதனால் எளிதில் அணுக முடியும்.
< தலை >< பாணி >
.க்கு{
செய்ய-பாணி: சாய்வு;
}
</ பாணி ></ தலை >
வர்க்கம் டாட் முறையுடன் தொடங்கப்பட்டது என்பதை நீங்கள் பார்க்கலாம். குறியீட்டில் இரண்டு பத்திகள் உள்ளன; அவற்றில் ஒன்றை இந்த ஸ்டைலிங்கில் பயன்படுத்தியுள்ளோம். நாம் ஒரு பத்தியை வடிவமைக்க விரும்பும் போது அது பயனுள்ளதாக இருக்கும்.
பத்தியில் உள்ள வர்க்க அறிவிப்பு;
< ப வர்க்கம்=a>< ப வர்க்கம்='க்கு'>
இது தலையில் உள்ள வகுப்பை அணுகும். இப்போது வெளியீட்டைப் பார்க்கவும். பத்திகளில் ஒன்று சாய்வாக இருப்பதை நீங்கள் கவனிப்பீர்கள்.
முடிவுரை
இந்த கட்டுரை உரையின் வடிவத்தை சாய்வு வடிவத்தில் பிரதிபலிக்கிறது. உரை வடிவமைப்பு என்பது ஒரு வலைப்பக்கத்தை வடிவமைப்பதில் இன்றியமையாத பகுதியாகும்.