# ٹیریریم پروجیکٹ حصہ 1: HTML کا تعارف ```mermaid journey title Your HTML Learning Journey section Foundation Create HTML file: 3: Student Add DOCTYPE: 4: Student Structure document: 5: Student section Content Add metadata: 4: Student Include images: 5: Student Organize layout: 5: Student section Semantics Use proper tags: 4: Student Enhance accessibility: 5: Student Build terrarium: 5: Student ``` ![HTML کا تعارف](../../../../translated_images/webdev101-html.4389c2067af68e98280c1bde52b6c6269f399eaae3659b7c846018d8a7b0bbd9.ur.png) > اسکیچ نوٹ [Tomomi Imura](https://twitter.com/girlie_mac) کی طرف سے HTML، یا HyperText Markup Language، ہر ویب سائٹ کی بنیاد ہے جو آپ نے کبھی دیکھی ہے۔ HTML کو ویب صفحات کا ڈھانچہ سمجھیں – یہ بتاتا ہے کہ مواد کہاں جائے گا، کیسے منظم ہوگا، اور ہر حصہ کیا ظاہر کرتا ہے۔ جبکہ CSS بعد میں آپ کے HTML کو رنگوں اور لے آؤٹ کے ساتھ "سجائے گا"، اور JavaScript اسے انٹرایکٹیویٹی کے ساتھ زندہ کرے گا، HTML وہ بنیادی ڈھانچہ فراہم کرتا ہے جو باقی سب کچھ ممکن بناتا ہے۔ اس سبق میں، آپ ایک ورچوئل ٹیریریم انٹرفیس کے لیے HTML ڈھانچہ بنائیں گے۔ یہ عملی پروجیکٹ آپ کو بنیادی HTML تصورات سکھائے گا جبکہ کچھ بصری طور پر دلچسپ چیز بناتے ہوئے۔ آپ سیکھیں گے کہ مواد کو سیمینٹک عناصر کے ذریعے کیسے منظم کریں، تصاویر کے ساتھ کام کریں، اور ایک انٹرایکٹو ویب ایپلیکیشن کے لیے بنیاد بنائیں۔ سبق کے اختتام تک، آپ کے پاس ایک کام کرنے والا HTML صفحہ ہوگا جو پودوں کی تصاویر کو منظم کالموں میں دکھائے گا، اگلے سبق میں اسٹائلنگ کے لیے تیار۔ اگر یہ شروع میں بنیادی لگے تو پریشان نہ ہوں – یہی HTML کا کام ہے، CSS کے اضافے سے پہلے۔ ```mermaid mindmap root((HTML Fundamentals)) Structure DOCTYPE Declaration HTML Element Head Section Body Content Elements Tags & Attributes Self-closing Tags Nested Elements Block vs Inline Content Text Elements Images Containers (div) Lists Semantics Meaningful Tags Accessibility Screen Readers SEO Benefits Best Practices Proper Nesting Valid Markup Descriptive Alt Text Organized Structure ``` ## پری لیکچر کوئز [پری لیکچر کوئز](https://ff-quizzes.netlify.app/web/quiz/15) > 📺 **دیکھیں اور سیکھیں**: اس مددگار ویڈیو کا جائزہ دیکھیں > > [![HTML بنیادی ویڈیو](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 میں نئی فائل بنانے کا عمل](../../../../translated_images/vs-code-index.e2986cf919471eb984a0afef231380c8b132b000635105f2397bd2754d1b689c.ur.png) **آپشن 2: ٹرمینل کمانڈز کا استعمال** ```bash mkdir terrarium cd terrarium touch index.html code index.html ``` **یہ کمانڈز کیا کرتی ہیں:** - **ایک نیا ڈائریکٹری بناتی ہیں** جس کا نام `terrarium` ہے آپ کے پروجیکٹ کے لیے - **ٹریریم ڈائریکٹری میں جاتی ہیں** - **ایک خالی `index.html` فائل بناتی ہیں** - **فائل کو Visual Studio Code میں ایڈیٹنگ کے لیے کھولتی ہیں** > 💡 **پرو ٹپ**: فائل کا نام `index.html` ویب ڈیولپمنٹ میں خاص اہمیت رکھتا ہے۔ جب کوئی ویب سائٹ وزٹ کرتا ہے، تو براؤزرز خود بخود `index.html` کو بطور ڈیفالٹ صفحہ دکھانے کے لیے تلاش کرتے ہیں۔ اس کا مطلب ہے کہ ایک URL جیسے `https://mysite.com/projects/` خود بخود `projects` فولڈر سے `index.html` فائل کو پیش کرے گا بغیر URL میں فائل کا نام بتائے۔ ## 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> Heading"] G --> I["<div> Containers"] G --> J["<img> Images"] style A fill:#e1f5fe style B fill:#f3e5f5 style C fill:#fff3e0 style G fill:#e8f5e8 ``` آئیے وہ ضروری بنیاد شامل کریں جو ہر HTML دستاویز کو چاہیے۔ ### DOCTYPE اعلان اور روٹ عنصر کسی بھی HTML فائل کی پہلی دو لائنیں براؤزر کے لیے دستاویز کا "تعارف" ہوتی ہیں: ```html <!DOCTYPE html> <html></html> ``` **یہ کوڈ کیا کرتا ہے:** - **دستاویز کی قسم HTML5 کے طور پر اعلان کرتا ہے** `<!DOCTYPE html>` استعمال کرتے ہوئے - **روٹ `<html>` عنصر بناتا ہے** جو تمام صفحہ مواد کو رکھے گا - **جدید ویب معیارات قائم کرتا ہے** مناسب براؤزر رینڈرنگ کے لیے - **مختلف براؤزرز اور ڈیوائسز پر مستقل ڈسپلے کو یقینی بناتا ہے** > 💡 **VS Code ٹپ**: VS Code میں کسی بھی HTML ٹیگ پر ہوور کریں تاکہ MDN Web Docs سے مددگار معلومات دیکھ سکیں، بشمول استعمال کی مثالیں اور براؤزر مطابقت کی تفصیلات۔ > 📚 **مزید سیکھیں**: 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 پکسل چوڑا کرنے پر مجبور کرے گا، ریسپانسیو ڈیزائن کو خراب کر دے گا! [ویوپورٹ کی صحیح ترتیب](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) کے بارے میں مزید جانیں۔ ## دستاویز کا باڈی بنانا HTML دستاویز کا `` عنصر آپ کے ویب صفحے کے تمام نظر آنے والے مواد کو رکھتا ہے – وہ سب کچھ جو صارفین دیکھیں گے اور اس کے ساتھ تعامل کریں گے۔ جبکہ `` سیکشن نے براؤزر کو ہدایات فراہم کیں، `` سیکشن اصل مواد رکھتا ہے: ٹیکسٹ، تصاویر، بٹن، اور دیگر عناصر جو آپ کا یوزر انٹرفیس بناتے ہیں۔ آئیے باڈی ڈھانچہ شامل کریں اور سمجھیں کہ 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 اسٹائلنگ کے لیے مستقل کلاس ناموں کا اطلاق کرتا ہے** اگلے سبق میں - **ہر پودے کی تصویر کو منفرد IDs تفویض کرتا ہے** بعد میں JavaScript انٹریکشن کے لیے - **تصاویر فولڈر کی طرف اشارہ کرنے والے صحیح فائل راستے شامل کرتا ہے** > 🤔 **اس پر غور کریں**: نوٹ کریں کہ تمام تصاویر کے پاس فی الحال ایک ہی alt ٹیکسٹ "plant" ہے۔ یہ رسائی کے لیے مثالی نہیں ہے۔ اسکرین ریڈر صارفین "plant" کو 14 بار سنیں گے بغیر یہ جانے کہ ہر تصویر کون سا مخصوص پودا دکھاتی ہے۔ کیا آپ ہر تصویر کے لیے بہتر، زیادہ وضاحتی alt ٹیکسٹ کے بارے میں سوچ سکتے ہیں؟ > 📝 **HTML عنصر کی اقسام**: `
` عناصر "بلاک لیول" ہوتے ہیں اور مکمل چوڑائی لیتے ہیں، جبکہ `` عناصر "ان لائن" ہوتے ہیں اور صرف ضروری چوڑائی لیتے ہیں۔ آپ کے خیال میں کیا ہوگا اگر آپ ان تمام `
` ٹیگز کو `` ٹیگز میں تبدیل کر دیں؟ ### 🔄 **تعلیمی جائزہ** **ڈھانچہ سمجھنا**: اپنے HTML ڈھانچے کا جائزہ لینے کے لیے ایک لمحہ نکالیں: - ✅ کیا آپ اپنے لے آؤٹ میں مرکزی کنٹینرز کی شناخت کر سکتے ہیں؟ - ✅ کیا آپ سمجھتے ہیں کہ ہر تصویر کے پاس منفرد ID کیوں ہے؟ - ✅ آپ `plant-holder` divs کے مقصد کو کیسے بیان کریں گے؟ **بصری معائنہ**: اپنے HTML فائل کو براؤزر میں کھولیں۔ آپ کو دیکھنا چاہیے: - پودوں کی تصاویر کی ایک بنیادی فہرست - تصاویر دو کالموں میں منظم - سادہ، بغیر اسٹائل کا لے آؤٹ **یاد رکھیں**: یہ سادہ ظاہری شکل بالکل وہی ہے جو HTML کو CSS اسٹائلنگ سے پہلے نظر آنا چاہیے! اس مارک اپ کے اضافے کے ساتھ، پودے اسکرین پر ظاہر ہوں گے، حالانکہ وہ ابھی تک پالش نہیں لگیں گے – یہی کام CSS کا ہے اگلے سبق میں! فی الحال، آپ کے پاس ایک مضبوط HTML بنیاد ہے جو آپ کے مواد کو صحیح طریقے سے منظم کرتی ہے اور رسائی کے بہترین طریقوں کی پیروی کرتی ہے۔ ## رسائی کے لیے سیمینٹک HTML کا استعمال سیمینٹک HTML کا مطلب ہے HTML عناصر کو ان کے معنی اور مقصد کی بنیاد پر منتخب کرنا، نہ کہ صرف ان کی ظاہری شکل پر۔ جب آپ سیمینٹک مارک اپ استعمال کرتے ہیں، تو آپ اپنے مواد کی ساخت اور معنی کو براؤزرز، سرچ انجنز، اور اسسٹیو ٹیکنالوجیز جیسے اسکرین ریڈرز کے ساتھ بات چیت کرتے ہیں۔ ```mermaid flowchart TD A[Need to add content?] --> B{What type?} B -->|Main heading| C["

"] B -->|Subheading| D["

,

, etc."] B -->|Paragraph| E["

"] B -->|List| F["

    ,
      "] B -->|Navigation| G["