اردونامہ کے بہت مشکل سوالات کرنے والے رکن محترم ذیشان صاحب کچھ دنوں سے اردونامہ پر یہ فرمائش لے کر حاضر ہو رہے ہیں کہ انہیں ایچ ٹی ایم ایل کے بارے میں جاننا ہے۔ گو کہ مجھے ایچ ٹی ایم ایل کے بارے میں کچھ زیادہ معلوم نہیں ہے اور سب سے بڑی بات میں بالکل بھی اچھا استاد نہیں ہوں اس لئے میرے لئے یہ بہت مشکل ہو گا کہ میں ان کی ضروریات کے متعلق کھل کر معلومات فراہم کر سکوں لیکن چونکہ کچھ اور دوستوں نے میری بتی اتنی اونچی کی کہ میرے لئے یہ ضروری ہو گیا کہ میں ایچ ٹی ایم ایل کے بارے میں کچھ نہ کچھ لکھوں۔
گو کہ نیچے موجود ٹیوٹوریل کا اکثر حصہ نیٹ سے حاصل شدہ معلومات پر مشتمل ہے لیکن کوشش کی ہے کہ اسے کچھ آسان الفاظ میں پیش کرسکوں تاکہ ایک عام آدمی جسے ایچ ٹی ایم ایل کے بارے میں بالکل بھی معلومات نہیں ہیں وہ بھی ان سے کچھ نہ کچھ سیکھ سکے۔
[center]ایچ ٹی ایم ایلHTMLایک تعارف[/center]
HTML یا Hyper Text Markup Language(ہائپر ٹیکسٹ مارک اپ لینگوئج) ایک ایسی زبان ہے۔جس میں ورلڈ وائڈ ویب کی ہائپر ٹیکسٹ ڈاکومنٹس لکھی جاتی ہیں۔
اس کی نمایاں خصوصیات
1۔ یہ آپ کو ہائپر ٹیکسٹ لنک دیتی ہے جن کی مدد سے اگر آپ روشن ٹیکسٹ کو کلک کرتے ہیں تو آپ ایک نئی ڈاکومنٹ میں رسائی حاصل کر لیتے ہیں۔جو آپ کو کسی اور سائٹ پر لے جاتی ہے۔نئی ڈاکومنٹ اپنے یو۔ایل۔آر کے ذریعے تلاش کی جاتی ہے اور یہ بھی ایچ۔ٹی۔ایم۔ایل کی کوئی دوسری ڈاکومنٹ،تصویریا ساؤنڈ فائل ہو سکتی ہے۔
2۔ ایچ۔ٹی۔ایم۔ایل اس طرح ڈیزائن کی گئی ہے یہ کسی مخصوص پلیٹ فارم پر بھروسہ نہیں کرتی اور نہ ہی اسے مخصوص ہارڈ وئیر یا سافٹ وئیر کی ضرورت ہوتی ہے۔
3۔ ـ ایچ۔ٹی۔ایم۔ایل کے پروگرام سادہ ASCII ٹیکسٹ فائل میں لکھے جاتے ہیں۔اس کا مطلب یہ ہے کہ یہ کسی بھی ٹیکسٹ ایڈیٹر مثلا نوٹ پیڈ وغیرہ میں لکھے جا سکتے ہیں۔
ایچ۔ٹی۔ایم۔ایل ایڈیٹر کیا ہوتا ہے؟
ایڈیٹر ایک ایپلی کیشن کا نام ہے جس میں آپ ایچ۔ٹی۔ایم۔ایل کا کوڈ لکھتے ہیں۔کوئی بھی ٹیکسٹ ایڈیٹر آپ کا ایچ۔ٹی۔ایم۔ایل ایڈیٹر بن سکتا ہے۔ونڈوز کا نوٹ پیڈ جو تمام ونڈوز آپریٹنگ سسٹمز میں پایا جاتا ہے ساری دنیا میں ایچ۔ٹی۔ایم۔ایل ایڈیٹر کے طور پر استعمال ہو رہا ہے۔لیکن وہ لوگ جو کچھ بہتر کی تلاش میں ہیں ان کے لئے ایچ۔ٹی۔ایم۔ایل کا ایک Enhanced ٹیکسٹ ایڈیٹر HotDog بہت کار آمد ثابت ہو سکتا ہے۔اس کے علاوہ بہت سے کمرشل ایچ۔ٹی۔ایم۔ایل ایڈیٹرز مارکیٹ میں دستیاب ہیں جن میں Adob pagemill یا مائیکروسافٹ کا فرنٹ پیج شامل ہیں۔جو Wysiwyg یعنی“What you see is what you get“ کا ماحول دیتے ہیں۔
یہ تھا کچھ تعارف ایچ۔ٹی۔ایم۔ایل کے ساتھ اب شروع کرتے ہیں ایچ ٹی ایم ایل پر تفصیلی گفتگو۔
ہر ایچ ٹی ایم ایل صحفہ کا بنیادی عنصر ایلیمنٹ (Element) کہلاتا ہے، جس کا اردو ترجمہ جز ہی کیاجا سکتا ہے؟ ایلیمنٹ ایچ ٹی ایم ایل صحفہ میں عبارت کی بناوٹ کے لئے استعمال کیا جاتا ہے، ہر ایلیمنٹ دو ٹیگز کے مجموعہ سے بنتا ہے، شروع والے ٹیگ کو ابتدائیہ یا اوپننگ ٹیگ کہا جاتا ہے اور ہر اوپنگ ٹیگ < سے شروع ہوتا ہے اور > پر ختم ہوتا ہے، اسی طرح ایلیمنٹ کے اختتام میں جو ٹیگ استعمال ہوتا ہے اسے اختتامیہ یا کلوزنگ ٹیگ کہا جاتا ہے ۔ اوپننگ اور کلوزنگ ٹیگ کی بناوٹ میں صرف / کا فرق ہوتا ہے ، مثلا
Code: Select all
<p> This is paragraph </p>.
گزشتہ سے پیوستہ :Html زبان کی بنیاد Html Tags ہی ہوتے ہیں۔ یہ ٹیگز وہ اشارے ہوتے ہیں تو آپ کے ٹیکسٹ کی فارمیٹنگ کے بارے میں بتاتے ہیں کہ اسے کیسا ظاہر ہونا ہے۔ مثال کے طور پر آپ کے الفاظ کا سائز کیا ہو گا ان کا سٹائل کیا ہوگا ان کی فونٹ کونسی ہو گی۔ دوسرے الفاظ میں ٹیگز ایسے مختصر الفاظ ہیں جو آپ کے کمپیوٹر کو بتاتے ہیں کہ لکھے گئے الفاظ کو سکرین پر کیسے ظاہر کرنا ہے۔
Html Tags ہمیشہ <> میں لکھے جاتے ہیں اور جتنے ٹیکسٹ کو آپ نے ٹیگز لگانے ہوتے ہیں یا یوں کہئے کہ جتنے ٹیکسٹ کو آپ نے مطلوبہ انداز دینا ہوتا ہے اس کے بعد انہیں انہیں بریکٹس سے بند بھی کیا جاتا ہے لیکن بند کرتے ہوئے ان میں / کا اضافہ کیا جاتا ہے۔یعنی </>۔
اب مثال کے طور پر آپ نے اپنے ویب صفحہ پر موجود ایک لائن کو بولڈ انداز میں پیش کرنا ہے تو اس کے لئے آپ یوں لکھیں گے۔
اوپر والی لائن میں ہم نے Html Tags استعمال کرتے ہوئے کمپیوٹر کو یہ سمجھایا ہے کہ Your Text Area کے الفاظ کو بولڈ انداز میں ظاہر کیا جائے یعنی نمایاں کر کے دکھایا جائے۔Code: Select all
<b> Your Text Area</b>
ویب صفحہ کے شروع میں <html> کوڈ کمپیوٹر کو بتاتا ہے کہ اس صفحہ کو Html زبان میں لکھا گیا ہے اور اسے ظاہر کرتے ہوئے Html زبان کو ڈی کوڈ کرے۔
اسی طرح ویب صفحہ کے آخر میں <html/> کوڈ ظاہر کرتا ہے کہ Html زبان میں لکھا گیا مواد ختم ہو چکا ہے اس لئے صفحہ کو اس سے آگے ظاہر کرنا بند کر دے۔
اسی طرح اپنے صفحہ پر موجود مواد کو ہیڈنگز دینے کے لئے بھی Html Tags کا استعمال کیا جاتا ہے۔ مندرجہ ذیل ہیڈنگز ٹیگز اپنے مواد پر ہیڈنگز دینے کے کام آتے ہیں[/size]
یہ ٹیگز آپ کی عبارت کو بالکل اس انداز میں ظاہر کریں گے۔Code: Select all
<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5>
ہیڈنگ نمبر ایک ایسے ظاہر ہو گی۔
ہیڈنگ نمبر دو ایسے ظاہر ہو گی۔
ہیڈنگ نمبر تین ایسے ظاہر ہو گی۔
ہیڈنگ نمبر چار ایسے ظاہر ہو گی۔
ہیڈنگ نمبر پانچ ایسے ظاہر ہو گی۔
اسی طرح پیراگراف کو بھی Html Tags سے ظاہر کرتے ہیں۔جو ایسے ظاہر کیا جاتا ہے۔
[code]<p>This is a paragraph</p>
<p>This is another paragraph</p> [/code]
ٹیکسٹ کی فارمیٹنگ کے علاوہ Html Tags کی مدد سے لکھی گئی عبارت کو لنک دیاجانا ممکن ہے یعنی جسے کلک کرنے سے آپ کسی دوسری جگہ تک پہنچ سکتے ہیں۔اس کا کوڈ ایسے دیا جاتا ہے۔
[code]<a href="http://infopioneer.blogspot.com">Info Pioneer Blog</a> [/code]
جب آپ اس کوڈ کو اپنے ویب صفحہ پر دیکھیں گے تو کچھ ایسا نظر آگے گا۔
Info Pioneer Blog
اس کے علاوہ اپنے صفحہ پر تصاویر ظاہر کرنے کے لئے بھی انہی ٹیگز کا استعمال کیا جاتا ہے جو کہ کچھ یوں ہے۔
[code]<img src="/images/avatars/gallery/old_avatars/
8115857084a2fe5a7085c6.jpg" width="104" height="142" /> [/code]
اس میں ہم نے پہلے کمپیوٹر کو یہ بتایا کہ تصویر کہاں سے اٹھا کر ڈسپلے کرنی ہے اس کے بعد اس کا سائز بتایا اب جب ہم اس کوڈ کو اپنے صفحہ پر دیکھیں گے تو ایسا نظر آتے گا۔
Code: Select all
h1,h2,h3,h4,h5,h6
Code: Select all
۔
<h1>This is biggest heading.</h1>
<h6>This is smallest heading.</h6>
Code: Select all
<br />
<hr />
علاوہ ازیں آپ نے مشاہدہ کیا ہوگا کہ جہاں جہاں ٹیگز کا استعمال کیا ہے، وہ انگریزی کے چھوٹے حروف پر مشتمل ہیں، ٹیگز کو انگریزی کے بڑے حروف میں بھی لکھا جا سکتا ہے، لیکن بڑے حروف پر مشتمل ٹیگز معیاری نہیں کہلا سکتے۔ اس لئے جہاں ٹیگز کا استعمال ہو وہاں انگریزی کے چھوٹے حروف کا استعمال ہی مناسب ہے۔