# டெரேரியம் திட்டம் பகுதி 1: HTML அறிமுகம் ```mermaid journey title உங்கள் HTML கற்றல் பயணம் section அடித்தளம் Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section உள்ளடக்கம் Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section அர்த்தவியல் Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![Introduction to HTML](../../../../translated_images/ta/webdev101-html.4389c2067af68e98.webp) > டோம்(மி) இமுரா அவர்களால் உருவாக்கப்பட்ட ஸ்கெட்ச் நோட் HTML, அல்லது ஹைப்பர் டெக்ஸ்ட் மார்க் அப் லாங்குவேஜ், நீங்கள் besucht செய்த ஒவ்வொரு இணையதளத்தின் அடித்தளம் ஆகும். HTML ஐ வலைப்பக்கங்களுக்கு வடிவமைப்பு வழங்கும் அடித்தளமாக நினைத்துக் கொள்ளுங்கள் – அது உள்ளடக்கம் எங்கே இருக்க வேண்டும், எவ்வாறு ஒழுங்குபடுத்தப்படும் மற்றும் ஒவ்வொரு பகுதியும் என்ன பிரதிபலிக்கும் என்பதைக் குறிப்பிடுகிறது. CSS பிறகு உங்கள் HTML ஐ நிறங்கள் மற்றும் அமைப்புகளுடன் "அழகு பூசும்" போது, மற்றும் JavaScript அதில் இடைக்கால செயல்பாடு கொண்டு வரும்போது, HTML என்பது மற்ற அனைத்துக்கும் அடிப்படையான கட்டமைப்பினை வழங்குகிறது. இந்த பாடத்தில், நீங்கள் ஒரு உயிரியமான டெரேரியம் இடைமுகத்துக்கான HTML கட்டமைப்பைக் காணொளியாக உருவாக்குவீர்கள். இந்த கைமுறை திட்டம் உங்களுக்கு அடிப்படை HTML கருத்துகளை கற்றுக் கொடுக்கும் மற்றும் விசுவலாக ஈர்க்கக்கூடிய ஒன்றை உருவாக்கும். குறிப்பிட்ட பொருட்களை அமைப்பு படுத்துவதற்கு செமாண்டிக் கூறுகளை பயன்படுத்துவது, படங்களுடன் பணியாற்றுவது மற்றும் இடைக்கால இணைய பயன்பாட்டிற்கான அடித்தளத்தை உருவாக்குவது ஆகியவற்றை நீங்கள் கற்கப்போகிறீர்கள். இந்த பாடத்தின் இறுதியில், நீங்கள் ஒருங்கிணக்கப்பட்ட வண்டிகளில் செடிக்கான படைகளை காட்சிப்படுத்தும் ஒரு செயல்படும் HTML பக்கத்தை பெறுவீர்கள், அடுத்த பாடத்தில் அலங்கரிப்புக்கு தயார். தொடக்கத்தில் இது அடிப்படை போல தோன்றினாலும் கவலைப்படாதீர்கள் – அதுவே CSS அழகு பூசும் முன் HTML செய்ய வேண்டியது. ```mermaid mindmap root((HTML அடிப்படைகள்)) Structure DOCTYPE அறிக்கை HTML கூறு தலைப்பு பகுதி உடல் உள்ளடக்கம் Elements குறியீடுகள் & பண்புகள் சுயமாக மூடும் குறியீடுகள் உள் கூறுகள் பகுதி vs கோடியில் Content உரை கூறுகள் படங்கள் கட்டிகள் (div) பட்டியல்கள் Semantics அர்த்தமுள்ள குறியீடுகள் அணுகுதன்மை திரை வாசிப்பவர்கள் SEO நன்மைகள் Best Practices சரியான உள் அமைப்பு செல்லுபடியான குறியீடு விளக்கமான மாற்று உரை ஒழுங்குபடுத்தப்பட்ட அமைப்பு ``` ## முன்னணி பாடம்சோதனை [Pre-lecture quiz](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **பார் மற்றும் கற்று கொள்**: இந்த உதவிக்கண்ட விரிவுரையை பார்க்கவும் > > [![HTML Fundamentals Video](https://img.youtube.com/vi/1TvxJKBzhyQ/0.jpg)](https://www.youtube.com/watch?v=1TvxJKBzhyQ) ## உங்கள் திட்டத்தை அமைத்தல் HTML குறியீட்டில் இறங்க முன்பு, உங்கள் டெரேரியம் திட்டத்திற்கான சரியான பணிக்கிடையை அமைப்போம். ஆரம்பத்திலிருந்தே ஒரு ஒழுங்குபடுத்தப்பட்ட கோப்புக் கட்டமைப்பை உருவாக்குவது ஒரு முக்கிய பழக்கம் ஆகும், இது உங்கள் வலை மேம்பாட்டு பயணத்தில் நன்கு உதவும். ### பணியான்னு: உங்கள் திட்ட கட்டமைப்பை உருவாக்குக நீங்கள் டெரேரியம் திட்டத்திற்கு அதிகாரபூர்வ அடைவை உருவாக்கி உங்கள் முதல் HTML கோப்பை சேர்க்கப் போகிறீர்கள். இங்கே நீங்கள் பயன்படுத்தக்கூடிய இரண்டு முறைகள் உள்ளன: **விருப்பம் 1: Visual Studio Code பயன்படுத்துதல்** 1. Visual Studio Code-ஐ திறக்கவும் 2. "File" → "Open Folder" கிளிக் செய்யவும் அல்லது `Ctrl+K, Ctrl+O` (Windows/Linux) அல்லது `Cmd+K, Cmd+O` (Mac) பயன்படுத்தவும் 3. `terrarium` என்ற புதிய அடைவை உருவாக்கி தேர்ந்தெடுக்கவும் 4. Explorer பகுதியில், "New File" சின்னத்தை கிளிக் செய்யவும் 5. கோப்பின் பெயரை `index.html` என்க ![VS Code Explorer showing new file creation](../../../../translated_images/ta/vs-code-index.e2986cf919471eb9.webp) **விருப்பம் 2: டெர்மினல் கட்டளைகள் பயன்படுத்துதல்** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **இந்த கட்டளைகள் செய்வதெல்லாம்:** - **நிறுவுகிறது** புதிய `terrarium` அடைவதை உங்கள் திட்டத்துக்காக - **நுழைகிறது** terrarium அடைவைத் தரும் இடத்தில் - **உருவாக்குகிறது** காலியான `index.html` கோப்பை - **திறக்கிறது** கோப்பை Visual Studio Code-ல் திருத்தும் வகையில் > 💡 **திறமையான குறிப்பு**: `index.html` என்ற கோப்பு பெயர் வலை மேம்பாட்டில் சிறப்பாகும். ஒருவன் இணையதளத்துக்கு செல்வதும் உலாவிகள் தானாகவே `index.html`-ஐ முன்னமைந்த பக்கமாகத் தேடுகிறார்கள். இது `https://mysite.com/projects/` போன்ற URL களில் `index.html` காண்பிக்காமல் பணியாற்றும்நிலை ஏற்படுத்துகிறது. ## HTML ஆவண கட்டமைப்பை புரிதல் ஒவ்வொரு HTML ஆவணமும் ஒரு குறிப்பிட்ட கட்டமைப்பைப் பின்பற்றுகிறது, அது உலாவிகள் சரியான முறையில் தெரியும் மற்றும் காட்சியாகும் வகையில் இருக்க வேண்டும். இந்த கட்டமைப்பை ஒரு அதிகாரப்பூர்வ கடிதம் போல நினைத்துக் கொள்ளுங்கள் – அதில் ஒடுக்கப்பட்ட விருப்பங்கள் இருக்கும், மேலும் அது உள்ளடக்கத்தை சரியாக செயல்படுத்த உதவும். ```mermaid flowchart TD A[""] --> B[""] B --> C[""] C --> D[""] C --> E["<meta charset>"] C --> F["<meta viewport>"] B --> G["<body>"] G --> H["<h1> தலைப்பு"] G --> I["<div> கொள்ளெடுக்கள்"] G --> J["<img> படங்கள்"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` ஒவ்வொரு HTML ஆவணத்திற்கும் அவசியமான அடித்தளத்தை சேர்ப்பதில் தொடங்குவோம். ### DOCTYPE புகுபதிவு மற்றும் ரூட் கூறு ஏதேனும் HTML கோப்பின் முதல் இரண்டு வரிகள், ஆவணத்தின் உலாவியிடத்தில் "அறிமுகம்" ஆக இருக்கின்றன: ```html <!DOCTYPE html> <html></html> ``` **இந்த குறியீடு செய்பவை:** - `<!DOCTYPE html>` பயன்படுத்தி ஆவணத் வகையை HTML5 ஆக அறிவிக்கிறது - பக்க உள்ளடக்கத்தை கொண்டிருக்கும் மூல `<html>` கூறை உருவாக்குகிறது - சரியான உலாவி காட்டலை உறுதி செய்ய நவீன வலை தரநிலைகளை நிறுவுகிறது - வித்தியாசமான உலாவிகளிலும் சாதனங்களிலும் ஒரே மாதிரித்தன்மையை உறுதி செய்கிறது > 💡 **VS Code குறிப்பு**: VS Code இல் எந்த HTML குறிச்சொல்லையும் ஹோவர் செய்யும் போது MDN வலை ஆவணங்களிலிருந்து உதவிக்கான தகவல், பயன்பாட்டு உதாரணங்கள் மற்றும் உலாவி பொருத்துதல் விவரங்கள் காணலாம். > 📚 **மேலும் கற்றுக்கொள்ளவும்**: DOCTYPE அறிவிப்பு உலாவிகளை "quirks mode" இல் செல்லாமல் தடுக்கும், இது பழைய இணையதளங்களை ஆதரிக்க பயன்படுத்தப்பட்டது. நவீன வலை மேம்பாடு எளிய `<!DOCTYPE html>` அறிவிப்பைப் பயன்படுத்தி [ தரநிலை-பூர்வ காட்சியிடல்](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) உறுதி செய்கிறது. ### 🔄 **பயிற்சி சரிபார்ப்பு** **இறக்கும் முன், உங்கள் புரிதலை சரிபார்க்கவும்:** - ✅ எந்த HTML ஆவணத்துக்கும் DOCTYPE அறிவிப்பே ஏன் அவசியம்? - ✅ `<html>` மூல கூறு என்ன கொண்டுள்ளது? - ✅ இந்த கட்டமைப்பு எப்படி உலாவிகள் பக்கங்கள் சரியாக காட்சியிட உதவுகிறது? **சிறிய சுயத் தேர்வு**: "தரநிலை-பூர்வ காட்சியிடல்" என்பதன் பொருளை உங்களது சொந்த வார்த்தைகளில் விவரிக்க முடியுமா? ## அவசியமான ஆவண மெட்டாடேட்டாவை சேர்த்தல் HTML ஆவணத்தின் `<head>` பகுதி உலாவிகள் மற்றும் தேடுபொறிகள் தேவையான முக்கிய தகவலைக் கொண்டிருக்கும், ஆனால் பயனர்கள் நேரடியாகப் பக்கத்தில் அதை பார்க்கமுடியாது. இது உங்கள் வலைப்பக்கம் பல சாதனங்களிலும் மற்றும் தளங்களிலும் சரியாக வேலை செய்யவும் காட்சியளிக்கவும் உதவும் "காட்சி ஆகிய பின்புற" தகவலாகும். இந்த மெட்டாடேட்டா உலாவிகளை உங்கள் பக்கத்தை எப்படி காட்சியிட வேண்டும், எந்த எழுத்துரு குறியீடு பயன்படுத்தப்படுகிறது மற்றும் வேறு பக்க அளவுகளுக்கு எப்படி கையாள வேண்டும் என்பதைக் கூறுகிறது – இவை எல்லாம் தொழில்முறை, அணுகல் செய்யக்கூடிய வலைப்பக்கங்களை உருவாக்க அவசியம். ### பணியான்னு: ஆவண தலைப்பைச் சேர்க்கவும் உங்கள் திறக்கும் மற்றும் மூடும் `<html>` குறிச்சொற்களுக்கு இடையில் இந்த `<head>` பகுதியை இடுக: ```html <head> <title>Welcome to my Virtual Terrarium ``` **ஒவ்வொரு கூறும் செய்பவை:** - உலாவி தாவல்கள் மற்றும் தேடல் முடிவுகளில் காணப்படும் பக்க தலைப்பை அமைக்கிறது - உலகெங்கும் சரியான எழுத்து காட்சிக்க UTF-8 குறியாக்கத்தை குறிப்பிடுகிறது - நவீன Internet Explorer பதிப்புகளுடன் பொருத்தாமையை உறுதி செய்கிறது - சாதன அகலத்திற்கு பொருந்தும் விதமாக பார்வை நிலை அமைப்பு செய்கிறது - இயல்பான அளவில் உள்ளடக்கத்தை காண்பிப்பதற்கான ஆரம்ப மடிப்பு நிலையை கட்டுப்படுத்துகிறது > 🤔 **இதைக் குறித்து சிந்திக்கவும்**: நீங்கள் பார்வை நிலை மெட்டா குறி `` இதுபோல் அமைத்தால் என்ன ஆகும்? இது பக்கத்தை எப்பொழுதும் 600 பிக்செல் அகலமாக இருக்க வற்புறுத்தும், பதிலாக பதில்வினை வடிவமைப்பு கெடு பெய்யப்படும்! [ சரியான viewport அமைப்பைப் பற்றி மேலும் படியுங்கள்](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag). ## ஆவண உடலை உருவாக்குதல் `` கூறு உங்கள் வலைப்பக்கத்தின் அனைத்து காட்சியளிக்கும் உள்ளடக்கத்தையும் கொண்டுள்ளது – பயனர்கள் காணப்படும் மற்றும் தொடர்பு கொள்ளும் அனைத்தும். `` பகுதி உலாவியிடத்திற்கு வழிமுறைகள் வழங்குகிறது, ஆனால் `` எனும் பகுதி உண்மையான உள்ளடக்கத்தைக் கொண்டுள்ளது: உரை, படங்கள், பட்டன்கள் மற்றும் மற்ற கூறுகள், அமைப்பின் பயனர் இடைமுகத்தை உருவாக்கும்வகையில். உட் HTML குறிச்சொற்கள் ஒன்றாக பணியாற்றி அர்த்தமுள்ள உள்ளடக்கத்தை உருவாக்குவது எப்படி என்பதைக் கீழே பார்க்கலாம். ### HTML குறிச்சொல் கட்டமைப்பை புரிதல் HTML கூறுகளை வரிசையாக வரும் குறிச்சொற்கள் வரையறுக்கின்றன. பெரும்பாலான குறிச்சொற்களில் `

` திறக்கும் குறிச்சொல் மற்றும் `

` மூடும் குறிச்சொல் கொண்டிருக்கும், அதன் நடுக்குள் உள்ளடக்கம் இருக்கும்: `

Hello, world!

`. இது "Hello, world!" உரையைக் கொண்ட பத்தியை உருவாக்கும். ### பணியான்னு: உடல் கூறைச் சேர்க்கவும் உங்கள் HTML கோப்பை `` கூறையும் சேர்த்து புதுப்பிக்கவும்: ```html Welcome to my Virtual Terrarium ``` **この構造は以下を提供します:** - அடிப்படை HTML5 ஆவண அமைப்பை உருவாக்குகிறது - சரியான உலாவி காட்சிக்க வேண்டிய அவசியமான மெட்டாடேட்டாவை உடையது - உங்கள் காட்சி உள்ளடக்கத்துக்காக காலியான உடலை உருவாக்குகிறது - நவீன வலை மேம்பாட்டு சிறந்த முறைகளை பின்பற்றுகிறது இப்போது, உங்கள் டெரேரியம் காட்சிக்கு கண்டடைவுகளை பயன்படுத்தி உள்ளடக்க பகுதிகளை ஒழுங்குபடுத்தி, `
` கூறுகளை மற்றும் செடிகள் படங்களை காட்சியிட `` கூறுகளை பயன்படுத்துவோம். ### படங்களுடன் மற்றும் அமைப்பு கண்டடைவுகளுடன் வேலை செய்வது படங்கள் HTML இல் சிறப்பாக இருப்பதால், "சுய மூடும்" குறிச்சொற்களைப் பயன்படுத்துகின்றன. `

` போன்ற கூறுகள் உள்ளடக்கத்தை சுற்றியது போல இல்லை, `` குறிச்சொல் அனைத்து தேவையான தகவல்களையும் அதே குறிச்சொல்லுள் கொண்டிருக்கும்: `src` பட கோப்பின் பாதையைச் சொல்லும் மற்றும் `alt` அணுகல் வசதி குறிக்கிறது. HTML இல் படங்களைச் சேர்க்கும் முன்பு, உங்கள் திட்ட கோப்புகளை ஒழுங்குபடுத்துவதற்காக ஒரு படங்கள் என்ற அடைவையும் உருவாக்கி செடி படங்களைச் சேர்க்க வேண்டும். **முதல், உங்கள் படங்களை அமைக்க:** 1. உங்கள் டெரேரியம் திட்ட அடைவுக்குள் `images` என்ற அடைவை உருவாக்கவும் 2. [பதிவுறுக்கும் அடைவு](../../../../3-terrarium/solution/images) இருந்து செடி படங்களை பதிவிறக்கவும் (மொத்தம் 14 செடி படங்கள்) 3. அனைத்து செடி படங்களையும் புதிய `images` அடைவுக்குள் நகலெடுக்கவும் ### பணியான்னு: செடிகளைக் காட்சிப்படுத்தும் அமைப்பை உருவாக்குக இப்போது உங்கள் `` குறிச்சொற்களுக்கு இடையில் இரண்டு வண்டிகளில் ஒழுங்கு செய்யப்பட்ட செடி படங்களைக் கோருங்கள்: ```html
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
plant
``` **இந்த குறியீட்டில் ஏற்படும் போட்டிகள்:** - அனைத்துத் உள்ளடக்கத்தையும் வைக்க `id="page"` என்ற முக்கிய பக்க கட்டடை உருவாக்குகிறது - இரண்டு வண்டி கண்டடைவுகளைக் நிறுவுகிறது: `left-container` மற்றும் `right-container` - இடது வண்டியில் 7 செடிகள் மற்றும் வலது வண்டியில் 7 செடிகள் ஒழுங்காக அமைக்கப்பட்டுள்ளன - ஒவ்வொரு செடி படத்தையும் தனித்துவம் பெற்று இடங்கள் அமைக்க `plant-holder` என்ற `div`ல் மூடியுள்ளது - அடுத்த பாடத்தில் CSS அலங்கரிப்பிற்கு ஒரேபோன்று வகைபெயர்களைப் பயன்படுத்துகிறது - JavaScript உடன் தொடர்புக்கு ஒவ்வொரு செடி படத்துக்கும் தனித்துவமான IDs கொடுக்கப்பட்டுள்ளது - படங்களுக்கான கோப்புப் பாதைகள் சரியாக images அடைவைக் குறிக்கின்றன > 🤔 **இதைக் கருத்தில் கொள்ளுங்கள்**: தற்போதய அனைத்து படங்களுக்கும் ஒரே `"plant"` என்ற alt உரை உள்ளது. இது அணுகல் வசதிக்கு சிறந்தது அல்ல. ஸ்கிரீன் ரீடர் பயனாளர்கள் எந்த ஒரு படம் எந்த செடியே என்பதை அறியாமல் அதே "plant" சொல் 14 முறை மீள்உரைத்துவிடும். ஒவ்வொரு படத்துக்கும் சிறந்த, விவரமான alt உரையை நீங்கள் யோசிக்க முடியுமா? > 📝 **HTML கூறு வகைகள்**: `
` கூறுகள் "துண்டுருவல்" ஆகும் மற்றும் முழு அகலத்தை எடுக்கின்றன, `` கூறுகள் "அண்ம黑大战" மற்றும் தேவையான அகலத்தை மட்டுமே எடுக்கின்றன. இவற்றை அனைத்து `
`களை ``ஆக மாற்றினால் என்ன ஆகும் என்று நீங்கள் நினைக்கிறீர்கள்? ### 🔄 **பயிற்சி சரிபார்ப்பு** **கட்டமைப்பு புரிதல்**: உங்கள் HTML கட்டமைப்பை திரும்பப் பாருங்கள்: - ✅ உங்கள் அமைப்பில் முக்கிய கண்டடைவுகளை அடையாளம் காண்கிறீர்களா? - ✅ ஒவ்வொரு படத்துக்கும் தனித்துவமான ID-ஐ வழங்க காரணம் புரிந்துகொண்டீர்களா? - ✅ `plant-holder` div-களின் நோக்கத்தை எப்படி விளக்குவீர்கள்? **கண்ணோட்ட பரிசோதனை**: உங்களது HTML கோப்பை உலாவியில் திறக்கவும். நீங்கள் பார் வேண்டும்: - அடிப்படை செடி படங்களின் பட்டியல் - இரண்டு வண்டிகளில் ஒழுங்காக்கப்பட்ட படங்கள் - எளிமையான, அலங்கரிக்காத அமைப்பு **ஒவ்வும் நினைவில் வையுங்கள்**: CSS அழகு பூசும் முன்பு HTML இன் துல்லியமான தோற்றம் இதுதான்! இந்த குறியீடு சேர்க்கப்பட்டவுடன் செடிகள் திரையில் காட்சியளிக்கும், இதுவரை அழகுபடுத்தப்படவில்லை – அடுத்து CSS வேலை! இப்போது, உங்கள் உள்ளடக்கத்தை சரியாக ஒழுங்குபடுத்தி அணுகல் சிறந்த முறையில் பின்பற்றும் ஒரு வலுவான HTML அடித்தளத்தை பெற்றுள்ளீர்கள். ## அணுகல் வசதிக்காக செமாண்டிக் HTML பயன்படுத்துதல் செமாண்டிக் HTML என்பது அதன் தோற்றத்திற்கு அல்ல, அதன் அர்த்தத்திற்கும் நோக்கத்திற்கும் ஏற்ப HTML கூறுகளை தேர்ந்தெடுப்பதைக் குறிக்கிறது. செமாண்டிக் மார்க்அப் பயன்படுத்தும்போது, நீங்கள் உங்கள் உள்ளடக்கத்தின் கட்டமைப்பு மற்றும் அர்த்தத்தை உலாவிகள், தேடுபொறிகள் மற்றும் ஸ்கிரீன் ரீடர் போன்ற உதவித் தொழில்நுட்பங்களுக்கு அனுப்புகிறீர்கள். ```mermaid flowchart TD A[உள்ளடக்கம் சேர்க்க வேண்டுமா?] --> B{எந்த வகை?} B -->|முக்கிய தலைப்பு| C["

"] B -->|துணைத் தலைப்பு| D["

,

, etc."] B -->|பத்தி| E["

"] B -->|பட்டியல்| F["

    ,
      "] B -->|பாதைமுறை| G["