ndrohith09
3 years ago
parent
120204995f
commit
3ecff1c303
@ -0,0 +1,237 @@
|
|||||||
|
# டெர்ரேரியம் திட்டம் பகுதி 1: எச்டிஎம்எல் அறிமுகம்
|
||||||
|
|
||||||
|
|
||||||
|
> ஸ்கெட்ச்நோட் மூலம் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## விரிவுரைக்கு முந்தைய வினாடிவினா
|
||||||
|
|
||||||
|
[விரிவுரைக்கு முந்தைய வினாடிவினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
|
||||||
|
|
||||||
|
|
||||||
|
> வீடியோவைப் பாருங்கள்
|
||||||
|
|
||||||
|
>
|
||||||
|
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
|
||||||
|
|
||||||
|
### அறிமுகம்
|
||||||
|
|
||||||
|
எச்டிஎம்எல், அல்லது ஹைப்பர் உரை குறியீட்டு மொழி என்பது வலையின் 'எலும்புக்கூடு' ஆகும். சிஎஸ்எஸ் உங்கள் எச்டிஎம்எல் மற்றும் ஜாவாஸ்கிரிப்ட் அதை உயிர்ப்பித்தால், எச்டிஎம்எல் என்பது உங்கள் வலை பயன்பாட்டின் உடலாகும். எச்டிஎம்எல் இன் தொடரியல் அந்த யோசனையை பிரதிபலிக்கிறது, ஏனெனில் அதில் "தலை", "உடல்" மற்றும் "அடிக்குறிப்பு" குறிச்சொற்கள் உள்ளன.
|
||||||
|
|
||||||
|
இந்தப் பாடத்தில், எங்களின் மெய்நிகர் நிலப்பரப்பின் இடைமுகத்தின் 'எலும்புக்கூட்டை' அமைப்பதற்கு எச்டிஎம்எல் ஐப் பயன்படுத்தப் போகிறோம். இது ஒரு தலைப்பு மற்றும் மூன்று நெடுவரிசைகளைக் கொண்டிருக்கும்: இழுக்கக்கூடிய தாவரங்கள் வசிக்கும் வலது மற்றும் இடது நெடுவரிசை மற்றும் உண்மையான கண்ணாடி தோற்றமளிக்கும் நிலப்பரப்பாக இருக்கும் மையப் பகுதி. இந்த பாடத்தின் முடிவில், நீங்கள் நெடுவரிசைகளில் உள்ள தாவரங்களைப் பார்க்க முடியும், ஆனால் இடைமுகம் கொஞ்சம் விசித்திரமாக இருக்கும்; கவலைப்பட வேண்டாம், அடுத்த பகுதியில் நீங்கள் சிஎஸ்எஸ் பாணிகளை இடைமுகத்தில் சேர்ப்பீர்கள்.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
உங்கள் கணினியில், 'நிலப்பரப்பு' என்ற கோப்புறையை உருவாக்கி அதன் உள்ளே, 'index.html' என்ற கோப்பை உருவாக்கவும். புதிய வி.எஸ் குறியீடு சாளரத்தைத் திறந்து, 'திறந்த கோப்புறை' என்பதைக் கிளிக் செய்து, உங்கள் புதிய கோப்புறைக்குச் செல்வதன் மூலம் உங்கள் டெர்ரேரியம் கோப்புறையை உருவாக்கிய பிறகு, விஷுவல் ஸ்டுடியோ குறியீட்டில் இதைச் செய்யலாம். எக்ஸ்ப்ளோரர் பலகத்தில் உள்ள சிறிய 'கோப்பு' பொத்தானைக் கிளிக் செய்து புதிய கோப்பை உருவாக்கவும்::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
அல்லது
|
||||||
|
|
||||||
|
உங்கள் ஜிட் பாஷில் இந்த கட்டளைகளைப் பயன்படுத்தவும்:
|
||||||
|
* `mkdir terrarium`
|
||||||
|
* `cd terrarium`
|
||||||
|
* `touch index.html`
|
||||||
|
* `code index.html` அல்லது `nano index.html`
|
||||||
|
|
||||||
|
> index.html கோப்புகள், ஒரு கோப்புறையில் உள்ள இயல்புநிலை கோப்பு என்பதை உலாவியில் குறிப்பிடுகின்றன; `https://anysite.com/test` போன்ற URLகள் ஒரு கோப்புறை கட்டமைப்பைப் பயன்படுத்தி உருவாக்கப்படலாம், அதில் உள்ள `index.html` உள்ள `test` எனப்படும் கோப்புறை அடங்கும்; `index.html` ஐ URL இல் காட்ட வேண்டியதில்லை.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ஆவண வகை மற்றும் எச்டிஎம்எல் குறிச்சொற்கள்
|
||||||
|
|
||||||
|
எச்டிஎம்எல் கோப்பின் முதல் வரி அதன் டாக்டைப் ஆகும். கோப்பின் உச்சியில் இந்த வரியை நீங்கள் வைத்திருக்க வேண்டும் என்பது கொஞ்சம் ஆச்சரியமாக இருக்கிறது, ஆனால் தற்போதைய எச்டிஎம்எல் விவரக்குறிப்பைப் பின்பற்றி, உலாவி ஒரு நிலையான பயன்முறையில் பக்கத்தை வழங்க வேண்டும் என்று பழைய உலாவிகளுக்குச் சொல்கிறது.
|
||||||
|
|
||||||
|
> உதவிக்குறிப்பு: வி.எஸ் குறியீட்டில், நீங்கள் ஒரு குறிச்சொல்லின் மேல் வட்டமிடலாம் மற்றும் எம்டிஎன் குறிப்பு வழிகாட்டிகளில் இருந்து அதன் பயன்பாடு பற்றிய தகவலைப் பெறலாம்.
|
||||||
|
|
||||||
|
இரண்டாவது வரியானது `<html>` குறிச்சொல்லின் தொடக்கக் குறிச்சொல்லாக இருக்க வேண்டும், அதைத் தொடர்ந்து அதன் மூடும் குறிச்சொல் `</html>`. இந்த குறிச்சொற்கள் உங்கள் இடைமுகத்தின் மூல கூறுகள்.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
உங்கள் `index.html` கோப்பின் மேற்புறத்தில் இந்த வரிகளைச் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html></html>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ வினவல் சரம் மூலம் ஆவண வகை ஐ அமைப்பதன் மூலம் தீர்மானிக்கக்கூடிய சில வெவ்வேறு முறைகள் உள்ளன: [தனித்திறன்களை பயன்முறை மற்றும் தரநிலை முறை](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). இந்த முறைகள் பொதுவாகப் பயன்படுத்தப்படாத பழைய உலாவிகளை ஆதரிக்கப் பயன்படுகின்றன (நெட்ஸ்கேப் நேவிகேட்டர் 4 மற்றும் இன்டர்நெட் எக்ஸ்ப்ளோரர் 5). நீங்கள் நிலையான டாக்டிப் பிரகடனத்துடன் ஒட்டிக்கொள்ளலாம்.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ஆவணத்தின் 'தலை'
|
||||||
|
|
||||||
|
எச்டிஎம்எல் ஆவணத்தின் 'ஹெட்' பகுதியில் [மெட்டாடேட்டா](https://developer.mozilla.org/docs/Web/HTML/Element/meta) என அறியப்படும் உங்கள் இணையப் பக்கத்தைப் பற்றிய முக்கியத் தகவல் உள்ளது. எங்கள் விஷயத்தில், இந்தப் பக்கம் எந்த வலை சேவையகத்திற்கு வழங்கப்பட வேண்டும் என்பதை நாங்கள் கூறுகிறோம், இந்த நான்கு விஷயங்கள்:
|
||||||
|
|
||||||
|
- பக்கத்தின் தலைப்பு
|
||||||
|
- பக்க மெட்டாடேட்டா உட்பட:
|
||||||
|
- 'கேரக்டர் செட்', பக்கத்தில் என்ன எழுத்து குறியாக்கம் பயன்படுத்தப்படுகிறது என்பதைப் பற்றி கூறுகிறது
|
||||||
|
- ஐஈ=எட்ஜ் உலாவி ஆதரிக்கப்படுவதைக் குறிக்கும் `x-ua-compatible` உட்பட உலாவித் தகவல்
|
||||||
|
- வியூபோர்ட் ஏற்றப்படும்போது அது எவ்வாறு செயல்பட வேண்டும் என்பது பற்றிய தகவல். வியூபோர்ட்டை 1 இன் ஆரம்ப அளவுகோலாக அமைப்பது, பக்கம் முதலில் ஏற்றப்படும்போது ஜூம் அளவைக் கட்டுப்படுத்துகிறது.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
`<html>` குறிச்சொற்களைத் திறப்பதற்கும் மூடுவதற்கும் இடையில் உங்கள் ஆவணத்தில் 'தலை' தொகுதியைச் சேர்க்கவும்.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<head>
|
||||||
|
<title>எனது விர்ச்சுவல் டெர்ரேரியத்திற்கு வரவேற்கிறோம்</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</head>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ இப்படி ஒரு வியூபோர்ட் மெட்டா டேக்கை அமைத்தால் என்ன நடக்கும்: `<meta name="viewport" content="width=600">`? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) பற்றி மேலும் படிக்கவும்.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## ஆவணத்தின் `உடல்`
|
||||||
|
|
||||||
|
### எச்டிஎம்எல் குறிச்சொற்கள்
|
||||||
|
|
||||||
|
எச்டிஎம்எல் இல், வலைப்பக்கத்தின் கூறுகளை உருவாக்க உங்கள் .html கோப்பில் குறிச்சொற்களைச் சேர்க்கிறீர்கள். ஒவ்வொரு குறிச்சொல்லும் பொதுவாக ஒரு தொடக்க மற்றும் மூடும் குறிச்சொல்லைக் கொண்டிருக்கும், இது போன்றது: பத்தியைக் குறிக்க `<p>ஹலோ</p>`. `<html>` டேக் ஜோடிக்குள் `<body>` குறிச்சொற்களின் தொகுப்பைச் சேர்ப்பதன் மூலம் உங்கள் இடைமுகத்தின் உடலை உருவாக்கவும்; உங்கள் மார்க்அப் இப்போது இது போல் தெரிகிறது:
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>எனது விர்ச்சுவல் டெர்ரேரியத்திற்கு வரவேற்கிறோம்</title>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
இப்போது, உங்கள் பக்கத்தை உருவாக்கத் தொடங்கலாம். பொதுவாக, ஒரு பக்கத்தில் உள்ள தனி உறுப்புகளை உருவாக்க `<div>` குறிச்சொற்களைப் பயன்படுத்துகிறீர்கள். படங்களைக் கொண்டிருக்கும் `<div>` உறுப்புகளின் வரிசையை உருவாக்குவோம்.
|
||||||
|
|
||||||
|
### படங்கள்
|
||||||
|
|
||||||
|
மூடும் குறிச்சொல் தேவையில்லாத ஒரு html குறிச்சொல் `<img>` குறிச்சொல் ஆகும், ஏனெனில் இது உருப்படியை வழங்குவதற்குப் பக்கத்திற்குத் தேவையான அனைத்துத் தகவலையும் உள்ளடக்கிய `src` உறுப்பைக் கொண்டுள்ளது.
|
||||||
|
|
||||||
|
உங்கள் பயன்பாட்டில் `படங்கள்` என்ற கோப்புறையை உருவாக்கி அதில், [மூலக் குறியீடு கோப்புறை](../solution/images) இல் உள்ள அனைத்து படங்களையும் சேர்க்கவும்; (தாவரங்களின் 14 படங்கள் உள்ளன).
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
`<body></body>` குறிச்சொற்களுக்கு இடையே அந்த தாவரப் படங்களை இரண்டு நெடுவரிசைகளில் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="page">
|
||||||
|
<div id="left-container" class="container">
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="right-container" class="container">
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
|
||||||
|
</div>
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
> குறிப்பு: ஸ்பான் எதிராக டிவி டிவ்கள் 'பிளாக்' உறுப்புகளாகக் கருதப்படுகின்றன, மேலும் ஸ்பான்கள் 'இன்லைன்' ஆகும். இந்த பகுதிகளை ஸ்பான்களாக மாற்றினால் என்ன நடக்கும்?
|
||||||
|
|
||||||
|
இந்த மார்க்அப் மூலம், தாவரங்கள் இப்போது திரையில் தோன்றும். இது மிகவும் மோசமாக உள்ளது, ஏனெனில் அவை இன்னும் சிஎஸ்ஸ் ஐப் பயன்படுத்தி வடிவமைக்கப்படவில்லை, அடுத்த பாடத்தில் அதைச் செய்வோம்.
|
||||||
|
|
||||||
|
ஒவ்வொரு படத்திலும் மாற்று உரை இருக்கும், அது உங்களால் படத்தைப் பார்க்க முடியாவிட்டாலும் அல்லது வழங்க முடியாவிட்டாலும் தோன்றும். அணுகுதலுக்காக இது ஒரு முக்கியமான பண்புக்கூறு ஆகும். எதிர்கால பாடங்களில் அணுகல் பற்றி மேலும் அறிக; சில காரணங்களால் ஒரு பயனரால் படத்தைப் பார்க்க முடியவில்லை என்றால் (மெதுவான இணைப்பு, `src` பண்புக்கூறில் பிழை அல்லது பயனர் ஸ்கிரீன் ரீடரைப் பயன்படுத்தினால்) `alt` பண்புக்கூறு படத்தைப் பார்க்க மாற்றுத் தகவலை வழங்குகிறது என்பதை நினைவில் கொள்ளுங்கள்.
|
||||||
|
|
||||||
|
✅ ஒவ்வொரு படத்திற்கும் ஒரே ஆல்ட் டேக் இருப்பதை கவனித்தீர்களா? இது நல்ல நடைமுறையா? ஏன் அல்லது ஏன் இல்லை? இந்தக் குறியீட்டை மேம்படுத்த முடியுமா?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## சொற்பொருள் குறி
|
||||||
|
|
||||||
|
பொதுவாக, எச்டிஎம்எல் ஐ எழுதும்போது அர்த்தமுள்ள 'சொற்பொருள்'களைப் பயன்படுத்துவது விரும்பத்தக்கது. அதற்கு என்ன பொருள்? நீங்கள் எச்டிஎம்எல் குறிச்சொற்களைப் பயன்படுத்தி அவை வடிவமைக்கப்பட்ட தரவு அல்லது தொடர்பு வகையைப் பிரதிநிதித்துவப்படுத்துகிறீர்கள் என்று அர்த்தம். எடுத்துக்காட்டாக, ஒரு பக்கத்தில் உள்ள முக்கிய தலைப்பு உரை `<h1>` குறிச்சொல்லைப் பயன்படுத்த வேண்டும்.
|
||||||
|
|
||||||
|
உங்கள் தொடக்க `<body>` குறிச்சொல்லுக்கு கீழே பின்வரும் வரியைச் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<h1>என் நிலப்பரப்பு</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
தலைப்புகள் `<h1>` மற்றும் வரிசைப்படுத்தப்படாத பட்டியல்கள் `<ul>` என வழங்கப்படுவது போன்ற சொற்பொருள் மார்க்அப்பைப் பயன்படுத்துவது திரை வாசகர்கள் பக்கத்தின் வழியாக செல்ல உதவுகிறது. பொதுவாக, பொத்தான்கள் `<button>` என்றும் பட்டியல்கள் `<li>` என்றும் எழுதப்பட வேண்டும். பொத்தான்களை போலியாக மாற்றுவதற்கு கிளிக் ஹேண்ட்லர்களுடன் பிரத்யேக பாணியிலான `<span>` கூறுகளைப் பயன்படுத்துவது _சாத்தியமானதாக இருந்தாலும், ஊனமுற்ற பயனர்கள் தொழில்நுட்பங்களைப் பயன்படுத்தி ஒரு பக்கத்தில் ஒரு பொத்தான் எங்குள்ளது என்பதைத் தீர்மானிக்கவும், உறுப்பு ஒரு வடிவத்தில் தோன்றினால், அதனுடன் தொடர்பு கொள்ளவும் நல்லது. பொத்தானை. இந்த காரணத்திற்காக, முடிந்தவரை சொற்பொருள் மார்க்அப்பைப் பயன்படுத்த முயற்சிக்கவும்.
|
||||||
|
|
||||||
|
✅ ஸ்க்ரீன் ரீடரைப் பார்த்து, [அது எப்படி இணையப் பக்கத்துடன் தொடர்பு கொள்கிறது](https://www.youtube.com/watch?v=OUDV1gqs9GA). சொற்பொருள் அல்லாத மார்க்அப் பயனரை ஏன் ஏமாற்றக்கூடும் என்பதை உங்களால் பார்க்க முடியுமா?
|
||||||
|
|
||||||
|
## நிலப்பரப்பு
|
||||||
|
|
||||||
|
இந்த இடைமுகத்தின் கடைசிப் பகுதியானது, டெர்ரேரியத்தை உருவாக்கும் வகையில் வடிவமைக்கப்பட்ட மார்க்அப்பை உருவாக்குவதை உள்ளடக்கியது.
|
||||||
|
|
||||||
|
### பணி:
|
||||||
|
|
||||||
|
கடைசி `</div>` குறிச்சொல்லுக்கு மேலே இந்த மார்க்அப்பைச் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="terrarium">
|
||||||
|
<div class="jar-top"></div>
|
||||||
|
<div class="jar-walls">
|
||||||
|
<div class="jar-glossy-long"></div>
|
||||||
|
<div class="jar-glossy-short"></div>
|
||||||
|
</div>
|
||||||
|
<div class="dirt"></div>
|
||||||
|
<div class="jar-bottom"></div>
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ இந்த மார்க்அப்பை நீங்கள் திரையில் சேர்த்தாலும், நீங்கள் எதையும் ரெண்டர் செய்யவில்லை. ஏன்?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀சவால்
|
||||||
|
|
||||||
|
எச்டிஎம்எல் இல் சில காட்டு 'பழைய' குறிச்சொற்கள் உள்ளன, அவை விளையாடுவதற்கு இன்னும் வேடிக்கையாக உள்ளன, இருப்பினும் நீங்கள் [இந்த குறிச்சொற்கள்](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) போன்ற நீக்கப்பட்ட குறிச்சொற்களைப் பயன்படுத்தக்கூடாது. இருப்பினும், h1 தலைப்பை கிடைமட்டமாக உருட்ட பழைய `<marquee>` குறிச்சொல்லைப் பயன்படுத்த முடியுமா? (நீங்கள் செய்தால், பின்னர் அதை அகற்ற மறக்காதீர்கள்)
|
||||||
|
|
||||||
|
## விரிவுரைக்குப் பிந்தைய வினாடிவினா
|
||||||
|
|
||||||
|
[விரிவுரைக்குப் பின் வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
|
||||||
|
|
||||||
|
## மதிப்பாய்வு & சுய ஆய்வு
|
||||||
|
|
||||||
|
எச்டிஎம்எல் என்பது 'முயற்சிக்கப்பட்ட மற்றும் உண்மையான' கட்டுமானத் தொகுதி அமைப்பாகும், இது இணையத்தை இன்றைய நிலையில் உருவாக்க உதவியது. சில பழைய மற்றும் புதிய குறிச்சொற்களைப் படிப்பதன் மூலம் அதன் வரலாற்றைப் பற்றி கொஞ்சம் அறியவும். சில குறிச்சொற்கள் ஏன் நிராகரிக்கப்பட்டன மற்றும் சில சேர்க்கப்பட்டன என்பதை உங்களால் கண்டுபிடிக்க முடியுமா? எதிர்காலத்தில் என்ன குறிச்சொற்கள் அறிமுகப்படுத்தப்படலாம்?
|
||||||
|
|
||||||
|
[மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa) இல் இணையம் மற்றும் மொபைல் சாதனங்களுக்கான தளங்களை உருவாக்குவது பற்றி மேலும் அறிக.
|
||||||
|
|
||||||
|
|
||||||
|
## பணி
|
||||||
|
|
||||||
|
[உங்கள் எச்டிஎம்எல் பயிற்சி: ஒரு வலைப்பதிவு மாக்கப்பை உருவாக்கவும்](assignment.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# உங்கள் எச்டிஎம்எல் ஐப் பயிற்சி செய்யுங்கள்: ஒரு வலைப்பதிவு மொக்கப்பை உருவாக்கவும்
|
||||||
|
|
||||||
|
## வழிமுறைகள்
|
||||||
|
|
||||||
|
உங்கள் தனிப்பட்ட இணையதளத்தை நீங்கள் வடிவமைக்கிறீர்கள் அல்லது மறுவடிவமைப்பு செய்கிறீர்கள் என்று கற்பனை செய்து பாருங்கள். உங்கள் தளத்தின் வரைகலை மாதிரியை உருவாக்கவும், பின்னர் தளத்தின் பல்வேறு கூறுகளை உருவாக்க நீங்கள் பயன்படுத்தும் எச்டிஎம்எல் மார்க்அப்பை எழுதவும். நீங்கள் இதை காகிதத்தில் செய்யலாம், ஸ்கேன் செய்யலாம் அல்லது உங்களுக்கு விருப்பமான மென்பொருளைப் பயன்படுத்தலாம், எச்டிஎம்எல் மார்க்அப்பை கையால் குறியிடுவதை உறுதிசெய்யவும்.
|
||||||
|
|
||||||
|
## ரூப்ரிக்
|
||||||
|
|
||||||
|
| அளவுகோல்கள் | முன்மாதிரி | போதுமானது | தேவைகள் முன்னேற்றம் |
|
||||||
|
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||||
|
| | குறைந்தபட்சம் 10 மார்க்அப் கூறுகளுடன் ஒரு வலைப்பதிவு தளவமைப்பு காட்சிப்படுத்தப்படுகிறது | ஒரு வலைப்பதிவு தளவமைப்பு, சுமார் 5 மார்க்அப் கூறுகளுடன் காட்சிப்படுத்தப்படுகிறது | ஒரு வலைப்பதிவு தளவமைப்பு அதிகபட்சம் 3 மார்க்அப் கூறுகளுடன் காட்சிப்படுத்தப்படுகிறது |
|
||||||
@ -0,0 +1,270 @@
|
|||||||
|
# டெர்ரேரியம் திட்டம் பகுதி 2: சிஎஸ்எஸ் அறிமுகம்
|
||||||
|
|
||||||
|
|
||||||
|
> ஸ்கெட்ச்நோட் எழுதியது [டோமோமி இமுரா](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## விரிவுரைக்கு முந்தைய வினாடிவினா
|
||||||
|
|
||||||
|
[விரிவுரைக்கு முந்தைய வினாடிவினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
|
||||||
|
|
||||||
|
### அறிமுகம்
|
||||||
|
|
||||||
|
சிஎஸ்எஸ், அல்லது அடுக்கு நடை தாள்கள், இணைய மேம்பாட்டின் ஒரு முக்கியமான சிக்கலைத் தீர்க்கின்றன: உங்கள் வலைதளத்தை அழகாக்குவது எப்படி. உங்கள் பயன்பாடுகளை ஸ்டைல் செய்வதால், அவை பயன்படுத்தக்கூடியதாகவும் அழகாகவும் இருக்கும்; நீங்கள் சிஎஸ்எஸ் ஐப் பயன்படுத்தி ரெஸ்பான்சிவ் வெப் டிசைனை (ஆர்டபிள்யூடி) உருவாக்கலாம் - உங்கள் பயன்பாடுகள் எந்தத் திரையில் காட்டப்பட்டாலும் அவை அழகாக இருக்கும். சிஎஸ்எஸ் என்பது உங்கள் பயன்பாட்டை அழகாக மாற்றுவது மட்டுமல்ல; அதன் விவரக்குறிப்பில் உங்கள் பயன்பாடுகளுக்கான அதிநவீன தொடர்புகளை இயக்கக்கூடிய அனிமேஷன்கள் மற்றும் உருமாற்றங்கள் உள்ளன. சிஎஸ்எஸ் பணிக்குழு தற்போதைய சிஎஸ்எஸ் விவரக்குறிப்புகளை பராமரிக்க உதவுகிறது; [உலகளாவிய வலை கூட்டமைப்பு தளம்](https://www.w3.org/Style/CSS/members) அவர்களின் வேலையை நீங்கள் பின்பற்றலாம்.
|
||||||
|
|
||||||
|
> குறிப்பு, சிஎஸ்எஸ் என்பது இணையத்தில் உள்ள அனைத்தையும் போலவே உருவாகும் ஒரு மொழியாகும், மேலும் அனைத்து உலாவிகளும் விவரக்குறிப்பின் புதிய பகுதிகளை ஆதரிக்காது. [CanIUse.com](https://caniuse.com) மூலம் உங்கள் செயலாக்கங்களை எப்போதும் சரிபார்க்கவும்.
|
||||||
|
|
||||||
|
இந்தப் பாடத்தில், எங்கள் ஆன்லைன் டெர்ரேரியத்தில் ஸ்டைல்களைச் சேர்க்கப் போகிறோம், மேலும் பல சிஎஸ்எஸ் கருத்துகளைப் பற்றி மேலும் அறியப் போகிறோம்: அடுக்கு, மரபுரிமை மற்றும் தேர்வாளர்களின் பயன்பாடு, பொருத்துதல் மற்றும் தளவமைப்புகளை உருவாக்க சிஎஸ்எஸ் ஐப் பயன்படுத்துதல். செயல்பாட்டில் நாங்கள் டெர்ரேரியத்தை அமைப்போம் மற்றும் உண்மையான நிலப்பரப்பை உருவாக்குவோம்.
|
||||||
|
|
||||||
|
### முன்நிபந்தனை
|
||||||
|
|
||||||
|
உங்கள் நிலப்பரப்புக்கான எச்டிஎம்எல் ஐ நீங்கள் கட்டமைத்து, வடிவமைக்க தயாராக இருக்க வேண்டும்.
|
||||||
|
|
||||||
|
> வீடியோவைப் பாருங்கள்
|
||||||
|
|
||||||
|
>
|
||||||
|
> [](https://www.youtube.com/watch?v=6yIdOIV9p1I)
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
உங்கள் டெர்ரேரியம் கோப்புறையில், `style.css` என்ற புதிய கோப்பை உருவாக்கவும். `<head>` பிரிவில் அந்தக் கோப்பை இறக்குமதி செய்யவும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" href="./style.css" />
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## தி கேஸ்கேட்
|
||||||
|
|
||||||
|
கேஸ்கேடிங் ஸ்டைல் ஷீட்கள், ஸ்டைல்கள் 'கேஸ்கேட்' போன்ற ஒரு பாணியின் பயன்பாடு அதன் முன்னுரிமையால் வழிநடத்தப்படும் என்ற கருத்தை உள்ளடக்கியது. ஒரு இணைய தள ஆசிரியரால் அமைக்கப்பட்ட பாணிகள் உலாவியால் அமைக்கப்பட்டதை விட முன்னுரிமை பெறுகின்றன. வெளிப்புற நடைத் தாளில் அமைக்கப்பட்டுள்ளதை விட, 'இன்லைன்' அமைக்கப்பட்ட ஸ்டைல்கள் முன்னுரிமை பெறுகின்றன.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
உங்கள் `<h1>` குறிச்சொல்லில் "நிறம்: சிவப்பு" இன்லைன் பாணியைச் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```HTML
|
||||||
|
<h1 style="color: red">My Terrarium</h1>
|
||||||
|
```
|
||||||
|
|
||||||
|
பிறகு, உங்கள் `style.css` கோப்பில் பின்வரும் குறியீட்டைச் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
h1 {
|
||||||
|
color: blue;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
✅ உங்கள் இணைய பயன்பாட்டில் எந்த வண்ணம் காண்பிக்கப்படும்? ஏன்? பாணிகளை மேலெழுத ஒரு வழியைக் கண்டுபிடிக்க முடியுமா? இதை எப்போது செய்ய விரும்புகிறீர்கள் அல்லது ஏன் செய்யக்கூடாது?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## பரம்பரை
|
||||||
|
|
||||||
|
பாங்குகள் ஒரு மூதாதையர் பாணியிலிருந்து ஒரு சந்ததியினருக்கு மரபுரிமையாகப் பெறப்படுகின்றன, அதாவது உள்ளமைக்கப்பட்ட கூறுகள் அவர்களின் பெற்றோரின் பாணிகளைப் பெறுகின்றன.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
கொடுக்கப்பட்ட எழுத்துருவிற்கு உடலின் எழுத்துருவை அமைத்து, உள்ளமைக்கப்பட்ட உறுப்புகளின் எழுத்துருவைப் பார்க்கவும்:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
body {
|
||||||
|
font-family: helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
உங்கள் உலாவியின் கன்சோலை 'கூறுகள்' தாவலில் திறந்து, H1 இன் எழுத்துருவைக் கவனிக்கவும். உலாவியில் கூறப்பட்டுள்ளபடி, உடலில் இருந்து அதன் எழுத்துருவைப் பெறுகிறது:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
✅ ஒரு உள்ளமை பாணியை வேறு சொத்தை வாரிசாக மாற்ற முடியுமா?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## சிஎஸ்எஸ் தேர்வாளர்கள்
|
||||||
|
|
||||||
|
### குறிச்சொற்கள்
|
||||||
|
|
||||||
|
இதுவரை, உங்கள் `style.css` கோப்பில் சில குறிச்சொற்கள் மட்டுமே வடிவமைக்கப்பட்டுள்ளன, மேலும் பயன்பாடு மிகவும் விசித்திரமாகத் தெரிகிறது:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
body {
|
||||||
|
font-family: helvetica, arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: #3a241d;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
டேக் ஸ்டைலிங் செய்யும் இந்த முறை தனித்துவமான கூறுகளின் மீது கட்டுப்பாட்டை வழங்குகிறது, ஆனால் உங்கள் நிலப்பரப்பில் உள்ள பல தாவரங்களின் பாணிகளை நீங்கள் கட்டுப்படுத்த வேண்டும். அதைச் செய்ய, நீங்கள் சிஎஸ்எஸ் தேர்வாளர்களைப் பயன்படுத்த வேண்டும்.
|
||||||
|
|
||||||
|
### ஐடிகள்
|
||||||
|
|
||||||
|
இடது மற்றும் வலது கொள்கலன்களை அமைப்பதற்கு சில பாணியைச் சேர்க்கவும். ஒரே ஒரு இடது கொள்கலன் மற்றும் ஒரே ஒரு வலது கொள்கலன் இருப்பதால், மார்க்அப்பில் அவர்களுக்கு ஐடிகள் கொடுக்கப்பட்டுள்ளன. அவற்றை வடிவமைக்க, `#` பயன்படுத்தவும்:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
#left-container {
|
||||||
|
background-color: #eee;
|
||||||
|
width: 15%;
|
||||||
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#right-container {
|
||||||
|
background-color: #eee;
|
||||||
|
width: 15%;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
இங்கே, நீங்கள் இந்த கொள்கலன்களை திரையின் இடது மற்றும் வலதுபுறத்தில் முழுமையான நிலைப்பாட்டுடன் வைத்துள்ளீர்கள், மேலும் அவற்றின் அகலத்திற்கான சதவீதங்களைப் பயன்படுத்தியுள்ளீர்கள், இதனால் அவை சிறிய மொபைல் திரைகளுக்கு அளவிட முடியும்.
|
||||||
|
|
||||||
|
✅ இந்தக் குறியீடு மீண்டும் மீண்டும் செய்யப்படுகிறது, எனவே "உலர்" இல்லை (உங்களை மீண்டும் செய்ய வேண்டாம்); ஐடி மற்றும் வகுப்பைக் கொண்டு இந்த ஐடிகளை வடிவமைக்க சிறந்த வழியை நீங்கள் கண்டுபிடிக்க முடியுமா? நீங்கள் மார்க்அப்பை மாற்ற வேண்டும் மற்றும் சிஎஸ்எஸ்ஸை மறுசீரமைக்க வேண்டும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="left-container" class="container"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
### வகுப்புகள்
|
||||||
|
|
||||||
|
மேலே உள்ள எடுத்துக்காட்டில், நீங்கள் திரையில் இரண்டு தனித்துவமான கூறுகளை வடிவமைத்துள்ளீர்கள். திரையில் உள்ள பல உறுப்புகளுக்கு ஸ்டைல்கள் பயன்படுத்தப்பட வேண்டுமெனில், நீங்கள் சிஎஸ்எஸ் வகுப்புகளைப் பயன்படுத்தலாம். இடது மற்றும் வலது கொள்கலன்களில் தாவரங்களை அமைப்பதற்கு இதைச் செய்யுங்கள்.
|
||||||
|
|
||||||
|
எச்டிஎம்எல் மார்க்அப்பில் உள்ள ஒவ்வொரு ஆலையும் ஐடிகள் மற்றும் வகுப்புகளின் கலவையைக் கொண்டிருப்பதைக் கவனியுங்கள். இங்குள்ள ஐடிகள் ஜாவாஸ்கிரிப்ட் மூலம் பயன்படுத்தப்படுகின்றன, அவை டெர்ரேரியம் ஆலை இடத்தைக் கையாள நீங்கள் பின்னர் சேர்க்கலாம். இருப்பினும், வகுப்புகள் அனைத்து தாவரங்களுக்கும் கொடுக்கப்பட்ட பாணியைக் கொடுக்கின்றன.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div class="plant-holder">
|
||||||
|
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||||
|
</div>
|
||||||
|
```
|
||||||
|
|
||||||
|
பின்வருவனவற்றை உங்கள் `style.css` கோப்பில் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
.plant-holder {
|
||||||
|
position: relative;
|
||||||
|
height: 13%;
|
||||||
|
left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.plant {
|
||||||
|
position: absolute;
|
||||||
|
max-width: 150%;
|
||||||
|
max-height: 150%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
இந்த துணுக்கில் குறிப்பிடத்தக்கது உறவினர் மற்றும் முழுமையான நிலைப்பாட்டின் கலவையாகும், அதை நாம் அடுத்த பகுதியில் காண்போம். சதவீதங்களால் உயரங்களைக் கையாளும் விதத்தைப் பாருங்கள்:
|
||||||
|
|
||||||
|
ஸ்க்ரோலிங் தேவையில்லாமல் ஒவ்வொரு செங்குத்து கொள்கலனிலும் அனைத்து தாவரங்களும் காட்டப்படுவதை உறுதிசெய்ய, ஆலை வைத்திருப்பவரின் உயரத்தை 13% ஆக அமைத்துள்ளீர்கள்.
|
||||||
|
|
||||||
|
தாவரங்கள் அவற்றின் கொள்கலனுக்குள் அதிக மையமாக இருக்க அனுமதிக்க, ஆலை வைத்திருப்பவரை இடதுபுறமாக நகர்த்தவும். படங்கள் அதிக அளவு வெளிப்படையான பின்னணியைக் கொண்டுள்ளன, இதனால் அவற்றை மேலும் இழுக்கக்கூடியதாக மாற்றும், எனவே திரையில் சிறப்பாகப் பொருந்துவதற்கு இடதுபுறமாகத் தள்ளப்பட வேண்டும்.
|
||||||
|
|
||||||
|
பின்னர், ஆலைக்கு 150% அதிகபட்ச அகலம் வழங்கப்படுகிறது. இது உலாவியின் அளவைக் குறைக்கும் போது அதைக் குறைக்க அனுமதிக்கிறது. உங்கள் உலாவியின் அளவை மாற்ற முயற்சிக்கவும்; தாவரங்கள் அவற்றின் கொள்கலன்களில் இருக்கும், ஆனால் அவை பொருந்தும் வகையில் குறைக்கப்படுகின்றன.
|
||||||
|
|
||||||
|
ஒரு தனிமத்தின் ஒப்பீட்டு உயரத்தைக் கட்டுப்படுத்தும் z-இண்டெக்ஸின் பயன்பாடும் குறிப்பிடத்தக்கது (இதனால் தாவரங்கள் கொள்கலனின் மேல் அமர்ந்து, நிலப்பரப்புக்குள் உட்காருவது போல் தோன்றும்).
|
||||||
|
|
||||||
|
✅ உங்களுக்கு ஏன் ஒரு ஆலை வைத்திருப்பவர் மற்றும் ஒரு ஆலை சிஎஸ்எஸ் தேர்வி இரண்டும் தேவை?
|
||||||
|
|
||||||
|
## சிஎஸ்எஸ் நிலைப்படுத்தல்
|
||||||
|
|
||||||
|
நிலை பண்புகளை (நிலையான, உறவினர், நிலையான, முழுமையான மற்றும் ஒட்டும் நிலைகள் உள்ளன) கலப்பது கொஞ்சம் தந்திரமானதாக இருக்கலாம், ஆனால் சரியாகச் செய்தால் அது உங்கள் பக்கங்களில் உள்ள உறுப்புகளின் மீது நல்ல கட்டுப்பாட்டை வழங்குகிறது.
|
||||||
|
|
||||||
|
முழுமையான நிலைப்படுத்தப்பட்ட கூறுகள் அவற்றின் அருகாமையில் உள்ள மூதாதையர்களுடன் ஒப்பிடும்போது நிலைநிறுத்தப்படுகின்றன, மேலும் அவை எதுவும் இல்லை என்றால், அது ஆவண அமைப்பின் படி நிலைநிறுத்தப்படுகிறது.
|
||||||
|
|
||||||
|
தொடர்புடைய நிலைப்படுத்தப்பட்ட கூறுகள் அதன் ஆரம்ப நிலையில் இருந்து விலகி அதன் இடத்தை சரிசெய்ய சிஎஸ்எஸ் இன் திசைகளின் அடிப்படையில் நிலைநிறுத்தப்படுகின்றன.
|
||||||
|
|
||||||
|
எங்கள் மாதிரியில், `பிளாண்ட்-ஹோல்டர்' என்பது ஒரு முழுமையான-நிலைப்படுத்தப்பட்ட கொள்கலனுக்குள் நிலைநிறுத்தப்பட்ட உறவினர்-நிலை உறுப்பு ஆகும். விளைவான நடத்தை என்னவென்றால், பக்கப் பட்டை கொள்கலன்கள் இடது மற்றும் வலதுபுறமாகப் பொருத்தப்பட்டு, ஆலை வைத்திருப்பவர் கூடு கட்டப்பட்டு, பக்கவாட்டு கம்பிகளுக்குள் தன்னைச் சரிசெய்து, செடிகளுக்கு செங்குத்து வரிசையில் இடமளிக்கிறது.
|
||||||
|
|
||||||
|
> `ஆலை` தானே முழுமையான நிலைப்பாட்டைக் கொண்டுள்ளது, அதை இழுக்கக்கூடியதாக மாற்றுவதற்குத் தேவையானது, அடுத்த பாடத்தில் நீங்கள் கண்டுபிடிப்பீர்கள்.
|
||||||
|
|
||||||
|
✅ பக்கவாட்டு கொள்கலன்கள் மற்றும் ஆலை வைத்திருப்பவரின் பொருத்துதல் வகைகளை மாற்றும் பரிசோதனை. என்ன நடக்கும்?
|
||||||
|
|
||||||
|
## சிஎஸ்எஸ் லேஅவுட்கள்
|
||||||
|
|
||||||
|
இப்போது நீங்கள் நிலப்பரப்பை உருவாக்க கற்றுக்கொண்டதைப் பயன்படுத்துவீர்கள், அனைத்தும் சிஎஸ்எஸ் ஐப் பயன்படுத்தி!
|
||||||
|
|
||||||
|
முதலில், `.terrarium` div குழந்தைகளை சிஎஸ்எஸ்ஐப் பயன்படுத்தி வட்டமான செவ்வகமாக வடிவமைக்கவும்:
|
||||||
|
|
||||||
|
```CSS
|
||||||
|
.jar-walls {
|
||||||
|
height: 80%;
|
||||||
|
width: 60%;
|
||||||
|
background: #d1e1df;
|
||||||
|
border-radius: 1rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0.5%;
|
||||||
|
left: 20%;
|
||||||
|
opacity: 0.5;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jar-top {
|
||||||
|
width: 50%;
|
||||||
|
height: 5%;
|
||||||
|
background: #d1e1df;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 80.5%;
|
||||||
|
left: 25%;
|
||||||
|
opacity: 0.7;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jar-bottom {
|
||||||
|
width: 50%;
|
||||||
|
height: 1%;
|
||||||
|
background: #d1e1df;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0%;
|
||||||
|
left: 25%;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dirt {
|
||||||
|
width: 60%;
|
||||||
|
height: 5%;
|
||||||
|
background: #3a241d;
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0 0 1rem 1rem;
|
||||||
|
bottom: 1%;
|
||||||
|
left: 20%;
|
||||||
|
opacity: 0.7;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
இங்கே சதவீதங்களின் பயன்பாட்டைக் கவனியுங்கள். உங்கள் உலாவியை நீங்கள் குறைத்தால், ஜாடி எவ்வாறு அளவிடப்படுகிறது என்பதையும் பார்க்கலாம். ஜாடி உறுப்புகளுக்கான அகலங்கள் மற்றும் உயரத்தின் சதவீதங்கள் மற்றும் ஒவ்வொரு உறுப்பும் எவ்வாறு மையத்தில் முற்றிலும் நிலைநிறுத்தப்பட்டு, காட்சிப் பகுதியின் அடிப்பகுதியில் பொருத்தப்பட்டுள்ளது என்பதையும் கவனியுங்கள்.
|
||||||
|
|
||||||
|
எல்லை-ஆரம், எழுத்துரு-உறவினர் நீளத்திற்கும் `rem` ஐப் பயன்படுத்துகிறோம். [சிஎஸ்எஸ் விவரக்குறிப்பு](https://www.w3.org/TR/css-values-3/#font-relative-lengths) இல் இந்த வகையான ஒப்பீட்டு அளவீடு பற்றி மேலும் படிக்கவும்.
|
||||||
|
|
||||||
|
✅ ஜாடியின் நிறங்கள் மற்றும் ஒளிபுகாநிலைக்கு எதிராக அழுக்குகளை மாற்ற முயற்சிக்கவும். என்ன நடக்கும்? ஏன்?
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀சவால்
|
||||||
|
|
||||||
|
ஜாடியின் இடது கீழ் பகுதியில் ஒரு 'பபிள்' ஷைனைச் சேர்க்கவும், அது இன்னும் கண்ணாடியைப் போல தோற்றமளிக்கும். நீங்கள் `.ஜார்-பளபளப்பான-நீளம்` மற்றும் `.ஜார்-பளபளப்பான-குறுகிய` ஆகியவற்றைப் பிரதிபலித்த பிரகாசம் போல் தோற்றமளிப்பீர்கள். இது எப்படி இருக்கும் என்பது இங்கே:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
விரிவுரைக்குப் பிந்தைய வினாடி வினாவை முடிக்க, இந்த கற்றல் தொகுதிக்குச் செல்லவும்: [உங்கள் எச்டிஎம்எல் பயன்பாட்டை சிஎஸ்எஸ் மூலம் வடிவமைக்கவும்](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
|
||||||
|
|
||||||
|
|
||||||
|
## விரிவுரைக்குப் பிந்தைய வினாடிவினா
|
||||||
|
|
||||||
|
[விரிவுரைக்குப் பின் வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
|
||||||
|
|
||||||
|
## மதிப்பாய்வு & சுய ஆய்வு
|
||||||
|
|
||||||
|
சிஎஸ்எஸ் ஏமாற்றும் வகையில் நேரடியானதாகத் தெரிகிறது, ஆனால் எல்லா உலாவிகளுக்கும் எல்லாத் திரை அளவுகளுக்கும் ஏற்றவாறு ஒரு ஆப்ஸை வடிவமைக்க முயற்சிக்கும்போது பல சவால்கள் உள்ளன. சிஎஸ்எஸ்-கிரிட் மற்றும் ஃப்ளெக்ஸ்பாக்ஸ் ஆகியவை வேலையை இன்னும் கொஞ்சம் கட்டமைக்க மற்றும் நம்பகமானதாக மாற்றுவதற்காக உருவாக்கப்பட்ட கருவிகள். [ஃப்ளெக்ஸ்பாக்ஸ் தவளை](https://flexboxfroggy.com/) மற்றும் [கிரிட் கார்டன்](https://codepip.com/games/grid-garden/) விளையாடுவதன் மூலம் இந்தக் கருவிகளைப் பற்றி அறியவும்.
|
||||||
|
|
||||||
|
## பணி
|
||||||
|
|
||||||
|
[சிஎஸ்எஸ் மறுசீரமைப்பு](assignment.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# சிஎஸ்எஸ் மறுசீரமைப்பு
|
||||||
|
|
||||||
|
## வழிமுறைகள்
|
||||||
|
|
||||||
|
ஃப்ளெக்ஸ்பாக்ஸ் அல்லது சிஎஸ்எஸ் கட்டத்தைப் பயன்படுத்தி டெர்ரேரியத்தை மறுசீரமைக்கவும், மேலும் பல உலாவிகளில் அதைச் சோதித்ததைக் காட்ட ஸ்கிரீன்ஷாட்களை எடுக்கவும். நீங்கள் மார்க்அப்பை மாற்ற வேண்டியிருக்கலாம், எனவே உங்கள் மறுசீரமைப்பிற்கான கலையுடன் பயன்பாட்டின் புதிய பதிப்பை உருவாக்கவும். உறுப்புகளை இழுத்துச் செல்வது பற்றி கவலைப்பட வேண்டாம்; இப்போதைக்கு எச்டிஎம்எல் மற்றும் சிஎஸ்எஸ் ஐ மட்டும் மறுவடிவமைக்கவும்.
|
||||||
|
|
||||||
|
## Rubric
|
||||||
|
|
||||||
|
| அளவுகோல்கள் | முன்மாதிரி | முன்மாதிரி | முன்னேற்றம் தேவை |
|
||||||
|
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||||
|
| | ஃப்ளெக்ஸ்பாக்ஸ் அல்லது சிஎஸ்எஸ் கிரிட் |ஐப் பயன்படுத்தி முற்றிலும் மறுசீரமைக்கப்பட்ட டெர்ரேரியத்தை வழங்கவும் சில கூறுகளை மறுசீரமைக்கவும் | டெர்ரேரியத்தை மறுசீரமைப்பதில் தோல்வி |
|
||||||
@ -0,0 +1,216 @@
|
|||||||
|
# டெர்ரேரியம் திட்டம் பகுதி 3: டிஓஎம் கையாளுதல் மற்றும் மூடல்
|
||||||
|
|
||||||
|
|
||||||
|
> ஸ்கெட்ச்நோட் எழுதியது [டோமோமி இமுரா](https://twitter.com/girlie_mac)
|
||||||
|
|
||||||
|
## விரிவுரைக்கு முந்தைய வினாடிவினா
|
||||||
|
|
||||||
|
[விரிவுரைக்கு முந்தைய வினாடிவினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/19)
|
||||||
|
|
||||||
|
### அறிமுகம்
|
||||||
|
|
||||||
|
டிஓஎம் அல்லது "டாகுமெண்ட் ஆப்ஜெக்ட் மாடல்" கையாளுதல் என்பது இணைய வளர்ச்சியின் முக்கிய அம்சமாகும். [எம்டிஎன்](https://developer.mozilla.org/docs/Web/API/Document_Object_Model/Introduction) படி, "ஆவண பொருள் மாதிரி (டிஓஎம்) என்பது ஒரு பொருளின் கட்டமைப்பு மற்றும் உள்ளடக்கத்தை உள்ளடக்கிய பொருட்களின் தரவு பிரதிநிதித்துவமாகும். இணையத்தில் ஆவணம்." இணையத்தில் டிஓஎம் கையாளுதலைச் சுற்றியுள்ள சவால்கள், டிஓஎம் ஐ நிர்வகிக்க வெண்ணிலா ஜாவாஸ்கிரிப்ட்டுக்குப் பதிலாக ஜாவாஸ்கிரிப்ட் கட்டமைப்பைப் பயன்படுத்துவதற்கு உந்துதலாக இருக்கிறது, ஆனால் நாங்கள் சொந்தமாக நிர்வகிப்போம்!
|
||||||
|
|
||||||
|
கூடுதலாக, இந்த பாடம் ஒரு [ஜாவாஸ்கிரிப்ட் மூடல்](https://developer.mozilla.org/docs/Web/JavaScript/Closures) பற்றிய யோசனையை அறிமுகப்படுத்தும், இது மற்றொரு செயல்பாட்டின் மூலம் இணைக்கப்பட்ட ஒரு செயல்பாடாக நீங்கள் நினைக்கலாம். உள் செயல்பாடு வெளிப்புற செயல்பாட்டின் நோக்கத்திற்கான அணுகலைக் கொண்டுள்ளது.
|
||||||
|
|
||||||
|
> ஜாவாஸ்கிரிப்ட் மூடல்கள் ஒரு பரந்த மற்றும் சிக்கலான தலைப்பு. இந்த டெர்ரேரியத்தின் குறியீட்டில், நீங்கள் ஒரு மூடுதலைக் காண்பீர்கள் என்ற மிக அடிப்படையான யோசனையை இந்தப் பாடம் தொடுகிறது: உள் செயல்பாடு மற்றும் வெளிப்புறச் செயல்பாடு வெளிப்புறச் செயல்பாட்டின் நோக்கத்திற்கு அணுகலை அனுமதிக்கும் வகையில் கட்டமைக்கப்பட்ட ஒரு உள் செயல்பாடு. இது எவ்வாறு செயல்படுகிறது என்பது பற்றிய கூடுதல் தகவலுக்கு, [விரிவான ஆவணங்கள்](https://developer.mozilla.org/docs/Web/JavaScript/Closures) ஐப் பார்வையிடவும்.
|
||||||
|
|
||||||
|
டிஓஎம் ஐக் கையாள மூடுதலைப் பயன்படுத்துவோம்.
|
||||||
|
|
||||||
|
ஒரு வலைப்பக்க ஆவணத்தை கையாளக்கூடிய அனைத்து வழிகளையும் பிரதிநிதித்துவப்படுத்தும் டிஓஎம் ஐ ஒரு மரமாக நினைத்துப் பாருங்கள். பல்வேறு ஏபிஐகள் (அப்ளிகேஷன் புரோகிராம் இன்டர்ஃபேஸ்கள்) எழுதப்பட்டுள்ளன, இதனால் புரோகிராமர்கள் தங்களுக்கு விருப்பமான நிரலாக்க மொழியைப் பயன்படுத்தி, டிஓஎம் ஐ அணுகலாம் மற்றும் அதைத் திருத்தலாம், மாற்றலாம், மறுசீரமைக்கலாம் மற்றும் இல்லையெனில் நிர்வகிக்கலாம்.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
> டிஓஎம் இன் பிரதிநிதித்துவம் மற்றும் அதைக் குறிப்பிடும் எச்டிஎம்எல் மார்க்அப். [ஆல்பா நஸ்ரவி](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites) இலிருந்து .
|
||||||
|
|
||||||
|
இந்தப் பாடத்தில், பக்கத்திலுள்ள தாவரங்களைக் கையாள ஒரு பயனரை அனுமதிக்கும் ஜாவாஸ்கிரிப்ட் ஐ உருவாக்குவதன் மூலம் எங்கள் ஊடாடும் நிலப்பரப்பு திட்டத்தை முடிப்போம்.
|
||||||
|
|
||||||
|
### முன்நிபந்தனை
|
||||||
|
|
||||||
|
உங்கள் டெர்ரேரியத்திற்கான எச்டிஎம்எல் மற்றும் சிஎஸ்எஸ் ஆகியவற்றை நீங்கள் வைத்திருக்க வேண்டும். இந்த பாடத்தின் முடிவில், நீங்கள் தாவரங்களை இழுப்பதன் மூலம் நிலப்பரப்புக்கு உள்ளேயும் வெளியேயும் நகர்த்த முடியும்.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
உங்கள் டெர்ரேரியம் கோப்புறையில், `script.js` என்ற புதிய கோப்பை உருவாக்கவும். `<head>` பிரிவில் அந்தக் கோப்பை இறக்குமதி செய்யவும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script src="./script.js" defer></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
> குறிப்பு: வெளிப்புற ஜாவாஸ்கிரிப்ட் கோப்பை html கோப்பில் இறக்குமதி செய்யும் போது `defer` ஐப் பயன்படுத்தவும், இதனால் எச்டிஎம்எல் கோப்பு முழுமையாக ஏற்றப்பட்ட பிறகு மட்டுமே ஜாவாஸ்கிரிப்ட் ஐ இயக்க அனுமதிக்கும். எச்டிஎம்எல் கோப்பு பாகுபடுத்தும் போது ஸ்கிரிப்டை இயக்க அனுமதிக்கும் `async` பண்புக்கூறையும் நீங்கள் பயன்படுத்தலாம், ஆனால் எங்கள் விஷயத்தில், இழுவை ஸ்கிரிப்டை இயக்க அனுமதிக்கும் முன், எச்டிஎம்எல் உறுப்புகளை இழுப்பதற்கு முழுமையாகக் கிடைப்பது முக்கியம்.
|
||||||
|
---
|
||||||
|
|
||||||
|
## டிஓஎம் கூறுகள்
|
||||||
|
|
||||||
|
நீங்கள் செய்ய வேண்டிய முதல் விஷயம், டிஓஎம் இல் நீங்கள் கையாள விரும்பும் உறுப்புகளுக்கான குறிப்புகளை உருவாக்குவது. எங்கள் விஷயத்தில், அவை தற்போது பக்க பார்களில் காத்திருக்கும் 14 தாவரங்கள்.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
```html
|
||||||
|
dragElement(document.getElementById('plant1'));
|
||||||
|
dragElement(document.getElementById('plant2'));
|
||||||
|
dragElement(document.getElementById('plant3'));
|
||||||
|
dragElement(document.getElementById('plant4'));
|
||||||
|
dragElement(document.getElementById('plant5'));
|
||||||
|
dragElement(document.getElementById('plant6'));
|
||||||
|
dragElement(document.getElementById('plant7'));
|
||||||
|
dragElement(document.getElementById('plant8'));
|
||||||
|
dragElement(document.getElementById('plant9'));
|
||||||
|
dragElement(document.getElementById('plant10'));
|
||||||
|
dragElement(document.getElementById('plant11'));
|
||||||
|
dragElement(document.getElementById('plant12'));
|
||||||
|
dragElement(document.getElementById('plant13'));
|
||||||
|
dragElement(document.getElementById('plant14'));
|
||||||
|
```
|
||||||
|
|
||||||
|
இங்கே என்ன நடந்து கொண்டிருக்கின்றது? நீங்கள் ஆவணத்தைக் குறிப்பிடுகிறீர்கள் மற்றும் ஒரு குறிப்பிட்ட ஐடியுடன் ஒரு உறுப்பைக் கண்டறிய அதன் டிஓஎம் ஐப் பார்க்கிறீர்கள். எச்டிஎம்எல் பற்றிய முதல் பாடத்தில் ஒவ்வொரு தாவரப் படத்திற்கும் (`id="plant1"`) தனித்தனி ஐடிகளை வழங்கியது நினைவிருக்கிறதா? இப்போது நீங்கள் அந்த முயற்சியைப் பயன்படுத்துவீர்கள். ஒவ்வொரு உறுப்பையும் கண்டறிந்த பிறகு, ஒரு நிமிடத்தில் நீங்கள் உருவாக்கும் `dragElement` என்ற செயல்பாட்டிற்கு அந்த உருப்படியை அனுப்புகிறீர்கள். எனவே, எச்டிஎம்எல் இல் உள்ள உறுப்பு இப்போது இழுவை-இயக்கப்பட்டது, அல்லது விரைவில் இருக்கும்.
|
||||||
|
|
||||||
|
✅ ஐடி மூலம் உறுப்புகளை ஏன் குறிப்பிடுகிறோம்? அவர்களின் சிஎஸ்எஸ் வகுப்பினால் ஏன் இல்லை? இந்தக் கேள்விக்கு பதிலளிக்க, சிஎஸ்எஸ் பற்றிய முந்தைய பாடத்தைப் பார்க்கவும்.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## மூடல்
|
||||||
|
|
||||||
|
இப்போது நீங்கள் dragElement மூடுதலை உருவாக்கத் தயாராக உள்ளீர்கள், இது ஒரு உள் செயல்பாடு அல்லது செயல்பாடுகளை உள்ளடக்கிய வெளிப்புற செயல்பாடு ஆகும் (எங்கள் விஷயத்தில், எங்களிடம் மூன்று இருக்கும்).
|
||||||
|
|
||||||
|
ஒன்று அல்லது அதற்கு மேற்பட்ட செயல்பாடுகள் வெளிப்புற செயல்பாட்டின் நோக்கத்தை அணுக வேண்டியிருக்கும் போது மூடல்கள் பயனுள்ளதாக இருக்கும். இங்கே ஒரு உதாரணம்:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function displayCandy(){
|
||||||
|
let candy = ['jellybeans'];
|
||||||
|
function addCandy(candyType) {
|
||||||
|
candy.push(candyType)
|
||||||
|
}
|
||||||
|
addCandy('gumdrops');
|
||||||
|
}
|
||||||
|
displayCandy();
|
||||||
|
console.log(candy)
|
||||||
|
```
|
||||||
|
|
||||||
|
இந்த எடுத்துக்காட்டில், டிஸ்ப்ளே கேண்டி செயல்பாடு ஒரு செயல்பாட்டைச் சுற்றியுள்ளது, இது ஒரு புதிய சாக்லேட் வகையை செயல்பாட்டில் ஏற்கனவே இருக்கும் ஒரு அணியில் தள்ளுகிறது. நீங்கள் இந்தக் குறியீட்டை இயக்கினால், `மிட்டாய்` வரிசை வரையறுக்கப்படாமல் இருக்கும், ஏனெனில் இது ஒரு உள்ளூர் மாறி (மூடுவதற்கு உள்ளூர்).
|
||||||
|
|
||||||
|
✅ நீங்கள் எப்படி `மிட்டாய்` வரிசையை அணுகும்படி செய்யலாம்? அதை மூடுவதற்கு வெளியே நகர்த்த முயற்சிக்கவும். இந்த வழியில், மூடுதலின் உள்ளூர் நோக்கத்திற்கு மட்டுமே கிடைக்காமல், வரிசை உலகளாவியதாக மாறுகிறது.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
`script.js` இல் உள்ள உறுப்பு அறிவிப்புகளின் கீழ், ஒரு செயல்பாட்டை உருவாக்கவும்:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function dragElement(terrariumElement) {
|
||||||
|
//set 4 positions for positioning on the screen
|
||||||
|
let pos1 = 0,
|
||||||
|
pos2 = 0,
|
||||||
|
pos3 = 0,
|
||||||
|
pos4 = 0;
|
||||||
|
terrariumElement.onpointerdown = pointerDrag;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
`dragElement` அதன் `terrariumElement` பொருளை ஸ்கிரிப்ட்டின் மேல் உள்ள அறிவிப்புகளிலிருந்து பெறுகிறது. பின்னர், செயல்பாட்டிற்கு அனுப்பப்பட்ட பொருளுக்கு சில உள்ளூர் நிலைகளை `0` இல் அமைக்கிறீர்கள். ஒவ்வொரு உறுப்புக்கும் மூடுவதற்குள் இழுத்து விடுதல் செயல்பாட்டைச் சேர்க்கும்போது, ஒவ்வொரு உறுப்புக்கும் கையாளப்படும் உள்ளூர் மாறிகள் இவை. இந்த இழுத்துச் செல்லப்பட்ட கூறுகளால் டெர்ரேரியம் நிரப்பப்படும், எனவே அவை எங்கு வைக்கப்பட்டுள்ளன என்பதை ஆப்ஸ் கண்காணிக்க வேண்டும்.
|
||||||
|
|
||||||
|
கூடுதலாக, இந்தச் செயல்பாட்டிற்கு அனுப்பப்படும் டெர்ரேரியம் உறுப்புக்கு `பாயின்டர் டவுன்' நிகழ்வு ஒதுக்கப்பட்டுள்ளது, இது டிஓஎம் க்கு உதவ வடிவமைக்கப்பட்ட [வலை ஏபிகளின்](https://developer.mozilla.org/docs/Web/API) பகுதியாகும். மேலாண்மை. ஒரு பொத்தானை அழுத்தும்போது `onpointerdown` எரிகிறது அல்லது எங்கள் விஷயத்தில், இழுக்கக்கூடிய உறுப்பு தொடப்படும். இந்த நிகழ்வு ஹேண்ட்லர் [இணையம் மற்றும் மொபைல் உலாவிகளில்](https://caniuse.com/?search=onpointerdown) சில விதிவிலக்குகளுடன் வேலை செய்கிறது.
|
||||||
|
|
||||||
|
✅ [நிகழ்வு கையாளுபவர் `onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) கிராஸ்-பிரவுசருக்கு அதிக ஆதரவு உள்ளது; நீங்கள் ஏன் அதை இங்கே பயன்படுத்த மாட்டீர்கள்? நீங்கள் இங்கே உருவாக்க முயற்சிக்கும் திரை தொடர்புகளின் சரியான வகையைப் பற்றி சிந்தியுங்கள்.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## பாயிண்டர்டிராக் செயல்பாடு
|
||||||
|
|
||||||
|
நிலப்பரப்பு உறுப்பு சுற்றி இழுக்க தயாராக உள்ளது; `ஆன்பாயிண்டர் டவுன்` நிகழ்வு சுடப்படும் போது, பாய்ன்டர் டிராக் செயல்பாடு செயல்படுத்தப்படுகிறது. இந்த வரியின் கீழ் அந்தச் செயல்பாட்டைச் சேர்க்கவும்: `terrariumElement.onpointerdown = pointerDrag;`:
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function pointerDrag(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
console.log(e);
|
||||||
|
pos3 = e.clientX;
|
||||||
|
pos4 = e.clientY;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
பல விஷயங்கள் நடக்கும். முதலில், `e.preventDefault();` ஐப் பயன்படுத்தி, பாயிண்டர்டவுனில் வழக்கமாக நிகழும் இயல்புநிலை நிகழ்வுகளைத் தடுக்கிறீர்கள். இந்த வழியில் நீங்கள் இடைமுகத்தின் நடத்தை மீது அதிக கட்டுப்பாட்டைக் கொண்டிருக்கிறீர்கள்.
|
||||||
|
|
||||||
|
> நீங்கள் ஸ்கிரிப்ட் கோப்பை முழுவதுமாக உருவாக்கியதும், இந்த வரிக்கு வந்து `e.preventDefault()` இல்லாமல் முயற்சிக்கவும் - என்ன நடக்கும்?
|
||||||
|
|
||||||
|
இரண்டாவதாக, உலாவி சாளரத்தில் `index.html` ஐத் திறந்து, இடைமுகத்தை ஆய்வு செய்யவும். நீங்கள் ஒரு தாவரத்தை கிளிக் செய்யும் போது, 'e' நிகழ்வு எவ்வாறு கைப்பற்றப்பட்டது என்பதை நீங்கள் பார்க்கலாம். ஒரு பாய்ண்டர் டவுன் நிகழ்வின் மூலம் எவ்வளவு தகவல்கள் சேகரிக்கப்படுகின்றன என்பதைப் பார்க்க நிகழ்வைத் தோண்டி எடுக்கவும்!
|
||||||
|
|
||||||
|
அடுத்து, உள்ளூர் மாறிகள் `pos3` மற்றும் `pos4` ஆகியவை e.clientX க்கு எவ்வாறு அமைக்கப்பட்டன என்பதைக் கவனியுங்கள். ஆய்வுப் பலகத்தில் `e` மதிப்புகளைக் காணலாம். இந்த மதிப்புகள் தாவரத்தின் x மற்றும் y ஆயத்தொகுப்புகளை நீங்கள் கிளிக் செய்யும் போது அல்லது அதைத் தொடும்போது கைப்பற்றும். நீங்கள் அவற்றைக் கிளிக் செய்து இழுக்கும்போது, தாவரங்களின் நடத்தையின் மீது உங்களுக்கு நுணுக்கமான கட்டுப்பாடு தேவைப்படும், எனவே அவற்றின் ஒருங்கிணைப்புகளை நீங்கள் கண்காணிக்கலாம்.
|
||||||
|
|
||||||
|
✅ இந்த முழு ஆப்ஸும் ஏன் ஒரு பெரிய மூடுதலுடன் கட்டமைக்கப்பட்டுள்ளது என்பது தெளிவாகிறதா? அது இல்லையென்றால், 14 இழுத்துச் செல்லக்கூடிய தாவரங்களில் ஒவ்வொன்றிற்கும் நீங்கள் எவ்வாறு வாய்ப்பைப் பராமரிப்பீர்கள்?
|
||||||
|
|
||||||
|
`pos4 = e.clientY` என்பதன் கீழ் மேலும் இரண்டு சுட்டி நிகழ்வு கையாளுதல்களைச் சேர்ப்பதன் மூலம் ஆரம்ப செயல்பாட்டை முடிக்கவும்:
|
||||||
|
|
||||||
|
```html
|
||||||
|
document.onpointermove = elementDrag;
|
||||||
|
document.onpointerup = stopElementDrag;
|
||||||
|
```
|
||||||
|
நீங்கள் தாவரத்தை நகர்த்தும்போது சுட்டியுடன் சேர்த்து இழுக்கப்பட வேண்டும் என்றும், செடியைத் தேர்வுநீக்கும்போது இழுக்கும் சைகை நிறுத்தப்பட வேண்டும் என்றும் இப்போது குறிப்பிடுகிறீர்கள். `onpointermove` மற்றும் `onpointerup` அனைத்தும் `Onpointerdown` போன்ற ஒரே APIயின் பகுதிகளாகும். நீங்கள் இன்னும் `ElementDrag` மற்றும் `stopElementDrag` செயல்பாடுகளை வரையறுக்காததால், இடைமுகம் இப்போது பிழைகளை ஏற்படுத்தும், எனவே அவற்றை அடுத்து உருவாக்கவும்.
|
||||||
|
|
||||||
|
## உறுப்பு இழுத்தல் மற்றும் நிறுத்த எலிமென்ட் டிராக் செயல்பாடுகள்
|
||||||
|
|
||||||
|
நீங்கள் ஒரு தாவரத்தை இழுத்து இழுப்பதை நிறுத்தும்போது என்ன நடக்கும் என்பதைக் கையாளும் மேலும் இரண்டு உள் செயல்பாடுகளைச் சேர்ப்பதன் மூலம் உங்கள் மூடுதலை நிறைவு செய்வீர்கள். நீங்கள் விரும்பும் நடத்தை என்னவென்றால், நீங்கள் எந்த தாவரத்தையும் எந்த நேரத்திலும் இழுத்து திரையில் எங்கு வேண்டுமானாலும் வைக்கலாம். தாவரங்களைச் சேர்ப்பது, அகற்றுவது மற்றும் இடமாற்றம் செய்வதன் மூலம் உங்கள் நிலப்பரப்பை நீங்கள் விரும்பியபடி வடிவமைக்க அனுமதிக்க இந்த இடைமுகம் முற்றிலும் கருத்து இல்லாதது (உதாரணமாக துளி மண்டலம் இல்லை).
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
`pointerDrag` இன் சுருள் அடைப்புக்குறியை மூடுவதற்குப் பிறகு `ElementDrag` செயல்பாட்டைச் சேர்க்கவும்:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function elementDrag(e) {
|
||||||
|
pos1 = pos3 - e.clientX;
|
||||||
|
pos2 = pos4 - e.clientY;
|
||||||
|
pos3 = e.clientX;
|
||||||
|
pos4 = e.clientY;
|
||||||
|
console.log(pos1, pos2, pos3, pos4);
|
||||||
|
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
|
||||||
|
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
|
||||||
|
}
|
||||||
|
```
|
||||||
|
இந்தச் செயல்பாட்டில், வெளிப்புறச் செயல்பாட்டில் உள்ளூர் மாறிகளாக நீங்கள் அமைத்த ஆரம்ப நிலைகள் 1-4 ஐ நீங்கள் நிறைய திருத்துகிறீர்கள். இங்கே என்ன நடந்து கொண்டிருக்கின்றது?
|
||||||
|
|
||||||
|
நீங்கள் இழுக்கும்போது, தற்போதைய `e.clientX` மதிப்பைக் கழித்து, `pos1`ஐ `pos3` (நீங்கள் முன்பு `e.clientX` என அமைத்தீர்கள்) க்கு சமமாக மாற்றுவதன் மூலம் மீண்டும் ஒதுக்குவீர்கள். நீங்கள் `pos2` போன்ற செயலைச் செய்கிறீர்கள். பிறகு, நீங்கள் `pos3` மற்றும் `pos4` ஆகியவற்றை புதிய X மற்றும் Y ஆய உறுப்புகளுக்கு மீட்டமைக்கிறீர்கள். நீங்கள் இழுக்கும்போது இந்த மாற்றங்களை கன்சோலில் பார்க்கலாம். பிறகு, புதிய நிலைகளான `pos1` மற்றும் `pos2` ஆகியவற்றின் அடிப்படையில் அதன் புதிய நிலையை அமைக்க, ஆலையின் css பாணியைக் கையாளுகிறீர்கள், இந்த புதிய நிலைகளுடன் அதன் ஆஃப்செட்டை ஒப்பிடுவதன் அடிப்படையில் ஆலையின் மேல் மற்றும் இடது X மற்றும் Y ஒருங்கிணைப்புகளைக் கணக்கிடுங்கள்.
|
||||||
|
|
||||||
|
> `offsetTop` மற்றும் `offsetLeft` என்பது ஒரு உறுப்பின் நிலையை அதன் பெற்றோரின் அடிப்படையில் அமைக்கும் CSS பண்புகள்; அதன் பெற்றோர் `நிலையான` என நிலைநிறுத்தப்படாத எந்த உறுப்பாகவும் இருக்கலாம்.
|
||||||
|
|
||||||
|
நிலைப்படுத்தலின் இந்த மறு கணக்கீடு அனைத்தும் நிலப்பரப்பு மற்றும் அதன் தாவரங்களின் நடத்தையை நன்றாக மாற்ற உங்களை அனுமதிக்கிறது.
|
||||||
|
|
||||||
|
### பணி
|
||||||
|
|
||||||
|
இடைமுகத்தை நிறைவு செய்வதற்கான இறுதிப் பணியானது, `ElementDrag` இன் சுருள் அடைப்புக்குறியை மூடுவதற்குப் பிறகு `stopElementDrag` செயல்பாட்டைச் சேர்ப்பதாகும்:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
function stopElementDrag() {
|
||||||
|
document.onpointerup = null;
|
||||||
|
document.onpointermove = null;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
இந்தச் சிறிய செயல்பாடு `onpointerup` மற்றும் `onpointermove` நிகழ்வுகளை மீட்டமைக்கிறது, இதன் மூலம் உங்கள் ஆலையை மீண்டும் இழுக்கத் தொடங்குவதன் மூலம் அதை மீண்டும் தொடங்கலாம் அல்லது புதிய ஆலையை இழுக்கத் தொடங்கலாம்.
|
||||||
|
|
||||||
|
✅ இந்த நிகழ்வுகளை பூஜ்யமாக அமைக்கவில்லை என்றால் என்ன நடக்கும்?
|
||||||
|
|
||||||
|
இப்போது நீங்கள் உங்கள் திட்டத்தை முடித்துவிட்டீர்கள்!
|
||||||
|
|
||||||
|
🥇வாழ்த்துக்கள்! உங்கள் அழகான நிலப்பரப்பை முடித்துவிட்டீர்கள். 
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀சவால்
|
||||||
|
|
||||||
|
தாவரங்களுக்கு மேலும் ஏதாவது செய்ய உங்கள் மூடுதலில் புதிய நிகழ்வு ஹேண்ட்லரைச் சேர்க்கவும்; உதாரணமாக, ஒரு செடியை முன்பக்கத்திற்கு கொண்டு வர அதை இருமுறை கிளிக் செய்யவும். படைப்பாற்றல் பெறுங்கள்!
|
||||||
|
|
||||||
|
## விரிவுரைக்குப் பிந்தைய வினாடிவினா
|
||||||
|
|
||||||
|
[விரிவுரைக்குப் பின் வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/20)
|
||||||
|
|
||||||
|
## மதிப்பாய்வு & சுய ஆய்வு
|
||||||
|
|
||||||
|
திரையைச் சுற்றி உறுப்புகளை இழுப்பது அற்பமானதாகத் தோன்றினாலும், நீங்கள் தேடும் விளைவைப் பொறுத்து இதைச் செய்ய பல வழிகள் மற்றும் பல ஆபத்துகள் உள்ளன. உண்மையில், நீங்கள் முயற்சி செய்யக்கூடிய முழு [டிராக் அண்ட் டிராப் ஏபிநான்](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) உள்ளது. நாங்கள் விரும்பிய விளைவு சற்றே வித்தியாசமாக இருந்ததால், இந்தத் தொகுதியில் இதைப் பயன்படுத்தவில்லை, ஆனால் உங்கள் சொந்த திட்டத்தில் இந்த ஏபிஐ ஐ முயற்சி செய்து நீங்கள் என்ன சாதிக்க முடியும் என்பதைப் பார்க்கவும்.
|
||||||
|
|
||||||
|
[டபிள்யூ3சி டாக்ஸ்](https://www.w3.org/TR/pointerevents1/) மற்றும் [எம்டிஎன் இணைய ஆவணங்கள்](https://developer.mozilla.org/docs/Web/) ஆகியவற்றில் சுட்டிக்காட்டி நிகழ்வுகள் பற்றிய கூடுதல் தகவலைக் கண்டறியவும் ஏபிஐ/Pointer_events).
|
||||||
|
|
||||||
|
[CanIUse.com](https://caniuse.com/) ஐப் பயன்படுத்தி எப்போதும் உலாவி திறன்களை சரிபார்க்கவும்.
|
||||||
|
|
||||||
|
## பணி
|
||||||
|
|
||||||
|
[டிஓஎம் உடன் இன்னும் கொஞ்சம் வேலை செய்யுங்கள்](assignment.md)
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
# டிஓஎம் உடன் இன்னும் கொஞ்சம் வேலை செய்யுங்கள்
|
||||||
|
|
||||||
|
## வழிமுறைகள்
|
||||||
|
|
||||||
|
டிஓஎம் உறுப்பை 'தத்தெடுப்பதன்' மூலம் டிஓஎம் ஐ இன்னும் கொஞ்சம் ஆராயுங்கள். எம்டிஎன் இன் [டிஓஎம் இடைமுகங்களின் பட்டியல்](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) சென்று ஒன்றைத் தேர்ந்தெடுக்கவும். இணையத்தில் உள்ள ஒரு இணையதளத்தில் இது பயன்படுத்தப்படுவதைக் கண்டறிந்து, அது எவ்வாறு பயன்படுத்தப்படுகிறது என்பதைப் பற்றிய விளக்கத்தை எழுதவும்.
|
||||||
|
|
||||||
|
## ரூப்ரிக்
|
||||||
|
|
||||||
|
| அளவுகோல்கள் | முன்மாதிரி | போதுமானது | முன்னேற்றம் தேவை |
|
||||||
|
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||||
|
| | பத்தி எழுதுதல் வழங்கப்பட்டுள்ளது, உதாரணத்துடன் | பத்தி எழுதுதல், எடுத்துக்காட்டு இல்லாமல் | எந்த எழுத்தும் வழங்கப்படவில்லை |
|
||||||
Loading…
Reference in new issue