ويب ڊولپمينٽ ڪورس ڪلاس 2
اڄ اسان پڙھنداسين
ويب ڊولپمينٽ ڪورس سکڻ لاء ڪھڙي سافٽ ويئر تي ڪوڊ لکڻ.
ان لاء سڀ کان پھريان پيج جي آخر ۾ ڏنل لنڪس تي ڪلڪ ڪريو ۽ VS CODE ڊائونلوڊ ڪيو
پھريان پنھنجي ليپ ٽاپ يا ڪمپيوٽر تي ونڊوز چيڪ ڪريو تہ ڪھڙو ونڊوز انسٽال ٿيل آھي .
ھڪ X64 ھوندي آھي ۽ ٻي x86 اگر اوھان جي ونڊوز x64 آھي تہ x64 وارو vs code ڊائونلوڊ ڪيو اگر اوھان جي ونڊوز x86 آھي تہ x86 وارو سيٽ اپ ڊائونلوڊ ڪيو.
VS Code Settings
انسٽال کان بعد vs code سيٽنگ ڪريو مثال
- فائل ۾ وڃي AUTO SAVE تي ڪلڪ ھڻي ڇڏيو ان سان اوھان جيڪو بہ ڪم ڪندئو اھي پاڻ ئي سيوو ٿي ويندو.
- پسنديدہ ٿيم انسٽال ڪرڻ
- لائيو پرويو ايڪسنٽيشن انسٽال ڪرڻ
HTML ڇا آھي؟
HTML ڇا آهي؟
HTML (HyperText Markup Language) هڪ مارڪ اپ زبان آهي، جيڪا ويب صفحن کي ٺاهڻ ۽ ترتيب ڏيڻ لاءِ استعمال ڪئي وڃي ٿي. HTML ويب پيجز جو بنيادي ڍانچو ٺاهڻ ۾ مدد ڪري ٿو، جتي مواد (جهڙوڪ متن، تصويرون، لنڪس، ۽ ٻيا مواد) صحيح ترتيب ۾ ڏيکاريا وڃن ٿا. HTML ٽيڪنالاجي جو مقصد ويب براؤزرز کي مواد جو ڍانچو ڏيکارڻ آهي.
HTML جي تاريخ:
HTML جو آغاز 1991 ۾ ٽِم برنرز لي (Tim Berners-Lee) پاران ڪيو ويو، جنهن دنيا جي پهرين ويب سائيٽ جوڙي ۽ ان ۾ HTML جو استعمال ڪيو. HTML جو مقصد انٽرنيٽ تي معلومات کي هڪ خاص ترتيب ۾ ۽ آسان بڻائڻ هو، جيئن صارفين ان معلومات تائين آساني سان پهچي سگهن.
HTML جي اهميت ۽ استعمال:
- ويب پيج جو ڍانچو: HTML ويب پيجز جو بنيادي ڍانچو مهيا ڪري ٿو. اهو ويب پيج تي مواد کي ترتيب ڏيڻ، ٽيڪسٽ، تصويرون، وڊيوز ۽ ٻين موادن کي براؤزر ۾ صحيح طرح ڏيکارڻ لاءِ استعمال ڪيو ويندو آهي.
- لينڪس ۽ نيگيگيسن: HTML ۾ لنڪس ٺاهڻ لاءِ استعمال ٿيندڙ ٽيگس کي استعمال ڪندي، توهان هڪ پيج کان ٻئي پيج ڏانهن منتقل ٿي سگهو ٿا. اهو انٽرنيٽ تي نيويگيٽ ڪرڻ لاءِ اهم آهي.
- مارڪ اپ ۽ اسٽرڪچرنگ: HTML مواد کي ترتيب ڏيڻ لاءِ مارڪ اپ ۽ اسٽرڪچرنگ جو عمل آهي، جنهن ۾ ٽيگس (جهڙوڪ , ,
- SEO (Search Engine Optimization): HTML جي صحيح ۽ مناسب استعمال سان ويب سائيٽ کي سرچ انجنز (جهڙوڪ گوگل) ۾ بهتر رينڪنگ ملڻ ۾ مدد ملندي آهي.
- ملٽي ميڊيا انضمام: HTML ۾ وڊيوز، آڊيو فائلز، ۽ تصويرن کي ويب پيجز ۾ شامل ڪرڻ لاءِ ٽيگس ۽ ايٽريبيوٽس استعمال ٿينديون آهن.
HTML ڪڏهن ڪم اچي ٿو؟
- ويب ڊولپمينٽ: HTML ويب ڊولپمينٽ ۾ اهم ڪردار ادا ڪري ٿو، جتي ان جي مدد سان ويب پيجز جو ڍانچو ٺاهيو ويندو آهي.
- تعليمي مواد: HTML انٽرنيٽ تي تعليمي مواد، گائيڊز، دستاويزات ۽ ڪتابن جي تشهير ۾ مدد ڪري ٿو.
- آن لائن اسٽورز ۽ بزنس: HTML آن لائن اسٽورن ۽ بزنس ويب سائيٽس ۾ اهم آهي جتي پروڊڪٽس، سروسز ۽ ٻين موادن جي فهرست ٺاهڻ ۾ مدد ملي ٿي.
- معلومات جو تبادلو: HTML ۾ ٺهيل ويب پيجز معلومات جي بنيادي ذريعي هوندا آهن جيڪي انٽرنيٽ تي ماڻهن تائين پهچائيندا آهن.
نتيجو:
HTML ويب ڊولپمينٽ جو بنيادي حصو آهي جيڪو ويب پيجز جو ڍانچو مهيا ڪري ٿو. ان جي تاريخ انٽرنيٽ جي شروعات سان ڳنڍيل آهي ۽ اهو ويب سائيٽن جي ترقي لاءِ هڪ اهم اوزار آهي. HTML جو استعمال ڪنهن به ويب پيج جي جوڙجڪ ۽ فنڪشن لاءِ لازمي آهي، جتي مواد کي ترتيب ڏيڻ ۽ آن لائن صارفين لاءِ فراهم ڪرڻ اهميت رکندو آهي.
<!DOCTYPE html>
- وضاحت:
هي لائن HTML5 ڊاڪيومنٽ جي قسم (doctype) کي ظاهر ڪري ٿي. - ڪم: هي لائن براؤزر کي ٻڌائي ٿي ته اهو هڪ HTML5 ڊاڪيومنٽ آهي، جنهن سان براؤزر HTML5 ڪي خاصيتون صحيح نموني سان ڏيکاري ٿو.
<html lang="en">
- وضاحت:
هي HTML ڊاڪيومنٽ جي شروعات آهي. <html>ٽيگ: ويب صفحي جي بنيادي ڍانچي کي شروع ڪرڻ لاءِ استعمال ڪيو ويندو آهي.lang="en": هي اشارو آهي ته ويب پيج جو مواد انگريزي (English) ۾ آهي. “en” انگريزي لاءِ آهي، ۽ جيڪڏهن توهان سنڌي يا ٻين ٻولين ۾ مواد رکندا، ته ان زبان جو ڪوڊ (جهڙوڪ “sd” سنڌي لاءِ) رکڻو پوندو.
<head>
- وضاحت:
<head>ٽيگ ۾ ويب پيج بابت ميٽا معلومات رکڻ لاءِ استعمال ڪيو ويندو آهي، جهڙوڪ: - ويب پيج جو عنوان.
- ڪردار سيٽنگس (Character Encoding).
- ۽ ٻين معلوماتي معلومات (جهڙوڪ لنڪس، اسڪرپٽس وغيره).
<meta charset="UTF-8">
- وضاحت:
هي ميٽا ٽيگ ويب پيج ۾ ڪردار جي اينڪوڊنگ کي ترتيب ڏيڻ لاءِ استعمال ڪيو ويندو آهي. charset="UTF-8": UTF-8 اينڪوڊنگ جو مطلب آهي ته ويب پيج تي سڀني قسم جي ڪيڊنگ، جيئن اردو، سنڌي، انگريزي وغيره، کي درست نموني سان ڏيکارڻ لاءِ اهو سيٽنگ آهي.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- وضاحت:
هي ميٽا ٽيگ ويب پيج کي موبائل ڊوائيسز تي صحيح طور تي ريسپانسو (responsive) بڻائڻ لاءِ استعمال ٿيندو آهي. name="viewport": اهو ويب پيج جو ڏيک ۽ سائيز ڊوائيس جي اسڪرين مطابق ترتيب ڏيندو آهي.content="width=device-width, initial-scale=1.0": هن جو مطلب آهي:width=device-width: ويب پيج جو ويڊٿ ڊوائيس جي اسڪرين جي ويڊٿ مطابق هوندو.initial-scale=1.0: ويب پيج کي شروعات ۾ 100٪ اسڪيل تي ڏيکارڻ لاءِ.
<title>Document</title>
- وضاحت:
هي ٽيگ ويب پيج جو عنوان ظاهر ڪندو آهي، جيڪو براؤزر جي ٽيب ۾ ڏيکاريندو آهي. <title>ٽيگ ۾ جيڪو مواد رکيو ويندو آهي، اهو ويب پيج جو عنوان ٿيندو. هن مثال ۾، “Document” رکيو آهي، پر ان کي توهان پنهنجي ويب پيج جي مواد مطابق بدلائي سگهو ٿا.
</head>
- وضاحت:
هي لائن<head>ٽيگ جو اختتام آهي.
<body>
- وضاحت:
هن ٽيگ ۾ ويب پيج جو اصلي مواد رکيو ويندو آهي. <body>ٽيگ ۾ سڀ مواد، جهڙوڪ ٽيڪسٽ، تصويرون، وڊيوز، ۽ ٻيا HTML ٽيگ رکيا ويندا آهن جيڪي صارف کي نظر ايندا آهن.
</body>
- وضاحت:
هي لائن<body>ٽيگ جو اختتام آهي.
</html>
- وضاحت:
هي لائن HTML ڊاڪيومنٽ جو اختتام آهي.
اهم نشانين جو بيان:
<html>: HTML ڊاڪيومنٽ جي شروعات جو نشان.<head>: ويب پيج جي ميٽا معلومات رکڻ لاءِ استعمال ٿيندڙ ٽيگ.<meta>: ويب پيج بابت اضافي معلومات رکڻ لاءِ استعمال ٿيندڙ ٽيگ.<title>: ويب پيج جو عنوان ظاهر ڪرڻ لاءِ ٽيگ.<body>: ويب پيج جو اصلي مواد رکڻ لاءِ ٽيگ.<!DOCTYPE>: ويب پيج جي قسم کي ٻڌائڻ لاءِ استعمال ٿيندڙ ٽيگ.
مثال:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text on my first web page.</p>
</body>
</html>وضاحت:
- هن مثال ۾
<h1>ٽيگ ۾ ويب پيج تي “Welcome to My Web Page” لکيو آهي جيڪو وڏي Heading (عنوان) طور ظاهر ٿيندو. <p>ٽيگ ۾ هڪ پارگراف آهي جنهن ۾ “This is a paragraph of text on my first web page.” لکيو آهي.
