டம்மிகளுக்கான அடிப்படை HTML வழிகாட்டி

கடைசியாக புதுப்பிக்கப்பட்டது 05 அக்டோபர் 2020 அன்று


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

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

HTML குறியீடு.
HTML “குறியீடுகள்”.

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

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

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

நாங்கள் தொடங்குவதற்கு முன்…

1. HTML என்றால் என்ன?

HTML சுருக்கம் ஆகும் Hyper Tநீடிப்பு Markup Language. இது இணைய உலாவிகளுக்கான டேக்கிங் உள்ளடக்கங்களுக்கான நிலையான மொழி ஆகும்.

HTML ஐ “கூறுகள்” குறிக்கின்றன. கூறுகள் “குறிச்சொற்கள்” என்றும் அழைக்கப்படுகின்றன.

2. HTML ஏன் தேவைப்படுகிறது?

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

அதனால்தான் உங்களுக்கு HTML தேவை.

3. HTML வழக்கு உணர்திறன் உள்ளதா?

HTML முக்கியமானது அல்ல. ஆனால் சரியான நடைமுறைகளுடன் HTML ஐ எழுதுவது சிறந்த நடைமுறை.

உங்கள் முதல் HTML கோப்பை உருவாக்குவதற்கான படிகள்

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

ஒரு கோட் எடிட்டர் தேவை. பெரிய குறியீடு எடிட்டர் பெரிய குறியீடுகளை எழுத மற்றும் ஒழுங்கமைக்க உதவுகிறது.

நான் பயன்படுத்த மற்றும் பரிந்துரைக்கிறேன் எதாவது ++ (இலவச மற்றும் திறந்த மூல) வலை மொழிகளில் எழுதுவதற்கு. நீங்கள் பயன்படுத்தலாம் மற்ற ஆசிரியர்கள் உள்ளன சப்lime உரை, ஆட்டம் முதலியன

இங்கே நீங்கள் செய்ய வேண்டியது என்னவென்றால்:

  1. ஒரு குறியீடு ஆசிரியர் நிறுவவும்
  2. அதை திற
  3. புதிய கோப்பை உருவாக்கவும்
  4. அதை ஒரு. Html கோப்பாக சேமிக்கவும்

நீ செல்ல தயாராக இருக்கிறாய்!

குறியீடு எடிட்டரின் எடுத்துக்காட்டு ஆட்டம்
குறியீடு ஆசிரியர் - ஆட்டம்

1. வணக்கம் உலகம்!

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

குறியீடு:

எனது முதல் வலைப்பக்கம் வணக்கம் உலகம்!

வெளியீடு:

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

HTML அமைப்பு புரிந்து

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

எனவே இதை “ஹலோ வேர்ல்ட்!” இலிருந்து புரிந்துகொள்ள முயற்சிப்போம். குறியீடு. பின்வரும் கூறுகள் ஒவ்வொரு HTML கோப்பிற்கும் கட்டாய பாகங்கள்.

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

2. HTML குறிச்சொற்கள்

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

HTML குறிச்சொற்கள் பொதுவாக ஒரு தொடக்க மற்றும் இறுதி குறிச்சொல்லைக் கொண்டுள்ளன. தொடக்கக் குறிச்சொல் (<) க்கும் குறைவான மற்றும் (>) அடையாளத்தை விட பெரிய முக்கிய வார்த்தைகளைக் கொண்டுள்ளது. இறுதி குறிச்சொல் எல்லாவற்றையும் ஒரே மாதிரியாகக் கொண்டுள்ளது, ஆனால் (<) அடையாளத்தை விடக் குறைவான கூடுதல் முன்னோக்கி சாய்வு (/).

(2a) தலை குறிச்சொற்கள்

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

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

குறியீடு:

எனது முதல் வலைப்பக்கம்
தலைப்பு குறிச்சொல் - HTML மாதிரிகள்
தலைப்பு குறிச்சொல் உங்கள் உலாவியில் மேல் தோன்றுகிறது.

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

குறியீடு:

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

குறியீடு:

<meta name="description" content="This is the short description that search engines show"

ஸ்கிரிப்ட் குறிச்சொல் ஒரு சர்வர் ஸ்கிரிப்ட் ஸ்கிரிப்ட் உள்ளிட்டோ அல்லது வெளிப்புற ஸ்கிரிப்ட் கோப்பிற்கு இணைப்பை உருவாக்குகிறது. இது தொடக்க குறிப்பில் இரண்டு பண்புக்கூறுகளைக் கொண்டிருக்கலாம். ஒன்று வகை மற்றும் மற்றொரு மூல (src).

குறியீடு:

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

குறியீடு:

ஐயோ! ஸ்கிரிப்ட்கள் முடக்கப்பட்டுள்ளன.

(2b) உடல் குறிச்சொற்கள்

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

க்கு

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

குறியீடு:

இது ஒரு h1 தலைப்பு இது ஒரு h1 தலைப்பு இது ஒரு h1 தலைப்பு இது ஒரு h2 தலைப்பு இது ஒரு h2 தலைப்பு இது ஒரு h2 தலைப்பு

வெளியீடு:

வடிவமைத்தல் குறிச்சொற்கள்

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

குறியீடு:

உங்கள் உரையை நீங்கள் பல வழிகளில் முன்னிலைப்படுத்தலாம். நீங்கள் தைரியமாக , அடிக்கோடிட்டு , சாய்வு , குறி , சந்தா , சூப்பர்ஸ்கிரிப்ட் மற்றும் பல!

வெளியீடு:

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

உதாரணமாக:

You can comment out any code by surrounding them in this way -->

(2c) பிற முக்கிய HTML குறிச்சொற்கள்

நங்கூரம் கிட்டத்தட்ட எல்லா இடங்களிலும் பயன்படுத்தப்படும் ஒரு மதிப்புமிக்க குறிப்பாகும். குறைந்தபட்சம் ஒரு நங்கூரம் இணைப்பு இல்லாமல் வலைப்பக்கங்களை ஆன்லைனில் பார்க்க முடியாது.

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

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

  • ahref = ”“ = இது இலக்கு இணைப்பை வரையறுக்கிறது. இணைப்பு இரட்டை மேற்கோள்களுக்கு இடையே செல்கிறது.
  • இலக்கு = ”“ = URL புதிய உலாவி தாவலில் அல்லது அதே தாவலில் திறக்கப்படுமா என்பதை இது வரையறுக்கிறது. இலக்கு = ”_ வெற்று” என்பது புதிய தாவலுக்கும், இலக்கு = ”_ சுய” என்பது ஒரே தாவலில் திறப்பதற்கும் ஆகும்.
  • rel = ”“ = இது இணைக்கப்பட்ட பக்கத்துடன் தற்போதைய பக்கத்தின் உறவை வரையறுக்கிறது. இணைக்கப்பட்ட பக்கத்தை நீங்கள் நம்பவில்லை என்றால், நீங்கள் rel = ”nofollow” ஐ வரையறுக்கலாம்.

குறியீடு:

Google க்குச் செல்ல இங்கே கிளிக் செய்க . இது புதிய தாவலில் திறக்கும். இங்கே கிளிக் செய்க . இது உங்களை Google க்கு அழைத்துச் செல்லும், ஆனால் தற்போதைய தாவலில் திறக்கும்.

வெளியீடு:

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

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

  • src = ”“ = இது படத்தின் மூல இணைப்பை வரையறுப்பதாகும். இரட்டை மேற்கோள்களுக்கு இடையில் இணைப்பை சரியான இடத்தில் வை.
  • alt = ”“ = இது மாற்று உரைக்கு நிற்கிறது. உங்கள் படத்தை ஏற்றாத போது, ​​இந்த உரை பயனர் காணாமல் படத்தைப் பற்றி ஒரு யோசனைக்கு அளிக்கும்.
  • அகலம் = ”“ = இது பிக்சல்களில் படத்தின் அகலத்தை வரையறுக்கிறது.
  • உயரம் = ”“ = பிக்சல்களின் படத்தின் உயரத்தை அது வரையறுக்கிறது.

உதாரணமாக:

இது ஆகஸ்ட் 2014 இல் கூகிள் பிளெக்ஸ் ஆகும். இந்த படத்தின் அகலம் 500 பிக்சல்கள் மற்றும் 375 பிக்சல்கள் உயரம் கொண்டது.

வெளியீடு:

உதவிக்குறிப்புகள்: கிளிக் செய்யக்கூடிய படத்தை செருக விரும்புகிறீர்களா? படக் குறியீட்டை குறிச்சொல்லுடன் மடிக்கவும். அது எவ்வாறு செல்கிறது என்பதைப் பாருங்கள்.

அல்லது

பட்டியல் குறிச்சொல் உருப்படிகளின் பட்டியலை உருவாக்குவதற்கானது. ஆர்டர் செய்யப்பட்ட பட்டியல்களைக் குறிக்கிறது (எண்ணிடப்பட்ட பட்டியல்) மற்றும் வரிசைப்படுத்தப்படாத பட்டியல்களைக் குறிக்கிறது (புல்லட் புள்ளிகள்).

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

குறியீடு:

இது ஒரு ஆர்டர் செய்யப்பட்ட பட்டியல்: பொருள் 1 பொருள் 2 பொருள் 3 இது வரிசைப்படுத்தப்படாத பட்டியல்: பொருள் 1 பொருள் 2 பொருள் 3

வெளியீடு:

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

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

குறியீடு:

பெயர் வயது தொழில் ஜோ 27 தொழிலதிபர் கரோல் 26 நர்ஸ் சிமோன் 39 பேராசிரியர்

வெளியீடு:

குறிப்பு: முதல் உள்ளே மதிப்புகள் தலைப்புகள். எனவே, நாங்கள் பயன்படுத்தினோம் இது உரைக்கு தைரியமான உரை விளைவைப் பொருத்துகிறது.

அட்டவணை குழுமம்

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

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

அட்டவணை தொகுத்தல் குறிப்புகள் பின்வருமாறு:

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

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

எங்கள் முன்மாதிரியான அட்டவணையை எவ்வாறு தொகுக்கலாம் என்பது இங்கே , மற்றும் :

குறியீடு:

பெயர் வயது தொழில் ஜான் 27 தொழிலதிபர் கரோல் 26 நர்ஸ் சிமோன் 39 பேராசிரியர் மொத்த நபர்கள்: 3

வெளியீடு:

வலைப்பக்கங்களுக்கான ஊடாடும் படிவங்களை உருவாக்க படிவ உறுப்பு பயன்படுத்தப்படுகிறது. ஒரு HTML படிவத்தில் தொடர்ச்சியான பல கூறுகள் உள்ளன. : உதாரணமாக , முதலியன

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

நீங்கள் இரு முறைகள் ஒன்றைப் பயன்படுத்தலாம் அல்லது பெறலாம். அஞ்சல் தகவலில் தகவல் தகவலை அனுப்பும் தகவலுடன் அனைத்து தகவலையும் அனுப்புக.

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

குறிச்சொற்களை லேபிள்களை உருவாக்குவதற்கும் அவற்றை உள்ளீடுகளுடன் இணைப்பதற்கும் பயன்படுத்தப்படுகிறது. உள்ளீடுகளுடன் லேபிள்களை இணைப்பதன் விதி என்னவென்றால், = ”” லேபிளின் பண்பு மற்றும் ஐடி = ”” உள்ளீட்டின் பண்புக்கூறுக்கு ஒரே மதிப்பு உள்ளது.

குறியீடு:

முதல் பெயர்: கடைசி பெயர்: குறுகிய உயிர்: பாலினம்: ஆண் பெண்

வெளியீடு:

குறிப்பு: நான் ஒரு பூஜ்ய மதிப்பை சுட்டிக்காட்டியிருக்கிறேன், ஏனென்றால் எந்த தகவலையும் இது தொடர்புபடுத்தவில்லை.

3. HTML பண்புக்கூறுகள்

பண்புக்கூறுகள் HTML குறிச்சொற்களை ஒரு வகை மாதிரிகள் ஆகும். அவர்கள் HTML குறிச்சொற்களை புதிய கட்டமைப்புகளை சேர்க்க.

ஒரு பண்புக்கூறு பண்புக்கூறு = ”” போல் தோன்றுகிறது மற்றும் தொடக்க HTML குறிச்சொல்லில் அமர்ந்திருக்கும். பண்புக்கூறு மதிப்பு இரட்டை மேற்கோள்களுக்கு இடையில் செல்கிறது.

id = ”” மற்றும் வகுப்பு = ””

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

குறியீடு:

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

href = ””

href என்பது ஹைபர்டெக்ஸ்ட் குறிப்பைக் குறிக்கிறது. அவை பயனர்களை குறிப்பு இணைப்புகளுக்கு சுட்டிக்காட்டுகின்றன. இலக்கு URL க்கு பயனர்களை அனுப்ப ஆங்கர் குறிச்சொல் href ஐப் பயன்படுத்துகிறது.

குறியீடு:

கூகிள்

src = ””

src ஆதாரமாக உள்ளது. இது HTML கோப்பில் நீங்கள் பயன்படுத்தும் ஒரு ஊடகத்தின் அல்லது ஆதாரத்தின் ஆதாரத்தை வரையறுக்கிறது. ஆதாரம் உள்ளூர் அல்லது மூன்றாம் தரப்பு URL ஆக இருக்கலாம்.

குறியீடு:

alt = ””

மாற்று alt உள்ளது. இது ஒரு HTML உறுப்பு ஏற்ற முடியாது போது பயன்படுத்த வரும் ஒரு காப்பு உரை.

குறியீடு:

style = ””

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

குறியீடு:

இது மற்றொரு தலைப்பு

4. குறியீடு காட்சி: பிளாக் Vs இன்லைன்

சில கூறுகள் எப்போதும் புதிய வரியில் தொடங்கி கிடைக்கக்கூடிய முழு அகலத்தையும் எடுக்கும். இவை “தடுப்பு” கூறுகள்.

எ.கா: , , - , வடிவம் போன்றவை.

சில கூறுகள் தேவையான இடத்தை மட்டுமே எடுத்துக்கொள்கின்றன, புதிய வரியில் தொடங்க வேண்டாம். இவை “இன்லைன்” கூறுகள்.

எ.கா: , ,,, முதலியன

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

குறியீடு:

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

வெளியீடு:

5. HTML இல் இரட்டை மேற்கோள் vs ஒற்றை மேற்கோள்

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

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

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

6. சொற்பொருள் HTML மற்றும் சொற்பொருள் அல்லாத HTML

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

HTML5 ஏன் சிறந்தது? முந்தைய பதிப்புகளில், HTML கூறுகள் ஐடி / வகுப்பு பெயர்களால் அடையாளம் காணப்பட்டன. உதாரணத்திற்கு: ஒரு கட்டுரையாக கருதப்பட்டது.

HTML5 இல், குறிச்சொல் எந்த ஐடி / வகுப்பு அடையாளங்காட்டி தேவையில்லாமல் தன்னை ஒரு கட்டுரையாகக் குறிக்கிறது.

HTML5 இன் படி, இப்போது தேடுபொறிகள் மற்றும் பிற வலை பயன்பாடுகள் வலைப்பக்கத்தை நன்றாகப் புரிந்து கொள்ள முடியும். சொற்பொருள் வலைத்தளங்கள் எஸ்சிஓக்கு சிறந்ததைச் செய்ய நிரூபிக்கப்பட்டுள்ளன.

இங்கு சில பிரபலமான HTML5 குறிச்சொற்களை பட்டியல் உள்ளது:

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

ஒரு எளிய HTMLX அமைப்பு இந்த மாதிரி இருக்கும்:

எனது முதல் வலைப்பக்கம் பட்டி 8 பட்டி 1 இது கட்டுரையின் தலைப்பு இடுகையிட்டவர் ஜான் டோ கட்டுரையின் உள்ளடக்கம் இங்கே செல்கிறது பதிப்புரிமை 2 ஜான் டோ

7. HTML சரிபார்ப்பு

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

உங்கள் குறியீடுகளை சரிபார்க்க இரண்டு சாத்தியமான காரணங்கள் உள்ளன:

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

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

8. பிற பயனுள்ள வளங்கள்

HTML எப்போதும் கற்றல் தலைப்பு. HTML இன் மேலும் மேம்படுத்தப்பட்ட பதிப்புகள் விரைவில் வரக்கூடும். எனவே நீங்கள் மேம்படுத்தப்பட்டு பயிற்சி பெற வேண்டும். பயிற்சி என்ன ஏஸ் HTML ஆகும்.

உங்களுக்கு சில பயனுள்ள ஆதாரங்கள் உள்ளன: