# ٹیرآریم پروجیکٹ حصہ 1: HTML کا تعارف

> اسکیچ نوٹ از [Tomomi Imura](https://twitter.com/girlie_mac)
## لیکچر سے پہلے کا کوئز
[لیکچر سے پہلے کا کوئز](https://ff-quizzes.netlify.app/web/quiz/15)
> ویڈیو دیکھیں
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
### تعارف
HTML، یا ہائپر ٹیکسٹ مارک اپ لینگویج، ویب کا 'ڈھانچہ' ہے۔ اگر CSS آپ کے HTML کو 'سجانے' کا کام کرتا ہے اور JavaScript اسے زندگی بخشتا ہے، تو HTML آپ کی ویب ایپلیکیشن کا جسم ہے۔ HTML کی ساخت بھی اس خیال کی عکاسی کرتی ہے، کیونکہ اس میں "head"، "body"، اور "footer" ٹیگز شامل ہیں۔
اس سبق میں، ہم HTML کا استعمال کرتے ہوئے اپنے ورچوئل ٹیرآریم کے انٹرفیس کا 'ڈھانچہ' بنائیں گے۔ اس میں ایک عنوان اور تین کالم ہوں گے: دائیں اور بائیں کالم جہاں ڈریگ ایبل پودے ہوں گے، اور درمیان کا علاقہ جو اصل میں شیشے جیسا ٹیرآریم ہوگا۔ اس سبق کے اختتام تک، آپ کالمز میں پودے دیکھ سکیں گے، لیکن انٹرفیس تھوڑا عجیب لگے گا؛ فکر نہ کریں، اگلے حصے میں آپ CSS اسٹائلز شامل کریں گے تاکہ انٹرفیس بہتر نظر آئے۔
### کام
اپنے کمپیوٹر پر ایک فولڈر بنائیں جس کا نام 'terrarium' ہو اور اس کے اندر ایک فائل بنائیں جس کا نام 'index.html' ہو۔ آپ یہ کام Visual Studio Code میں اپنے terrarium فولڈر کو کھول کر، ایک نیا VS Code ونڈو کھول کر، 'open folder' پر کلک کر کے اور اپنے نئے فولڈر کو منتخب کر کے کر سکتے ہیں۔ Explorer پین میں چھوٹے 'file' بٹن پر کلک کریں اور نئی فائل بنائیں:

یا
اپنے git bash میں یہ کمانڈز استعمال کریں:
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` یا `nano index.html`
> index.html فائلز براؤزر کو یہ بتاتی ہیں کہ یہ فولڈر کی ڈیفالٹ فائل ہے؛ URLs جیسے `https://anysite.com/test` ممکنہ طور پر ایک فولڈر اسٹرکچر استعمال کر کے بنائے گئے ہیں جس میں `test` نامی فولڈر اور اس کے اندر `index.html` شامل ہو؛ `index.html` کو URL میں دکھانے کی ضرورت نہیں ہوتی۔
---
## DocType اور html ٹیگز
HTML فائل کی پہلی لائن اس کا DocType ہوتی ہے۔ یہ تھوڑا حیران کن ہو سکتا ہے کہ آپ کو یہ لائن فائل کے بالکل اوپر رکھنی ہوتی ہے، لیکن یہ پرانے براؤزرز کو بتاتی ہے کہ صفحہ کو موجودہ HTML اسپیسفکیشن کے مطابق اسٹینڈرڈ موڈ میں رینڈر کرنا ہے۔
> ٹپ: VS Code میں، آپ کسی ٹیگ پر ہوور کر کے MDN ریفرنس گائیڈز سے اس کے استعمال کے بارے میں معلومات حاصل کر سکتے ہیں۔
دوسری لائن `` ٹیگ کا اوپننگ ٹیگ ہونا چاہیے، جس کے فوراً بعد اس کا کلوزنگ ٹیگ `` ہو۔ یہ ٹیگز آپ کے انٹرفیس کے روٹ عناصر ہیں۔
### کام
اپنی `index.html` فائل کے اوپر یہ لائنز شامل کریں:
```HTML
```
✅ DocType کو ایک کوئری اسٹرنگ کے ساتھ سیٹ کر کے مختلف موڈز طے کیے جا سکتے ہیں: [Quirks Mode اور Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)۔ یہ موڈز بہت پرانے براؤزرز (جیسے Netscape Navigator 4 اور Internet Explorer 5) کو سپورٹ کرنے کے لیے استعمال ہوتے تھے جو آج کل عام طور پر استعمال نہیں ہوتے۔ آپ اسٹینڈرڈ DocType ڈیکلریشن پر قائم رہ سکتے ہیں۔
---
## دستاویز کا 'head'
HTML دستاویز کے 'head' حصے میں آپ کے ویب صفحے کے بارے میں اہم معلومات شامل ہوتی ہیں، جنہیں [میٹا ڈیٹا](https://developer.mozilla.org/docs/Web/HTML/Element/meta) کہا جاتا ہے۔ ہمارے کیس میں، ہم ویب سرور کو یہ چار چیزیں بتاتے ہیں:
- صفحے کا عنوان
- صفحے کا میٹا ڈیٹا، جس میں شامل ہیں:
- 'کریکٹر سیٹ'، جو بتاتا ہے کہ صفحے میں کون سا کریکٹر انکوڈنگ استعمال ہو رہا ہے
- براؤزر کی معلومات، بشمول `x-ua-compatible` جو ظاہر کرتا ہے کہ IE=edge براؤزر سپورٹڈ ہے
- معلومات کہ جب صفحہ لوڈ ہو تو ویوپورٹ کو کیسے برتاؤ کرنا چاہیے۔ ویوپورٹ کو ابتدائی اسکیل 1 پر سیٹ کرنا کنٹرول کرتا ہے کہ صفحہ پہلی بار لوڈ ہونے پر زوم لیول کیا ہوگا۔
### کام
اپنی دستاویز میں `` ٹیگز کے درمیان ایک 'head' بلاک شامل کریں۔
```html
Welcome to my Virtual Terrarium
```
✅ اگر آپ ویوپورٹ میٹا ٹیگ کو اس طرح سیٹ کریں: `` تو کیا ہوگا؟ ویوپورٹ کے بارے میں مزید پڑھیں: [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)۔
---
## دستاویز کا `body`
### HTML ٹیگز
HTML میں، آپ اپنی .html فائل میں ٹیگز شامل کرتے ہیں تاکہ ویب صفحے کے عناصر بن سکیں۔ ہر ٹیگ کے عام طور پر ایک اوپننگ اور کلوزنگ ٹیگ ہوتے ہیں، جیسے: `
hello
` جو ایک پیراگراف کو ظاہر کرتا ہے۔ اپنے انٹرفیس کا باڈی بنانے کے لیے `` ٹیگز کا ایک سیٹ `` ٹیگ کے جوڑے کے اندر شامل کریں؛ آپ کا مارک اپ اب اس طرح نظر آنا چاہیے:
### کام
```html
Welcome to my Virtual Terrarium
```
اب، آپ اپنے صفحے کو بنانا شروع کر سکتے ہیں۔ عام طور پر، آپ صفحے میں الگ الگ عناصر بنانے کے لیے `
` ٹیگز استعمال کرتے ہیں۔ ہم ایک سیریز کے `
` عناصر بنائیں گے جو تصاویر پر مشتمل ہوں گے۔
### تصاویر
ایک HTML ٹیگ جو کلوزنگ ٹیگ کی ضرورت نہیں رکھتا وہ `` ٹیگ ہے، کیونکہ اس میں ایک `src` عنصر ہوتا ہے جو صفحے کو آئٹم کو رینڈر کرنے کے لیے تمام معلومات فراہم کرتا ہے۔
اپنی ایپ میں ایک فولڈر بنائیں جس کا نام `images` ہو اور اس میں [source code folder](../../../../3-terrarium/solution/images) کی تمام تصاویر شامل کریں؛ (یہاں 14 پودوں کی تصاویر ہیں)۔
### کام
ان پودوں کی تصاویر کو `` ٹیگز کے درمیان دو کالمز میں شامل کریں:
```html
```
> نوٹ: اسپینز بمقابلہ ڈیو۔ ڈیو کو 'بلاک' عناصر سمجھا جاتا ہے، اور اسپینز کو 'ان لائن'۔ اگر آپ ان ڈیو کو اسپین میں تبدیل کریں تو کیا ہوگا؟
اس مارک اپ کے ساتھ، پودے اب اسکرین پر نظر آتے ہیں۔ یہ کافی برا لگتا ہے، کیونکہ ابھی تک انہیں CSS کے ذریعے اسٹائل نہیں کیا گیا، اور ہم یہ اگلے سبق میں کریں گے۔
ہر تصویر میں ایک alt ٹیکسٹ ہوتا ہے جو اس وقت ظاہر ہوگا جب آپ تصویر کو دیکھ یا رینڈر نہیں کر سکتے۔ یہ ایک اہم خصوصیت ہے جو رسائی کے لیے شامل کی جاتی ہے۔ رسائی کے بارے میں مزید جانیں مستقبل کے اسباق میں؛ فی الحال، یاد رکھیں کہ alt ایٹریبیوٹ تصویر کے لیے متبادل معلومات فراہم کرتا ہے اگر کسی وجہ سے صارف اسے دیکھ نہ سکے (مثلاً سست کنکشن، src ایٹریبیوٹ میں خرابی، یا اگر صارف اسکرین ریڈر استعمال کرتا ہو)۔
✅ کیا آپ نے نوٹ کیا کہ ہر تصویر کا alt ٹیگ ایک جیسا ہے؟ کیا یہ اچھی مشق ہے؟ کیوں یا کیوں نہیں؟ کیا آپ اس کوڈ کو بہتر بنا سکتے ہیں؟
---
## معنوی مارک اپ
عام طور پر، HTML لکھتے وقت 'معنوی' مارک اپ استعمال کرنا بہتر ہوتا ہے۔ اس کا کیا مطلب ہے؟ اس کا مطلب ہے کہ آپ HTML ٹیگز کو اس قسم کے ڈیٹا یا تعامل کی نمائندگی کے لیے استعمال کریں جس کے لیے وہ ڈیزائن کیے گئے ہیں۔ مثال کے طور پر، صفحے کے مرکزی عنوانی متن کو `
` ٹیگ استعمال کرنا چاہیے۔
اپنے اوپننگ `` ٹیگ کے فوراً نیچے یہ لائن شامل کریں:
```html
My Terrarium
```
معنوی مارک اپ کا استعمال، جیسے کہ ہیڈرز کو `
` اور غیر ترتیب شدہ فہرستوں کو `
` کے طور پر رینڈر کرنا، اسکرین ریڈرز کو صفحے پر نیویگیٹ کرنے میں مدد دیتا ہے۔ عام طور پر، بٹن کو `
` ٹیگ کے اوپر شامل کریں:
```html
```
✅ اگرچہ آپ نے یہ مارک اپ اسکرین پر شامل کیا، آپ کو بالکل کچھ بھی نظر نہیں آتا۔ کیوں؟
---
## 🚀چیلنج
HTML میں کچھ پرانے 'وائلڈ' ٹیگز ہیں جو اب بھی کھیلنے کے لیے مزے دار ہیں، حالانکہ آپ کو اپنے مارک اپ میں [یہ ٹیگز](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) استعمال نہیں کرنے چاہئیں۔ پھر بھی، کیا آپ پرانے `