صرف ایچ ٹی ایم ایل استعمال کرتے ہوئے بنیادی ویب سائیٹ بنائیں

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

تحریر کے آخر میں مکمل کوڈ زپ فائل کی صورت میں مہیا کیا گیا ہے۔ اس ٹٹوریل کا دوسرا حصہ اس لنک پر دستیاب ہے: CSS کی مدد سے HTML کو خوبصورت بنائیں

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

درج ذیل تصویر میں آپ Star Primary School کے نام سے ایک فولڈر دیکھ رہے ہیں۔ اس کے اندر imagesکے نام سے ایک اور فولڈر موجود ہے جس میں کچھ تصاویر محفوظ کی گئی ہیں۔

ویب سائیٹ کے لیے ایک نیا فولڈر بنائیں

ونڈوز کا نوٹ پیڈ پروگرام کھولیں۔

Notepad کھولیں

نوٹ پیڈ کے اندر درج ذیل کوڈ لکھیں۔ پہلےہم ویب سائیٹ بنانے کا عمل پورا کریں گے، اس کے بعد اس کوڈ کی وضاحت کی جائے گی کہ کون سا ایلیمنٹ (Tag) کیا کام کر رہا ہے۔

سانچہ کے لیے HTML کوڈ لکھیں

اب نوٹ پیڈ کے File مینیو کی مدد سے اس فائل کو ویب سائیٹ کے فولڈر کے اندر index.htm کے نام سے محفوظ کر لیں۔ انڈیکس فائل ہی دراصل کسی بھی ویب سائیٹ کا سرورق (Home page) ہوتا ہے۔ فی الحال اس ویب پیج فائل میں عارضی کوڈ لکھا گیا ہے تاکہ یہ فائل باقی فائلوں کے لیے سانچے (Template) کا کام دے سکے۔

فائل کو index.htm کے نام سے محفوظ کریں

ماؤس کے دائیں بٹن کی مدد سے کلک کر کے مینیو کھولیں اور index فائل کو کاپی کر کے اسی فولڈر کے اندر مرتبہ تین مرتبہ پیسٹ کر دیں۔ مقصد یہ ہے کہ ہم نے جو ویب پیج فائل بنائی ہے اس کی تین مزید نقلیں بنا لی جائیں۔

فائل Copy کریں

فائل Paste کریں

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

about-us
contact-us
facility

نقل فائلوں کے نام تبدیل کریں

ہمارے پاس اب چار ویب پیجز موجود ہیں جن میں ہم درج ذیل عبارتیں تبدیل کریں گے:

صفحہ کا ٹائٹل
صفحہ کا عنوان
تصویر
پیراگراف کی عبارت

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

صفحات کے لیے مواد مہیا کریں

درج ذیل تصویر میں جن عبارتوں کے نیچے سبز رنگ کی لائن موجود ہے، انہیں اس صفحہ کی ضرورت کے مطابق تبدیل کیا گیا ہے۔

index.htm تبدیل ہونے کے بعد

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

تمام صفحات تبدیل ہونے کے بعد

HTML کوڈ کی وضاحت

درج ذیل کوڈ کی وضاحت دیکھیں:

<html> ٹیگ کا مطلب یہ ہے کہ یہ ویب پیج فائل یہاں سے شروع ہو رہی ہے۔ اور <html/> ٹیگ کا مطلب ہے کہ یہ فائل یہاں ختم ہو رہی ہے۔
HTML فائل کے دو حصے ہوتے ہیں۔ ایک حصہ <head> اور <head/> ٹیگز کے درمیان میں جبکہ دوسرا حصہ <body> اور <body/> ٹیگز کے درمیان میں ہوتا ہے۔
<head> والے حصے میں ویب پیج کا <title> ٹیگ شامل کیا جاتا ہے، یہ ٹائٹل براؤزر کی ٹیب پر نظر آتا ہے۔ ہیڈ سیکشن میں <meta> ٹیگز بھی مختلف مقاصد کے لیے استعمال کیے جاتے ہیں۔ درج ذیل کوڈ میں utf-8 والا جو میٹا ٹیگ آپ دیکھ رہے ہیں اس کا مقصد یہ ہے کہ ویب پیج میں انگلش کے علاوہ دیگر زبانوں کی عبارتیں بھی شامل کی جا سکیں۔ ان کے علاوہ دیگر ٹیگز بھی ہیڈ سیکشن میں استعمال کیے جاتے ہیں جن کا ذکر اس تحریر میں نہیں کیا جا رہا۔
<body> والے حصے میں وہ تمام ٹیگز شامل کیے جاتے ہیں جن کی مدد سے ہم وہ عبارتیں لکھتے ہیں جو براؤزر میں صارفین کو نظر آتی ہیں، اور وہ ٹیگز بھی جن کی مدد سے ہم تصویریں، ڈاکومنٹس، آڈیو اور ویڈیو وغیرہ فائلز کو ویب پیج میں شامل کرتے ہیں۔
درج ذیل کوڈ کے body والے حصے میں سب سے پہلے چار <a> ٹیگز موجود ہیں۔ <a> ٹیگ کی مدد سے ایک ویب پیج کے اندر کسی دوسرے ویب پیج کا لنک مہیا کیا جاتا ہے۔ چنانچہ ان ٹیگز کی مدد سے ہم چاروں صفحات کو ایک دوسرے کے ساتھ منسلک کر رہے ہیں۔
ہر <a> ٹیگ کے بعد آپ ایک <br> ٹیگ بھی دیکھ رہے ہیں۔ یہ ٹیگ سطر مکمل کرنے (Line break) کے لیے استعمال کیا جاتا ہے۔
اس کے بعد <h1> کا ٹیگ ہے جو سب سے بڑے عنوان کے لیے استعمال کیا جاتا ہے۔ ایچ ٹی ایم ایل میں h6 تک ٹیگز مہیا کیے گئے ہیں۔
پھر <img> ٹیگ ہے جو ویب پیج کے اندر تصویر شامل کرنے کے لیے استعمال کیا جاتا ہے۔
آخر میں <p> ٹیگ ہے جو پیراگراف کے لیے استعمال کیا جاتا ہے۔

<html>
    <head>
        <title>Welcome to Star Primary School</title>
        <meta charset="utf-8">
    </head>
 
    <body>
        <a href="index.htm">Home</a><br>
        <a href="about-us.htm">About Us</a><br>
        <a href="facility.htm">Facility</a><br>
        <a href="contact-us.htm">Contact Us</a><br>
        <br>
        <h1>Welcome to Star Primary School</h1>
        <p><img src="images/home-page.jpg"></p>
        <p>
        We welcome you to Star Primary School website. 
        We love to educate children. They are our future.
        Our children will grow up and replace us. They will 
        eventually take over our duties.
        </p>
    </body>
</html>