17 سادہ HTML کوڈ کی مثالیں جو آپ 10 منٹ میں سیکھ سکتے ہیں۔

17 سادہ HTML کوڈ کی مثالیں جو آپ 10 منٹ میں سیکھ سکتے ہیں۔

اگرچہ جدید ویب سائٹس عام طور پر صارف دوست انٹرفیس کے ساتھ بنائی جاتی ہیں ، کچھ بنیادی HTML کو جاننا مفید ہے۔ اگر آپ درج ذیل 17 ایچ ٹی ایم ایل مثال کے ٹیگز (اور چند ایکسٹراز) جانتے ہیں تو ، آپ شروع سے ایک بنیادی ویب پیج بنا سکیں گے یا ورڈپریس جیسی ایپ کے ذریعہ بنائے گئے کوڈ کو ٹیوک کریں گے۔





ہم نے بیشتر ٹیگز کے لیے آؤٹ پٹ کے ساتھ HTML کوڈ کی مثالیں فراہم کی ہیں۔ اگر آپ انہیں عمل میں دیکھنا چاہتے ہیں تو ، مضمون کے آخر میں نمونہ HTML فائل ڈاؤن لوڈ کریں۔ آپ اس کے ساتھ ٹیکسٹ ایڈیٹر میں کھیل سکتے ہیں اور اسے براؤزر میں لوڈ کر کے دیکھ سکتے ہیں کہ آپ کی تبدیلیاں کیا کرتی ہیں۔



1۔

آپ کو ہر HTML دستاویز کے شروع میں اس ٹیگ کی ضرورت ہوگی جو آپ بناتے ہیں۔ یہ یقینی بناتا ہے کہ براؤزر جانتا ہے کہ یہ HTML پڑھ رہا ہے ، اور یہ کہ HTML5 ، تازہ ترین ورژن کی توقع کرتا ہے۔





اگرچہ یہ اصل میں ایچ ٹی ایم ایل ٹیگ نہیں ہے ، پھر بھی یہ جاننا اچھا ہے۔

2۔

یہ ایک اور ٹیگ ہے جو براؤزر کو بتاتا ہے کہ یہ HTML پڑھ رہا ہے۔ ٹیگ DOCTYPE ٹیگ کے بعد سیدھا ہوجاتا ہے ، اور آپ اسے اپنی فائل کے آخر میں ٹیگ کے ساتھ بند کردیتے ہیں۔ آپ کی دستاویز میں باقی سب کچھ ان ٹیگز کے درمیان جاتا ہے۔



3۔

ٹیگ آپ کی فائل کا ہیڈر سیکشن شروع کرتا ہے۔ جو سامان یہاں جاتا ہے وہ آپ کے ویب پیج پر ظاہر نہیں ہوتا ہے۔ اس کے بجائے ، اس میں سرچ انجنوں کے لیے میٹا ڈیٹا اور آپ کے براؤزر کے لیے معلومات شامل ہیں۔

بنیادی صفحات کے لیے ، ٹیگ میں آپ کا عنوان ہوگا ، اور یہ اس کے بارے میں ہے۔ لیکن کچھ اور چیزیں ہیں جنہیں آپ شامل کر سکتے ہیں ، جنہیں ہم ایک لمحے میں ختم کر دیں گے۔



چار۔

یہ ٹیگ آپ کے صفحے کا عنوان متعین کرتا ہے۔ آپ کو صرف اپنے عنوان کو ٹیگ میں ڈالنے اور اسے بند کرنے کی ضرورت ہے (میں نے ہیڈر ٹیگ بھی شامل کیے ہیں ، سیاق و سباق دکھانے کے لیے):


My Website

یہ وہ نام ہے جو براؤزر میں کھلنے پر ٹیب کے عنوان کے طور پر ظاہر ہوگا۔



5۔

ٹائٹل ٹیگ کی طرح ، میٹا ڈیٹا کو آپ کے صفحے کے ہیڈر ایریا میں رکھا جاتا ہے۔ میٹا ڈیٹا بنیادی طور پر سرچ انجنوں کے ذریعہ استعمال ہوتا ہے ، اور آپ کے صفحے پر کیا ہے اس کے بارے میں معلومات ہے۔ بہت سے مختلف میٹا فیلڈز ہیں ، لیکن یہ کچھ عام طور پر استعمال ہوتے ہیں:

  • تفصیل : آپ کے صفحے کی بنیادی تفصیل۔
  • مطلوبہ الفاظ : مطلوبہ الفاظ کا انتخاب آپ کے صفحے پر لاگو ہوتا ہے۔
  • مصنف : آپ کے صفحے کے مصنف۔
  • ویو پورٹ : اس بات کو یقینی بنانے کے لیے ایک ٹیگ کہ آپ کا صفحہ تمام آلات پر اچھا لگے۔

یہاں ایک مثال ہے جو اس صفحے پر لاگو ہوسکتی ہے:




'ویو پورٹ' ٹیگ میں ہمیشہ 'width = device-width ، initial-scale = 1.0' ہونا چاہیے تاکہ یہ یقینی بنایا جا سکے کہ آپ کا صفحہ موبائل اور ڈیسک ٹاپ ڈیوائسز پر اچھی طرح دکھاتا ہے۔

6۔

ہیڈر سیکشن بند کرنے کے بعد ، آپ جسم پر پہنچ جاتے ہیں۔ آپ اسے ٹیگ کے ساتھ کھولیں ، اور اسے ٹیگ کے ساتھ بند کریں۔ یہ آپ کی فائل کے آخر میں ، ٹیگ سے ٹھیک پہلے جاتا ہے۔

آپ کے ویب پیج کا تمام مواد ان ٹیگز کے درمیان جاتا ہے۔ یہ اتنا ہی آسان ہے جتنا کہ لگتا ہے:


Everything you want displayed on your page.

7۔

تھوڑا کم بڑا ہیڈر۔


ذیلی ہیڈر

نتیجہ:

جیسا کہ آپ دیکھ سکتے ہیں ، وہ ہر سطح پر چھوٹے ہو جاتے ہیں۔

8۔

پیراگراف ٹیگ ایک نیا پیراگراف شروع کرتا ہے۔ یہ عام طور پر دو لائن بریکس داخل کرتا ہے۔

مثال کے طور پر ، پچھلی لائن اور اس ایک کے درمیان وقفے پر دیکھیں۔ یہی ہے کہ ایک

ٹیگ کرے گا.

Your first paragraph.


Your second paragraph.

نتیجہ:

آپ کا پہلا پیراگراف۔

آپ کا دوسرا پیراگراف۔

آپ بھی سی ایس ایس سٹائل استعمال کریں۔ آپ کے پیراگراف ٹیگز میں ، اس طرح جو متن کا سائز تبدیل کرتا ہے:

This is 50% larger text.

نتیجہ:

9۔

لائن بریک ٹیگ ایک سنگل لائن بریک داخل کرتا ہے:

The first line.

The second line (close to the first one).

نتیجہ:

اسی طرح کام کرنا ہے۔

ٹیگ. یہ آپ کے صفحے پر افقی لکیر کھینچتا ہے اور متن کے حصوں کو الگ کرنے کے لیے اچھا ہے۔

10۔

یہ ٹیگ اہم متن کی وضاحت کرتا ہے۔ عام طور پر ، اس کا مطلب ہے کہ یہ جرات مندانہ ہوگا۔ تاہم ، بنانے کے لیے CSS کا استعمال ممکن ہے۔ متن مختلف طریقے سے دکھاتا ہے۔

کمپیوٹر پر براہ راست ٹی وی دیکھنے کا طریقہ

تاہم ، آپ محفوظ طریقے سے استعمال کرسکتے ہیں۔ جرات مندانہ متن کے لیے

Very important things you want to say.

نتیجہ:

بہت اہم باتیں جو آپ کہنا چاہتے ہیں۔

اگر آپ اس سے واقف ہیں۔ بولڈ ٹیکسٹ کے لیے ٹیگ ، آپ اب بھی اسے استعمال کر سکتے ہیں۔ اس بات کی کوئی گارنٹی نہیں ہے کہ یہ ایچ ٹی ایم ایل کے مستقبل کے ورژن میں کام کرتا رہے گا ، لیکن ابھی کے لیے ، یہ کام کرتا ہے۔

گیارہ.

جیسے۔ اور ، اور متعلقہ ہیں. کی ٹیگ زور دینے والے متن کی نشاندہی کرتا ہے ، جس کا عام طور پر مطلب ہے کہ یہ ترچھی ہو جائے گی۔ ایک بار پھر ، اس بات کا امکان ہے کہ سی ایس ایس زور دینے والے متن کو مختلف انداز میں دکھائے گا۔

An emphasized line.

نتیجہ:

ایک زور دار لائن۔

کی ٹیگ اب بھی کام کرتا ہے ، لیکن ایک بار پھر ، یہ ممکن ہے کہ اسے HTML کے مستقبل کے ورژن میں فرسودہ کردیا جائے۔

12۔

کی ، یا اینکر ، ٹیگ آپ کو لنکس بنانے دیتا ہے۔ ایک سادہ لنک اس طرح لگتا ہے:

MUO پر جائیں۔

'href' وصف لنک کی منزل کی نشاندہی کرتا ہے۔ بہت سے معاملات میں ، یہ ایک اور ویب سائٹ ہوگی۔ یہ ایک فائل بھی ہوسکتی ہے ، جیسے تصویر یا پی ڈی ایف۔

دیگر مفید صفات میں 'ہدف' اور 'عنوان' شامل ہیں۔ ہدف وصف تقریبا exc خصوصی طور پر کسی نئے ٹیب یا ونڈو میں لنک کھولنے کے لیے استعمال کیا جاتا ہے ، جیسے:

Go to MUO in a new tab

نتیجہ:

ایک نئے ٹیب میں MUO پر جائیں۔

'ٹائٹل' وصف ایک ٹول ٹپ بناتا ہے۔ یہ کیسے کام کرتا ہے یہ دیکھنے کے لیے نیچے دیئے گئے لنک پر گھومیں:

Hover over this to see the tool tip

نتیجہ:

ٹول ٹپ دیکھنے کے لیے اس پر گھومیں۔

13۔

اگر آپ اپنے صفحے میں کوئی تصویر سرایت کرنا چاہتے ہیں تو آپ کو تصویر کا ٹیگ استعمال کرنا ہوگا۔ آپ اسے عام طور پر 'src' وصف کے ساتھ استعمال کریں گے۔ یہ تصویر کے ماخذ کی وضاحت کرتا ہے ، جیسے:

نتیجہ:

ڈسکارڈ سرور کیسے تلاش کریں

دیگر صفات دستیاب ہیں ، جیسے 'اونچائی ،' 'چوڑائی ،' اور 'alt'۔ یہ کس طرح نظر آ سکتا ہے:

the name of your image

جیسا کہ آپ توقع کر سکتے ہیں ، 'اونچائی' اور 'چوڑائی' صفات تصویر کی اونچائی اور چوڑائی کو متعین کرتی ہیں۔ عام طور پر ، ان میں سے صرف ایک سیٹ کرنا ایک اچھا خیال ہے تاکہ تصویر صحیح طریقے سے ترازو ہو۔ اگر آپ دونوں کو استعمال کرتے ہیں تو ، آپ ایک کھینچی ہوئی یا خراب تصویر کے ساتھ ختم ہوسکتے ہیں۔

'alt' ٹیگ براؤزر کو بتاتا ہے کہ اگر تصویر ڈسپلے نہیں کی جاسکتی ہے اور کسی بھی تصویر کے ساتھ شامل کرنا اچھا خیال ہے۔ اگر کسی کے پاس خاص طور پر سست کنکشن یا پرانا براؤزر ہے ، تو پھر بھی وہ اس بات کا اندازہ لگا سکتا ہے کہ آپ کے صفحے پر کیا ہونا چاہیے۔

14۔

    آرڈرڈ لسٹ ٹیگ آپ کو آرڈرڈ لسٹ بنانے دیتا ہے۔ عام طور پر ، اس کا مطلب ہے کہ آپ کو ایک نمبر والی فہرست ملے گی۔ فہرست میں ہر آئٹم کو لسٹ آئٹم ٹیگ کی ضرورت ہوتی ہے (

  1. ) ، لہذا آپ کی فہرست اس طرح نظر آئے گی:


    1. First thing

    2. Second thing

    3. Third thing

    نتیجہ:

    1. پہلی چیز
    2. دوسری بات۔
    3. تیسری بات۔

    HTML5 میں ، آپ استعمال کر سکتے ہیں۔

      نمبروں کی ترتیب کو ریورس کرنا اور آپ اسٹارٹ وصف کے ساتھ اسٹارٹ ویلیو سیٹ کر سکتے ہیں۔

      'قسم' وصف آپ کو براؤزر کو بتانے دیتا ہے کہ فہرست کی اشیاء کے لیے کس قسم کی علامت استعمال کی جائے۔ اسے '1 ،' 'A ،' 'a ،' 'I ،' یا 'i' پر سیٹ کیا جا سکتا ہے ، اس طرح اشارہ شدہ علامت کے ساتھ ڈسپلے کرنے کے لیے فہرست ترتیب دے رہا ہے:

        پندرہ.

          غیر منظم فہرست اس کے حکم کردہ ہم منصب سے بہت آسان ہے۔ یہ صرف ایک گولیوں کی فہرست ہے۔


          • First item

          • Second item

          • Third item

          نتیجہ:

          • پہلا آئٹم۔
          • دوسری شے۔
          • تیسری شے۔

          غیر ترتیب شدہ فہرستوں میں 'ٹائپ' صفات بھی ہوتی ہیں ، اور آپ اسے 'ڈسک ،' 'دائرہ ،' یا 'مربع' پر سیٹ کر سکتے ہیں۔

          16۔

          اگرچہ فارمیٹنگ کے لیے ٹیبلز استعمال کرنے پر تضاد کیا جاتا ہے ، بہت سے ایسے وقت ہوتے ہیں جب آپ اپنے صفحے پر معلومات کو تقسیم کرنے کے لیے قطاریں اور کالم استعمال کرنا چاہیں گے۔ ٹیبل کو کام کرنے کے لیے کئی ٹیگز درکار ہوتے ہیں۔ یہاں نمونہ HTML کوڈ ہے:














          1st column 2nd column
          Row 1, column 1 Row 1, column 2
          Row 2, column 1 Row 2, column 2

          کی

          اور
          ٹیگز ٹیبل کے آغاز اور اختتام کی وضاحت کرتے ہیں۔ کیٹیگ ٹیبل کے تمام مواد پر مشتمل ہے۔

          ٹیبل کی ہر قطار a میں بند ہے۔ٹیگ. ہر قطار کے اندر ہر سیل کو یا تو لپیٹ دیا گیا ہے۔کالم ہیڈر کے لیے ٹیگز ، یاکالم ڈیٹا کے لیے ٹیگز۔ آپ کو ہر قطار کے ہر کالم کے لیے ان میں سے ایک کی ضرورت ہے۔

          نتیجہ:

          پہلا کالم۔دوسرا کالم۔
          قطار 1 ، کالم 1۔قطار 1 ، کالم 2۔
          قطار 2 ، کالم 1۔قطار 2 ، کالم 2۔

          17۔

          جب آپ کسی دوسری ویب سائٹ یا شخص کا حوالہ دے رہے ہیں اور آپ اپنی باقی دستاویز سے اقتباس کو الگ کرنا چاہتے ہیں تو بلاک کوٹ ٹیگ استعمال کریں۔ آپ کو صرف بلاک کوٹ ٹیگز کھولنے اور بند کرنے میں اقتباس بند کرنے کی ضرورت ہے۔

          The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.

          نتیجہ:

          ویب جیسا کہ میں نے اس کا تصور کیا ، ہم نے اسے ابھی تک نہیں دیکھا۔ مستقبل اب بھی ماضی سے بہت بڑا ہے۔

          درست فارمیٹنگ جو استعمال کی جاتی ہے اس کا انحصار اس براؤزر پر ہوتا ہے جو آپ استعمال کر رہے ہیں یا اپنی سائٹ کے CSS پر۔ لیکن ٹیگ وہی رہتا ہے۔

          ایچ ٹی ایم ایل کوڈ کے نمونے

          ان 17 ایچ ٹی ایم ایل مثالوں کے ساتھ ، آپ کو ایک سادہ ویب سائٹ بنانے کے قابل ہونا چاہیے۔ آپ ان سب کو ابھی آن لائن ٹیکسٹ ایڈیٹر میں آزما سکتے ہیں تاکہ یہ محسوس کریں کہ وہ کیسے کام کرتے ہیں۔

          ایچ ٹی ایم ایل میں زیادہ کاٹنے کے سبق کے لیے ، کوڈنگ کے لیے کچھ مائیکرو لرننگ ایپس آزمائیں۔ وہ آپ کو کسی بھی وقت تیز کرنے میں مدد کریں گے۔

          بانٹیں بانٹیں ٹویٹ ای میل۔ بنیادی کوڈنگ سیکھنا چاہتے ہیں؟ اپنے فارغ وقت میں 5 بائٹ سائز کے کوڈنگ ایپس آزمائیں۔

          بنیادی کوڈنگ سیکھنا چاہتے ہیں لیکن وقت کم ہے؟ یہ کاٹنے کے سائز کی کوڈنگ ایپس آپ کے مصروف دن میں صرف چند منٹ لگیں گی۔

          اگلا پڑھیں۔           متعلقہ موضوعات۔
          • پروگرامنگ۔
          • ورڈپریس۔
          • ایچ ٹی ایم ایل
          • ویب سازی
          • کوڈنگ ٹیوٹوریل
          مصنف کے بارے میں اینڈی بیٹس۔(221 مضامین شائع ہوئے)

          اینڈی ایک سابق پرنٹ صحافی اور میگزین ایڈیٹر ہیں جو 15 سال تک ٹیکنالوجی کے بارے میں لکھ رہے ہیں۔ اس وقت اس نے بے شمار اشاعتوں میں حصہ ڈالا اور بڑی ٹیک کمپنیوں کے لیے کاپی رائٹنگ کا کام کیا۔ اس نے میڈیا کے لیے ماہر تبصرے بھی فراہم کیے ہیں اور انڈسٹری ایونٹس میں پینل کی میزبانی کی ہے۔

          اینڈی بیٹس سے مزید

          ہماری نیوز لیٹر کو سبسکرائب کریں

          ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

          سبسکرائب کرنے کے لیے یہاں کلک کریں۔