|
|
# HTML பயிற்சி பணியிடம்: ஒரு வலைப்பதிவுப் பிரதியை உருவாக்குங்கள்
|
|
|
|
|
|
## கற்றல் குறிக்கோள்கள்
|
|
|
|
|
|
ஒரு முழுமையான வலைப்பதிவு முகப்பு அமைப்பை வடிவமைத்து குறியீட்டுடன் உங்கள் HTML அறிவை பயன்படுத்துங்கள். இந்த நேரடி பணியிடம் செமாண்டிக் HTML கருத்துக்கள், அணுகல் தொழில்நுட்ப சிறந்த நடைமுறைகள் மற்றும் வலை மேம்பாட்டு பயணத்தில் நீங்கள் பயன்படுத்தும் தொழில்முறை குறியீடு ஒழுங்கமைப்பு திறன்களை உறுதி செய்யும்.
|
|
|
|
|
|
**இந்த பணியிடத்தை முடித்தால், நீங்கள்:**
|
|
|
- குறியீடு முன்பு இணையதளம் திட்டமிடலைப் பயிற்சி செய்யலாம்
|
|
|
- செமாண்டிக் HTML கூறுகளை சரியான முறையில் பயன்படுத்து
|
|
|
- அணுகக்கூடிய, நன்றாக ஒழுங்கமைந்த மார்க்கப்பை உருவாக்க
|
|
|
- கருத்துகளுடன் தொழில்முறை குறியீடு பழக்கங்களை வளர்த்து அமைக்க
|
|
|
|
|
|
## திட்டத் தேவைகள்
|
|
|
|
|
|
### பகுதி 1: வடிவமைப்பு திட்டமிடல் (காட்சி பிரதிக்கு)
|
|
|
|
|
|
**உங்கள் வலைப்பதிவு முகப்புக் காட்சிப்பிரதியை உருவாக்குங்கள், அதில் அடங்கும்:**
|
|
|
- தள தலைப்பு மற்றும் அமைவணைக்களத்துடன் தலைப்பு பகுதி
|
|
|
- குறைந்தது 2-3 வலைப்பதிவு செய்திகள் முன்னோட்டங்கள் கொண்ட முக்கிய உள்ளடக்கம் பகுதி
|
|
|
- கூடுதல் தகவல்களுக்கான பக்கம் பக்கத் தாள் (கடந்த தகவல், சமீபத்திய பதிவுகள், வகைகள்)
|
|
|
- தொடர்பு தகவல் அல்லது இணைப்புகளுடன் அடிக்குறிப்பு பகுதி
|
|
|
|
|
|
**காட்சி பிரதியை உருவாக்கும் விருப்பங்கள்:**
|
|
|
- **கையால் வரைந்த வரைபடம்**: காகிதம் மற்றும் பென்சிலை பயன்படுத்தி, பின்னர் புகைப்படம் எடுத்து அல்லது ஸ்கேன் செய்யவும்
|
|
|
- **டிஜிட்டல் கருவிகள்**: Figma, Adobe XD, Canva, PowerPoint, அல்லது ஏதேனும் வரைபட செயலி
|
|
|
- **வைர்ஃப்ரேம் கருவிகள்**: Balsamiq, MockFlow அல்லது அதேபோன்ற வைர்ஃப்ரேமிங் மென்பொருள்
|
|
|
|
|
|
**உங்கள் காட்சி பிரதிப் பகுதிகளை குறியிடுங்கள்** நீங்கள் பயன்படுத்த திட்டமிட்டுள்ள HTML கூறுகளுடன் (எ.கா., "தலைப்பு - `<header>`", "வலைப்பதிவு பதிவுகள் - `<article>`").
|
|
|
|
|
|
### பகுதி 2: HTML கூறு திட்டமிடல்
|
|
|
|
|
|
**உங்கள் காட்சி பிரதியின் ஒவ்வொரு பகுதியையும் குறிப்பிட்ட HTML கூறுகளுடன் இணைக்கும் பட்டியலை உருவாக்குங்கள்:**
|
|
|
|
|
|
```
|
|
|
Example:
|
|
|
- Site Header → <header>
|
|
|
- Main Navigation → <nav> with <ul> and <li>
|
|
|
- Blog Post → <article> with <h2>, <p>, <time>
|
|
|
- Sidebar → <aside> with <section> elements
|
|
|
- Page Footer → <footer>
|
|
|
```
|
|
|
|
|
|
**கடவுச்சொல் கூறுகள் அவசியம் சேர்க்க:**
|
|
|
இந்த பட்டியலில் குறைந்தது 10 செமாண்டிக் கூறுகளை உங்கள் HTML-ல் உள்ளடக்க வேண்டும்:
|
|
|
- `<header>`, `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`, `<footer>`
|
|
|
- `<h1>`, `<h2>`, `<h3>`, `<p>`, `<ul>`, `<li>`, `<a>`
|
|
|
- `<img>`, `<time>`, `<blockquote>`, `<strong>`, `<em>`
|
|
|
|
|
|
### பகுதி 3: HTML நடைமுறைப்படுத்தல்
|
|
|
|
|
|
**இந்த தரநிலைகளை பின்பற்றி உங்கள் வலைப்பதிவு முகப்பைப் குறியீடு செய்யவும்:**
|
|
|
|
|
|
1. **ஆவண அமைப்பு**: சரியான DOCTYPE, html, head, மற்றும் body கூறுகளைச் சேர்க்கவும்
|
|
|
2. **செமாண்டிக் மார்க்கப்**: HTML கூறுகளை அவையுடைய நோக்கத்திற்கு ஏற்பப் பயன்படுத்தவும்
|
|
|
3. **அணுகல் திறன்**: படங்களுக்கு சரியான alt உரை மற்றும் பொருத்தமான இணைப்பு உரைகளைச் சேர்க்கவும்
|
|
|
4. **குறியீடு தரம்**: ஒரே மாதிரி இடைவெளி மற்றும் அர்த்தமுள்ள கருத்துக்களை பயன்படுத்தவும்
|
|
|
5. **உள்ளடக்கம்**: நிஜ நுணுக்கமான வலைப்பதிவு உள்ளடக்கத்தை சேர்க்கவும் (பிளேஸ்ஹோல்டர் உரையைப் பயன்படுத்தலாம்)
|
|
|
|
|
|
**மாதிரி HTML அமைப்பு:**
|
|
|
```html
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>My Personal Blog</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- Main site header -->
|
|
|
<header>
|
|
|
<h1>My Blog Title</h1>
|
|
|
<nav>
|
|
|
<!-- Navigation menu -->
|
|
|
</nav>
|
|
|
</header>
|
|
|
|
|
|
<!-- Main content area -->
|
|
|
<main>
|
|
|
<!-- Blog posts go here -->
|
|
|
</main>
|
|
|
|
|
|
<!-- Sidebar content -->
|
|
|
<aside>
|
|
|
<!-- Additional information -->
|
|
|
</aside>
|
|
|
|
|
|
<!-- Site footer -->
|
|
|
<footer>
|
|
|
<!-- Footer content -->
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
|
|
```
|
|
|
|
|
|
### பகுதி 4: சிந்தனை
|
|
|
|
|
|
**குறுகிய சிந்தனை (3-5 வாசகங்கள்) எழுதுங்கள், அதில்:**
|
|
|
- நீங்கள் எத்தனை HTML கூறுகளை நம்பிக்கையுடன் பயன்படுத்தினீர்கள்?
|
|
|
- திட்டமிடல் அல்லது குறியீடு செய்வதில் எவ்வாறான சவால்கள் வந்தன?
|
|
|
- செமாண்டிக் HTML உங்கள் உள்ளடக்கத்தை ஒழுங்குபடுத்த எவ்வாறு உதவியது?
|
|
|
- அடுத்த HTML திட்டத்தில் நீங்கள் வேறுபாடாக என்ன செய்வீர்கள்?
|
|
|
|
|
|
## சமர்ப்பிப்பு சரிபார்ப்பு பட்டியல்
|
|
|
|
|
|
**சமர்ப்பிக்கும் முன்பு, நீங்கள் சரிபார்க்க வேண்டும்:**
|
|
|
- [ ] குறியிடப்பட்ட HTML கூறுகளுடன் கூடிய காட்சி பிரதியை
|
|
|
- [ ] சரியான ஆவண அமைப்புடன் முழுமையான HTML கோப்பு
|
|
|
- [ ] குறைந்தது 10 வெவ்வேறு செமாண்டிக் HTML கூறுகளைத் தக்க முறையில் பயன்படுத்தியுள்ளீர்கள்
|
|
|
- [ ] உங்கள் குறியீடு அமைப்பை விளக்கும் அர்த்தமுள்ள கருத்துக்கள்
|
|
|
- [ ] செல்லுபடியாகும் HTML குறியீடு (உலாவியில் சோதிக்கவும்)
|
|
|
- [ ] மேலே குறிப்பிட்ட கேள்விகளுக்கு பதிலளிக்கும் எழுத்து சிந்தனை
|
|
|
|
|
|
## மதிப்பீடு மதிப்பெண் பட்டியல்
|
|
|
|
|
|
| குறியீடு | சிறந்தது (4) | நன்கு (3) | வளர்ச்சி (2) | துவக்கம் (1) |
|
|
|
|----------|--------------|------------|--------------|--------------|
|
|
|
| **திட்டமிடல் & வடிவமைப்பு** | அமைப்பையும் HTML செமாண்டிக் அமைப்பையும் தெளிவாக புரிந்துகொள்கின்ற நன்றாக குறியிடப்பட்ட காட்சி பிரதிகள் | பெரும்பாலான பகுதிகளும் சரியான குறியீடு பான காட்சி பிரதிகள் | சில பகுதிகள் குறியிடப்பட்ட அடிப்படைக் காட்சி பிரதிகள், பொது புரிதல் | குறைந்த அல்லது தெளிவில்லாத காட்சி பிரதிகள், சரியான பகுதி அடையாளம் இல்லை |
|
|
|
| **செமாண்டிக் HTML பயன்பாடு** | 10+ செமாண்டிக் கூறுகள் தக்க முறையில் பயன்படுத்தப்பட்டு, HTML அமைப்பு மற்றும் அணுகல் திறனில் ஆழ்ந்த புரிதல் | 8-9 செமாண்டிக் கூறுகள் சரியாக பயன்படுத்தப்பட்டு, செமாண்டிக் மார்க்கப் பற்றி நல்ல புரிதல் | 6-7 செமாண்டிக் கூறுகள், சற்றே குழப்பமுள்ள பயன்பாடு | 6-க்கு குறைவான கூறுகள் அல்லது தவறான பயன்பாடு |
|
|
|
| **குறியீடு தரம் & ஒழுங்கமைப்பு** | மிகச் சிறந்த ஒழுங்கமைப்பு, சரியான இடைவெளிகள், பொது கருத்துக்களுடன் மற்றும் சரியான HTML குறியீடு | நல்ல ஒழுங்கமைப்பு, நல்ல இடைவெளிகள், உதவிகரமான கருத்துக்கள் மற்றும் செல்லுபடையான குறியீடு | பெரும்பாலும் ஒருங்கிணைக்கப்பட்ட குறியீடு, சில கருத்துக்கள், சில குறியீடு பிழைகள் | மோசமான ஒழுங்கமைப்பு, குறைந்த கருத்துக்கள், பல குறியீடு பிழைகள் |
|
|
|
| **அணுகல் திறன் & சிறந்த நடைமுறைகள்** | சிறந்த அணுகல் கருத்துகள், பொருந்தும் alt உரை, சரியான தலைப்பு வரிசை, நவீன HTML சிறந்த நடைமுறைகள் அனைத்தும் பின்பற்றப்பட்டுள்ளன | நல்ல அணுகல் அம்சங்கள், தலைப்புகள் மற்றும் alt உரை சரியானது, பெரும்பாலான சிறந்த நடைமுறைகள் பின்பற்றப்பட்டன | சில அணுகல் கவனிப்புகள், அடிப்படை alt உரை மற்றும் தலைப்பு அமைப்பு | கட்டுப்பட்ட அணுகல் அம்சங்கள், மோசமான தலைப்பு அமைப்பு, சிறந்த நடைமுறைகள் பின்பற்றப்படாதவை |
|
|
|
| **சிந்தனை & கற்றல்** | HTML கருத்துகளில் ஆழமான புரிதலை வெளிப்படுத்தும் விவாதமான சிந்தனை மற்றும் கற்றல் செயல்முறையின் கவனமான பகுப்பாய்வு | முக்கிய கருத்துக்களை விளக்கும் நல்ல சிந்தனை மற்றும் கற்றல் மேம்பாட்டுப் புரிதல் | HTML கருத்துகள் குறைந்த அளவில் விளக்கப்பட்ட தொடக்க சிந்தனை | குறைந்த அல்லது இல்லாத சிந்தனை, கற்றல் கோட்பாடுகளில் குறைந்த புரிதல் |
|
|
|
|
|
|
## கற்றல் வளங்கள்
|
|
|
|
|
|
**முக்கியக் குறிப்புகள்:**
|
|
|
- [MDN HTML கூறுகள் குறிப்புகள்](https://developer.mozilla.org/docs/Web/HTML/Element) - அனைத்து HTML கூறுகளுக்குமான முழுமையான வழிகாட்டி
|
|
|
- [HTML5 செமாண்டிக் கூறுகள்](https://developer.mozilla.org/docs/Web/HTML/Element#content_sectioning) - செமாண்டிக் மார்க்கப்பைப் புரிதல்
|
|
|
- [இணைய அணுகல் வழிகாட்டிகள்](https://www.w3.org/WAI/WCAG21/quickref/) - அணுகக்கூடிய வலை உள்ளடக்கம் உருவாக்குதல்
|
|
|
- [HTML சரிபார்த்தல் கருவி](https://validator.w3.org/) - உங்கள் HTML குறியீட்டை சரி பார்க்க
|
|
|
|
|
|
**வெற்றி பெறும் குருதிகள்:**
|
|
|
- எந்த குறியீடு எழுதுவதற்கும் முன் உங்கள் காட்சி பிரதியுடன் தொடங்குங்கள்
|
|
|
- உலாவியின் டெவலப்பர் கருவிகளை பயன்படுத்தி உங்கள் HTML அமைப்பைக் பார்வையிடுங்கள்
|
|
|
- உங்கள் பக்கத்தை வெவ்வேறு திரை அடுக்குகளுடன் சோதிக்கவும் (CSS இல்லாமலும்)
|
|
|
- உங்கள் HTML-ஐ திறஞ்சொல்லி வாசிக்கவும், அமைப்பு முனைத்துறையில் இருக்கிறதா என்பதைப் பார்க்கவும்
|
|
|
- திரை வாசிப்பான் உங்கள் பக்கம் அமைப்பை எவ்வாறு புரிந்துகொள்கிறது என்பதை பரிசீலிக்கவும்
|
|
|
|
|
|
> 💡 **நினைவில் வைத்திருங்கள்**: இந்த பணியிடம் HTML அமைப்பும் செமாண்டிக்களும் பற்றியது. காட்சி அலங்காரம் பற்றி கவலைப்பட வேண்டாம் – அதற்கு CSS உள்ளது! உங்கள் பக்கம் எளிமையாக தோன்றலாம், ஆனால் நன்றாக அமைக்கப்பட்டு அர்த்தமுள்ளதாவும் இருக்க வேண்டும்.
|
|
|
|
|
|
---
|
|
|
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER START -->
|
|
|
**அறிக்குறிப்பு**:
|
|
|
இந்த ஆவணம் AI மொழிபெயர்ப்பு சேவை [Co-op Translator](https://github.com/Azure/co-op-translator) மூலம் மொழிபெயர்க்கப்பட்டுள்ளது. நாங்கள் துல்லியத்திற்காக முயலுகிறோம் என்றாலும், தானியங்கி மொழிபெயர்ப்புகளில் பிழைகள் அல்லது தவறுகள் இருக்கக்கூடும் என்பதை கவனிக்கவும். அதன் சொந்த மொழியிலான மூல ஆவணம் அதிகாரப்பூர்வ மூலமாகக் கருதப்பட வேண்டும். முக்கியமான தகவல்களுக்கு, தொழில்முறை மனித மொழிபெயர்ப்பை பரிந்துரைக்கிறோம். இந்த மொழிபெயர்ப்பின் பயன்பாட்டினால் ஏற்படும் ஏதாவது தவறான புரிதல்கள் அல்லது தவறான பொருள் விளக்கங்களுக்கு நாங்கள் பொறுப்பு ஏற்கவில்லை.
|
|
|
<!-- CO-OP TRANSLATOR DISCLAIMER END --> |
