بنیادی HTML کوڈ کو سمجھنے کے 5 اقدامات۔

بنیادی HTML کوڈ کو سمجھنے کے 5 اقدامات۔

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





ہم زبان کی کچھ بنیادی باتیں دیکھنے جا رہے ہیں ، بشمول ایچ ٹی ایم ایل کیا ہے ، کچھ بنیادی تصورات ، اور یہ دوسری زبانوں کے ساتھ کیسے بات چیت کرتا ہے۔ اس کو 'ڈمی کے لیے HTML' کریش کورس سمجھیں۔





HTML بنیادی باتیں: HTML کیا ہے؟

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





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

اگرچہ یہ آسان ہے ، ایچ ٹی ایم ایل ویب کے ہر صفحے کی ریڑھ کی ہڈی پر ہے۔ یہ اس بات کا ذمہ دار ہے کہ جو متن جرات مندانہ ظاہر ہوتا ہے ، تصاویر شامل کرتا ہے ، اور دوسرے صفحات سے جوڑتا ہے۔ ہمارے پاس ایک HTML سوالات ہیں جو مزید وضاحت کرتے ہیں۔



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

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





مرحلہ 1: ٹیگز کے تصور کو سمجھنا۔

HTML ایک سسٹم استعمال کرتا ہے۔ ٹیگز دستاویز کے مختلف عناصر کی درجہ بندی کرنا۔

زیادہ تر ٹیگ جوڑے میں آتے ہیں تاکہ متاثرہ متن کو اپنے اندر لپیٹ سکیں۔ یہاں ایک سادہ سی مثال ہے (





ٹیگ ٹیکسٹ بناتا ہے۔ جرات مندانہ ؛ ہم ایک لمحے میں اس پر مزید بات کریں گے۔)

This is some bold text .

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

میں کیسے جان سکتا ہوں کہ فون نمبر مفت میں کس کا ہے؟

تاہم ، تمام ٹیگز کا جوڑا نہیں ہوتا ہے۔ کچھ HTML عناصر ، کہلاتے ہیں۔ خالی عناصر ، کوئی مواد نہیں ہے اور وہ خود ہی موجود ہیں۔ ایک مثال ہے۔


ٹیگ ، جو ایک لائن بریک ہے۔ آپ سلیش شامل کرکے ایسے ٹیگز کو 'بند' کرسکتے ہیں (جیسے۔


) لیکن یہ سختی سے ضروری نہیں ہے۔

مرحلہ 2: کنکال ایچ ٹی ایم ایل لے آؤٹ۔

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

  • ہر HTML دستاویز کا آغاز لازمی طور پر | _+_ | سے ہونا چاہیے۔ خود کو اس طرح کا اعلان کرنے کے لئے. اس طرح ، اس کا اختتامی ٹیگ ، | _+_ | ، ایک HTML فائل میں آخری آئٹم ہے۔
  • اگلا ، | _+_ | سیکشن میں پیج ٹائٹل ، پیج پر چلنے والی مختلف سکرپٹ جیسی معلومات شامل ہیں۔ جیسا کہ نام سے پتہ چلتا ہے ، یہ عام طور پر ابتدائی | _+_ | کے بعد آتا ہے۔ ٹیگ. آخری صارف ان ٹیگز میں زیادہ مواد نہیں دیکھتا ہے۔
  • آخر میں ، | _+_ | ٹیگ اس صفحے کا متن رکھتا ہے جسے قاری دیکھتا ہے (مزید بہت کچھ)۔ یہاں آپ کو تصاویر ، لنکس اور بہت کچھ ملے گا۔

جب سے

سیکشن ایک HTML دستاویز کا بڑا حصہ بناتا ہے ، ہماری باقی واک تھرو ان عناصر کو دیکھتی ہے جو اس سے متعلق ہیں۔

مرحلہ 3: فارمیٹنگ کے لیے بنیادی HTML ٹیگز۔

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

اگر یہ ٹیگز کافی بنیادی لگتے ہیں تو یاد رکھیں کہ ایچ ٹی ایم ایل کو 1993 میں بنایا گیا تھا۔

سادہ ٹیکسٹ فارمیٹنگ۔

ایچ ٹی ایم ایل بنیادی ٹیکسٹ سٹائل کی حمایت کرتا ہے جیسا کہ آپ مائیکروسافٹ ورڈ میں تلاش کریں گے:

  • | _+_ | ٹیگ متن بناتے ہیں۔ جرات مندانہ .
  • | _+_ | ٹیگز (جس کا مطلب ہے 'زور')۔ ترچھا کرنا متن

ایچ ٹی ایم ایل پرانے کو بھی سپورٹ کرتا ہے۔

بولڈ کے لیے ٹیگ اور

اطالوی کے لیے تاہم ، اوپر والے کو استعمال کرنا افضل ہے۔

مختصرا،

اور

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

پیراگراف اور دیگر تقسیم

HTML کی

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

کی

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

آپ اپنی دستاویز میں ہیڈر شامل کر سکتے ہیں اور

کے ذریعے

ٹیگز. H1 سب سے اہم ہیڈر ہے ، جبکہ H6 کم سے کم اہم ہے۔ تقریبا ہر MakeUseOf مضمون معلومات کو منظم کرنے کے لیے H2 اور H3 ہیڈر استعمال کرتا ہے۔

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

ایک لائن بریک شامل کرنے کے لیے۔

یہاں ایک مثال ہے جو ان سب کو استعمال کرتی ہے:

مرحلہ 4: تصاویر داخل کرنا

تصاویر زیادہ تر ویب صفحات کا ایک اہم حصہ ہیں۔ آپ انہیں HTML کے ساتھ آسانی سے شامل کر سکتے ہیں ، اور یہاں تک کہ ان کے لیے مختلف خصوصیات بھی مقرر کر سکتے ہیں۔

آپ تصویر کا استعمال کرتے ہوئے داخل کرتے ہیں۔

ٹیگ. اس کے ساتھ جوڑنا

وصف آپ کو یہ بتانے دیتا ہے کہ آپ تصویر کو کہاں سے لوڈ کرنا چاہتے ہیں۔

کی ایک اور اہم صفت۔

آئی ایس او ونڈوز 7 سے بوٹ ایبل یو ایس بی بنائیں۔

ٹیگز ہے

. Alt متن آپ کو اسکرین ریڈرز کے لیے تصویر کی وضاحت کرنے کی اجازت دیتا ہے یا اگر تصویر ٹھیک طرح سے لوڈ نہیں ہوتی ہے۔ آپ کسی تصویر کو اس کے الٹ ٹیکسٹ کو دیکھنے کے لیے ماؤس کرسکتے ہیں۔

کا استعمال کرتے ہیں

اور




تصویر پکسلز کی تعداد بتانے کے لیے عناصر پر ظاہر ہوتا ہے۔

یہ سب ایک ساتھ رکھو ، اور ایک تصویر کا ٹیگ اس طرح لگتا ہے:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



ورلڈ وائڈ ویب دوسرے صفحات کے لنکس کے بغیر زیادہ ویب نہیں ہوگی۔ کا استعمال کرتے ہوئے

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

کے اندر

src

ٹیگ ،

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

alt

تھوڑا سا متن شامل کرنے کا عنصر جو ظاہر ہوتا ہے جب کوئی لنک پر گھومتا ہے۔

ایک بنیادی لنک اس طرح لگتا ہے:

width

کی

height

ٹیگ میں بہت سے دوسرے ممکنہ عناصر ہیں ، لیکن ہم یہاں ان میں غوطہ نہیں لگائیں گے۔

ایچ ٹی ایم ایل سی ایس ایس اور جاوا اسکرپٹ کے ساتھ کیسے جڑتا ہے۔

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

لیکن اب ، ہمارے پاس اور بھی بہت کچھ ہے۔ CSS (Cascading Style Sheets) ایک ایسی زبان ہے جو یہ بیان کرنے کے لیے استعمال ہوتی ہے کہ HTML میں آپ نے جو متن تیار کیا ہے وہ کیسا ہونا چاہیے۔ یاد رکھیں

Dr. Phil

ٹیگ جس پر ہم نے بحث کی؟ اس (اور دیگر ٹیگز) کے اندر ، آپ a کی وضاحت کر سکتے ہیں۔

وصف. پھر ، آپ کے ساتھ سی ایس ایس دستاویز میں ، آپ اس کے لیے ہدایات لکھ سکتے ہیں۔

دیکھنا چاہیے.

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

جاوا اسکرپٹ۔

ہم نے دیکھا ہے کہ HTML مواد کی وضاحت کرتا ہے اور CSS ظاہری شکل کا تعین کرتا ہے۔ جاوا اسکرپٹ ، ویب کے لیے اہم تینوں کا حتمی رکن ، ویب صفحات کو ہر بار نیا صفحہ لوڈ کیے بغیر لوگوں کے اعمال کا جواب دینے کی اجازت دیتا ہے۔

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

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

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

ایچ ٹی ایم ایل کا ارتقاء۔

یہ نوٹ کرنا ضروری ہے کہ HTML جامد نہیں ہے۔ ایچ ٹی ایم ایل کئی نظرثانیوں سے گزر چکا ہے ، حال ہی میں ایچ ٹی ایم ایل 5۔

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

href

اور

title

(وہ سکرول اور فلیش ٹیکسٹ بالترتیب) 1990 کی دہائی کی ویب سائٹ ڈیزائن میں عام طور پر دیکھا جاتا ہے۔ اس لیے ذہن میں رکھو کہ معیار وقت کے ساتھ بدلتے رہتے ہیں۔

تھوڑا سا ایچ ٹی ایم ایل کا علم ایک طویل سفر طے کرتا ہے۔

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

ڈیجیٹل ٹیلی ویژن اینٹینا بنانے کا طریقہ

مزید جاننے کے لیے ، اپنی ویب ڈویلپمنٹ کی مہارت کو ضروری ٹولز سے اپ گریڈ کریں اور پھر چیک کریں۔ اپنی پہلی ویب سائٹ کو کس طرح ڈیزائن کریں اس کے بارے میں ہماری گائیڈ۔ .

تصویری کریڈٹ: بیلیایوسکی/ ڈپازٹ فوٹو۔

بانٹیں بانٹیں ٹویٹ ای میل۔ اپنے ورچوئل باکس لینکس مشینوں کو سپر چارج کرنے کے 5 نکات۔

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

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

بین MakeUseOf میں ڈپٹی ایڈیٹر اور آن بورڈنگ منیجر ہیں۔ اس نے 2016 میں مکمل وقت لکھنے کے لیے اپنی آئی ٹی نوکری چھوڑ دی اور کبھی پیچھے مڑ کر نہیں دیکھا۔ وہ سات سالوں سے ٹیک ٹیوٹوریلز ، ویڈیو گیم کی سفارشات اور ایک پیشہ ور مصنف کی حیثیت سے بہت کچھ کر رہا ہے۔

بین سٹیگنر سے مزید

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

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

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