سادہ HTML ویب سائٹ بنانے اور Netlify پر عارضی ہوسٹنگ کا مکمل رہنما
تعارف
اگر آپ ویب ڈویلپمنٹ سیکھنے کے خواہش مند ہیں اور جاننا چاہتے ہیں کہ ایک سادہ ویب سائٹ کیسے بنائی جائے اور اسے کسی فری ہوسٹ پر اپ لوڈ کیسے کیا جائے، تو یہ مضمون آپ کے لیے ہے۔ یہاں ہم مرحلہ وار سادہ انداز میں ہر چیز بیان کریں گے، تاکہ ابتدائی افراد بھی سمجھ سکیں۔ اس کے بعد آپ اس ویب سائٹ کو Netlify پر عارضی طور پر مفت ہوسٹ کر سکتے ہیں۔
1. HTML اور اس کی اصطلاحات
HTML کا مطلب ہے HyperText Markup Language جو ویب پیج کی بنیاد ہوتی ہے۔ ہر ویب پیج HTML سے شروع ہوتا ہے۔ اس میں چند بنیادی اصطلاحات شامل ہیں:
- Tags/ٹیگز: HTML کے بنیادی اجزاء جیسے
<html>,<head>,<body>,<h1>, وغیرہ۔ - Element/عنصر: ٹیگ کے ساتھ اس کا مواد جیسے
<p>یہ ایک پیرا ہے</p>. - Attribute/خواص: ٹیگ کے اندر اضافی معلومات جیسے
<img src=\"image.jpg\">.
2. سادہ HTML ویب سائٹ بنانے کے مراحل
الف: سادہ ویب پیج کوڈ
نیچے لکھا گیا کوڈ Notepad (Windows) یا TextEdit (Mac) میں کاپی کریں۔ اس فائل کو index.html کے نام سے محفوظ کریں۔
<!DOCTYPE html>
<html lang=\"ur\">
<head>
<meta charset=\"UTF-8\">
<title>میرے پہلے ویب سائٹ</title>
<style>
body { background: #f6f6f6; font-family: \'Noto Nastaliq Urdu\', Tahoma; padding: 30px;}
h1 { color: #05236b; }
p { font-size: 20px; color: #222; }
footer { margin-top: 50px; font-size: 14px; }
</style>
</head>
<body>
<h1>خوش آمدید!</h1>
<p>یہ میری پہلی HTML ویب سائٹ ہے۔ یہاں آپ سادہ معلومات دیکھ سکتے ہیں اور مزید سیکھ سکتے ہیں۔</p>
<footer>© 2025 آپ کا نام - تمام حقوق محفوظ ہیں۔</footer>
</body>
</html>
وضاحت:
<head>ویب پیج کی معلومات رکھتا ہے جیسے عنوان اور اسٹائل۔<title>براؤزر ٹیب میں نظر آنے والا نام۔<style>سے ویب پیج کا رنگ و شکل بہتر ہوتی ہے۔<body>وہ حصہ ہے جو صارف کو نظر آتا ہے۔
3. اپنی ویب سائٹ کو مقامی طور پر کیسے دیکھیں؟
- اوپر دیے گئے کوڈ کو نئے ٹیکسٹ فائل میں کاپی کریں۔
- اسے
index.htmlکے نام سے محفوظ کریں۔ - فائل پر ڈبل کلک کریں؛ براؤزر میں کھل جائے گی۔
4. Netlify پر عارضی ویب سائٹ ہوسٹنگ
Netlify ایک مفت سروس ہے جو آپ کو اپنی فائل اپ لوڈ کرتے ہی عارضی لنک فراہم کرتی ہے، جسے دوستوں سے شیئر کیا جا سکتا ہے۔
مرحلہ وار رہنمائی:
- ویب سائٹ فولڈر تیار کریں:
اپنیindex.htmlفائل کسی نئے فولڈر میں رکھیں (اگر CSS یا images ، تو وہ بھی اسی میں رکھیں)۔ - Netlify Drop استعمال کریں:
- اپنے فولڈر کو براؤزر میں drag & drop کریں۔
- چند لمحے بعد لنک تیار مل جائے گا جیسے:
https://yoursitename.netlify.app
- اپنی سائٹ کو شیئر کریں:
یہ لنک دوستوں یا سوشل میڈیا پر شیئر کیا جا سکتا ہے۔
5. اہم اصطلاحات کی وضاحت
| اصطلاح | وضاحت |
|---|---|
| HTML | ویب صفحات بنانے والی بنیادی زبان |
| CSS | ویب پیج کو خوبصورت اور اسٹائلش بنانے کے لئے |
| Hosting | اپنی ویب سائٹ کو انٹرنیٹ پر دکھانے کی سروس |
| Netlify | مفت ہوسٹنگ پلیٹ فارم جو سادہ ویب سائٹس کے لیے بہترین ہے |
| Static Site | ایسی ویب سائٹ جس میں ڈیٹا بیس یا سرور کے بغیر صرف HTML,CSS, JS فائلز ہوتی ہیں |
| Drag & Drop | فائل یا فولڈر کو پکڑ کر براؤزر میں چھوڑ دینا، جس سے فوراً اپ لوڈ ہوجائے |
7. خلاصہ اور ایکشن
اگر آپ نے یہ مضمون صحیح طرح پڑھا اور کوڈ کو آزمایا تو آپ نے نہ صرف HTML بلکہ ویب ہوسٹنگ کا بھی زبردست تجربہ حاصل کیا۔ اس تجربے سے آپ آگے مزید انٹرمیڈیٹ اور ایڈوانس ویب ڈویلپمنٹ کی طرف جا سکتے ہیں۔ یاد رکھیں، ابتدا ہمیشہ سادہ قدم سے ہی ہوتی ہے!