உள்ளடக்கம்

• படிகள்
• முறை 2 இல் 1: HTML 4.01 இல் வேலை செய்கிறது
• முறை 2 இல் 2: CSS / HTML5 இல் வேலை

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

படிகள்

முறை 2 இல் 1: HTML 4.01 இல் வேலை செய்கிறது

1. 1 ஏற்கனவே உள்ளதைத் திறக்கவும் அல்லது புதிய HTML ஆவணத்தை உருவாக்கவும். HTML ஆவணங்களை நோட்பேட் போன்ற உரை எடிட்டர் அல்லது அடோப் ட்ரீம்வீவர் போன்ற சிறப்பு குறியீடு எடிட்டர் மூலம் திருத்தலாம். உங்களுக்கு விருப்பமான நிரலில் ஒரு HTML ஆவணத்தைத் திறக்க இந்தப் படிகளைப் பின்பற்றவும்:
   • நோட்பேட் அல்லது மற்றொரு உரை / குறியீடு எடிட்டரைத் திறக்கவும்.
   • மெனுவைத் திறக்கவும் கோப்பு.
   • கிளிக் செய்யவும் திற.
   • HTML கோப்பைத் தேர்ந்தெடுக்கவும்.
   • கிளிக் செய்யவும் திற
2. 2 நீங்கள் கோட்டை செருக விரும்பும் இடத்தைத் தேர்ந்தெடுக்கவும். கோடு தோன்றும் மேலே உள்ள வரியைக் கண்டுபிடிக்கும் வரை கீழே உருட்டவும், பின்னர் அந்த வரியின் இடதுபுறத்தில் கிளிக் செய்வதன் மூலம் கர்சரை நேரடியாக அந்த வரியின் தொடக்கத்திற்கு நகர்த்தவும்.
3. 3 வெற்று வரியைச் சேர்க்கவும். இரட்டை குழாய் . உள்ளிடவும்நீங்கள் ஒரு வரியைச் செருக விரும்பும் உரையை கீழே நகர்த்தவும், பின்னர் கர்சரை வெற்று வரியில் வைக்கவும்.
4. 4 மணி> குறிச்சொல்லைச் சேர்க்கவும். உள்ளிடவும் மணி> கோட்டின் தொடக்கத்தில் உள்ள வெற்று இடத்திற்கு. டேக் மணி> முழு பக்கத்திலும் கிடைமட்ட கோட்டை வரைய உங்களை அனுமதிக்கிறது.
5. 5 அழுத்தி கர்சரை "hr" டேக்கிற்குப் பிறகு புதிய வரியில் நகர்த்தவும் . உள்ளிடவும். இப்போது குறிச்சொல் மணி> ஒரு தனி வரியில் இருக்க வேண்டும்.
6. 6 கிடைமட்ட கோட்டில் பண்புகளைச் சேர்க்கவும் (விரும்பினால்). நீளம், தடிமன், நிறம் மற்றும் சீரமைப்பு போன்ற பண்புகளைச் சேர்க்கவும். "மணி" க்குப் பிறகு அவற்றை சுருள் பிரேஸ்களில் இணைக்கவும். பல பண்புகளைச் சேர்க்க, அவற்றை ஒரு இடைவெளியுடன் பிரிக்கவும்.
   • உள்ளிடவும் மணி அளவு = "#">கோட்டின் தடிமன் மாற்ற. எண் தடிமன் மதிப்புடன் "#" ஐ மாற்றவும் (எடுத்துக்காட்டாக, அளவு = "10").
   • உள்ளிடவும் மணி அகலம் = "#">வரி அகலத்தை மாற்ற. "#" ஐ பிக்சல்களின் எண்ணிக்கை அல்லது பக்க அகலத்தின் சதவீதத்துடன் மாற்றவும் (எடுத்துக்காட்டாக, அகலம் = "200" அல்லது அகலம் = "75%").
   • உள்ளிடவும் மணிநேர நிறம் = "#">வரி நிறத்தை மாற்ற. வண்ணத்தின் பெயரையோ அல்லது அதன் அறுகோணக் குறியீட்டையோ கொண்டு "#" ஐ மாற்றவும் (எடுத்துக்காட்டாக, நிறம் = "சிவப்பு" அல்லது வண்ணம் = "# FF0000").
   • உள்ளிடவும் hr align = "#">கோட்டை சீரமைக்க. "#" க்கு பதிலாக "வலது" (வலது), "இடது" (இடது), அல்லது "மையம்" (மையம்) (உதாரணமாக, மணி அகலம் = "50%" சீரமை = "மையம்">).
7. 7 HTML கோப்பை சேமிக்கவும். ஒரு உரை ஆவணத்தை ஒரு HTML ஆவணமாக சேமிக்க, நீங்கள் கோப்பு நீட்டிப்பை (.txt, .docx) ".html" ஆக மாற்ற வேண்டும். உங்கள் HTML ஆவணத்தை சேமிக்க இந்த வழிமுறைகளைப் பின்பற்றவும்:
   • மெனுவைத் திறக்கவும் கோப்பு.
   • கிளிக் செய்யவும் இவ்வாறு சேமிக்கவும்.
   • கோப்பு பெயர் புலத்தில் கோப்பிற்கான பெயரை உள்ளிடவும்.
   • கூட்டு .html கோப்பு பெயருக்குப் பிறகு.
   • கிளிக் செய்யவும் சேமி.
8. 8 உங்கள் HTML ஆவணத்தை சரிபார்க்கவும். HTML கோப்பைச் சரிபார்க்க, அதில் வலது கிளிக் செய்து Open with என்பதைத் தேர்ந்தெடுக்கவும். பின்னர் உங்கள் இணைய உலாவியைத் தேர்ந்தெடுக்கவும். நீங்கள் "hr" டேக்கை செருகிய இடத்தில் ஒரு திடமான கோடு தோன்றும். HTML குறியீடு இப்படி இருக்கும்:

   ! DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> இந்த கோடு தலைப்பிலிருந்து ஒரு வரியால் பிரிக்கப்பட வேண்டும் . / P1> / உடல்> / html>

முறை 2 இல் 2: CSS / HTML5 இல் வேலை

1. 1 ஏற்கனவே உள்ளதைத் திறக்கவும் அல்லது புதிய HTML ஆவணத்தை உருவாக்கவும். HTML ஆவணங்களை நோட்பேட் போன்ற உரை எடிட்டர் அல்லது அடோப் ட்ரீம்வீவர் போன்ற சிறப்பு குறியீடு எடிட்டர் மூலம் திருத்தலாம். உங்களுக்கு விருப்பமான நிரலில் ஒரு HTML ஆவணத்தைத் திறக்க இந்தப் படிகளைப் பின்பற்றவும்:
   • நோட்பேட் அல்லது மற்றொரு உரை / குறியீடு எடிட்டரைத் திறக்கவும்.
   • மெனுவைத் திறக்கவும் கோப்பு.
   • கிளிக் செய்யவும் திற.
   • HTML கோப்பைத் தேர்ந்தெடுக்கவும்.
   • கிளிக் செய்யவும் திற
2. 2 உங்கள் HTML ஆவணத்தில் தலைப்பைச் சேர்க்கவும். உங்கள் HTML ஆவணத்திற்கு ஏற்கனவே தலைப்பு இல்லை என்றால், ஒன்றைச் சேர்க்க இந்தப் படிகளைப் பின்பற்றவும். தலைப்பு html> குறிச்சொல் மற்றும் உடல்> குறிக்கு முன் செல்ல வேண்டும்.
   • உள்ளிடவும் தலை> ஆவணத்தின் மேல்.
   • இரட்டை குழாய் . உள்ளிடவும்இரண்டு புதிய வரிகளைச் சேர்க்க.
   • உள்ளிடவும் / தலை>தலைப்பை மூடுவதற்கு.
3. 3 உள்ளிடவும் பாணி வகை = "உரை / css"> தலைப்பின் உள்ளே. HTML வடிவமைப்பை மாற்ற CSS ஐப் பயன்படுத்தக்கூடிய இடத்தை உருவாக்க இரண்டு தலைப்பு குறிச்சொற்களுக்கு இடையில் ஸ்டைல் ​​டேக் வைக்கப்பட்டுள்ளது.
   • மாற்றாக, நீங்கள் ஒரு வெளிப்புற பாணி தாளைப் பயன்படுத்தலாம். கட்டுரையைப் படியுங்கள் "HTML இல் CSS கோப்பை எவ்வாறு செருகுவது»வெளிப்புற CSS கோப்பை ஒரு HTML கோப்பில் இணைப்பது எப்படி என்பதை அறிய.
4. 4 உள்ளிடவும் மணி {. கிடைமட்ட கோட்டை ஸ்டைலிங் செய்வதற்கான CSS டேக் இது. உங்கள் தலைப்பு அல்லது வெளிப்புற CSS கோப்பில் உள்ள "ஸ்டைல்" டேக்கிற்குப் பிறகு அதைச் சேர்க்கவும்.
5. 5 மணிநேரம்> குறிச்சொல்லுக்கு CSS பாணியைச் சேர்க்கவும். அவர்கள் "hr {" குறிச்சொல்லுக்குப் பிறகு வர வேண்டும். ஒரு கிடைமட்ட கோடு பல்வேறு வழிகளில் வடிவமைக்கப்படலாம். அவற்றில் சில கீழே உள்ளன.
   • உள்ளிடவும் அகலம்: ## px;வரி அகலத்தை சரிசெய்ய. வரி அகலத்தை "##" ஐ பிக்சல்களில் மாற்றவும். பிக்சல்களுக்கு (px) பதிலாக, நீங்கள் ஒரு சதவீதத்தை (%) பயன்படுத்தலாம்.
   • உள்ளிடவும் உயரம்: ## px;வரி எடையை சரிசெய்ய. வரி அகலத்தை "##" ஐ பிக்சல்களில் மாற்றவும்.
   • உள்ளிடவும் பின்னணி நிறம்: ##;வரி நிறத்தைக் குறிப்பிட. "##" ஐ ஒரு வண்ணப் பெயர் அல்லது ஹாஷ் (#) உடன் மாற்றவும், அதைத் தொடர்ந்து ஒரு அறுகோண நிறக் குறியீடு.
   • உள்ளிடவும் விளிம்பு-வலது: ## px;வலது விளிம்பிலிருந்து பிக்சல்களின் எண்ணிக்கையைக் குறிப்பிட. "##" ஐ எண் எண் பிக்சல்கள் அல்லது "ஆட்டோ" என்ற குறியீட்டை மாற்றவும். கோட்டை இடது அல்லது மையத்தில் சீரமைக்க "ஆட்டோ" ஐ உள்ளிடவும்.
   • உள்ளிடவும் விளிம்பு-இடது: ## px;இடது விளிம்பிலிருந்து பிக்சல்களின் எண்ணிக்கையைக் குறிப்பிட. "##" ஐ எண் எண் பிக்சல்கள் அல்லது "ஆட்டோ" என்ற குறியீட்டை மாற்றவும். வரியை வலது அல்லது மையத்தில் சீரமைக்க "ஆட்டோ" என்பதை உள்ளிடவும்.
   • உள்ளிடவும் விளிம்பு மேல்: ## px; வரிக்கு மேல் திணிப்பை குறிப்பிட. "##" ஐ பிக்சல்களில் பேடிங்கிற்கு தொடர்புடைய எண்ணுடன் மாற்றவும்.
   • உள்ளிடவும் விளிம்பு-கீழ்: ## px;வரிக்கு கீழே திணிப்பு குறிப்பிட. "##" ஐ பிக்சல்களில் பேடிங்கிற்கு தொடர்புடைய எண்ணுடன் மாற்றவும்.
   • உள்ளிடவும் எல்லை அகலம்: ## px;கோட்டைச் சுற்றி ஒரு பெட்டியை வரைய (விரும்பினால்). "##" ஐ பிக்சல்களில் எல்லையின் அகலத்துடன் தொடர்புடைய எண்ணுடன் மாற்றவும்.
   • உள்ளிடவும் எல்லை-நிறம்: ##;எல்லை நிறத்தை குறிப்பிட (விரும்பினால்). "##" ஐ ஒரு வண்ணப் பெயர் அல்லது ஹாஷ் (#) உடன் மாற்றவும், அதைத் தொடர்ந்து ஒரு அறுகோண வண்ணக் குறியீடு.
6. 6 உள்ளிடவும் } hr> tag க்கான ஸ்டைலிங்கை முடிக்க பாணி பண்புகளுக்குப் பிறகு.
7. 7 உள்ளிடவும் மணி> கிடைமட்ட கோட்டைச் சேர்க்க HTML ஆவணத்தின் உடலில் எங்கும். உங்கள் HTML ஆவணத்தில் hr> டேக் பயன்படுத்தும் ஒவ்வொரு முறையும் CSS பாணி அமைப்புகள் பயன்படுத்தப்படும். உங்கள் குறியீடு இப்படி இருக்க வேண்டும்:

   ! DOCTYPE html> html> head> style type = "text / css"> மணி {அகலம்: 50%; உயரம்: 20px; பின்னணி-நிறம்: சிவப்பு; விளிம்பு-வலது: தானாக; விளிம்பு-இடது: தானாக; விளிம்பு மேல்: 5px; விளிம்பு-கீழ்: 5px; எல்லை அகலம்: 2px; எல்லை-நிறம்: பச்சை; } / style> / head> body> h1> Heading / h1> hr> p1> இந்த கோடு தலைப்பிலிருந்து கிடைமட்ட கோடு / p1> / body> / html> மூலம் பிரிக்கப்பட வேண்டும்.