Computeraurmawaslattitechnologypart-2-001

ویب پبلشنگ ٹیکنالوجی

باب 9

HTML کے ذریعے ویب پیج ڈیزائننگ

باب 10

جاوا اسکرپٹ کے ذریعے کلائنٹ - سائڈاسکرپٹنگ

تقریباً چار دہائی قبل، انٹرنیٹ کی شروعات مختلف مقامات پر واقع دو کمپیوٹروں کے درمیان ڈیٹا کو شیئر کرنے کے لیے تجربہ کے طور پر ہوئی تھی۔ اسی وقت سے اس میں زبردست ترقی ہوئی ہے اور یہ ایسے کمپیوٹروں کا عالمی نیٹ ورک (Worldwide network) بن چکا ہے جو مختلف قسم کے تار والے اور بغیر تار والے ترسیلی چینلوں کے ذریعے ایک دوسرے سے منسلک رہتے ہیں۔ ورلڈ وائڈ ویب (Worldwide Web) انٹرنیٹ کی ایک اہم ایپلی کیشن ہے۔ ویب ان لاکھوں دستاویزوں، میڈیافائلوں اور سافٹ ویئر پروگراموں پر مشتمل ہوتا ہے جو ایک دوسرے سے منسلک رہتے ہیں۔

ویب کو تقویت دینے والی ٹیکنالوجی کلائنٹ-سرورنیٹ ورک (Client- Server Network) ہے۔ سرور ڈیجیٹل فائلوں کی میزبانی (Hosting)کرتا ہے اور کلائنٹ مخصوص صفحات یا پروگراموں کے لیے درخواست کرتا ہے۔ ویب اس کام کے لیے ہائپر ٹیکسٹ مارک اپ لینگویج (HTML) کا استعمال کرتا ہے۔ کلائنٹ پر موجود براؤزر ایپلی کیشن اس اسکرپٹنگ لینگویج کی ترجمانی کرنے کے اہل ہوتی ہے اور صفحات یامیڈیا کو ڈسپلے کر دیتی ہے ۔ علاوہ ازیں پروگراموں کو ایگزیکیوٹ (Execute) بھی کرتی ہے۔

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

ویب صفحا ت کو مکالماتی(Interactive) بنانے کے لیے جاوا اسکرپٹس (Javascripts) مشہور و معروف ذرائع ہیں۔ انھیں ویب صفحہ میں داخل کرنے پریہ تفاعلیت کو انجام دیتے ہیں۔وزیٹر کاؤنٹ (ویب سائٹ کو ایکسس کرنے والے لوگوں کی تعداد کو شمار کرنا) یا کلینڈر جیسی سادہ ایپلی کیشن سے لے کر میڈیا پلیئر اور مکالماتی اسپریڈشیٹ نیز زمانہ سازی (Simulation) جیسی جدید ترین ایپلی کیشن کی مختلف پروگرامنگ ضروریات کی تکمیل جاوا اسکرپٹ کی مدد سے ہوتی ہے، لہٰذا یہ ویب ٹیکنالوجی کے دائرہ کار میں وسعت کا باعث ہے۔ اس سے HTML کی صلاحیتوں کو عبور کرنے میں مدد ملی۔

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

9 ایچ ٹی ایم ایل (HTML)کی مدد سے ویب صفحہ ڈیزائن کرنا

مقاصد

اس باب کا مطالعہ کرنے کے بعد طلبا اس قابل ہو جائیں گے کہ:

• HTML ٹیگ، اور ان کے اوصاف (Attributes) کی شناخت کرسکیں،

• ویب صفحات کو تیار کرنے کے لیے HTML ٹیگ اور اُن کے اوصاف کا استعمال کر سکیں،

• متن اور تصاویر کی وضع سازی، لے آؤٹ کی ڈیزائننگ، جدولیں اور فہرستیں بنانے اور ہائپرلنک کی تشکیل کرنے میںHTML ٹیگ اور اوصاف کا استعمال کر سکیں،

• ویب صفحات میں مکالماتی صلاحیت کا اضافہ کرنے کے لیے HTML فارم کا استعمال کرسکیں،اور

• ویب سائٹ ڈیزائن کر سکیں اور HTML کے ذریعے اس کی تشکیل کر سکیں۔

’’منطق آپ کو A سے B تک لے جائے گی۔ تصورآپ کو ہر جگہ لے جائے گا۔‘‘

البرٹ آئن اسٹائن

تعارف

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

جب آپ انٹرنیٹ سے اتصال کے ذریعے براؤزنگ کرتے ہیں تو آپ ویب کی اہم اور دلچسپ خصوصیت کا استعمال کرتے ہیں جسے ہائپر لنک (Hyper links) کہا جاتا ہے۔ ہر مرتبہ جب بھی آپ کسی متن یا تصویر کے نمایاں کردہ (High lighted) حصے کو کلک کرتے ہیں تو آپ متن یا تصویر کے دوسرے حصے پر پہنچ جاتے ہیں اور یہ متن یا تصویر اسی صفحہ پر، کسی دوسرے صفحہ پر یا اسی کمپیوٹر کی ہارڈ ڈسک پر یا دنیا میں کہیں بھی واقع کسی دوسرے کمپیوٹر پر موجود صفحہ پر ہو سکتی ہے۔

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

9.1 HTML کا تعارف

آئیے ویب صفحہ (شکل 9.1) پر نگاہ ڈالتے ہوئے اور اس کی خصوصیات کے تجزیے سے آغاز کرتے ہیں۔ اس ویب صفحے کے اہم حصے مندرجہ ذیل ہیں:

· ہیڈر ایریا (Header Area) : ہماری مثال میں، یہ ماسٹ ہیڈ (Mast head) پر مشتمل ہے جو ویب صفحے کے موضوع کو بتاتا ہے۔ اس میں کوئی تصویر، لوگو(Logo) وغیرہ ہوسکتا ہے جس کا انحصار اس بات پر ہے کہ ویب صفحہ کس مقصد کے لیے تیار کیا گیا ہے۔

· مینو بار (Menu bar): یہ لنکس (Links) کا ایسا سیٹ ہے، جنھیں بٹنوں کی شکل میں ڈیزائن کیا جاتا ہے۔ ہر ایک لنک آپ کو ویب صفحے کے الگ سیکشن میں لے جائے گا۔ یہ کسی کتاب کے سبق کے عنوانات کی طرح ہوتا ہے۔

· صفحہ کا متن (Body of the page): صفحہ کے اس حصہ میں وہ تمام مواد موجود ہوتا ہے جسے آپ پیش کرنا چاہتے ہیں۔ مواد کسی بھی قسم کا ہو سکتا ہے مثلاً متن، تصاویر، جدولیں،فارم وغیرہ۔ ہم نے صفحہ کو دو کالموں میں مرتب کیا ہے۔ بایاں کالم متن پر مشتمل ہے جس کی وضع سازی مختلف طریقوں سے کی گئی ہے جب کہ دائیں کالم میں کچھ ایسی خصوصیات ہیں جو ویب صفحے کو منفرد بناتی ہیں مثلاً لنک، امیج جو تصاویر کی گیلری سے منسلک کر تا ہے،تبصراتی شکل یا رائے زنی ۔یہی وہ خصوصیات ہیں جو کسی صفحے کو مکالماتی بناتی ہیں۔

· فوٹر ایریا (Footer area): یہ صفحہ کا سب سے نیچے والا حصہ ہے اس میں عام طور سے اعلانات عدم ذمہ داری (Disclaimer)، یعنی حق اشاعت سے متعلق اطلاعات موجود ہوتی ہیں، دی گئی مثال کے فوٹر متن میں لکھا ہے ’’اس سائٹ کا سبھی مواد مفت میں ڈاؤن لوڈ کیا جاسکتا ہے، تقسیم کیا جاسکتا ہے اور دوبارہ استعمال کیا جاسکتا ہے۔‘‘

ہم ویب صفحہ اور اس کے حصوں کا مزید تجزیہ کریں گے۔ ہم یہ بھی جانیں گے کہ اس قسم کے صفحات کی تشکیل کس طرح کی جاتی ہے۔ اپنے علم میں اضافہ کرنے کے لیے، مختلف قسم کے ویب صفحات کا جائزہ لیجیے اور ہر مرتبہ مواد کا خاکہ یالے آؤٹ اور زمرہ سازی (Categorisation) نوٹ کرتے جائیے۔ ویب صفحہ کی ڈیزائننگ بہت لطیف ونازک مشغلے کی لے آؤٹ شکل وصورت اختیار کر چکا ہے جہاں فن کار اور پروگرامر ایک ساتھ کام کرتے ہیں اور ویب صفحات کو مکالماتی بنانے کے لیے نہایت وسیع خصوصیات کو ایک مجموعے میں پروتے ہیں۔

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

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

ہر ایک HTML فائل (جسے ویب صفحہ بھی کہا جاتا ہے) ایک متنی فائل ہوتی ہے۔ اس میں تصاویر، آواز یا اس قسم کی کوئی اطلاع نہیں ہوتی۔ HTML فائل میں اس قسم کی فائلوں کے حوالے ہوتے ہیں۔ لہٰذا جب آپ کسی ویب صفحہ پر کوئی فوٹوگراف دیکھتے ہیں تو HTML فائل میں ایک امیج فائل ہوتی ہے جو اسے ویب صفحہ میں مناسب جگہ پر ظاہر کر دیتی ہے۔ یہ حقیقت کہ HTML ایک متنی فائل ہے اور اسے ہر ایک پلیٹ فارم سے مستثنیٰ کردیتی ہے یعنی ایک ہی صفحہ کو ونڈوز، Unix، Linuxیا MacOS کمپیوٹر پر دیکھا جاسکتا ہے۔ یہی وجہ ہے کہ ویب ترسیل کے آفاقی ذریعہ کے طور پر ابھر رہا ہے۔

ہم یہ بتا چکے ہیں کہ ویب پر جو کچھ نظر آتا ہے وہ HTML کوڈ ہے۔ یہ وہ کوڈ ہے جو ویب صفحہ کی تشکیل میں براؤزرکی مدد کرتا ہے۔ لیکن آپ HTML کوڈ کو کس طرح دیکھ سکتے ہیں؟ صفحہ پر دائیں کلک کیجیے اور ظاہر ہونے والے متبادلات (Options)میں سے View page source کا انتخاب کیجیے۔ اب آپ HTML کوڈ دیکھ سکتے ہیں۔ یہ بہت ہی پریشان کن نظر آتا ہے لیکن ہم آپ کو یقین دلاتے ہیں کہ درحقیقت یہ بہت آسان ہے اور اس باب کے مکمل ہو جانے کے بعد آپ اسے لکھ سکیں گے۔

9.2 HTML ٹیگ

آپ کے HTML کوڈ میں کیا ہے؟ اس میں ویب صفحہ کے مواد، اس بات کی معلومات کہ مواد کا ہر ایک عنصر کس طرح اور کہاں نظر آئے گا، اور اگر آپ کوئی اطلاع داخل (Input) کرتے ہیں یا لنک پر کلک کرتے ہیں تو کیاعمل ہوگا وغیرہ کی اطلاعات موجود ہوتی ہیں۔ بالفاظ دیگر HTML صفحہ مواد، پروگرامنگ اور ڈیزائن کے عنصر پر مشتمل ہوتا ہے۔

HTMLکوڈکا بنیادی عنصر ٹیگ (tag) کہلاتا ہے۔ آئیے ہم اپنے ویب صفحہ کے کوڈ پر نظر ڈالتے ہیں (شکل 9.2)۔

صفحہ کے سب سے اوپر کوئی کوڈ <HTML>دیکھیے۔ اگر ہم صفحہ پر سب سے نیچے جائیں تو ہمیں کوڈ </HTML>نظر آئے گا۔ ہم اس قسم کے کوڈ کو ٹیگس (tags) کہتے ہیں۔ ویب صفحات کی تشکیل کو سیکھنے کا مطلب ہے کہ جس انداز میں آپ مواد کو پیش کرنا چاہتے ہیں اس کے لیے ان ٹیگس کے استعمال کے بارے میں سیکھنا۔ HTML ٹیگ کے لیے عمومی فارمیٹ مندرجہ ذیل ہے:

<tagname>affected text </tag_name>

شروعاتی ٹیگ میں صرف ٹیگ کا نام ہوتا ہے اور یہ ویب براؤزرکو متن کی ٹیگنگ (Formatting)شروع کرنے کی ہدایت دیتا ہے۔ اختتامی ٹیگ کے شروع میں سلیش(/) کا نشان اور پھر اس کے بعد ٹیگ کا نام ہوتا ہے یہ ’’/‘‘ ویب براؤزر کو متن کی ٹیگنگ کو روکنے کی ہدایت دیتا ہے۔ آئیے کچھ مثالوں پر غور کرتے ہیں:

اگر آپ اپنے متن کو نمایاں (Highlight) کرنا چاہتے ہیں مثلاً بولڈ ٹائپ فیس کا استعمال کر رہے ہیں تو آپ مندرجہ ذیل ٹیگ لکھیں گے:

اور اب ویب صفحہ پر جو نظر آئے گا وہ ہے، HTML tags غور کیجیے کہ ٹیگ Case sensitive نہیں ہے یعنی < B > HTML tags </B> اسی انداز میں نظر آئے گا جس انداز میں لکھا گیا ہے۔ HTML کاایک اور دلچسپ پہلو یہ ہے کہ اگربراؤزرکو یہ معلوم نہ ہو کہ دیے ہوئے ٹیگ کے ساتھ کیا کرنا ہے تو یہ اسے نظرانداز کر دیتا ہے!

ٹیگس کی دو اقسام ہیں:

· کنٹینرٹیگ (Cantainer Tags) : وہ HTML ٹیگ جس میں اختتامی ٹیگ کی ضرورت ہوتی ہے کنٹینرٹیگ کہلاتے ہیں۔ یہ ٹیگ جوڑا بند(Paired) یا ریپر (Wrapper) ٹیگ بھی کہتے ہیں۔ <b> text </b> اس قسم کاجوڑا (Pair) ہے۔ اگر آپ اس قسم کے ٹیگ کو بند نہیں کرتے ہیں تو متن کو اس ٹیگ کے حصہ کے طور پر تسلیم کر لیا جائے گا۔

· نان کنٹینرٹیگ : ایسے HTML ٹیگ جن میں اختتامی ٹیگ کی ضرورت نہیں ہوتی نان کنٹینر ٹیگ کہلاتے ہیں۔ یہ ٹیگ Stand alone یا Empty tags بھی کہلاتے ہیں۔ اس کی ایک مثال ہے <br > یہ ٹیگ لائن بریک کو داخل کر دیتا ہے۔

9.2.1 اوصاف

کچھ ٹیگ اپنے آپ میں مکمل ہوتے ہیں۔ بالفاظ دیگر ان میں صرف ایک ہی متبادل ہوتاہے۔ مثال کے طور پر جب آپ متن کو اٹالیک(Italicised) کرنا چاہتے ہیں تو آپ <i> text </i> کا استعمال کرتے ہیں۔ لیکن اگر آپ متن کو کسی مخصوص فونٹ میں ظاہر کرنا چاہتے ہیں تو پھر ٹیگ کس طرح نظر آئے گا؟

غور کیجیے کہ اس مثال میں ٹیگ <font> </font> ہے۔ باقی حصہ یعنی face = "Arial" کے بارے میں کیا خیال ہے۔ ہم اس اضافی اطلاع کو ٹیگ کا ایٹری بیوٹ کہتے ہیں۔ لہٰذا ہماری مثال میں، ٹیگ font اور اس کا ایٹری بیوٹ face ہے اور ایٹری بیوٹ کو دی گئی قدر Arial ہے۔

ایٹری بیوٹ کی کئی مختلف قدریں ہو سکتی ہیں جنھیں آپ بہ یک وقت استعمال کر سکتے ہیں۔ مثال کے طور پر آپ کو نہ صرف مخصوص فونٹ پسند ہے بلکہ آپ متن کو مخصوص سائز اور رنگ میں ظاہر کرنا چاہتے ہیں۔ آپ یہ کام کس طرح کریں گے؟ اب ٹیگ مندرجہ ذیل شکل میں ہوگا:

نوٹ کیجیے کہ واوین( quotes )کا استعمال قدروں کو ظاہر کرنے کے لیے اور Semi colon کا استعمال ایٹری بیوٹ کو علیحدہ کرنے کے لیے کیا جاتا ہے۔ ٹیگ کی عمومی شکل مندرجہ ذیل ہے:

tag_name attribute_name = "attribute value"> ......</tag_name>

عمومی قاعدے کے طور پر زیادہ تر ایٹری بیوٹس – جن میں صرف حروف، ہندسے، ہائفن یا اوقاف ہوتے ہیں ۔ بغیر واوین (quotes)کے ہی اچھی طرح کام کرتے ہیں۔ وہ ایٹری بیوٹس جن میں دیگر علامتی حرف جیسے خالی جگہ، % کے نشان یا # کے نشان ہوتے ہیں ان کے لیے ہمیشہ واوین کی ضرورت ہوتی ہے۔ سبھی ایٹری بیوٹ قدروں کو واوین کے اندر لکھنا ایک اچھی عادت ہے۔

ایٹری بیوٹ کا مقصد ہے ٹیگ کے دائرہ کار کی توسیع۔ یہ براؤزرکو ٹیگ کے بارے میں اضافی معلومات فراہم کرتا ہے۔

براؤزر اس ٹیگ کے ساتھ کس طرح کا برتاؤ کرتا ہے جس میں ایٹری بیوٹ کی ضرورت ہوتی ہے مگر اس میں ایٹری بیوٹ کو شامل نہیں کیا گیا ہے۔ مثال کے طور پر اگر ہم صرف <font> text </font> کا ہی استعمال کریں تو براؤزر اسے کس طرح ظاہر کرے گا۔ اسے جاننے کے لیے بہتر تو یہی ہے کہ آپ خود ہی کوشش کیجیے۔

ہر ایک براؤزر کی ایک آغازی ترتیب ہوتی ہے جس کے تحت اگر کوئی قدر متعین نہیں کی گئی ہے تو یہ آغازی قدر فونٹ سیٹنگ اس طرح ہے "font : Times New Roman ; font- size:12pt: اور color : # 000000۔ اس لیے اگر آپ کے پاس بغیر ایٹری بیوٹ والا ٹیگ <font> text </font> ہے تو متن کا سائز 12 پوائنٹ فونٹ ٹائمس نیورومن اور رنگ سیاہ ہوگا۔ آپ اس آغازی ترتیب کواپنی مرضی کے مطابق تبدیل کر سکتے ہیں۔ Tools ® Internet Options میں جائیے اور General ٹیب کے تحت font بٹن پر کلک کیجیے۔ یہاں آپ اپنی ضرورت کے مطابق اپنےبراؤزرکو ذاتی پسند کے مطابق بنانے کے لیے کسی ایک یا سبھی آغازی حالتوں کو مرتب کر سکتے ہیں۔

9.3 HTML دستاویز کی ساخت

آئندہ سیکشنوں میں ہم اپنے بنائے ہوئے ویب صفحہ کا تجزیہ کریں گے (شکل 9.1) اور مختلف HTML ٹیگس کے بارے میں جانیں گے۔ آئیے ہم اپنے ویب صفحہ کی HTML کوڈنگ پر نظر ڈالتے ہیں۔ صفحہ پردائیں کلک کیجیے اور View page source کو منتخب کیجیے( شکل 9.2)۔

کوڈ کو وضع شدہ فارمیٹ (Format)میں پیش کرنا پروگرامنگ کا بنیادی تصور ہے۔ یہ نہ صرف اسے پڑھنے میں مدد کرتا ہے بلکہ غلطیوں کی شناخت اور انھیں درست کرنے میں بھی مدد کرتا ہے۔ HTML میں ہم اس کام کو مندرجہ ذیل طریقے سے کریں گے۔

پورا HTML دستاویز ٹیگس(Tags) کے جوڑے<HTML> and </HTML> کے درمیان تیار کیا جاتا ہے۔ بالفاظ دیگر جب دستاویز ان دو ٹیگس کے درمیان بند ہوتا ہے تو براؤزر اسے ویب صفحہ تصور کر لیتا ہے۔

اس کے بعد صفحہ کے سیکشنوں کی وضاحت کی جاتی ہے۔ ہمارے صفحہ میں ایک ہیڈر، ایک باڈی اور ایک فوٹر ہے۔ ٹیگس اس طرح ہیں <head> </head> اور <body> </body>۔

لہٰذا HTML صفحہ اس طرح نظر آئے گا۔

براؤزرونڈو (Browser Window)میں ظاہر ہونے والے ویب صفحہ کے مشمولات <body> </body> ٹیگس کے درمیان میں ہیں۔ ہمارے ویب صفحہ میں یہ مندرجہ ذیل پر مشتمل ہے:

رنگین پس منظر(Background)میں بیز کمپیوٹر اور کمیونیکیشن ٹیکنالوجی؛

· مینوبار جس میں ہر ایک باب (Chapter) سے متعلق بٹن ہیں؛

· تمام متن بائیں کالم میں، دوبارہ رنگین بیک گراؤنڈ میں؛

· ہائپرلنکس کامجموعہ؛

· دو اِ ن پُٹ باکس ؛اور

· فوٹر

آئندہ سیکشنوں میں ہم ان میں سے ہر ایک سے متعلق ٹیگس کا جائزہ لیں گے۔

9.4 کوڈنگ سے شروع کرنا

ہمیں کون سے وسائل یاٹولز(Tools) درکار ہوں گے؟

HTML دستاویز کی تشکیل کرنے کے لیے ہمیں دو بنیادی ٹولز کی ضرورت ہوگی:

1۔ HTML ایڈیٹر، HTML دستاویز کی تشکیل اور اسے محفوظ (Save) کرنے کے لیے۔ونڈوز کے لیے نوٹ پیڈ (Notepad) یاورڈ پیڈ (Wordpad)، Unix کے لیے Vi اور میکنتوش کے لیے ٹیچ ٹیکسٹ (Teach Text) ٹیکسٹ ایڈیٹر کی عمدہ مثالیں ہیں۔ بہت زیادہ جدید اور فیچر سے بھرپور HTML ایڈیٹر بھی ہیں لیکن ٹیکسٹ ایڈیٹر ہماری ضرورت کو پورا کرنے کے لیے کافی ہوگا۔

نوٹ : Openoffice.org رائٹر یا مائکروسافٹ ورڈ جیسے ورڈ پروسیسر کا استعمال مت کیجیے۔ یہ ایپلی کیشن فارمیٹنگ کے لیے بڑی تعداد میں غیر مرئی کوڈ کی تشکیل کر دیتے ہیں، جو براؤزر کے اختیار (صلاحیت) سے باہر ہوتے ہیں۔ لیکن اگر آپ کو ان کا استعمال کرنا ہی ہے تو دستاویز کو Plain ASCII text کے طور پر محفوظ کیجیے۔ اس فارمیٹ میں ورڈ پروسیسر کے ذریعے تشکیل شدہ اضافی کوڈ ختم ہو جاتے ہیں۔

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

اپنے اولین HTML دستاویز کی تشکیل کرنا

ہم اس ویب صفحہ کی تشکیل کریں گے جس کا ہم نے شکل 9.3 میں جائزہ لیا تھا۔ ہم ٹیکسٹ ایڈیٹر کے طور پر ونڈوز نوٹ پیڈ کا استعمال کریں گے۔ بیسک ٹیگس ٹائپ کیجیے۔ فائل کو مناسب جگہ پر مناسب نام مثلاً home کے ساتھ محفوظ (Save) کیجیے۔ نوٹ پیڈ فائل کا ڈیفالٹ ایکسٹینشن .txt ہوتا ہے لیکن ہم ویب صفحہ کی تشکیل کرنا چاہتے ہیں لہٰذا فائل کو home.htm نام سے محفوظ کیجیے۔

آئیے اب ہم اپنے ویب صفحہ کو دیکھتے ہیں۔ home.htm فائل کو براؤزر کی مدد سے کھولیے (شکل 9.4)۔

ہم home.htm فائل میں اضافی HTML کوڈ شامل کرکے اسے ایڈٹ کر سکتے ہیں۔ ہر مرتبہ جب بھی آپ براؤزرمیں اپنے صفحہ کو دیکھنا چاہیں تو اپنے براؤزر کو refresh کیجیے (موزیلا فائرفوکس میں View ® Reload یا Ctrl + R دبائیے)براؤزرصفحہ کو دوبارہ سے لوڈ کرکے آپ کوتازہ ترین نسخہ دکھائے گا۔

ہیڈر سیکشن کو شامل کرنا

نوٹ پیڈ میں home.htm فائل کھولیے۔ <html> ٹیگ کے بعد اور <body> ٹیگ سے پہلے ٹیگ جوڑے <head> </head> داخل کیجیے۔ <head></head>کے درمیان لکھا گیا کوڈ (ٹائٹل ٹیگ کے علاوہ) براؤزر کے ذریعے ظاہر نہیں کیا جاتا ہے۔ html دستاویز کے اس حصہ میں اسکرپٹ سے متعلق سبھی حوالے، مخصوص میڈیا پلیئر، مخصوص فونٹ، بالخصوص جب ویب صفحہ اس ویب صفحہ کو انڈیکس کرنے کے لیے سرچ انجن کے ذریعے کیا جاتا ہے، اور مواد کے لیے استعمال کیے جانے والے اسٹائل (Style) وغیرہ شامل ہوتے ہیں۔ ہماری مثال میں اس قسم کی کوئی خاص ضرورت نہیں ہے۔ لہٰذا ہمارے ویب صفحہ کا ہیڈر سیکشن صرف <title> text for the title </title> ٹیگس پر مشتمل ہے۔ اس ٹیگ کو داخل کیجیے اور صفحہ کو محفوظ کیجیے۔ اپنے برائزور میں ویب صفحہ کا preview کیجیے۔

ہم <title> </title> ٹیگ کے درمیان جو کچھ بھی لکھتے ہیں وہ براؤزرونڈو کے بالائی حصہ میں اس کی مینوبار کے اوپر ظاہر ہوتا ہے۔"National Counsil of Educational Research and Training : : متن کودیکھیے۔ یہ اس وقت بھی ظاہرہوگا جب آپ ویب صفحہ کوچھاپیں گے (شکل 9.5)۔

9.5 ویب صفحہ کے مشمولات - <Body></Body> ٹیگ کے درمیان متن لکھنا

9.5.1 ویب صفحہ کی تزئین کاری -"BGCOLOR=" ایٹری بیوٹ

باڈی ٹیگ میں متعدد ایٹری بیوٹ شامل کیے جاسکتے ہیں۔ ہم ان میں سے صرف ایک ایٹری بیوٹ "bgcolor=" پر غور کریں گے۔

اس ایٹری بیوٹ کا استعمال ویب صفحہ کے پس منظر کو رنگین بنانے کے لیے کیا جاتا ہے۔ آئیے کچھ مثالوں پر غور کرتے ہیں:

body bgcolor="#ooffoo">text</body>

پہلی دو مثالوں میں آپ دیکھیں گے کہ آپ نے نہ تو رنگ کے نام کا استعمال کیا ہے اور نہ ہی اس کا ہیکساڈیسیمل (Hexadecimal) کوڈ لکھا ہے۔ آپ ہیکس کوڈ کو Gimp یا Photoshop جیسی گرافک ایپلی کیشن میں یا ویب پر دیکھ سکتے ہیں۔

تیسری مثال میں آپ دیکھیں گے کہ ہم نے یہاں صرف رنگ ہی کو متعین نہیں کیا ہے بلکہ پس منظر کی امیج کو بھی متعین کیا ہے۔ امیج رنگین پس منظر کے اوپر ظاہر ہوجائے گی۔ اگر امیج کافی بڑی ہے تو آپ کو پس منظر کے طور پر صرف امیج ہی نظر آئے گی اور اگر یہ اسکرین سے چھوٹی ہے تو اس کے چارو ں طرف پس منظر کا رنگ بھی نظر آئے گا۔ آپ امیج کو داخل کرنے کے بارے میں آئندہ سیکشن میں پڑھیں گے۔

گذشتہ سیکشن میں ہم نے HTML ٹیگ کے جوڑے <head> </head> کا معائنہ کیا تھا جس میں ہمارے ویب صفحہ کا عنوان (Title) بھی شامل تھا۔ ہمارا ویب صفحہ مندرجہ ذیل شکل کی مانند نظر آئے گا:

9.5.2 Comments ٹیگ <!— —> کا استعمال

جب آپ کوڈنگ کے بہت بڑے حصہ کو لکھتے ہیں یا آپ ایک ایسے کوڈ کے حصہ کو لکھ رہے ہیں جسے آپ یہ چاہتے ہیں کہ اسے کوئی بھی ایڈٹ یا استعمال کر سکتا ہے تو اس صورت میں لیبل کے ساتھ سیکشن کی نشاندہی کرنا اچھا ہوتا ہے۔ اسی کے ساتھ ساتھ آپ یہ بھی چاہتے ہیں کہ یہ ویب صفحہ پر ظاہر نہ ہو سکیں تو اس مقصد کے لیے سب سے مفید ٹیگ Comment ٹیگ <!—text—> ہے۔ مثال کے طور پر،

<!the following section will display the image gallery_>

Comment ٹیگ کے درمیان لکھا ہوا متن نظر انداز کر دیا جاتا ہے اور یہ براؤزر میں ظاہر نہیں ہوتا ہے۔ Comments کئی سطروں پر مشتمل ہوسکتے ہیں، اور Start اور End ٹیگ کا صرف ایک سیٹ ہی تمام سطور کو بند کرنے کے لیے استعمال ہوتا ہے۔

9.5.3 بیز اور <HN></HN> ٹیگ کا استعمال

غور کیجیے کہ بیز (Baner)کے متن کا فونٹ سائز بڑا ہوتا ہے۔ اس کام کو کرنے کے کئی طریقے ہیں۔ آپ فونٹ سائز کو متعین کر سکتے ہیں، آپ پہلے سے طے شدہ سائز کا استعمال کر سکتے ہیں یا متن پر مشتمل امیج کا استعمال کر سکتے ہیں۔ جب کسی متن کو مخصوص اور منفرد انداز میں پیش کرنا ہو یا کسی ایسے متنی تاثر(Text Effects)کو استعمال کرنا ہو جسے عام HTML کوڈنگ کے ذریعے حاصل نہیں کیا جاسکتا تو آخری متبادل کو ترجیح دی جاتی ہے۔

حالانکہ فونٹ کے سائز کو متعین کرنا ممکن ہے، پھر بھی HTML متن کوسرخی(Heading) کے طور پر استعمال کرنے کے لیے چھ سطحیں فراہم کرتا ہے۔ یہ 1 نمبر سے لے کر 6 نمبر تک ہیں جس میں نمبر 1 سب سے بڑی اور نمبر 6 سب سے چھوٹی ہے۔ لیکن h1 کا سائز کتنا بڑا ہے اور h6 کتنا چھوٹا ہے؟ یہ نسبتی جسامتیں(Size)ہیں۔اگر آپ نے h1 سے لے کر h6 سائز میں چھ جملے لکھے ہیں جیسا کہ شکل 9.7 میں دکھایا گیا ہے اور View ® Zoom ® Zoom in یا Ctrl++ دباتے ہیں تو ان میں سے ہر ایک جملہ اور زیادہ بڑا ہو جائے گا۔ مسلسل طور پر ایسا کرنے سے متن کا سائز بڑا ہوتا ہی جائے گا۔ یہ اپنی نسبتی جسامتوں کو برقرار رکھتے ہیں۔ اب View ® Zoom ® Zoom out یا Ctrl -- دبائیے، متن لگاتار چھوٹا ہوتا جائے گا لیکن ان کی نسبتی جسامتیں برقرار رہیں گی۔

اس صورت میں <h1> text </h1>، <h2> text </h2) وغیرہ سے لے کر <h6> text </h6> کا استعمال کیا گیا ہے۔

9.5.4 ٹیگ کا استعمال <font></font>

<hn> </hn> ٹیگ براؤزر کے ڈیفالٹ فونٹ کااستعمال کرتا ہے اور متن کو مختلف سائزوں میں ظاہر کرتا ہے۔ لہٰذا اگر آپ متن کو مختلف قسم کے فونٹ میں ظاہر کرنا چاہتے ہیں تو آپ کیا کریں گے؟

اگر آپ Open office.org writer یا مائکروسافٹ ورڈ کا استعمال کرتے ہیں تو آپ مختلف قسم کے فونٹ کے استعمال سے پہلے ہی واقف ہوں گے۔ یہ حروف کو لکھنے کے مختلف انداز ہیں۔ HTML میں اس کام کے لیے ہم <font> text </font> ٹیگ کا استعمال کرتے ہیں۔ اگر آپ کسی بھی ایٹری بیوٹ کا استعمال نہیں کرتے ہیں تو براؤزر اپنے ڈیفالٹ فونٹ فیس کا استعمال کر لیتا ہے۔ لیکن اگر آپ font face = یا صرف face = ایٹری بیوٹ کا استعمال کرتے ہیں اور اس کی قدر یعنی فونٹ کا نام متعین کر دیتے ہیں تو متن کو اس فونٹ کا استعمال کرکے ظاہر کیا جائے گا۔ ظاہر ہے، جس کمپیوٹر پر اس ویب صفحہ کو دیکھا جائے گا اس پر یہ فونٹ نصب ہونا چاہیے۔

HTMLکوڈکی عبارت یہ ہے:

آپ دیگر ایٹری بیوٹ جیسے size = یا color = کا بھی استعمال کر سکتے ہیں اور اپنی پسند کے مطابق ان کی قدر متعین کر سکتے ہیں۔ سائز کے ساتھ آپ +1، +2 وغیرہ، –1، –2 وغیرہ کا استعمال کر سکتے ہیں یا مطلق قدروں جیسے 24px کا استعمال کر سکتے ہیں جہاں px کا مطلب ہے پکسل (Pixels) یا فیصد کا بھی استعمال کر سکتے ہیں مثلاً siz = 30%۔ color کے ساتھ (اس معاملے میں color کی امریکی املا (Spelling) کا ہی استعمال کیجیے) یا تو اس کا نام یا رنگ کے ہیکساڈیسیمل (یا ہیکس کوڈ) کا استعمال کیجیے۔

آپ کو متن کا ہر ایک پیراگراف مختلف فونٹ فیس فونٹ سائز اور کلر میں نظر آئے گا۔ صفحہ کے لیے HTML کوڈ کو شکل 9.8 میں دیکھا جاسکتا ہے۔

9.5.5 متن کو نمایاں کرنے والے ٹیگس

حالانکہ مختلف زبانوں میں فونٹ فیس اور خوش نویسی کے مختلف انداز کی بہت بڑی تعداد دستیاب ہے۔ مگر ان میں سے کئی متن کے بڑے حصوں کو پڑھنے کے لیے موزوں نہیں ہوتے۔ مزید یہ کہ ایک ہی صفحہ پر متعدد مختلف فونٹ فیس کا استعمال قاری کے لیے تھکن کا باعث ہو سکتا ہے۔ لہٰذا متن کو نمایاں کرنے کے دوسرے طریقوں کو ترجیح دی جاتی ہے۔

ہم اس قسم کی تکنیک کا پہلے بھی سامناکرچکے ہیں جب ہم نے <head> ٹیگ کا استعمال کیا تھا۔ آپ مختلف جسامتوں کے متن کا استعمال نمایاں کرنے کے لیے کر سکتے ہیں۔ حالانکہ یہ عنوان (Title) اور سرخی (Heading) کے لیے زیادہ موزوں ہے۔ ہم متن کے اندر موجود الفاظ اور جملہ کو کس طرح نمایاں کرتے ہیں۔ عام طور سے ہم جلی( Bold) خمیدہ حروف (Italics )یا خط کشیدہ Underline) (کا استعمال کرتے ہیں۔ آئیے ایسے ٹیگ پر غور کرتے ہیں جس کے ذریعے اس کام کو کیا جاتا ہے۔

آپ بولڈ فیس متن کے لیے </strong> <strong> text ٹیگ اور متن کو italicized کرنے کے لیے <em> text </em> ٹیگ کا استعمال کر سکتے ہیں۔ کلوزنگ ٹیگ کا استعمال کرنا مت بھولیے۔ اگر آپ ایسا نہیں کرتے ہیں تو بعد والا متن بھی نمایاں ہو جائے گا۔ اپنے ویب صفحہ پر اسے آزمائیے۔

9.5.6 پیراگراف بنانا اور متن کے حصوں کوالگ کرنا

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

<p>text</p> ٹیگ:

ہم اپنے ویب صفحہ home.htm پر دوبارہ غور کرتے ہیں۔ پہلے پیراگراف کا عنوان Introduction ہے۔ پیراگراف کی ساخت پر نظر ڈالیے (شکل 9.9 دیکھیے)۔ عنوان کے بعد خالی لائن ہے جس کے بعد متن کا ایک بلاک موجود ہے۔ دوسرا پیراگراف فوراً ہی شروع نہیں ہوتا ہے۔ ان کے درمیان ایک یا دو خالی سطریں ہو سکتی ہیں۔

آئیے اب اس ٹیگ کا معائنہ کرتے ہیں جس کی مدد سے یہ کام انجام دیا جائے گا <p> </p> ٹیگ پیئر کا استعمال پیراگراف کو متعین کرنے کے لیے کیا جاتا ہے۔ ابتدائی یا اوپننگ ٹیگ <p> ٹیگ سے پہلے خالی سطر کا تعین کرے گا۔ لہٰذا ان ٹیگس کے اندر بند پیراگراف اسے پچھلے پیراگراف سے الگ کردے گا۔ لیکن آخری یا کلوزنگ ٹیگ </p> ٹیگ کے بعد خالی سطر کو متعین نہیں کرے گا۔ لہٰذا متن کا اگلا حصہ <p> سے شروع ہوگا۔

جب اس کا استعمال اپنے آپ ہوتا ہے تب یہ ٹیگ خالی سطروں کی وضاحت کرتا ہے۔جب آپ متن کے بلاکوں کو زور دے کر الگ کرنا چاہتے ہیں تب یہ سود مند ہوتا ہے۔نیچے دی گئی مثال کو دیکھیے۔

<br> ٹیگ:

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

ان معاملوں میں <br> ٹیگ کا استعمال کیا جاتا ہے جس کا مطلب ہے line break۔ یہ ٹیگ اپنے بعد والے متن کو نئی سطر میں کھسکا دیتا ہے۔ یہ ایسا واحد ٹیگ ہے جس میں اختتامی (Closing) ٹیگ نہیں ہوتا۔

نوٹ : لائن بریک ٹیگ <br> کا استعمال کرکے جتنی چاہیں اتنی خالی لائنیں فراہم کی جاسکتی ہیں لیکن <p> ٹیگ صرف ایک ہی خالی لائن فراہم کرتا ہے۔ بالفاظ دیگر <p> <p> <p> تین خالی لائنیں فراہم نہیں کرے گا۔ یہ صرف ایک خالی لائن فراہم کرے گا لیکن <br> <br> <br> ٹیگ کا استعمال کرنے سے تین خالی لائنیں حاصل ہوں گی۔

<hr> ٹیگ

اگر آپ لائن کا استعمال کرکے اپنے ویب صفحہ کے دو حصوں کوالگ کرنا چاہتے ہیں تو آپ اس کام کو دو طرح سے کر سکتے ہیں۔ ایک طریقہ تو یہ ہے کہ آپ امیج کااستعمال کر یں۔ دوسرے طریقہ کے تحت آپ <hr> ٹیگ کا استعمال کر سکتے ہیں۔ یہ ایک مرتبہ پھر اسٹینڈ ایلون ٹیگ ہے اور اس کا مطلب ہے افقی ضابطہ( Horizontal Rule)۔ آپ اس ٹیگ کے ساتھ متعدد ایٹری بیوٹ کا استعمال کر سکتے ہیں جیسا کہ ذیل میں دکھایا گیا ہے۔

یہاں width سطر کی لمبائی کو اور size موٹائی کو ظاہر کرتا ہے۔

9.5.7 متن کی خط بندی

زیادہ تر متن کی خط بندی صفحہ کے بائیں حاشیہ کے اعتبار سے ہوتی ہے۔ کچھ مخصوص معاملوں میں آپ اس کی خط بندی دائیں طرف (Right align) کرنا چاہتے ہیں۔ اگر یہ سرخی(Heading) ہے تو آپ اسے صفحہ کے درمیانی حصہ میں رکھنا چاہیں گے۔ آئیے ہم اپنے ویب صفحہ میں پیراگرافوں پر غور کرتے ہیں۔ پہلے پیراگراف کی خط بندی بائیں طرف سے کی گئی ہے۔ غور کیجیے کہ ہر ایک سطر بائیں طرف یکساں عمودی مقام سے شروع ہوتی ہے مگر یہ دائیں طرف الگ الگ جگہوں پر مکمل ہوتی ہیں۔ align = "left" ایٹری بیوٹ کا استعمال مختلف ٹیگس کے ساتھ کیا جاسکتا ہے۔ مثال کے طور پر ہیڈنگ ٹیگ کے ساتھ یا پیراگراف ٹیگ کے ساتھ یا جدولوں کے اندر بھی۔ مثال کے طور پر

<p align = "left"> This is left aligned. </p>

اسی طرح آپalign=“right”، align=“center” اور align=”justify” ایٹری بیوٹ کا استعمال متن کی خط بندی دائیں طرف اوردرمیان میں کر سکتے ہیں۔ اس ایٹری بیوٹ کے ساتھ اور بھی کئی ایٹری بیوٹ استعمال کیے جاسکتے ہیں جیسے فونٹ (font)، رنگ (Colour) یا سائز۔

9.5.8 مشمولات کو فہرست کی شکل میں پیش کرنا

عام طور سے دو قسم کی فہرستیں استعمال کی جاتی ہیں۔بلیٹ (Bullet)پر مشتمل فہرست یا بے ترتیب فہرست اور نمبر شمار پر مشتمل فہرست یا ترتیب وار فہرست۔

<ul> اور </ul> ٹیگ پیئر کا مطلب ہے بے ترتیب فہرست(unordered list)جبکہ <li> سے مراد ہےList Item۔ اگرچہ ٹیگ کو بند کرنے کے لیے </li> کا استعمال کر سکتے ہیں مگر یہ اختیاری ہے۔ ہر آئٹم سے پہلے بلیٹ کو دیکھیے ۔ان کی تشکیل <li> ٹیگ کی وجہ سے ہوتی ہے۔ ایک فہرست میں آئٹموں کی تعداد کی کوئی قید نہیں ہے۔

ترتیب وار فہرست کی ساخت کافی حد تک بے ترتیب فہرست کی طرح ہی ہوتی ہے سوائے اس کے کہ اس فہرست کا ابتدائی ٹیگ <ul> کے بجائے <ol> ہوتا ہے اور اختتامی ٹیگ (Closing tag) </ul> کے بجائے </ol> ہوتا ہے۔ فہرست کے اندر فہرست ہو پھر بھی ایک ہی طرح کے ٹیگس استعمال ہوں گے۔

ترتیب وار فہرست مندرجہ ذیل تین ایٹری بیوٹ فراہم کرتی ہے:

<OL> ٹیگ کے TYPE ایٹری بیوٹ کا استعمال فہرست میں موجودآئٹم کے سامنے ظاہر ہونے والے نمبر شمارکی قسم کو تبدیل کرنے کے لیے کیا جاتا ہے (1/A/a/I/i)۔ مثال کے طور پر: <OL TYPE = 1> کا استعمال کرنے پر نمبر شمار 1، 2، 3 کی شکل میں ظاہر ہوتا ہے (یہ ڈیفالٹ ہے)۔

<OL TYPE = A> کے استعمال سے نمبر شمار A، B، C کی شکل میں ظاہر ہوتا ہے۔

<OL TYPE = a> کے استعمال سے نمبر شمار a، b، c کی شکل میں ظاہر ہوتا ہے۔

<OL TYPE = I> کے استعمال سے نمبر شمار رومن اعداد I،II،IIIکی شکل میں ظاہر ہوتا ہے۔

<OL TYPE = i> کے استعمال سے نمبر شمار i، ii، iii کی شکل میں ظاہر ہوتا ہے۔

<OL> کے START ایٹری بیوٹ کا استعمال نمبر شمار کو “1” (یا A، a، I یا i) کے علاوہ کسی اور عدد سے شروع کرنے کے لیے کیا جاتا ہے۔ مثال کے طور پر:

<OL TYPE = 1 Start = 5> نمبر شمار کو 5 سے شروع کرے گا۔

<OL TYPE = A Start = 5> نمبر شمار کو E سے شروع کرے گا۔

<LI> کے قدری وصف (Value attribute)کا استعمال فہرست کے اندر مخصوص اعداد کو تبدیل کرنے کے لیے کیا جاتا ہے۔ مثال کے طور پر: <LI TYPE = 1 VALUE = 5> عدد 5 کو ظاہر کرے گا۔

9.5.9 جدولیں - <Table></Table) ٹیگ کا استعمال

جدولیں ویب صفحہ پر مواد (مشمولات) کو مرتب کرنے کی ایک طاقتور تکنیک ہے۔ جدول کے تصور کا استعمال دو طریقوں سے کیا جاتا ہے؛ ایک طریقے میں جدولیں ویب صفحہ پر نظر آتی ہیں جبکہ دوسرے طریقے کے تحت جدولیں ویب صفحہ پر نظر نہیں آتیں۔ ہم ان دونوں طریقوں کی مثالوں پر غور کریں گے۔

جدول کو قطاروں اور کالموں میں مرتب کیا جاتا ہے۔ کچھ قطاروں اور کالموں کو باہم ملا کر جدول کے اندر کشادہ جگہ حاصل کی جاسکتی ہے۔ انھیں کئی قطاروں اور کالموں میں تقسیم بھی کیا جاسکتا ہے۔ جدول ہیڈر قطار پر مشتمل ہو سکتی ہے جو یہ ظاہر کرتی ہے کہ ہر ایک کالم میں کیا شامل کیا گیا ہے۔ اسی طرح اس کے پہلے کالم میں Captions موجود ہوسکتے ہیں جو ظاہر کرتے ہیں کہ ہر ایک قطار میں کیا شامل کیا گیا ہے۔ ان میں سے ہر ایک قطار، کالم، انفرادی خانے(Cell) یا کیپشن کو مختلف طریقوں سے نمایاں کیا جاسکتا ہے، جیسے مختلف قسم کے فونٹ فیس کا استعمال کرکے، مختلف جسامت (Size)کے حروف کا استعمال کرکے، متن کو نمایاں کرکے،اس کی مختلف انداز میں خط بندی کرکے یا پس منظر میں کوئی امیج یا رنگ بھر کر۔ لہٰذا جدول کی متعدد قسمیں ہو سکتی ہیں۔

جدولوں کی قطاروں اور کالموں کی حد بندی لائنوں کے ذریعے کی جاتی ہے۔ HTMLکی مثال میں ہم انھیں حاشیے بارڈر سے تعبیر کرتے ہیں۔ ان کے رنگ اور ان کی لائن کی موٹائی میں ترمیم کی جاسکتی ہے۔ خانوں(Cell)کے اندر موجود متن بارڈر کے ذریعے الگ رہتا ہے۔ خانوں کو بھی ایک دوسرے سے الگ کیا جاسکتا ہے۔ جب ہم <table> </table> ٹیگ پیئر کا استعمال سیکھتے ہیں تو درحقیقت ہم مواد کی تدوین و ترتیب کا ایک مکمل نیا طریقہ سیکھتے ہیں۔

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

<table> <table> پیئر جدول کے تعین کے لیے استعمال کیا جاتا ہے۔ سبھی ٹیگ، ایٹری بیوٹ یا قدریں، متن یا امیج جدول کے مواد کی تشکیل کرتے ہیں۔ تین قطاروں اور دو کالموں پر مشتمل ایک سادہ جدول۔ پہلی قطار میں ہر ایک کالم کے لیے کیپشن ہیں۔ HTML کوڈ کیسا نظر آتا ہے؟ شکل 9.11 دیکھیے۔

بنیادی طور پر جدول کی تشکیل میں مندرجہ دیل 5 ٹیگس کا استعمال ہوتا ہے:

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

<Table> ٹیگ کے ایٹری بیوٹ

جدول کے باڈر اور باڈر کے رنگ کا تعین

<TABLE> ٹیگ کے BORDER ایٹری بیوٹ کا استعمال جدول کا بارڈر بنانے کے لیے کیا جاتا ہے۔ BORDER ایٹری بیوٹ جدول کے باڈر کی موٹائی کا تعین عدد کی شکل میں کرتا ہے۔ اس کی( آغازی ترتیب) BORDER = 0 ہوتی ہے جس کا مطلب ہے اگر آپ بارڈر ایٹری بیوٹ کا استعمال نہیں کرتے ہیں تو آپ کی جدول میں باڈر کی تشکیل نہیں ہوگی۔

مثال : <table border=2>This table has a border of thickness 2</table>

جدول کو رنگین بنانے کے دو طریقے ہیں۔ آپ یا تو باڈر کو رنگین بنا سکتے ہیں یا پھر خانوں میں رنگ بھر سکتے ہیں۔ جدول کے بارڈر کا رنگ متعین کرنے کے لیے آپ BORDER COLOR = ایٹری بیوٹ کا استعمال کر سکتے ہیں۔ کس قسم کا رنگ بھرنا چاہتے ہیں اس کے لیے آپ BGCOLOR = ایٹری بیوٹ کا استعمال کریں گے۔

مثال:<table bordercolor=”red”>This table will have a red border</table>

<table bgcolor=”green”>The cells of the table will have a green background </table>

جیسا کہ ہم پہلے بھی دیکھ چکے ہیں، ان ایٹری بیوٹ کی قدر رنگ کا ہیکس کوڈ بھی ہو سکتی ہے۔ آپ نیلے رنگ کے لیے "blue" کی جگہ #ooooff کا استعمال کر سکتے ہیں۔ یہ اس وقت بہت کارآمد ثابت ہوتا ہے جب آپ رنگ کے کسی ایسے مخصوص شیڈ کا استعمال کرنا چاہتے ہیں جس کا کوئی نام نہیں ہے۔

جدول میں پس منظر کے طور پر آپ رنگ کے بجائے امیج کا بھی استعمال کر سکتے ہیں۔ BACKGROUND ایٹری بیوٹ جدول یا خانوں کے پس منظر میں امیج کو متعین کرتا ہے۔ ان ایٹری بیوٹس کا تعین کرتے ہوئے مندرجہ ذیل باتیں یاد رکھنی چاہئیں:

· <table>ٹیگ میں، یہ پوری جدول (خانے اور حاشیے) کو متاثر کرتا ہے۔

· <tr>ٹیگ میں یہ پوری قطار (صرف خانے) کو متاثر کرتا ہے۔ یہ <table> ٹیگ میں متعین کیے گئے رنگ کے اوپر منطبق ہو جاتا ہے۔

· اگر BACKGROUND ایٹری بیوٹ کو <tr> ٹیگ میں متعین کیا جاتا ہے تو یہ کام نہیں کرتا ہے۔

· <td> ٹیگ میں یہ متعینہ خانہ کو ہی متاثر کرتا ہے۔یہ <table> یا <tr> ٹیگ میں متعین کیے گئے رنگ یا امیج پر منطبق ہوجاتا ہے۔

جدول اور اس کے خانوں (Cell) کے سائز کو مرتب کرنا

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

کچھ ایسی خصوصیات ہیں جو ان ایٹری بیوٹ سے وابستہ ہیں، جب آپ انھیں <tr> اور <td> ٹیگ کے ساتھ استعمال کرتے ہیں تو آپ کو مندرجہ ذیل باتیں ذہن میں رکھنی چاہئیں:

· HEIGHT ایٹری بیوٹ کو کسی خاص <TD> یا <TR> ٹیگ میں استعمال کرنے پر یہ <TABLE> ٹیگ کی HEIGHT تخصیص پر منطبق ہو جاتا ہے۔

· HEIGHT/WIDTH ایٹری بیوٹ کو مخصوص <TD> یا <TH> ٹیگ میں استعمال کرنے پر اس کالم کے تمام <TD> ٹیگس کی اونچائی / چوڑائی تبدیل ہو جاتی ہے۔ اگر ایک ہی کام کے دو خانے HEIGHT/WIDTH ایٹری بیوٹ پر مشتمل ہیں تو عام طور سے براؤزر متعین کی گئی نسبتاً زیادہ چوڑائی کا استعمال کرتا ہے۔

حاشیوں کو اُن کی پچھلی حالت کے مطابق مرتب کرنا

CELLPADDING ایٹری بیوٹ (پکسل میں) اس بات کا تعین کرتا ہے کہ خانے کے اندرآئٹموں اور خانے کی دیواروں کے درمیان کتنی خالی ’’جگہ‘‘ موجود رہے گی، خانوں کو بڑا بنانے کے لیے متعین کی گئی اس ایٹری بیوٹ کی زیادہ قدر خانہ کو غیر ضروری طور پر بڑا کر دیتی ہے۔

CELLSPACING ایٹری بیوٹ (پکسل میں) دو متصل خانوں کے درمیان کے فاصلے کو متعین کرتا ہے۔ یہ ایٹری بیوٹ خاص طور سے اس وقت کارآمد رہتا ہے جب آپ متن کے بلاک کو علاحدہ کرنے کے لیے ٹیبل ٹیگ کے لیے استعمال کرتے ہیں۔ مثال کے طور پر آپ اس ایٹری بیوٹ کا استعمال دو کالمی متن کی تشکیل کے لیے کر سکتے ہیں۔

آپ دیکھیں گے کہ اگر آپ سیل پیڈنگ کو متعین نہیں کرتے ،تو جدول کا باڈر جدول کے مشمولات کے کناروں سے متصل ہو جاتا ہے۔ کچھ مثالیں شکل 9.12 میں دی گئی ہیں۔

سیل الائنمنٹ کو اپنی مرضی کے مطابق مرتب کرنا

سیل الائنمنٹ کا مطلب ہے جدول کے خانے میں متن کی افقی اور عمودی خط بندی۔ سیل کے مشمولات (By default) کی خط بندی بائیں طرف (افقی طور پر) اور درمیان میں (عمودی طور پر) ہوتی ہے۔ اسے تبدیل کرنے کے لیے ہم <td> ٹیگ میں align = ایٹری بیوٹ کا استعمال کرتے ہیں۔ مندرجہ ذیل مثالوں پر غور کیجیے:

افقی خط بندی کے لیے،

<TD ALIGN = left> متن کی خط بندی بائیں طرف سے کرتا ہے۔

<TD ALIGN = right> متن کی خط بندی دائیں طرف سے کرتا ہے۔

<TD ALIGN = center> متن کی خط بندی درمیان میں سے کرتا ہے۔

عمودی خط بندی کے لیے

<TD VALIGN = top> متن کی خط بندی بالائی حصے کی طرف سے کرتا ہے۔

<TD VALIGN = bottom> متن کی خط بندی نچلے حصے کی طرف سے کرتا ہے۔

<TD VALIGN = middle> متن کی خط بندی وسطی حصے کی طرف سے کرتا ہے۔

آپ افقی align = ایٹری بیوٹ اور عمودی align = ایٹری بیوٹ کو یکجا کر سکتے ہیں۔

قطاروں اور کالموں کا انضمام

دو یا دو سے زیادہ متصل خانوں یا دو یا دو سے زیادہ قطاروں کو ضم کرنے کے لیے ROWSPAN/COLSPAN ایٹری بیوٹ کا استعمال کیا جاسکتا ہے۔ اس کی مدد سے ہم خانے کو پوری قطار یا کئی قطاروں یا کالموں تک پھیلا سکتے ہیں۔ مندرجہ ذیل مثالوں (شکل 9.13) پر غور کیجیے:

نیٹسنگ ٹیبل

ویب صفحے پر دو جدولوں کو پہلو بہ پہلو رکھنے کی کوشش کیجیے۔ آپ دیکھیں گے کہ <table> ٹیگ دوسری جدول کو خود بخود اگلی لائن میں بھیج دیتا ہے۔ اس مسئلے سے پرقابوپانے کے لیے ہم دو جدولوں کو تیسری جدول (دونوں جدولوں کے اطراف ایک قسم کا دباؤ) کے اندر نیسٹنگ کر دیتے ہیں یعنی انھیں ایک ہی لائن پر ایک دوسرے سے متصل کر دیتے ہیں۔

آپ ایک قطار اور دو کالموں پر مشتمل جدول کی تشکیل کرتے ہیں اور ہر ایک خانے میں ایک ایک جدول کی تشکیل کر سکتے ہیں۔ کوڈ اور نتیجہ ذیل کی شکل 9.14 میں دیکھیے۔

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

آئیے اب ہم اپنے ویب صفحے پر جدولوں کے استعمال پر غور کرتے ہیں۔ شکل 9.15 کودیکھیے۔ یہاں جدولوں کا دو طرح سے استعمال ہوتا ہے۔ ویب صفحہ خود بھی ایک جدول جیسا نظر آتا ہے۔ یہ جدول دو قطاروں پر مشتمل ہوتی ہے۔ پہلی قطار میں صرف ایک خانہ(Cell) یا ایک کالم ہے اور دوسری قطار میں جو بھی فہرست متبادلات (Menu options) دیے گئے ہیں،وہ پانچ خانوں پر مشتمل ہے۔ تیسری قطار جس میں ویب صفحہ کا متن موجود ہے، دو خانوں یا کالموں پر مشتمل ہے۔

آپ کو صفحہ پر تین اور جدولیں بھی نظر آئیں گی:

· پہلی جدول جس میں مواد کی فہرست شامل ہے چھ قطاروں پر مشتمل ہے۔ اس جدول کی نیسٹنگ اصل جدول کی تیسری قطار کے پہلے کالم کے اندر کر دیتے ہیں۔

· دوسری فہرست میں ہارڈویئر کی خصوصیات اور قیمتیں درج ہیں، اس جدول کی دوسرے کالم کے اندر نیسٹنگ کر دیتے ہیں۔ ہیڈر قطار یہ ظاہر کرتی ہے کہ اس میں کس قسم کی معلومات فراہم کی گئی ہے اور پہلے کالم میں مختلف قسم کے ہارڈویئر کی فہرست دی گئی ہے۔

· اصل جدول کی تیسری قطار کے تیسرے کالم میں موجود تیسری جدول میں امیج گیلری کے تھمب نیل (Thumbnails) شامل ہیں۔ ہر ایک امیج ایک ایسا ہائپر لنک ہے جو امیج کو وسیع شکل میں دوسرے ویب صفحہ پر ظاہر کرے گا۔ ہم اس جدول کے ٹیگ پر سیکشن 9.5.10 میں بحث کریں گے۔

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

9.5.10 ویب صفحہ پر فوٹوگراف اور دیگر میڈیا

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

امیج-ڈرائنگ، فوٹوگراف، گراف یا آرائشی متن (امیج کے طور پر محفوظ کیا گیا) کی شکل میں ہو سکتی ہے۔ کم فائل سائز کی ضرورت کے پیش نظر HTML میں JPG، gif، اور png فارمیٹ کا استعمال ہوتا ہے۔ لیکن جیسا کہ ہم پہلے جان چکے ہیں کہ HTML ٹیکسٹ فائل کی تشکیل کرتا ہے۔ لہٰذا امیج کو فائل کے اندر نہیں لگایا جاسکتا ہے۔ فائل کا حوالہ دے کر امیج فائل کو متن فائل سے متصل کر دیا جاتا ہے۔

ہم ویب صفحہ پر امیج کو داخل کرنے کے لیے <img> ٹیگ کا استعمال کرتے ہیں۔ اسے ہمیشہ SRC ایٹری بیوٹ کے ساتھ استعمال کیا جاتا ہے جس کا مطلب ہے source of the file (یعنی امیج فائل کیا ہے اور یہ کہاں واقع ہے؟)۔ کچھ مثالیں ذیل میں دی گئی ہیں:

پہلی مثال ظاہر کرتی ہے کہ امیج اسی فولڈر میں واقع ہے جس میں html فائل ہے۔ دوسری مثال میں امیج images نام کے اس ذیلی فولڈر میں واقع ہے جس میں html فائل موجود ہے۔ یہ ایک دلچسپ متبادل بھی فراہم کرتی ہے۔ امیج فائل کہیں بھی واقع ہوہم اس کے صحیح مقام کا تعین کرسکتے ہیں۔ امیج دنیا کے کسی بھی حصہ میں واقع سرور میں موجود کسی دوسری ویب سائٹ پر موجود ہو سکتی ہے۔ اس کے لیے ٹیگ مندرجہ ذیل ہوگا:

<IMG SRC = "ww.mywebsite.com/photographs/phto1.jpg"

اس سے ظاہر ہے کہ جب آپ اپنا ویب صفحہ دیکھتے ہیں تو ویب سائٹ اور امیج کہیں دور واقع سرور پر دستیاب ہے ۔

<IMG> ٹیگ کے ایٹری بیوٹ

<IMG> ٹیگ کے ساتھ کئی ایٹری بیوٹ کا استعمال کیا جاتا ہے جو امیج کی فارمیٹنگ، اسے نمایاں کرنے اور اس کا سائز متعین کرنے میں مدد کرتے ہیں۔

امیج کے ابعاد کو متعین کرنا

یاد رکھیے کہ امیج کا فائل سائز بہت زیادہ ہو سکتا ہے۔ امیج کے ابعاد (اونچائی اور چوڑائی) کا تعین امیج کے لوڈ ہونے میں لگنے والے وقت کو کنٹرول کرتا ہے۔ جب براؤزر صفحہ کو لوڈ کرتا ہے تو یہ height اور width ایٹری بیوٹ کو نوٹ کر لیتا ہے اور امیج کے لیے کافی زیادہ جگہ چھوڑ دیتا ہے۔ اس کے بعد یہ باقی تمام متن کو لوڈ کرتا ہے اور پھر واپس جاتا ہے اور امیج کو اس جگہ میں ظاہر کرتا ہے۔ اگر یہ ایٹری بیوٹ متعین نہ ہوں تو براؤزر کو باقی متن ظاہر کرنے سے پہلے امیج کے ابعاد حاصل کرنے کے لیے امیج کا بڑا حصہ لوڈ کرنا پڑتا ہے نتیجتاً صفحہ کے دیگر اجزا (عناصر) کو ظاہر کرنے کی رفتار کم ہو جاتی ہے۔ امیج کی اونچائی اور چوڑائی کو متعین کرنے کے لیے <IMG) ٹیگ میں HEIGHT اور WIDTH (پکسل میں) ایٹری بیوٹ شامل کیجیے۔

اگر اونچائی اور چوڑائی کی قدریں امیج کے مقابلے میں کم یا زیادہ ہوں تو کیا ہوگا؟ ظاہر ہے امیج چھوٹی ہو جائے گی یا پھیل جائے گی (شکل 9.16)۔ اونچائی یا چوڑائی حقیقی امیج کے بالکل مساوی ہونی چاہیے۔

امیج کی خط بندی

ویب صفحہ پر امیج فطری طور پر (By default) بائیں طرف ظاہر ہوتی ہے اور متن امیج کی سب سے نیچے والی لائن پر ظاہر ہوتا ہے۔ اس فطری ترتیب کو تبدیل کرنے کے لیے HTML متعدد متبادلات فراہم کرتا ہے۔

· متن کے خط کی مناسبت سے تین متبادلات امیج کی خط بندی عمودی طور پر کرتے ہیں: align = top، align = bottom اور align = middle۔

· دو متبادلات امیج کی خط بندی ونڈو کے دائیں طرف یا بائیں طرف سے کرتے ہیں۔

مندرجہ ذیل شکل 9.17 دیکھیے۔

امیج کا حاشیہ

<IMG> ٹیگ کا BORDER ایٹری بیوٹ بارڈر کو ظاہر کرتا ہے۔ آپ قدر کا تعین کرکے اس کی موٹائی کو بھی کنٹرول کر سکتے ہیں۔ ڈیفالٹ قدر 0 ہوتی ہے جو بارڈر کی عدم موجودگی کو ظاہر کرتی ہے۔ اگر آپ bordercolor = ایٹری بیوٹ کی مدد سے باڈر کا رنگ متعین نہیں کرتے ہیں تو <body> ٹیگ میں متعین کیے گئے رنگ کا استعمال کیا جائے گا۔ اگر آپ نے ایسا نہیں کیا ہے تو سیاہ رنگ استعمال ہوگا۔

متبادل متن کو ظاہر کرنا

ویب کا استعمال سبھی لوگ کرتے ہیں اور ان میں سے کچھ لوگ نابینا بھی ہو سکتے ہیں۔ نابینا افراد ویب کا استعمال کس طرح کرتے ہیں؟ اسکرین ریڈر سافٹ ویئر ویب صفحہ کو پڑھ کر سناتے ہیں۔ لیکن جب امیج آجائے تو کیا ہوگا؟

اس صورت میں <IMG> کے ٹیگ ALT ایٹری بیوٹ کا استعمال کرتا ہے۔ اس کا استعمال ظاہر ہونے والے Alternative متن کو متعین کرنے کے لیے کیا جاتا ہے۔ یہ ایٹری بیوٹ اس صورت میں بھی کارآمد ثابت ہوتا ہے جب:

· استعمال کنندہ صرف ٹیکسٹ براؤزر کا استعمال کرتا ہے۔

· ا ستعمال کنندہ امیج کو آف کر دیتا ہے تاکہ فائل تیزی سے لوڈ ہو جائے۔

· براؤزر امیج کو مناسب طریقے سے ظاہر نہیں کر پاتا ہے۔

· لنک کے مناسب طریقے سے کام نہ کرنے کی صورت میں امیج ظاہر نہیں ہوپاتیں۔

· امیج لوڈہوتے وقت متن(Text)ظاہر ہوجاتا ہے۔

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

جیسا کہ امید کی جاتی ہے ہر ایک <tr> </tr> پیئر پانچ <td> </td> پیئر پر مشتمل ہے، جو ہر ایک قطار میں پانچ خانوں کو ظاہر کرتا ہے۔ ہر ایک خانہ ایک امیج پر مشتمل ہے اور یہ امیج خود ایک لنک (دوسری امیج کے ساتھ) کے طور پر کام کرتی ہے۔ لہٰذا آپ مندرجہ ذیل کوڈ کی توقع کر سکتے ہیں<a hrf = "page.htm"> <img src = img01.jpg> </a> جہاں <a> </a> پیئر ہائپرلنک کو ظاہرکرتا ہے اور <img> ٹیگ تھمب نیل کو ظاہر کرتا ہے۔ سورس کوڈ کا مشاہدہ کیجیے اور اس کی تصدیق کیجیے۔

9.5.11 ویب صفحہ کو مکالماتی بنانا - ہائپر لنک

انٹرنیٹ کو نوع انسانی کا عظیم ترین وسیلہ بنانے والی چیز دراصل وسائل کو ایک دوسرے سے منسلک (Link)کرنے کی اس کی صلاحیت ہے اور ماؤس(Mouse) کے ایک کلک کے ذریعے آپ دنیا کے کسی دوسرے حصہ میں واقع مشین میں موجود صفحہ پر پہنچ سکتے ہیں۔ ہم انھیں ہائپرلنک (Hyperlinks) کہتے ہیں۔ اس سیکشن میں ہم ان ٹیگس پر غور کریں گے جو اس کام میں مدد کرتے ہیں۔ یہ سب سے سادہ مگر اہم ترین ٹیگ پیئر <A> text </A> ہے۔

ٹیگس کے درمیان موجود متن لنک میں تبدیل ہو جاتا ہے، یہ لنک اسی صفحہ پر، اسی فولڈر میں موجود کسی دوسرے صفحہ، کسی دوسرے فولڈر میں موجود کسی اور صفحہ یا کہیں اور واقع ہو سکتا ہے۔ لیکن یہ اکیلا ٹیگ کار آمد نہیں ہے کیونکہ اس سے یہ معلوم نہیں ہو پاتا کہ کون سا صفحہ اس سے منسلک ہے۔

وہ ایٹری بیوٹ جو اس بات کی وضاحت کرتا ہے وہ HREF = ہے۔ لہٰذا ہائپر لنک ٹیگ مندرجہ ذیل شکل میں نظر آئے گا:

اس سے کیا معلوم ہوتا ہے؟ HREF = ایٹری بیوٹ کی ایک قدر ہے جو "mywebsite.com" پر موجود "Mywebpage . htm" کا حوالہ ہے۔ جب تک یہ صفحہ اس ویب سائٹ پر موجود رہے گا اور اس سائٹ کا میزبان سرور (Server) ویب سے منسلک رہے گا آپ اس صفحہ کو کھول سکتے ہیں – لنک پر کلک کرنے سے صفحہ ظاہر ہو جائے گا۔

ورلڈ وائڈ ویب ایک ایڈریسنگ اسکیم کو استعمال کرتا ہے جسے URL کہتے ہیں یہ ویب پر فائلوں کے مقام (Location) کو ظاہر کرتا ہے۔ URL کا مطلب ہے Uniform Resource Locator (بعض اوقات اسے "Universal Resource Locator" کے نام سے بھی جانا جاتا ہے) جو انٹرنیٹ پر موجود ستاویز کا پتہ ہے۔ آپ دیکھیں گے کہ آپ کے ویب صفحہ کا URL آپ کے ویب براؤزر کی ایڈرس بار میں ظاہر ہوتا ہے۔

اپنے ماؤس کرسر کو ہائپرلنک کے اوپر لائیں۔ نوٹ کیجیے کہ کرسر انگلی کا اشارہ کرتے ہوئے ہاتھ کی شکل میں نظر آئے گا۔ اسی وقت آپ اسٹیٹس بار (صفحہ پر سب سے نیچے بائیں کونے میں) میں اس پتہ کو بھی دیکھیں گے جس کی طرف یہ ہائپر لنک اشارہ کرتا ہے۔

URLS کی اقسام

URLs کی دو قسمیں ہیں، مطلق URL اور نسبتی URL

مطلق URL میں انٹرنیٹ پر موجود فائل کا مکمل پتہ ہوتا ہے۔ اسی لیے مطلق URL میزبان کا نام (Host name)، فولڈر کا نام اور فائل کا نام نیز پروٹوکول (ضابطوں کا مجموعہ) یہ ویب صفحہ یا ویب فائل کو جوڑنے کے لیے استعمال کیا جائے گا۔

مثال کے طور پرhttp://www.ncert.nic.in/html/school curriculum.htm

یاد رکھیے کہ ہم نے انٹرنیٹ پر موجود فائل کا حوالہ دیا ہے۔ ویب سائٹ صرف ویب صفحات کی ہی میزبانی نہیں کرتی بلکہ امیج، آڈیو، ویڈیو، دستاویز، زپ فائل یا فولڈر اور عملی طور پر کسی بھی قسم کی ڈیجیٹل فائل کی بھی میزبانی کرتی ہے۔ براؤزر عام طور سے ویب صفحات کے ساتھ تفاعل کرتے ہیں جو کہ html قسم کی فائلیں ہیں۔ باقی تمام فائلوں کو آپ کی مشین پر ڈاؤن لوڈ کیا جاتا ہے۔

دوسری طرف نسبتی URL نسبتاً مختصر شکل ہے اور اسی سرور یا اسی فولڈر میں موجود فائلوں کی طرف اشارہ کرتی ہے۔ نسبتی URL میں صرف فولڈر کا نام اور فائل کا نام یا صرف فائل کا نام ہوتا ہے اگر لنک پر مشتمل ویب صفحہ اور ریسورس ایک ہی فولڈر میں ہیں۔

مثال کے طور پر/html/school/htm.

یہ school.htm URL فائل کا حوالہ ہے جو html فولڈر کے اندر ہے۔ فولڈر اسی ویب سائٹ پر موجود ہے جس ویب سائٹ پر لنک والا صفحہ موجود ہے۔ ہم مکمل پتہ مندرجہ ذیل طریقے سے لکھ سکتے ہیں:

http://www.mywebsite.com/html/school.htm لیکن مختصر شکل کافی ہے۔

ہائپر لنکنگ کی اقسام

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

بیرونی لنکنگ

شاید یہ ہائپرلنک کا سب سے عام استعمال ہے۔ صفحہ 1 میں موجود لنک صفحہ 2 کو ہائپر لنک کرتا ہے۔ اور جیسا کہ ہم پہلے بتا چکے ہیں، صفحہ 2 اسی سائٹ پر بھی ہو سکتا ہے یا دور واقع کسی دوسری سائٹ پر۔

فارمیٹ اس طرح ہوگا<A HREF = "http://mywebsite.com/myfile.htm"> link to my file </A> ۔اگر وہ فائل جسے لنک کیا گیا ہے (یہاں myfile.htm) تو براؤزر اسے خودسنبھال لیتا ہے اور نیا ویب صفحہ ظاہر ہو جاتا ہے۔

ٍ اگر فائل،مثلاً کوئی ویڈیو ہے تو براؤزر مشمولات کو ظاہر کرنے کے لیے میڈیا پلیئر کی مدد لیتا ہے۔ ہم اس قسم کے سافٹ ویئر (add on) کو پلگ ان (plugins) کہتے ہیں۔ کچھ معاملو ں میں جاوا اسکرپٹ کا بھی استعمال کیا جاتا ہے۔ براؤزر متن اور امیج کو ظاہر کر سکتے ہیں مگر باقی میڈیا کے لیے انھیں بیرونی مدد کی ضرورت ہوتی ہے۔ لہٰذا ویڈیو، آڈیو، اینیمیشن کو چلانے یا سلائڈ شو کو چلانے کے لیے اسکرپٹ کو استعمال کرنے یا ایکزیکیوٹیبل (.exe) پروگرام کو چلانے کے لیے آپ کو پلگ ان (plugins) کی ضرورت ہوگی۔ آئیے ونڈوز میڈیا پلیئر کے ذریعے ویڈیو کلپ کو چلانے کی ایک مثال پر غور کرتے ہیں ۔آپ کو ویب صفحہ پر سب سے اوپر<body> </body> ٹیگ میں مندرجہ ذیل کوڈ شامل کرنا ہوگا:

autostart=”false” width=”320" height=”240" src=”myvideo.wmv” />

اس بات کو یقینی بنائیے کہ ویڈیو فائل جس کا نام myvideo.wmv ہے، اسی ڈائریکٹری میں ہونی چاہیے جس ڈائریکٹری میں html فائل موجود ہے یا پھر ویڈیو فائل کے مقام کو متعین کرنے کے لیے src ایٹری بیوٹ کو تبدیل کیجیے۔

آئیے <embed> ٹیگ کے ایٹری بیوٹ پر غور کرتے ہیں:

· type = "" اس(معروض) کی قسم کو متعین کرتا ہے جسے آپ ویب صفحہ سے مربوط (embeded) کرنا چاہتے ہیں۔یہ ٹیگ ویب صفحہ سے ونڈوز میڈیا پلیئر کو مربوط کرنے کے لیے لازمی ہے؛

· pluginspage = "" اس ایٹری بیوٹ کی ضرورت صرف اس وقت ہوتی ہے جب استعمال کنندہ کمپیوٹر میں ونڈوز میڈیا پلیئر پلگ ان نہیں ہوتا ہے؛جب آپ کو اس پر یقین نہیں ہو تب اسے شامل کرتے ہیں؛

· name = "" یہ ایٹری بیوٹ مربوط کیے جانے والے معروض کو منفرد نام دیتا ہے، جس کی مدد سے آپ مربوط کیے گئے متعدد آبجیکٹ کو استعمال کر سکتے ہیں؛

· autostart = "" یہ ایٹری بیوٹ اس بات کو متعین کرتا ہے کہ جب ویب صفحہ کھلے گا تو آیا ویڈیو خود بخود شروع ہوگا یا نہیں؛

. width = "" اور height = "" داخل کیے گئے ونڈوز میڈیا پلیئر کی ونڈو کے سائز پکسل میں متعین کرتے ہیں۔ اگر آپ چاہتے ہیں کہ ویڈیو دیکھنے والا اس کا اصل ریزولوشن دیکھے تو width اور height ایٹری بیوٹ کو ہٹا دیجیے۔

· src ایٹری بیوٹ مآخذ کو بتاتا ہے، یہ اس فائل کا مقام متعین کرتا ہے جسے آپ چلانا چاہتے ہیں۔

اندرونی لنکنگ

جیسا کہ ہم پہلے ذکر کر چکے ہیں کہ لنک (link) ایک ہی صفحہ کا کوئی دوسرا حصہ بھی ہو سکتا ہے۔ آپ کو اس کی ضرورت اس وقت ہو سکتی ہے جب صفحہ دستاویز کے مختلف حصوں(Sections) پر مشتمل ہوتا ہے اور تمام سیکشن ایک ہی ویب صفحہ پر ہوتے ہیں۔

آپ کو ریفرنس مارکر(Marker) کے ذریعے صفحہ کے مخصوص سیکشنوں کی نشاندہی کرنی ہوگی ۔ یہ کام کو NAME ایٹری بیوٹ کے ذریعے کیا جاتا ہے۔ آئیے اس مثال کو دیکھتے ہیں:

مذکورہ بالا آؤٹ پٹ میں آپ دیکھیں گے کہ ٹیگ پیئر اور <A NAME = " "></A> ایٹری بیوٹ اور ٹیگ پیئر اور <A HREF = " "> </A> ایٹری بیوٹ لنک میں تبدیل ہو جاتے ہیں۔ آئیے پتہ لگاتے ہیں کہ یہ لنک کیا ظاہر کرتے ہیں۔

Chapter 1 یاChapter 2 لنک پر کلک کرنے سے متعلقہ ابواب( Chapters )کھل جائیں گے۔ ہر ایک Chapter کے نیچے بنا لنک Back to contents مشمولات کی فہرست پر واپس لے جائے گا۔ٹیگ پیئر <A Name = ""> </A> کو named anchor کہتے ہیں اور یہ ویب صفحہ پر ظاہر نہیں ہوتا ہے۔ یہ ٹیگ لنک کے لیے ہدف (Destination) کے طور پر کام کرتا ہے۔ لہٰذا جب آپ chapter1 لنک پر کلک کرتے ہیں تو آپ نے اس اینکر کا اتباع کیا۔ اسی طرح جب آپ Back to contants لنک پر کلک کرتے ہیں تو آپ مشمولات کی فہرست کے لیے ایک اور ٹیگ پیئر <A HREF = " "> </A>کسی لنک کے جیسا ہی ہے مگر اس کے ہدف کا حوالہ ہیش (#) کے نشان کے بعد دیا جاتا ہے۔ یہ ہیش براؤزر کو اسی صفحہ پر named anchor کی تلاش کے لیے تیار کرتا ہے۔

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

آپ اس تکنیک کا استعمال اس وقت بھی کر سکتے ہیں جب آپ کسی دوسرے ویب صفحہ پر کسی مخصوص سیکشن کا حوالہ دینا چاہتے ہوں۔ اس صورت میں ہائپر لنک مختلف ویب صفحہ named anchor اور اس ویب صفحہ سے مربوط ہو جائے گا ۔ ذیل کی مثال دیکھیے:

یہ لنک index.html ویب صفحہ پر section 2 نام کے اینکر کا حوالہ ہے۔

امیج کو لنک کے طور پر استعمال کرنا

بڑی امیج کا فائل سائز بہت زیادہ ہوتا ہے اور انھیں لوڈ ہونے میں بہت زیادہ وقت لگ جاتا ہے۔ اس مسئلے کے حل کے لیے ہم امیج کو ویب صفحہ پر چھوٹی چھوٹی امیج کی شکل میں ظاہر کرتے ہیں۔ ہم اس چھوٹی امیج کو تھمب نیل (Thumbnail) کہتے ہیں۔ لہٰذا استعمال کنندہ بڑی امیج کو دیکھنے کے لیے اس امیج (تھمب نیل) پر کلک کرے گا۔ تھمب نیل کا استعمال صرف امیج کو ظاہر کرنے کے لیے ہی نہیں کیا جاتا بلکہ کسی بھی وسیلہ (Resource) کو ظاہر کرنے کے لیے کیا جاتا ہے۔مثال کے طورپر آپ کسی کتاب کے سرورق کے فوٹوگراف کو کتاب پر مشتمل ویب صفحہ پر استعمال کر سکتے ہیں۔

اس صورت میں <A HREF = " "> </A> اور <IMG SRC = > ٹیگ کو مجموعی طور پر استعمال کیا جائے گا۔ اس مثال کو دیکھیے:

آپ <IMG SRC = "myphoto.jpg"> کا استعمال تصویر کو ظاہر کرنے کے لیے کریں گے ۔ اس ٹیگ کو <A HREF = > </A> ٹیگ کے اندر رکھنے سے یہ تصویر لنک کی شکل میں تبدیل ہو جائے گی۔ لہٰذا اس لنک پر کل کرنے سے آپ کو نئے صفحہ یعنی mywebpage.htm پر لے جائے گی۔

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

ای میل لنک

اگر آپ چاہتے ہیں کہ کوئی آپ کے ویب صفحہ یا اس کے مشمولات کے بارے میں اپنی رائے پیش کرے یا آپ کسی کومدعو کرنا چاہتے ہیں کہ وہ آپ سے رابطہ قائم کرے تو اس کا سب سے آسان طریقہ یہ ہے کہ آپ رابطہ سے متعلق تفصیلات (پتہ یا فون نمبر) فراہم کریں۔ ایک آسان راستہ یہ ہے کہ آپ ای میل لنک کریں تاکہ آپ کو وہیں سے ای میل بھیج دیا جائے۔ یہاں استعمال ہونے والا ٹیگ <A HREF = > </A> ہی ہے۔ اس مثال کو دیکھیے:

<A HREF = "mailto : [email protected]"> Contact us </A>

ایٹری بیوٹ کا "mailto" حصہ آپ کے ڈیفالٹ میل کلائنٹ کو شروع کر دیتا ہے (دیکھیے شکل 9.19)۔ ای میل بھیجنے کے لیے آپ نے اپنا میل کلائنٹ ضرورتشکیل (Configure) کر لیا ہوگا۔ اگر آپ عام طور سے براؤزر پر مبنی میل پروگرام مثلاً Hotmail، یا yahoo یا gmail کا استعمال کرتے ہیں تو آپ کو اسے configure کرنے کی ضرورت نہیں ہے۔ ونڈوز میں جب تک آپ کوئی دوسرا میل کلائنٹ configure نہیں کرتے ہیں تو آؤٹ لک ایکسپریس (Out look Express) آپ کا ڈیفالٹ میل کلائنٹ رہے گا۔ لہٰذا یہ ٹیگ صرف ان مشینوں کے لیے کارآمد رہے گا جہاں ای میل کلائنٹ Configure ہے۔ پھر بھی یہ ایک فیصد ایٹری بیوٹ ہے اور اس میں وقت کی بچت ہوتی ہے۔

اینکرٹیگ کے اندر ای میل پتہ کو متعین کرنے پر براؤزر خود بخود ای میل پتہ کو ای میل کمپوزنگ ونڈو کے "to" متن باکس (Text box) میں داخل کر دیتا ہے۔

9.5.12 ویب صفحہ کو مکالماتی بنانا - ان پٹ فارم

گذشتہ سیکشن میں ہم نے <A> </A> ٹیگ پیئر کی مدد سے ویب کو مکالماتی بنانے پر غور کیاتھا۔ ہائپر لنک ویب کے ذریعے فراہم کی جانے والی انٹرایکٹیویٹی کی واحد شکل ہیں۔یہ ہمیں ایک پیج سے دوسرے پیج پہ جانے کی اجازت دیتے ہیں لیکن یہ سب پہلے سے متعین ہوتے ہیں۔ اگر آپ کسی سوال کا جواب حاصل کرنے کے خواہاں ہیں تو یہ کام کس طرح ہوگا۔

اس کے لیے آپ کو ایسے طریقے کی ضرورت ہوگی جس کے تحت آپ کا سوال سرور کو بھیجا جائے گااور پھر سرور آپ کے سوال کو پروسیس (process)کرکے اس کا جواب دے گا۔ HTMLاس قسم کے مکالماتی طریق کار بھی فراہم کرتا ہے۔ متعدد قسم کے اِن پٹ (Input) داخل کیے جا سکتے ہیں ۔اس کے ذریعہ ویب سائٹ نہ صرف استعمال کنندہ کو معلومات فراہم کرتی ہے بلکہ استعمال کنندہ سے معلومات حاصل بھی کرتی ہے۔

اس کے لیے استعمال کیاجانے والا ٹیگ پیئر<form></form>ہے۔ آئیے اس کے استعمال کی کھوج بین کرتے ہیں۔ بنیادی طور پر یہ ٹیگ متن کو ان پٹ کرنے کے لیے استعمال کیا جاتا ہے۔ اس کے بعد اس میں ڈلیوری کے طریقۂ کار اور اس پیغام کی منزل مقصود (Destination)کو متعین کیا جانا چاہیے۔ اس کے لیے بالترتیبACTIONاورMETHODایٹری بیوٹ کا استعمال کیا جاتا ہے۔

ACTION ایٹری بیوٹ اس بات کا تعین کرتا ہے کہ معلومات کو پروسیسنگ کے لیے کہاں بھیجا جائے گا۔ معلومات کی پروسیسنگ کی منزل کوئی CGIپروگرام ، جاوااسکرپٹ فنکشن یا ای میل پتہ ہو سکتاہے۔CGIیا Common Gateway Interface انفارمیشن سرور (جسے عام طور سے ویب سرور بھی کہتے ہیں)کے ساتھ بیرونی سافٹ ویئر کی انٹر فیسنگ (Interfacing)کے لیے معیاری ظابطہ(Standard Protocol) ہے۔ مندرجہ ذیل مثالوں پر غور کیجیے:

فارم کے ذریعہ سرور کو انفارمیشن بھیجنے کے دو طریقے ہیں: getاورpostطریقہ۔ ہم اسے متعین کرنے کے لیے <FORM> ٹیگ کے METHODایٹری بیوٹ کا استعمال کرتے ہیں۔ ظاہر ہے سرور اور متعلقہ سافٹ ویئر اس بات کو پہلے سے متعین کر لیں گے کہ آپ کس طریقہ کا استعمال کریں گے،لہٰذا آپ کے پاس کوئی متبادل نہیں ہے۔ لیکن یہ دونوں طریقوں کے درمیان فرق جاننے کے لیے بہت کارآمد ہے۔

"get" طریقے میں انفارمیشن متعلقہ کوڈ کے ساتھ Actionایٹری بیوٹ کے ذریعہ متعین کی گئی URLمیں شامل ہوجاتی ہے اور یہ نئی URLپروسیسنگ ایجنٹ کو بھیجی جاتی ہے۔ "get"طریقہ کا استعمال اس وقت کیا جانا چاہیے جب فارمidempotent ہو یعنی اس کا کوئی سائڈ افیکٹ(Side-Effects) نہ ہو۔کئی ڈیٹا بیس سرچ(database searches)ایسے ہیں جن کا کوئی واضح سائڈ افیکٹ نہیں ہے اور "get"طریقہ کے لیے مثالی ایپلی کیشن ہیں۔ مزید یہ کہ getطریقہ ASCIIکیریکٹر کے ان پٹ کی اجازت نہیں دیتا۔

لہٰذا ،اگر آپmywebsite.com پر Solar Eclipse 2009تلاش(Search) کرنا چاہتے ہیں تو فارم اسے http://www.mywebsite.com/search?q=solar+eclipse+2009پڑھے گا۔

"post"طریقے میں انفارمیشن فارم کی باڈی میں شامل ہوجاتی ہے اور اسے پروسیسنگ ایجنٹ کو بھیج دیاجاتا ہے۔اگر فارم کی پروسیسنگ سے متعلق سروس کی وجہ سے مضر اثرات مرتب ہوتے ہیں (مثلاً فارم ڈیٹا بیس یا سروس کے سبسکرپشن میں پھیر بدل کر دیتا ہے )تو "post" طریقہ استعمال کیاجا نا چاہیے۔

فارم کے اجزا

ActionاورMethodکو متعین کرنے کے بعد ہم ان پٹ کی جانے والی انفارمیشن کا فارمیٹ متعین کرتے ہیں اور اسے سرور کو بھیج دیتے ہیں۔ اس کام کو ٹیکسٹ فیلڈ، چیک باکس، ریڈیو بٹن، پاسورڈ فیلڈ، فارم بٹن، فائل اپ لوڈ فیلڈ یا امیج بٹن کی شکل میں کیا جا سکتا ہے۔ان سبھی کو <INPUT> tag کے ایٹری بیوٹ کے طور پر متعین کیا جاتا ہے۔

<INPUT>ٹیگ میں اور بھی کئی ایٹری بیوٹ ہو سکتے ہیں، اس بات کا انحصار "TYPE" ایٹری بیوٹ کی قدر پر ہے۔ Type ایٹری بیوٹ اس ان پٹ کی قسم کو متعین کرتا ہے جو ہم استعمال کنندہ سے چاہتے ہیں۔ اس کا استعمال مندرجہ ذیل قسم کے انٹر فیس ایلیمنٹ کی تشکیل کے لیے کیا جا سکتا ہے:

1۔ ٹیکسٹ فیلڈ

2۔ پاسورڈ فیلڈ

3۔ ریڈیو بٹن

4۔ چیک باکس

5۔ submit بٹن

6۔ Reset بٹن

7۔ امیج بٹن

8۔ مخفی فیلڈ (Hiden field)

TYPE="TEXT" ایٹری بیوٹ عام فارم ان پٹ فیلڈ ہے۔ یہ ایک ایسی جگہ کی تشکیل کرتا ہے جہاں ایک سطر ی انفارمیشن کو ٹائپ کیا جاسکتا ہے۔

TYPE="PASSWORD" ایٹری بیوٹ بھی وہی کام کرتا ہے جو Type="TEXT"کرتا ہے بس فرق اتنا ہے کہ پاسورڈ فیلڈ میں ٹائپ کیے جانے والے کیریکٹر(حرفی علامتیں) (Asterisks) *یا کسی اور مخصوص علامت کی شکل میں ظاہر ہوتے ہیں۔ پاسورڈ ٹیکسٹ کو ترسیل کے دوران گڈ مڈ(Scramble)کر دیا جاتا ہے اور جب فارم ڈیٹا سرور کے پاس پہنچتا ہے تو اسے unscrambledکر دیا جاتا ہے۔

ریڈیو بٹن کا استعمال وہاں کیا جاتا ہے جہاں استعمال کنندہ کو دیے ہوئے متبادلات میں سے صرف اور صرف ایک متبادل کا انتخاب کرنا ہے۔ TYPE="RADIO" ایسے کنٹرول کا سیٹ متعین کر دیتا ہے جو ایک دوسرے سے اس طرح منسلک ہوتے ہیں کہ ہر ایک مجموعے(set)سے ایک وقت میں صرف ایک ہی بٹن کو منتخب کیا جاسکے؛اگر استعمال کنندہ ایک ریڈیو بٹن پر کلک کرتا ہے تومجموعہ کے باقی بٹنوں کا انتخاب خود بخود ختم ہوجاتا ہے۔ ریڈیوبٹن کے لیے تمام متبادلات کاایک ہی نام ہونا چاہیے۔ فارم اس ریڈیو بٹن کی قدر کو بھیجتا ہے جسے آخیر میں منتخب کیا جاتا ہے۔ اگر مجموعہ کے کسی ایک بٹن میں CHEKEDآپشن کو شامل کر لیا جائے تو جب بھی صفحہ لوڈ ہوگا وہ بٹن پہلے سے منتخب رہے گا۔مندرجہ ذیل مثال کو دیکھیے:

چیک باکس کا استعمال اس لیے کیا جاتا ہے تا کہ استعمال کنندہ دیے ہوئے متبادلات کے مجموعہ سے کئی متبادلات کو منتخب کر سکے۔لہٰذا چیک باکس دوسرے بٹنوں سے متاثر نہیں ہوتا ہے۔ اس طرح ایک وقت میں چیک باکس کے مجموعے میں سے کئی باکس کو منتخب (Check)کیا جاسکتا ہے۔TYPE="CHECKBOX" ایٹری بیوٹ کا استعمال کرکے اس کی تشکیل کی جا سکتی ہے۔نوٹ کیجیے کہ ریڈیو بٹن کے بر خلاف ہر ایک چیک باکس کا ایک منفرد نام ہوتا ہے۔ اس پر کلک کرنے سے یہ باکس میں ایک نشان ("X"یا ــــ"") کو ظاہر کر دیتا ہے اور دوبارہ کلک کرنے پر اسے ہٹا دیتا ہے۔اگر چیک باکس کو منتخب کیا گیا ہے توویب فارم اس کی قدر کو بھیج دیتا ہے ورنہ یہ قدر خالی رہے گی۔ آپ کسی مخصوص چیک باکس کے ساتھCHECKED آپشن کو شامل کر سکتے ہیں جس سے یہ باکس پہلے ہی سے منتخب رہے گا۔

TYPE="SUBMIT" فارم پر ایک submit buttonکی تشکیل کردیتا ہے اورTYPE="RESET" فارم پر reset buttonکی تشکیل کرتا ہے۔Submitبٹن براؤزر کو تمام انتخابات،قدروںاور فارم ایلیمنٹ میں داخل کیے گئے متن کو جمع کرنے اور اسے <FORM>ٹیگ کے ACTIONوالے حصہ میں متعین کی گئی منزل کی طرف روانہ کردیتا ہے۔ Resetبٹن فارم کی ابتدائی حالت(Default State) کو بحال کردیتا ہے۔

submitیا resetبٹن مخصوص شکل اور سائزکے ہوتے ہیں، جو کہ ویب صفحہ کی باقی بناوٹ سے میل نہیں کھاتے ہیں۔ لہٰذا آپ TYPE="image" ایٹری بیوٹ کا استعمال کرکے اس کی جگہ امیج کا استعمال کر سکتے ہیں۔ جب استعمال کنندہ امیج بٹن پر کلک کرتا ہے توفارم اسے <form> ٹیگ کے ACTIONوالے حصہ میں متعین کیے گئے پتہ پر روانہ کردیتا ہے۔

متبادل طور پر TYPE="BUTTON" ایک ایسے بٹن کی تشکیل کرتا ہے جس پر متن موجود ہوتا ہے اور جسے کلک کیا جاسکتا ہے، متن کو "VALUE" ایٹری بیوٹ میں متعین کیا جاتا ہے۔جب بٹن پر کلک کیا جاتا ہے تو یہ On Click وقوعہ(Event) کو شروع کر دیتا ہے۔ اس وقوعہ کو ایک مخصوص کام انجام دینے کے لیے کسی بھی اسکرپٹنگ لنگویج مثلاً VBScriptیا JavaScript کے ذریعہ مرتب کیا جا سکتا ہے۔ظاہر ہے اگر کوئی وقوعہ(Event) پروگرام نہیں کیا گیا ہے تو کلک کرنے پر کچھ بھی نہیں ہوگا۔ Submitاور Reset بٹن مخصوص قسم کے بٹن ہیں جو کسی مخصوص کام کو انجام دینے کے لیے پہلے ہی سے پروگرام شدہ ہوتے ہیں ۔

File فیلڈ کی مدد سے استعمال کنندہ تصویر ، اسپریڈ شیٹ، اسکین شدہ دستاویز یا ورڈ پروسیسر دستاویزجیسی کسی بھی اطلاع کو، اس بات کی تصدیق کرنے کے بعد کہ آیا جس سرور پر فارم کی پروسیسنگ کی جانی ہے وہ فائل کے اپ لوڈ کی اجازت دیتا ہے یا نہیں، submitکرسکتا ہے۔براؤزر ٹیکسٹ بٹن کے سامنے "BROWSE"بٹن کو ظاہر کردیتا ہے جو استعمال کنندہ کو اپنے کمپیوٹر میں موجود فیلڈ کو فائل ان پٹ ایلیمنٹ کے طور پر منتخب کرنے کی اجازت دیتا ہے۔ اپنے ای میل پیغامات کے ساتھ کوئی فائل منسلک کرتے ہوئے آپ نے اس متبادل(Option)کو دیکھا ہوگا۔

نتیجہ مندرجہ ذیل ہے:

مخفی فیلڈ(Hidden Field)متنی فیلڈ(Text Field)کی ہی طرح ہوتی ہے لیکن ان دونوں میں ایک اہم فرق یہ ہے کہ مخفی فیلڈ صفحہ پر دکھائی نہیں دیتی ہے۔ لہٰذا استعمال کنندہ مخفی فیلڈ میں کچھ بھی ٹائپ نہیں کر سکتا ۔ TYPE="hidden" ایٹری بیوٹ کا استعمال ریسیونگ پروگرام یا فنکشن کے لیے انفارمشین کو متعین کرنے کی غرض سے کیا جاتا ہے جسے استعمال کنندہ نہ تو دیکھ سکتا ہے اور نہ ہی اسے تبدیل کر سکتا ہے۔اس انفارمیشن کا استعمال عام طور سے پروگرام یا فنکشن کے ذریعہ دیگر معلومات کی پپروسیسنگ کے لیے کیا جاتا ہے۔

مخفی فیلڈ صفحہ پر دکھائی نہیں دیتی ، مگر جب فارم کو submitکیا جاتا ہے تو فیلڈ کو فارم کے ساتھ بھیجا جاتا ہے۔مذکورہ بالا مثال میں مخفی فیلڈپروگرام (جو اس فارم کو پروسیس کرے گا)کو یہ بتاتی ہے کہ استعمال کنندگان نے Englishزبان کو ترجیح دی ہے۔ دولسانی یا کثیر لسانی سائٹس اس زبان میں کھل جاتی ہیں جسے ترجیح دی گئی ہے۔

ِ<SELECT> ٹیگ

<SELECT>ٹیگ کا استعمال ڈراپ– ڈاؤن لسٹ باکس(اسے ڈراپ ڈاؤن مینو بھی کہاجاتا ہے) اور اسکرولنگ لسٹ باکس (اسے اسکرولنگ مینو بھی کہتے ہیں)کی تشکیل کے لیے کیا جاتا ہے۔ ڈراپ– ڈاؤن مینو کا استعمال بھی اسی مقصد کے تحت کیا جاتا ہے جس مقصد کے تحت ریڈیو بٹن(صرف ایک انتخاب)یا چیک باکس(کئی متبادلات کو منتخب کیا جا سکتا ہے) کا استعمال کیاجاتا ہے۔ ریڈیو بٹن یاچیک باکس کے مقابلے ڈراپ– ڈاؤن مینو کا یہ فائدہ ہے کہ اس کے لیے کم جگہ درکار ہوتی ہے۔لیکن اس میں ایک خامی بھی ہے اور وہ یہ کہ لوگ مینو میں موجود تمام متبادلات کو ایک ساتھ نہیں دیکھ پاتےہیں۔ SIZE ایٹری بیوٹ کی مدد سے مینو میں ایک ہی وقت میں ایک سے زیادہ متبادلات کو دیکھا جا سکتا ہے۔اس قسم کی لسٹ کو اس وقت دیکھا جا سکتا ہے جب استعمال کنندہ کو کسی شہر یا ملک کو منتخب کرنا ہوتا ہے۔

<OPTION>...</OPTION> ٹیگ کا استعمال فہرست (list)میں ظاہر ہونے والے ہر ایک آئیٹم کو متعین کرنے کے لیے کیا جاتا ہے۔ جب فارم ڈیٹا کی ترسیل کی جاتی ہے تو سب سے آخیر میں منتخب کیے گئے متبادل کی قدر کو ظاہر کردیا جاتا ہے۔ <OPTION>ٹیگ میں SELECTED ایٹری بیوٹ شامل کرکے اس بات کاتعین کیا جا سکتا ہے کہ جب صفحہ لوڈ ہوگا تو کون سا عنصر(Element) سب سے پہلے نظر آئے گا۔ اگر یہ فراہم نہیں کیا گیا ہے تو پھر سب سے پہلا آئیٹم منتخب کر لیا جائے گا۔

مذکورہ بالا کوڈ ڈراپ ڈاؤن لسٹ کو ظاہر کرے گا کیونکہ sizeایٹری بیوٹ متعین نہیں ہے۔

<TEXTAREA> ٹیگ

ٹیکسٹ ایریا ایسی ٹیکسٹ فیلڈ ہیں جو کئی سطروں پر مشتمل ہوتی ہیں۔ فارم استعمال کنندہ سے کئی سطروں پر مشتمل ان پٹ حاصل کرنے کے لیے ان کا استعمال ہوتا ہے۔زیادہ تر فارم فیلڈ کے بر خلاف text areaکو <INPUT> ٹیگ کے ساتھ متعین نہیں کیا جاتا۔ اس کے بجائے <TEXTAREA>ٹیگ کو ہم وہاں داخل کرتے ہیں جہاں سے ہم ٹیکسٹ ایریا کو شروع کرنا چاہتے ہیں اور جہاں ٹیکسٹ ایریا کو ختم کرنا چاہتے ہیں وہاں </TEXTAREA>ٹیگ داخل کردیتے ہیں۔ان دونوں ٹیگس کے درمیان مین جو کچھ بھی لکھا جائے گا وہ ٹیکسٹ ایریا باکس میں نظر آئے گا۔اگر داخل کیا گیا متن (Input Text)متعینہ کالموں یا قطاروں کی نظر آنے والی تعداد سے تجاوز کر جاتا ہے تو اسکرول بار (Scrollbars)خود بخود فعال(Activated)ہو جائیں گی۔

مذکورہ بالا کوڈ2قطاروں اور 20کالموں پر مشتمل متنی حلقہ(Text area)کو ظاہر کرے گا جیسا کہ مندرجہ ذیل آؤٹ پٹ میں دکھایا گیا ہے:

9.6 توسیعی انٹرایکٹیوٹی-ویب ٹیکنالوجیوں کے رجحانات

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

آج ویب سائٹس مکالماتی فورم، ملٹی میڈیا پر مشتمل اپلی کیشن اور ریڈیو اسٹیشنوں کو سپورٹ کرتی ہیں۔ ویب سائٹوں کی مدد سے تجارتی لین دین مثلاً بینکنگ، بُکنگ اورریزرویشن نیز شاپنگ وغیرہ جیسے کاموں کو انجام دیا جاسکتا ہے۔ اس قسم کی تمام ویب فیچرس کے لیے بہت زیادہ معلومات کا ذخیرہ کیا جاتا ہے اور ان کی بازیافت کی جاتی ہے۔ یہ ویب سائٹس مختلف استعمال کنندگان کو مختلف معلومات بہ یک وقت فراہم کرتی ہیں۔

انڈین ریلویز ریزرویشن سسٹم اس کی بہترین مثال ہے۔ مختلف لوگوںکو مختلف مقامات کے لیے الگ الگ تاریخوں میں مختلف ریل گاڑیوں کے مختلف درجوں(Classes) میں سفر کرنے کے لیے ٹکٹ کی ضرورت ہوتی ہے۔ ریزرویشن سسٹم ہر ایک استعمال کنندہ کے لیے بہ یک وقت معلومات بہم پہنچاتا ہے ، استعمال کنندگان کے ناموں اور ان کی عمروں کے متعلق معلومات کو جمع کرتا ہے اور اسی اعتبار سے رقم وصول کرتا ہے۔ ویب پر رقم کی وصولی کا کام بینک کے ساتھ انٹرلنکنگ کے ذریعے بھی کیا جاتا ہے۔ہر ایک ممکنہ کام کے لیے علاحد ہ علاحدہ ویب صفحات کی تشکیل ممکن نہیں ہے۔اس کے لیے ایک ایسی ٹیکنالوجی کی ضرورت ہوتی ہے جس کے ذریعے استعمال کنندگان کی ضروریات کے مطابق سرور نئے صفحہ کی تشکیل کرتا ہے اور اسے استعمال کنندہ کے براؤزر کو بھیج دیتا ہے۔ہم ان صفحات کو ڈائنمک ویب صفحات(Dynamic web pages) کہتے ہیں۔

9.6.1 ڈائنمک ویب سائٹس

ڈائنمک ویب صفحات پر مشتمل ویب سائٹس ڈیٹا بیس(Database)کی مدد سے کام کرتی ہیں۔ ویب صفحہ خالی جدولوں پر مشتمل ہوتا ہے ۔ ان جدولوں کے ذریعے استعمال کنندگان سے معلومات کو جمع کیا جاتا ہے۔ آئیے ایک اور مثال لیتے ہیں۔کسی سرچ انجن مثلاً گوگل (Google)پر غور کیجیے۔آپ سرچ ورڈ(معلومات سے متعلق الفاظ یا فقرے)کو ٹائپ کرتے ہیں اور سرچ بٹن پر کلک کرتے ہیں۔ کچھ ہی سیکنڈ کے بعد ویب صفحہ کی ایک نئی شکل نظر آتی ہے جس میں آپ کو درکار معلومات سے متعلق تمام ویب سائٹوں کی فہرست موجود ہوتی ہے۔

ہم سرچ ورڈ(جسے آپ نے ٹائپ کیا ہے) کو کلیدی لفظ(Keyword)کہتے ہیں۔ مثال کے طور پر آپ کے کلیدی الفاظ تھے ''next solar eclipse in India" ۔ آپ کو جو معلومات درکار ہے اس کے مطابق’’ہندوستان میں اگلی مرتبہ سورج گرہن کب ہوگا؟‘‘۔لہٰذا جب آپ سرچ بٹن پر کلک کرتے ہیں تو درحقیقت آپ اپنے سوال کا جواب حاصل کرنے کے لیے سرور کواپنی گذارش ارسال کرتے ہیں۔ آپ کی اس گذارش کو "query"کہا جاتا ہے۔ آپ نے معلومات حاصل کرنے کے لیے سرور سے گذارش کی ہے۔ سرور آپ کی گذارش سے ملتی جلتی معلومات کو ڈیٹا بیس میں تلاش کرتا ہے اور اس معلومات کو ویب صفحہ پر پیش کردیتا ہے۔

صرف سرچ انجن ہی نہیں بلکہ مختلف قسم کی ویب ایپلی کیشن ڈائنمک سائٹس کو استعمال کرتی ہیں۔ آن لائن کتب خانوں، ڈکشنریوں(لغت) ،انسائیکلوپیڈیا اور بُک اسٹوروں کو ڈائنمک فیچرس درکار ہوتی ہیں۔ ای میل کی سہولت فراہم کرنے والے، سوشل نیٹ ورکنگ سائٹس، آن لائن کورسز، شاپنگ مال اور ٹورسٹ بیورو کو بھی ڈائنمک فیچرس درکار ہوتی ہیں۔ در اصل، ہر وہ سائٹ جسے مختلف استعمال کنندگان کو مسلسل طور پر متنوع اور مختلف قسم کی معلومات فراہم کرنی ہوتی ہے وہ ڈائنمک ٹیکنالوجی کا استعمال کرتی ہے۔ ڈائنمک ویب سائٹس بنانے کے لیے ایکٹِو سرور پیجز(asp)، جاوا سرور پیجز(jsp)اور ہائپر ٹیکسٹ پری پروسیسر(php)جیسی پروگرامنگ ٹیکنالوجیوں کا استعمال کیاجاتا ہے۔اس قسم کی ویب سائٹس کے لیے ایک ڈیٹا بیس اور ایک سرورکی ضرورت ہوتی ہے ۔ ڈیٹا بیس میں معلومات کو جمع کیاجاتا ہے اور سرور استعمال کنندگان کی ـ'query'کے مطابق معلومات کی بازیافت کرتا ہے اور نتائج کو استعمال کنندہ کے سامنے پیش کردیتا ہے۔

9.6.2 مشمولات، اسٹائل اور کوڈ کو الگ کرنا

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

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

اس ٹیکنالوجی کو کیسکیڈنگ اسٹائل شیٹ(Cascading style sheet)کے نام سے جانا جاتا ہے ۔ اس ٹیکنالوجی کی مدد سے تمام ڈیزائن ایلیمنٹ مثلاً کلر، امیج، فونٹس، سائز اور لے آؤٹ وغیرہ کو ایک علاحدہ فائل یعنی اسٹائل شیٹ فائل میں رکھاجاتا ہے۔ مواد (یا متن)کو ٹیکسٹ فائل میں یا ریکارڈ کے طور پر ڈیٹا بیس میںرکھاجاتا ہے۔ htmlکوڈ اور ڈائنمک فیچرس کو متعین کرنے والے جدید کوڈ کو ویب صفحہ میں رکھاجاتا ہے۔ اسٹائل شیٹ اور ویب صفحہ مجموعی طور پر ٹیمپلیٹ کی طرح کام کرتے ہیں جوپہلے سے متعین اسٹائل ایلیمنٹ پر مشتمل ہوتا ہے۔ جب استعمال کنندہ ویب صفحہ کو کھولتا ہے تو متن، اسٹائل اور کوڈ فعال طور پر متحد ہو کر ویب صفحہ کی تشکیل کرتے ہیں۔

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

خلاصہ

· انٹر نیٹ کی سب سے اہم اپلی کیشن ورلڈ وائڈ ویب(World Wide Web)یعنی wwwہے۔

· ویب کو ایک دوسرے سے منسلک دستاویز، امیجز(Images)، آڈیو، ویڈیو یا سافٹ ویئر فائلوں کا مجمو عہ سمجھاجاسکتا ہے۔

· ویب درخواست کے لیے HTMLیعنی Hyper Text Markup Languageکا استعمال کرتا ہے اور ویب صفحات اور پروگراموں کو پیش کر دیتا ہے۔

· HTMLٹیگس پر مشتمل ہوتا ہے۔ HTMLٹیگ کا عمومی فارمیٹ<tag_name>affected text or image</tag_name>ہے۔

. ٹیگس مختلف ایٹری بیوٹس پر مشتمل ہوتے ہیں اور ایٹری بیوٹس کی مختلف قدریں ہوتی ہیں۔یہ دونوں مل کر HTMLٹیگس کی کارکردگی(Functionality) اور اس کے دائرہ کار میں وسعت پیدا کر دیتے ہیں۔

· آپ کو اپنے کوڈ لکھنے کے لیے HTMLایڈیٹر کی اور اپنے ویب صفحات کی جانچ کرنے کے لیے براؤزر کی ضرورت ہوگی؛مختلف براؤزر مخصوص ٹیگس کی ترجمانی کرتے ہیں؛ لہٰذا یہ صلاح دی جاتی ہے کہ اپنے ویب صفحات کومختلف ویب براؤزرپرجانچیے

· ویب صفحہ کی بنیادی ساخت مندرجہ ذیل ہوتی ہے:

<html>

</html>

· <head></head> ٹیگ پیئر میں موجود کوڈ کو براؤزر ظاہر نہیں کرتا؛ titleٹیگ اس سے مستثنٰی ہے؛ یہ براؤزر ونڈو کی ٹائٹل بارمیں ظاہر ہوتا ہے۔

· اسکرپٹ، فونٹ، میٹا ڈیٹاکے تمام حوالے headسیکشن میں ہوتے ہیں۔

· براؤزرونڈو میں ظاہر ہونے والے ویب صفحہ کے تمام عناصر <body></body>ٹیگ میں موجود ہوتے ہیں۔

· سائز، رنگ(colour)، فونٹ سے متعلق ٹیگس کا استعمال ویب صفحہ پر متن کے عناصر کو نمایاں کر نے کے لیے استعمال کیاجاتا ہے؛ آپ bold, italic, یا underlineکاا ستعمال کر کے بھی متن کو نمایاں کر سکتے ہیں۔

· متن کو پیراگراف کی شکل میں مرتب کیا جاسکتا ہے اور <p></p>اور<brٹیگس کا استعمال کرکے متن کے پیراگراف یا سطروں کو ایک دوسرے سے الگ کیا جا سکتا ہے

· orderedیا unordered لسٹ ٹیگ کا استعمال کرکے فہرستوں (lists)کو تیار اور پیش کیا جاسکتا ہے؛ type ایٹری بیوٹ کا استعمال کرکے فہرست میں موجود آئیٹموں کی نمبر سازی مختلف طریقوں سے کی جا سکتی ہے۔

· <table</table>ٹیگس اور اس سے متعلق ٹیگس اور ایٹری بیوٹ کو دو طرح سے استعمال کیا جا سکتا ہے ؛ مواد کے مختلف بلاک کوالگ کرنے کے لیے اور مواد کو جدولوں کی شکل میں پیش کرنے کے لیے۔

· جدولیں قطاروں اورخانوں(Cells) پر مشتمل ہوتی ہیں؛جدولوں کو پس منظر، امیجز(Images)کا استعمال کرکے اور ان کے سائز اور مواد کو کنٹرول کرکے زیادہ پرکشش بنایا جا سکتا ہے؛ جدولوں کے اندر جدولیں بنائی جا سکتی ہیں۔

· ویب صفحات میں امیجز(Images)، آڈیو اور ویڈیو فائلوں کو داخل(پیوست) کیا جا سکتا ہے۔ حالانکہ امیجز(Images) کو براؤزرخود ظاہر کرتا ہے مگر آڈیو اور ویڈیو فائلوں کو چلانے کے لیے انھیںمیڈیا پلگ ان(media plugins)کی مدد درکار ہوتی ہے۔

· ہائپر لنک ویب کی سب سے اہم خصوصیت ہے ۔ ہائپر لنک کی مدد سے ہم دو وسائل(Resources)کو ایک دوسرے سے منسلک کر سکتے ہیں۔ ریسورسز اسی صفحہ پر یا پھر کسی دوسرے صفحہ پر ، اسی کمپیوٹر پر یا پھر دور واقع کسی دوسرے کمپیوٹر پر موجود ہو سکتے ہیں۔

· ہائپر لنک کے لیے <a href="source of resource">link</a>ٹیگ کا استعمال کیا جا تا ہے۔

· فارم(Forms)کا استعمال انفارمیشن کو داخل کرنے، درخواست کرنے اور سرور سے انفارمیشن کو حاصل کرنے کے لیے کیا جا تا ہے۔اس سے ویب صفحات کو مکالماتی بنایا جا تا ہے۔

· ویب صفحات کو ڈیٹا بیس سے منسلک کرکے مطلوبہ مواد کو حاصل کرتا ہے جب کہ سرور استعمال کرنے والے کے مخصوص سوالات کے جو اب فراہم کرتا اور ان جوابات پر مشتمل ویب صفحات تیار کرتا ہے۔

مشقیں

مختصر جواب والے سوالات

1۔ مندرجہ ذیل کی شناخت کیجیے اور ان کے نام بتائیے:

(a) متن کو نمایاں (Bold)کرنے کے لیے استعمال ہونے والا ایک طبیعی ٹیگ اور اس کے معادل منطقی ٹیگ۔

(b) متن کو italicsمیں ظاہر کرنے کے لیے استعمال ہونے والا ایک طبیعی ٹیگ اور اس کے معادل منطقی ٹیگ۔

(c)

HTML دستاویز کی تشکیل کے لیے ٹیکسٹ ایڈیٹر کے طور پر استعمال ہونے والیWindows Accessory۔

(d) HTMLفائل کے دو ممکنہ ایکسٹینشن۔

(e) سیکشن بریک داخل کرنے کے لیے استعمال کیاجانے والا ٹیگ۔

(f) ویب صفحہ میں ہیڈنگ کو ظاہر کرنے کے لیے استعمال کیاجانے والا ٹیگ۔

(g) جدولوں کی تشکیل کے لیے درکار مختلف ٹیگس۔

(h) فریم سیٹ(Framesets)کی تشکیل کے لیے استعمال کیے جانے والے ٹیگس۔

(i)

<A>ٹیگ کا لازمی ایٹری بیوٹ۔

(j) فریم (جس میں لنک فائل کو کھولا جاتا ہے )کا نام متعین کرنے کے لیے استعمال ہونے والے <A>ٹیگ کا ایٹری بیوٹ

(k) فریم باڈر اور فریم کے متن کے درمیان سفید جگہ کی مقدار کو کنٹرول کرنے کے لیے استعمال ہونے والے <FRAME> ٹیگ کے دو ایٹری بیوٹس۔

2۔ مندرجہ ذیل اصطلاحات کی تعریف بیان کیجیے:

(a) WWW

(b) ہائپر ٹیکسٹ(Hypertext)

(d) تشریحی فہرست) (Definition List

3۔ مندرجہ ذیل کے درمیان فرق لکھیے:

(a) ContainerاورNon-containerٹیگ

(b) ٹیکسٹ ایڈیٹر اور WYSIWYGایڈیٹر

(d) <BR>اور<P>ٹیگ

(e) با ترتیب اور بے ترتیب فہرست(Ordered List and Unordered List)

(f) اندرونی اور بیرونی لنکنگ(Internal and External Linking)

(g) <A>بطور اینکراور<A>بطور لنک

(h) Tableٹیگ کے Cellpaddingاور Cellspacingایٹری بیوٹ

(i) <TD>ٹیگ کےAlignاورValignایٹری بیوٹ

(j) <TD>اور<TH>ٹیگ

(k) <TD>اور<TR>ٹیگ

(l) <FRAMESET>اور<FRAME>ٹیگ

(m) <FRAMESET> ٹیگ کے FRAMEBORDERاورBORDERایٹری بیوٹ

4۔ مندرجہ ذیل HTMLکوڈ کی غلطیوں کو درست کیجیے:

(a) <HTML>

<BODY>

<FONT SIZE=6>My Shopping List</FONT>

<BREAK>

<LI>Shoes

<LI>Socks

</OL>

</BODY>

</HTML>

(b) <HTML>

<TITLE><HEAD>Using Link</TITLE></HEAD>

<BODY>

<A Name="#top">Links</A>

<P>This page is an example of using links

using the anchor tag. </P>

</BODY>

</HTML>

5۔ مندرجہ ذیل میں استعمال ہونے والے ٹیگ اور ایٹری بیوٹ:

(a) متن میں خالی جگہوں ، carriage returnوغیرہ کو برقرار رکھنے کے لیے متن کو مارک اپ(mark up) کرنا۔

(b) ایسی فہرست(list)کی تشکیل کے لیے جس میں حروف تہجی (a,b,c,d etc.)کا استعمال بطور نمبر شمار کیا جاتا ہے اور نمبر شمارDسے شروع ہوتا ہے۔

(d) متن کے طویل حصہ کو دو حصوں میں تقسیم کرنے کے مقصد سے ویب صفحہ کی چوڑائی میں 10 pixelموٹائی کی لائن داخل کرنے کے لیے۔

(e) ویب صفحہ کے اندر لنکنگ کے لیے۔

(f) لنکنگ کے لیے نامزد فریم کی تشکیل کے لیے۔

(g) جس ڈائریکٹری میں آپ کا ویب صفحہ موجود ہے اسی ڈائیریکٹری میں موجود Result.htmlنام کے ویب صفحہ کے MARKSنام کے مخصوص نقطہ سے لنک کی تشکیل کے لیے۔

(h) 7 pixelکی موٹائی والے بارڈر کی امیج کے لیے ٹول ٹپ ٹیکسٹ(Tool Tip Text)کے طور پر "Welcome" کو ظاہر کر نے کے لیے۔

(i) [email protected] پر پیغام (Message)بھیجنے کے لیے ای میل لنک کی تشکیل کے لیے۔

(j) جدول کے خانے(Cell)میں موجود مواد کو خانے کے سب سے نیچے والے حصہ میں ظاہر کرنے کے لیے۔

(k) پوری جدول کے پس منظر میں رنگ بھرنے کے لیے۔

(l) جدول کے خانے(cell)میں متن کوجلی حروف(Bold Letters)میں ظاہر کرنے کے لیے۔

(m) جدول کے عنوان) (Captionکو اس کے سب سے نچلے حصہ(Bottom)میں رکھنے کے لیے۔

طویل جواب والے سوالات

1۔ ویب صفحہ کی تشکیل میں HTMLکا کردار واضح کیجیے۔

2۔ ــ’’HTMLویب صفحات کو ہمیشہ صرف text filesکے طور پر محفوظ کیا جا تا ہے‘‘اس بیان کے لیے جواز پیش کیجیے۔

3۔ مثال دے کر HTMLدستاویز کی ساخت کو واضح کیجیے۔

4۔ تبصرہ(Comment)کیا ہے؟ آپ HTMLدستاویز میں تبصرے کس طرح شامل کریں گے؟ مثال کی مدد سے واضح کیجیے۔

5۔ <frameset>ٹیگ کے استعمال کیا ہیں؟

6۔ <A>ٹیگ کے TARGETایٹری بیوٹ کے استعمال کی وضاحت کیجیے۔

7۔ <FRAME>ٹیگ کےSRCایٹری بیوٹ کی کیا اہمیت ہے؟

8۔ مندرجہ ذیل کوڈ کا نتیجہ(Output)بتائیے:

<a) <HTML

</FRAMESET></FRAMESET>

</HTML>

b) <HTML>

<BODY>

<TH>MARKS</TH>

<TH>PERCENTAGE</TH>

</TR>

<TD>MEGHA</TD>

</TR>

<TD>TARUN</TD>

</TR>

<TD>VARUN</TD>

سرگرمیاں

1۔ 5مضامین کے نام مختلف لائنوں میں ظاہر کرنے کے لیے HTMLکوڈ لکھیے(<BR>ٹیگ کا استعمال کیجیے)۔ <BR>ٹیگ کو <P>ٹیگ سے بدل دیجیے اور تبدیلی کو نوٹ کیجیے۔ اب ان کے سامنے نمبر کے ساتھ ناموں کو ظاہر کرنے کی کوشش کیجیے۔اب نمبروں کی جگہ گولیاں(Bullets)لگائیے۔

2۔ نیسٹنگ ٹیگ(ٹیگ کے اندر ٹیگ) کے استعمال کی وضاحت کے لیے HTMLکوڈ لکھیے۔نیسٹنگ کی ترتیب کو تبدیل کیجیے اور دیکھیے کہ آؤٹ پٹ میں کیا تبدیلی آتی ہے؟

3۔ مندرجہ ذیل ویب صفحہ کے لیے HTMLکوڈ لکھیے:

List of Subjects

1. SCIENCE

(a)

BIOLOGY

(i)

BOTANY

(ii)

ZOOLOGY

(b)

CHEMISTRY

(i)

ORGANIC

(ii)

INORGANIC

(iii)

PHYSICAL

(c)

PHYSICS

2. SOCIAL STUDIES

(a)

GEOGRAPHY

4۔ مندرجہ ذیل کوڈ کو نوٹ پیڈ فائل میں ٹائپ کیجیے اورنتیجہ(Output) دیکھیے۔سائز، خط بندی(Align)اور رنگ کے متبادلات کو تبدیل کرکے کچھ اور تبدیلیاں لانے کی کوشش کیجیے۔

CIVICS

(d) ECONOMICS

<HTML>

<!- A website created bout famous Cartoon Characters->

What is a Cartoon?<BR>

<P>A cartoon is any of several forms of illustrations

with varied meanings.

</BODY>

</HTML>

5۔ مندرجہ ذیل ویب صفحہ تیار کرنے کے لیے HTMLکوڈ لکھیے:

States of Matter

There are three states of matter:

Solids — Example: Pencil

Liquids — Example: Water

Gases — xample: Air

6۔ اپنے کسی پسندیدہ مشغلہ کے بارے میں ایک ویب سائٹ بنانے کے لیے HTMLکوڈ لکھیے(کم از کم دو صفحات) جس میں مندرجہ ذیل خصوصیات ہونی چاہئیں:

(i) ہر ایک صفحہ کا مناسب عنوان ہونا چاہیے۔

(ii) ہیڈنگ(Heading)صفحہ پر اسکرول (Scroll)ہونے چاہئیں۔

(iii) ویب صفحہ پر پس منظر میں ایک مناسب امیج داخل کیجیے۔

(iv) صفحہ کی سرخی(Heading) سرخ(RED)رنگ میں ہونا چاہیے اوراسٹائل"Arial"ہونا چاہیے۔یہ underlined اور دائیں طرف align ہونا چاہیے۔

(v) پہلے صفحہ پر معلومات پیراگراف کی شکل میں ہونی چاہئیں اور ہر ایک پیراگراف کا رنگ اورخط بندی (Alignment)مختلف ہونی چاہیے

(vi) دوسرے صفحہ پر اس علاقے کے مشہور سیاحتی مقامات کی فہرست ہونی چاہیے۔

7۔ مندرجہ ذیل آؤٹ پٹ(مخصوص نمبر شمار کے ساتھ) حاصل کرنے کے لیے HTMLکوڈ لکھیے۔

8۔ مندرجہ ذیل آؤٹ پٹ حاصل کرنے کے لیے HTMLکوڈ لکھیے(فرض کیجیے کہ فائل کا نامflower.jpgہے)۔

9۔ آپ کے دوست نے ایک ویب صفحہ تیار کیا ہے جس کا url: www.tipod.com/personal/cooldude.html ہے۔اب آپ یہ چاہتے ہیں کہ جب آپ اپنے دوست کے فوٹو گراف (جو آپ کے ویب صفحہ پر موجود ہے) پرکلک کریں تو آپ اس ویب صفحہ سے لنک ہوجائیں۔فرض کیجیے کہ جس فائل میں آپ کے دوست کا فوٹوگراف ہے وہ"C:\mypictures\myfriend.jpg"ہے۔

10۔ مندرجہ ذیل آؤٹ پٹ حاصل کرنے کے لیے HTMLکوڈ لکھیے:

11۔ مندرجہ ذیل آؤٹ پٹ حاصل کرنے کے لیے HTMLکوڈ لکھیے(فرض کیجیے کہimages کے نام بالترتیب hill.jpg، sea.jpg اور water.jpgہیں۔

12۔ آپ کے اسکول کا ویب ایڈر سwww.littlebuds.comہے۔ آپ اپنے ویب صفحہ پر اس ویب سائٹ کے لیے لنک کی تشکیل کرنا چاہتے ہیں ۔ اس کے لیے HTMLکوڈ لکھیے۔

13۔ مندرجہ ذیل آؤٹ پٹ حاصل کرنے کے لیے HTMLکوڈ لکھیے:

نوٹ: لنک کیے جانے والے صفحات(لنک کی تشکیل کیجیے ، فرض کیجیے کہ فائلیں پہلے ہی سے موجو د ہیں):

Fiction as "fict.html" ·

Reference Books as "ref.html" ·

Language Books as "lang.html" ·

14۔ مندرجہ ذیل framsets کی تشکیل کرنے کے لیے HTMLکوڈ لکھیے: