ہائپر ٹیکسٹ مارک اپ لینگویج (ایچ ٹی ایم ایل) ایک فرنٹ اینڈ لینگویج ہے جو کسی ویب سائٹ کو ڈیزائن اور ڈویلپ کرنے کے لیے استعمال ہوتی ہے۔ ایچ ٹی ایم ایل تمام زبانوں کی بنیادی زبان ہے جو جامد یا متحرک ویب صفحات کو ڈیزائن کرنے کے لیے استعمال ہوتی ہے۔ ایچ ٹی ایم ایل کے بہت سے افعال ہیں جو ڈیزائننگ میں درکار ہیں۔ ٹیگ کی مدد سے ، کونیی بریکٹ میں لکھے گئے کمانڈز ، ایک ویب پیج ڈیزائن کیا گیا ہے۔ ایچ ٹی ایم ایل صارف کو اجازت دیتا ہے کہ وہ ٹیکسٹ ایڈیٹر ، مائیکروسافٹ ورڈ ، جیسے ٹیکسٹ ایڈیٹر ، یا کوئی دوسرا عنصر تخلیق یا ترمیم کرے۔ ایچ ٹی ایم ایل کے مندرجات متن ، تصویر ، رنگ ، ڈیزائن وغیرہ ہیں ڈیزائن بہت اہم حصہ ہے کیونکہ یہ متن کو سجانے کے لیے ذمہ دار ہے۔ متن کو ترچھا بنانا متن کو ڈیزائن کرنے کی ایک مثال ہے۔ یہ عنصر صارف کی توجہ پر زور دینے یا چلانے میں اہم ہے۔ اس ٹیوٹوریل میں کچھ مثالیں نمایاں ہیں۔
ضروری اشیاء۔
ایچ ٹی ایم ایل کو ویب سائٹ کی ڈیزائننگ اور ڈویلپمنٹ کے لیے دو ٹولز کی ضرورت ہوتی ہے۔ ایک ایک ٹیکسٹ ایڈیٹر ہے جس میں HTML کوڈ لکھنا ضروری ہے۔ یہ آپ کی رسائی میں کوئی بھی ٹیکسٹ ایڈیٹر ہوسکتا ہے ، یعنی نوٹ پیڈ ، نوٹ پیڈ ++ ، شاندار ، بصری اسٹوڈیو وغیرہ ، دوسرا آپ کے کمپیوٹر پر ایک براؤزر ہے ، گوگل کروم ، انٹرنیٹ ایکسپلورر وغیرہ اس مضمون میں ، ہم نے نوٹ پیڈ اور گوگل کروم. جامد صفحہ ڈیزائن کرنے کے لیے ، آپ کو HTML کی ضرورت ہے اور CSS سٹائل شیٹ کو اسٹائل کرنے کے لیے۔ ان میں سے ہر ایک اس گائیڈ میں مثالوں کے ساتھ استعمال کیا گیا ہے۔
ایچ ٹی ایم ایل فارمیٹ۔
ترچھے متن کے ڈیزائن کی وضاحت کے لیے ، ہم پہلے HTML کے کوڈ کو سمجھتے ہیں۔ ایچ ٹی ایم ایل کوڈ کے دو حصے ہیں۔ ایک سر کا حصہ ہے ، اور دوسرا جسم میں۔ ہم سر کے حصے میں عنوان شامل کرتے ہیں۔ اس ٹائٹل کا نام دراصل پیج کا ٹائٹل ہے۔ اندرونی اسٹائل بھی سر کے جسم کے اندر کی جاتی ہے۔ جبکہ جسم میں متن ، تصویر اور رنگ وغیرہ سے متعلق دیگر تمام ٹیگز شامل ہیں ، اس کے علاوہ ، جو کچھ بھی آپ ایچ ٹی ایم ایل پیج میں شامل کرنا چاہتے ہیں وہ ایچ ٹی ایم ایل کوڈ کے باڈی حصے میں لکھا ہوا ہے۔
< html >
< سر >...</ سر >
< جسم >….</ جسم >
</ html >
نیچے دی گئی تصویر HTML کا نمونہ کوڈ ہے۔ آپ دیکھ سکتے ہیں کہ عنوان کا نام سر کے حصے میں لکھا ہوا ہے۔ ایک ہی وقت میں ، ہم نے ٹیگ کا استعمال کرتے ہوئے HTML کے جسم میں ایک پیراگراف شامل کیا ہے۔
. پھر باڈی ٹیگ اور ایچ ٹی ایم ایل ٹیگز بند ہیں۔
اس نمونے کی پیداوار براؤزر میں دیکھی گئی ہے۔ آپ دیکھ سکتے ہیں کہ عنوان کا نام ٹیب کے نام میں دکھایا گیا ہے ، جسے ہم نے HTML کوڈ کے سر میں اعلان کیا ہے۔
ایچ ٹی ایم ایل کے جسم کے اندر لکھے گئے تمام ٹیگز کے لیے اوپننگ اور کلوزنگ ٹیگز ہیں۔ ایک بار کوڈ کھولنے کے بعد اس کے درمیان متن لکھنے کے بعد اسے بند کرنا ہوگا۔ ٹیگ اس میں سلیش کے ساتھ بند ہے۔ کوڈ کو نوٹ پیڈ فائل میں محفوظ کیا جاتا ہے۔ ایک بات جو ذہن میں رکھنی چاہیے وہ یہ ہے کہ کوڈ کو محفوظ کرتے وقت ٹیکسٹ ایڈیٹر کی فائل کو HTML توسیع کے ساتھ محفوظ کرنا ضروری ہے۔ مثال کے طور پر ، sample.html. پھر آپ دیکھیں گے کہ فائل کو موجودہ براؤزر کے آئیکن کے ساتھ محفوظ کیا گیا ہے جسے آپ اس مقصد کے لیے استعمال کر رہے ہیں۔
یہ HTML میں ڈیزائننگ کا پس منظر تھا۔ اب ہم متن کو ترچھا بنانے کے لیے ایک سادہ سی مثال استعمال کریں گے۔
مثال 1۔
ایک نوٹ پیڈ فائل لیں اور سادہ HTML کوڈ لکھیں جیسا کہ پہلے اس گائیڈ میں بیان کیا گیا ہے۔ جسم کے حصے میں دو لائنوں کا ایک پیراگراف شامل کریں۔ متن کو ترچھا بنانے کے لیے۔ ٹیگ استعمال کریں۔ الفاظ کے شروع میں آپ چاہتے ہیں کہ وہ ترچھی شکل میں ہو۔
< میں > ……</ میں >یہ متن کو ترچھا کرنے کا ٹیگ ہے۔ جیسا کہ آپ نیچے دی گئی تصویر میں دیکھ سکتے ہیں ، شروع میں لکھا ہوا افتتاحی ٹیگ ہے اور اختتامی ٹیگ ہے جسم اور ایچ ٹی ایم ایل بند کریں۔
اب فائل کو محفوظ کریں اور براؤزر میں چلائیں تاکہ فائل کا آؤٹ پٹ دیکھیں۔
آؤٹ پٹ سے ، آپ مشاہدہ کر سکتے ہیں کہ جو جملہ ہم نے کوڈ میں ترچھا بنایا ہے وہ ترچھی شکل میں ہے ، جبکہ پہلا جملہ عام شکل میں ظاہر ہوا۔
مثال 2۔
اس مثال میں ، ہم متن کے پورے جملے کے بجائے ایک مخصوص لفظ کو ترچھی شکل میں بنائیں گے۔ کھولنے اور بند کرنے والے ٹیگز پورے پیراگراف میں استعمال ہوتے ہیں ، جہاں بھی ہم جملے میں متن کو ترچھا بنانا چاہتے ہیں۔
اب ایک بار پھر ، فائل کو محفوظ کریں اور پھر اسے براؤزر میں چلائیں۔ آپ دیکھ سکتے ہیں کہ متن کا کچھ مخصوص حصہ ترچھی شکل میں ہے جسے ہم کوڈ میں ترچھا بنانا چاہتے ہیں۔
مثال 3۔
استعمال کرنے کے علاوہ متن میں ٹیگ ، ایک اور طریقہ موجود ہے کہ متن کو اطالوی شکل میں بنایا جائے۔ یہ متن کے کچھ حصے پر زور دینے کا طریقہ ہے۔ اس ٹیگ میں اوپننگ اور کلوزنگ ٹیگز بھی ہیں۔ نحو اس کے لیے استعمال کیا جاتا ہے
< میں >….</ میں >متن دو ٹیگز کے درمیان لکھا گیا ہے۔ اس مثال میں ، ہم نے اس ٹیگ کو پیراگراف میں دو بار استعمال کیا ہے۔ آئیے ذیل میں رکھے گئے کوڈ کی تصویر دیکھیں۔
دونوں جملوں میں ، ہم نے استعمال کیا ہے۔ ایک بار پیراگراف میں آؤٹ پٹ ایچ ٹی ایم ایل فائل کو براؤزر فارمیٹ میں چلا کر حاصل کیا جاتا ہے۔
مثال 4۔
یہ وہ مثال ہے جس میں ہم نے الفاظ کو ترچھی شکل میں دکھانے کے لیے ایک اور طریقہ استعمال کیا ہے۔ اس کا مطلب متن میں استعمال ہے۔ اس مثال میں ، ہم نے اس ٹیگ کو HTML کے باڈی میں لکھے گئے پورے متن پر لگا دیا ہے۔
< حوالہ۔ > ……</ اقتباس > 
تمام ٹیگز بند کرنے کے بعد ، فائل کو براؤزر میں چلائیں۔
مثال 5۔
اب تک ، ہم نے متن کے ان لائن اسٹائل پر تبادلہ خیال کیا ہے۔ متن کی ایک اطالوی شکل بنانا متن کے اسٹائل اور ڈیزائننگ سے بھی مراد ہے۔ سٹائل تین قسم کی ہے۔ ایک ان لائن ہے ، دوسرا اندرونی ہے ، اور تیسرا بیرونی ہے۔ ان لائن اسٹائل ٹیگ کے اندر کی جاتی ہے۔ اندرونی سر کے جسم کے اندر لکھا جاتا ہے۔ اور بیرونی اسٹائل کسی دوسری فائل میں .css کی توسیع کے ساتھ کی جاتی ہے۔
یہ ان لائن سی ایس ایس کی ایک مثال ہے۔ یہاں ، ہم نے پیراگراف کے ٹیگز کے اندر کوڈ لکھا ہے۔ ہم نے سٹائل سٹیٹمنٹ کو فونٹ سٹائل کے طور پر ترچھا قرار دیا ہے۔ یہ بیان ٹیگ کے اندر لکھا گیا ہے ، لہذا اس میں کوئی بند ہونے والا ٹیگ نہیں ہوگا ، جیسا کہ آپ مندرجہ بالا تصویر میں دیکھ سکتے ہیں۔ اب تمام ٹیگز بند کریں اور انہیں براؤزر میں چلائیں۔ یہ وہی نتائج دکھاتا ہے جیسا کہ ہم چاہتے ہیں۔
< p سٹائل=بنائیں-سٹائل: italic؛>۔ 
مثال 6۔
ان لائن کے بعد ، اب ہم اندرونی اسٹائل کی مثال شامل کریں گے۔ یہاں سر کے حصے کے اندر ایک کلاس شامل کی جاتی ہے۔ پھر کلاس کا نام HTML کے باڈی میں پیراگراف ٹیگ کے اندر ڈیکلیئر کیا جاتا ہے۔ تاکہ یہ آسانی سے قابل رسائی ہو۔
< سر >< سٹائل >
.to{
بنائیں-سٹائل: ترچھا
}
</ سٹائل ></ سر >
آپ دیکھ سکتے ہیں کہ کلاس کو ڈاٹ طریقہ سے شروع کیا گیا ہے۔ کوڈ میں دو پیراگراف ہیں ہم نے اس اسٹائل کو ان میں سے ایک پر لاگو کیا ہے۔ لہذا یہ مفید ہے جب ہم ایک پیراگراف کو فارمیٹ کرنا چاہتے ہیں۔
پیراگراف کے اندر کلاس کا اعلان ہے
< p کلاس=a>< p کلاس='سے'>
یہ سر میں کلاس تک رسائی حاصل کرے گا۔ اب آؤٹ پٹ دیکھیں۔ آپ مشاہدہ کریں گے کہ ایک پیراگراف اٹالک کی شکل میں ہے۔
نتیجہ
یہ آرٹیکل متن کی شکل کو ترچھی شکل میں پیش کرتا ہے۔ ٹیکسٹ ڈیزائننگ ویب پیج کو ڈیزائن کرنے کا ایک لازمی حصہ ہے۔