اپریل 21, 2011 - ایم بلال ایم
11 تبصر ے

بنیادی ایچ ٹی ایم ایل (HTML)

یہاں ایچ ٹی ایم ایل (HTML) کی تھوڑی بنیادی قسم کی معلومات لکھ رہا ہوں تاکہ جو لوگ ایچ ٹی ایم ایل کے بارے میں بالکل نہیں جانتے انہیں بھی تھوڑا بہت پتہ چل سکے۔ اگر پوری ایچ ٹی ایم ایل پر لکھنے بیٹھوں تو یہ خود ایک کتاب بن جائے گی۔ یہ ٹیوٹوریل خاص طور پر نئے اردو بلاگرز کے لئے ہے۔ بلاگ پر کئی دفعہ تحریر لکھتے ہوئے یا کمنٹ کرتے ہوئے تھوڑی بہت ایچ ٹی ایم ایل کی ضرورت پڑ سکتی ہے جیسے کبھی کسی لفظ پر لنک لگانا یا پھر کسی تحریر کو نمایا وغیرہ کرنے کے لئے اس کا رنگ تبدیل کرنا پڑ سکتا ہے۔
یوں تو ویب سائیٹ بنانے کے لئے کئی ایک زبانیں موجود ہیں لیکن بنیادی زبان ایچ ٹی ایم ایل ہی ہے۔ ایچ ٹی ایم ایل کا عام طور پر استعمال ہونے والا ہر ایک کوڈ جو اپنا ایک خاص کام سرانجام دیتا ہے، ٹیگ (Tag) کہلاتا ہے۔ جیسے لنک لگانے کے لئے <a> ٹیگ استعمال ہوتا ہے۔ ہر ٹیگ ”<“سے شروع ہو کر ”>“ پر ختم ہوتا ہے۔ اس کے بعد کسی ٹیگ کے مزید کچھ اٹریبیوٹ(Attribute) بھی ہو سکتے ہیں جو اس ٹیگ کے ساتھ مل کر مزید کام سرانجام دیتے ہیں۔ جیسے کسی جگہ لنک لگانا ہے تو اس کے لئے <a> ٹیگ استعمال ہو گا لیکن جس ویب سائیٹ کا لنک لگانا ہے اس ویب سائیٹ کا ایڈریس بھی تو لکھنا ہو گا اب وہ ایڈریس <a> ٹیگ کا اٹریبیوٹ ہو گا۔ اٹریبیوٹ دونوں بریکٹس کے اندر ہی لکھا جاتا ہے۔ مثلاً لنک کا ٹیگ اور اس کا اٹریبیوٹ جو کسی ویب سائیٹ کا ایڈریس ہو گا وہ اس طرح ہونگے۔

<a href="http://www.mbilalm.com">

اب <a> ٹیگ ہے اور اس کے ساتھ herf اس کا اٹریبیوٹ ہے اور پھر دونوں ڈبل کوٹس کے درمیان ویب سائیٹ کا ایڈریس ہے۔ ایک وقت میں کسی ٹیگ کے ایک سے زیادہ اٹریبیوٹ بھی ہو سکتے ہیں۔ ایک سے زیادہ اٹریبیوٹ کو علیحدہ کرنے کے لئے درمیان میں سپیس دی جاتی ہے۔
کمپیوٹر کی زیادہ تر زبانوں میں جب کوڈ لکھتے ہیں تو جس جگہ اس کوڈ کو اثر انداز کرانا ہوتا ہے وہ جگہ مخصوص کی جاتی ہے یعنی کوڈ شروع کرتے ہیں اور پھر بتاتے ہیں کہ یہ کوڈ پروگرام یا تحریر وغیرہ میں کہاں تک اثر انداز ہو بالکل ایسے ہی ایچ ٹی ایم ایل میں بھی ہوتا ہے۔ ایچ ٹی ایم ایل میں ٹیگ شروع کیا جاتا ہے اور پھر جہاں تک اس ٹیگ کے اثرات مطلوب ہوتے ہیں وہاں ٹیگ بند کیا جاتا ہے۔ ٹیگ بند کرنے کے لئے اسی ٹیگ کو بغیر کسی اٹریبیوٹ کے لکھا جاتا ہے اور ساتھ میں ”/“ لگائی جاتی ہے۔ مثلاً جب لنک کا ٹیگ شروع ہو گا تو <a> اور ساتھ میں کچھ اٹریبیوٹ ہونگے اور پھر جب بند ہو گا تو </a> ہو گا۔ مثال کے طور پر ہم یہاں ”م بلال کی بیاض“ پر لنک لگاتے ہیں تو اس کا کوڈ درج ذیل ہو گا۔

<a href="http://www.mbilalm.com/blog"> م بلال کی بیاض</a>

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

<a href="http://www.mbilalm.com/blog"><b><u> م بلال کی بیاض</u></b></a>

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

<a href="http://www.mbilalm.com/">م بلال م</a>

نتیجہ:- م بلال م
تفصیل:- یہ ٹیگ لنک لگانے کے لئے استعمال ہوتا ہے۔ اس سے جو لنک لگے گا اس پر کلک کرنے سے اسی ٹیب یا ونڈو میں لنک کھلے گا۔ مندرجہ بالا کوڈ میں ”م بلال م“ کے الفاظ پر لنک لگایا ہے۔

 
کوڈ

<a target="_blank" href="http://www.mbilalm.com/">م بلال م</a>

نتیجہ:- م بلال م
تفصیل:- اس لنک کے ٹیگ میں ساتھ ایک target اٹریبیوٹ استعمال ہوا ہے جس کی وجہ سے اس لنک پر کلک کرنے سے نئی ونڈو یا ٹیب میں لنک کھلے گا۔ مندرجہ بالا کوڈ میں ”م بلال م“ کے الفاظ پر لنک لگایا ہے۔

 
کوڈ

<font face="Nafees Web Naskh">م بلال کی بیاض</font>

نتیجہ:-
تفصیل:- یوں تو اس ساری تحریر پر جمیل نوری نستعلیق فونٹ لگایا گیا ہے لیکن مندرجہ بالا کوڈ میں ”م بلال کی بیاض“ الفاظ پر فونٹ کا ٹیگ لگایا ہے اور ساتھ میں اس کا ایک اٹریبیوٹ ہے۔ جس میں فیس Nafees Web Naskh دے دیا ہے۔ اب اگر تحریر دیکھنے والے کے کمپیوٹر میں نفیس ویب نسخ فونٹ ہوا تو جس تحریر پر یہ ٹیگ لگائیں گے وہ اسے نفیس ویب نسخ میں نظر آئے گی۔ جہاں Nafees Web Naskh لکھا ہے اس کی جگہ آپ اپنی مرضی کا کوئی دوسرا فونٹ بھی استعمال کر سکتے ہیں۔

 
کوڈ

<font face="Jameel Noori Nastaleeq" size="6">م بلال کی بیاض</font>

نتیجہ:-
تفصیل:- مندرجہ بالا کوڈ میں فونٹ ٹیگ کا مزید ایک اٹریبیوٹ سائز بھی استعمال کیا گیا ہے۔ ورڈپریس ڈاٹ کام پر جنہوں نے اردو بلاگ بنایا ہے ان کے لئے یہ ٹیگ بہت مفید ہے۔ اگر وہ ساری تحریر پر یہ ٹیگ لگا دیں یعنی تحریر کے شروع میں ٹیگ شروع کریں اور تحریر کے آخر پر ٹیگ بند کریں تو پھر ان کی ساری تحریر جمیل نوری نستعلیق فونٹ میں نظر آئی گی۔ یہاں میں نے سائز 6 دیا ہے جو کہ کافی بڑا سائز ہے لیکن ورڈپریس ڈاٹ کام والے 6 کی جگہ 4 کر لیں جوکہ مناسب سائز ہے۔

 
کوڈ

<font color="#0000FF">م بلال کی بیاض</font>

نتیجہ:- م بلال کی بیاض
تفصیل:- مندرجہ بالا فونٹ ٹیگ میں رنگ کا اٹریبیوٹ دیا ہے۔ جس سے الفاظ کا رنگ تبدیل ہو گیا ہے۔ جہاں نیلے رنگ کا کوڈ #0000FF ہے اس جگہ پر اپنی مرضی کے رنگ کا کوڈ دے دیں یا پھر رنگ کا نام بھی دے سکتے ہیں۔ مثال کے طور پر سرخ کے لئے red اور نیلے کے لئے blue اور اسی طرح باقی رنگوں کے نام۔

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

بذریعہ فیس بک تبصرہ تحریر کریں

براہ راست 11 تبصرے برائے تحریر ”بنیادی ایچ ٹی ایم ایل (HTML)

  1. محترم آپنے مثالوں کے زریعے بُہت آسان طریقہ سے html سمجھایا ہے اسکے لیے میں آپکا شُکریہ ادا کرتا ہوں ۔
    احسان مند ۔(ایم – ڈی )۔

  2. السلام علیکم ورحمۃ اللہ وبرکاتہ
    ماشاء آپ کے طریقۂ تعلیم برائے ایچ ٹی ایم ایل بہت اچھا ہے، اللہ تعالی آپ کو زیادہ نوازے۔

  3. جزاک اللہ بھائی ۔ آپ نے بڑے اچھے طریقے سے کچھ ٹیگز کے متعلق سمجھایا ہے۔ شکریہ
    محترم میں اپنی ویب سائٹ‌پر یہ تبصروں والا ایڈیٹر لگانا چاہتا ہوں۔ کیا آپ میری مدد کریں‌گے۔ یہ بہت اچھا اور خوبصورت ہے۔
    http://www.quraniscience.com

  4. ما شااللہ آپ نےبنیادی ایچ ٹی ایم کےسلسلے میں آسان معلومات فراہم کیں اللہ مزید ترقی نصیب فرمائے ۔آمین

  5. السلام علیکم
    براہ کرم راہنمائی فرمائیں کہ اردو کے ایک ہی پیراگراف میں تمام ایچ ٹی ایم ایل ٹیگز کیسے استعمال ہوں گے مثلا مارکیو ، فونٹ سائز ،فونٹ کلر ،ڈائریکشن و فونٹ سٹائل وغیرہ کو ایک جگہ استعمال کرنے کی کوئی مثال تحریر فرمائیں۔
    شکریہ

تبصرہ تحریر کریں۔

Your email address will not be published. Required fields are marked *